JavaScript的基本使用

目录

• JavaScript
  • JS的使用方式
  • 注释
  • 变量
  • 常量
  • 数据类型
  • 强制类型转换
  • 数字 (Number)
  • 字符类型 (String)
  • 布尔值 (Boolean)
  • 对象之数组
  • 运算符
  • 流程控制
  • 函数
  • 内置对象和方法

JavaScript

• JS跟Java关系就像老婆和老婆饼的关系, 两者没有半毛钱关系, 只是为了蹭热度
• JS也叫ECMAScript

JS的使用方式

• script标签内直接书写
  • <script>js代码</script>
• 通过script标签src属性引入外部js文件
  • <script src="myscript.js"></script>

注释

//单行注释

/*
多行注释1
多行注释2
多行注释3
*/

变量

• 变量声明 (需要使用关键字)
  • var 全局
  • let 局部
• 变量名
  • 数字 字母 下划线 $
  • 不能使用关键字
  • 推荐使用驼峰体

常量

• const关键字声明真正的常量
• python中没有真正的常量, 只是约定俗成的将变量名大写的变量称之为常量

数据类型

• 数值类型 number

• 字符类型 string

• 对象 object

  • 数组 []
  • 自定义对象 {}

• 布尔值 boolean

• undefined 只声明变量, 没有赋值

• typeof 用来查看数据类型

强制类型转换

• parse
  • parseInt(x)
  • parseString(x)

数字 (Number)

• js不区分整型和浮点型, 就只有一种数字类型---Number
• NaN表示的是 Not a Number
  • parseInt("abc") ---> NaN
  • typeof NaN ---> number

字符类型 (String)

方法	效果
.length	返回长度
.trim() / .trimLeft() / .trimRight()	移除空白
.charAt(n)	返回索引为n的元素
.concat(value1, value2...)	拼接
.subString(from, to)	根据索引获取子序列, 不能识别负数
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split()	分割

• 模板字符串, 反引号``包裹的字符串
  • 可以当做普通字符串
  • 定义多行字符串
  • 在字符串中嵌入变量 ${}

//定义多行字符串
var info = `
    my name is bigb
    my age is 18
`
//嵌入变量
var name = "bigb", age = 18
`My name is ${name}, I am ${age} years old`

布尔值 (Boolean)

• 小写ture, false
• 0, null, 空, undefined, NaN都是false

对象之数组

方法	效果
.length	长度
.push(ele)	尾部追加元素
.pop()	获取尾部元素
.unshift(ele)	头部插入元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素专递给回调函数
.splice()	删除元素, 并向数组添加新元素
.map()	映射, 返回一个新数组, 新数组的元素是 旧数组的元素传入函数得到的结果 ( 同python的map方法相同)

运算符

• 算数运算符+ - * / % ++ --
  • ++ 自增1
  • -- 自减1

var a = 1
var b = a++ //先赋值, 再自增, b=1, a=2
var c = ++a //先自增, 再赋值, a=3, b=3

• 比较运算符 > >= < <= != !== == ===
  • == 弱等于, 会将两边自动转为相同的数据类型
  • === 强等于
• 逻辑运算符
  • && and
  • || or
  • ! not
• 赋值运算符 = += -= *= /=
  • 和Python一样

流程控制

• if---else

// 判断语句放在小括号内, 执行语句放在大括号内

var age = 18

if (age >= 18){
    console.log("已经是大人了")
}else {
    console.log("还是个小屁孩")
}

• if---else if---else

weather = "sunny"
if (weather=="sunny") {
    console.log("play outside")
}else if (weather=="riany") {
    console.log("sleep")
}else {
	console.log("play inside")
}

• switch

/*
会将小括号内的表达式结果和case后的值进行匹配, 执行相应的代码块
如果没有匹配到case, 就会执行default下面的代码块
*/
switch (new Date().getDay()) {
    case 0:
		day = "Sunday";
        break
    case 6:
		day = "Saturday";
        break
    default:
        day = "work day";
}

//"Saturday"

• for

for (var i=0;i<5;i++) {
    console.log(i)
}

/*
0
1
2
3
4
*/

• while

var i = 0
while (i < 5) {
    console.log(i)
    i++
}

/*
0
1
2
3
4
*/

• 三元运算

//条件成立执行?后面的代码, 条件不成立执行:后面的代码
var a = 1
var b = 2
a > b ? console.log(a) : console.log(b)

函数

• 定义函数的关键字: function

// 语法
function 函数名(参数) {
	执行代码
	return 返回值
}

// 普通函数
function f1() {
	console.log("function without arg and return")
}

//有参函数
function sum(a, b) {
	console.log(a+b)
}

// 带有返回值(只能有一个返回值)
function rectArea(length, width) {
	area = length * width  
 	return area  
}

// 匿名函数
var sum = function(a, b) {
	return a + b
}

sum(1, 2) 


// 立即执行函数
(function(a, b) {
    return a + b;
})(1, 2)

// 箭头函数(js的语法是真的骚啊)
var sum = (num1, num2) => sum1 + sum2
// 等同于
function sum(num1, num2) {
    return num1 + num2
}


// arguments包含所有传入函数的参数
function sum(num1, num2) {
    console.log(arguments[0])
    return num1 + num2
}

sum(1, 2)
/*
1
3
*/

• 函数的全局变量和局部变量

/*
局部变量
在函数内部声明的变量是局部变量, 只能在函数内部访问
只要函数运行完毕, 局部变量就会被删除

全局变量
在函数外部声明的变量是全局变量, 网页上的所有脚本和函数都能访问它
页面关闭, 全局变量会被删除

作用域
和python一样, 内层--->外层
*/

var city = "Beijing"
function f() {
	city = "Shanghai"
	function inner() {
		city = "Shenzhen"
		console.log(city)
    }
	inner()
}  

f()  // "Shenzhen"

内置对象和方法

• js中一起皆对象(Python: ???)

• 自定义对象
  • Object 只能用字符串作为键, 键-值
  • Map 可以使用其他类型的数据作为"键", 值-值

// 创建新对象
var person = new Object();
person.name = "bigb"
person.age = 18

console.log(person)  // {name: "bigb", age: 18}

// 创建新映射
var m = new Map()
var info = {"name":"bigb", "age":18}
m.set(info, "bigb's info")  // 添加键值
m.get(info)  // "bigb's info"
m.delete(info)

• Date对象

// 创建新Date对象

// 不传参数
var d1 = new Date()
console.log(d1.toLocaleString())

// 传参数
var d2 = new Date("2018/6/19")
console.log(d2.toLocaleString())

// 将当前时间按照"2000-1-1 11:11 星期一"的格式输出

const WEEKMAP = {
    0: "星期天",
    1: "星期一",
    2: "星期二",
    3: "星期三",
    4: "星期四",
    5: "星期五",
    6: "星期六"
}


function showTime() {
    var d1 = new Date()
    var year = d1.getFullYear()
    var month = d1.getMonth()
    var day = d1.getDate()
    var hour = d1.getHours()
    var minute = d1.getMinutes() < 10 ? "0" + d1.getMinutes() : d1.getMinutes()

    var week = WEEKMAP[d1.getDay()]

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week} 
    `
    console.log(strTime)
}

showTime();

• JSON对象

var str1 = '{"name": "bigb", "age": 18}'
var obj1 = {"name": "bigb", "age": 18}

// JSON字符串转为对象
var obj = JSON.parse(str1)

// 对象转为JSON字符串
var str = JSON.stringify(obj1)

• RegEXp对象

// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}")
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/

// 正则校验数据
reg1.test('bigb666')
reg2.test('bigb666')

/*第一个注意事项，正则表达式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb'
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb')
reg2.test('egondsb')
reg2.lastIndex
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test()
reg2.test(undefined)

var reg3 = /undefined/
reg3.test()

• Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

Math