JavaScript
阮一峰-javascript (opens new window) MDN-javascript (opens new window)
# 语法
# 表达式(expression)
指一个为了得到返回值的计算式,一定会返回一个值。凡是 JavaScript 语言中预期为值的地方,都可以使用表达式。比如,赋值语句的等号右边,预期是一个值,因此可以放置各种表达式。
# 语句
为了进行某种操作,一般情况下不需要返回值,语句以分号结尾,一个分号就表示一个语句结束。多个语句可以写在一行内。
# 运算符
主要用于连接简单的表达式、组成一个复杂的表达式
加法运算符(+) 有拼接、连接的意思
加法运算符是在运行时决定,到底是执行相加,还是执行连接。也就是说,运算子的不同,导致了不同的语法行为,这种现象称为“重载”(overload)。由于加法运算符存在重载,可能执行两种运算,使用的时候必须很小心。
"10"+5=15 // 拼接(特殊)
true + true // 2 允许非数值的相加,布尔值都会自动转成数值,然后再相加。
true + true // 2 允许非数值的相加
2
3
其他算数运算符(-)
其他算术运算符(比如减法、除法和乘法)都不会发生重载。它们的规则是:所有运算子一律转为数值,再进行相应的数学运算。
1 - '2' // -1
1 * '2' // 2
1 / '2' // 0.5
2
3
自增和自减运算符
自增和自减运算符有一个需要注意的地方,就是放在变量之后,会先返回变量操作前的值,再进行自增/自减操作;放在变量之前,会先进行自增/自减操作,再返回变量操作后的值。
var x = 1;
var y = 1;
x++ // 1
console.log(x) // 2
++y // 2
console.log(y) //2
2
3
4
5
6
布尔运算符 布尔运算符用于将表达式转为布尔值,一共包含四个运算符。(注意:不完全转换为布尔值)
- && (与):如果第一个运算子的布尔值为 true,则返回第二个运算子的值(注意是值,不是布尔值);如果第一个运算子的布尔值为 false,则直接返回第一个运算子的值,且不再对第二个运算子求值。可以取代 if 结构
- 可以用于检测或判断是否满足条件
"判断"&&alert("触发")
- // ...
- 可以用于检测或判断是否满足条件
- || (或):如果第一个运算子的布尔值为 true,则返回第一个运算子的值,且不再对第二个运算子求值;如果第一个运算子的布尔值为 false,则返回第二个运算子的值。
- 可以用于初始化值,
var a;a=a||100 //如果a没有赋值的话则会被初始化值为100
- 待添加
- 可以用于初始化值,
- !(非):也叫取反运算符,将布尔值变为相反值,不管什么类型的值取反运算后,都变成了布尔值。
- 如果对一个值连续做两次取反运算,等于将其转为对应的布尔值 ==!!"将此转换为 true 布尔值"==
- 待添加
- ?:(三元运算符)
# 相等运算(==)符判断规则
- 如果两个值类型相同,则执行严格相等的运算
- 如果两个值的类型不同
- 如果一个是 null,一个是 undefined,那么相等
- 如果一个是数字,一个是字符串,先将字符串转为数字,然后比较
- 如果一个值是 true/false 则将其转为 1/0 比较
- 如果一个值是对象,一个是数字或字符串,则尝试使用 valueOf 和 toString 转换后比较
- 其它就不相等了
null==undefined //true
NaN==NaN //false
"1"==true //true
2
3
# 操控语句
switch
var a="s"
switch(true){ //判断
case a>80: //判断
console.log("优秀") //执行
break; //跳出循环
case a>60:
console.log("及格")
break;
case a<60:
console.log("不及格")
break;
default: //其他
console.log("异常")
}
注意:
case结尾有:分号
break; //跳出循环
default: //以上case条件都不满足则执行
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
while 永久循环
var i=0;
while(i<10){ //括号里的表达式为true的话则永久执行大括号
console.log(i);
i++;
}
2
3
4
5
while 先执行再循环
var i=0;
do{
i++;
console.log(i)
}while(i<10)
}
2
3
4
5
6
条件执行 for 语句
for(var i=0;i<10;i++){console.log(i)}
break 跳出循环,后面不再做循环
continue 跳过本次循环
# 函数
- 函数声明 function a(){}
- 函数表达式 var a=function(){}
- 立刻执行的函数表达式 (function(){})()
- 匿名函数(没有名字的函数) function(){}
- 回调函数 function1(function2){} //一般异步任务会用到
- 函数节流 //用 setTimeout 来实现,具体谷歌
# 定时器
# setTimeout
延迟 x 秒执行
# setInterval
每 x 秒执行一次
# 对象
delete obj.name //delete 命令用于删除对象的属性,删除成功后返回 true。 Object.keys(obj); //查看所有属性(并非属性的值)
# JSON
JSON.parse(obj) //方法用于将 JSON 字符串转化成对象。 JSON.stringify(obj) //方法用于将对象转为字符串。该字符串符合 JSON 格式,并且可以被 JSON.parse 方法还原。
# 数组
- arr.push("") //方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。
- arr.pop() //方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
- arr.unshift("") //方法将一个或多个元素添加到数组的开头,并返回新数组的长度。
- shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
- arr.splice(索引,个数(0 为添加),数组元素)方法通过删除现有元素和/或添加新元素来更改一个数组的内容。返回值为删除元素的数组,没删除则返回空数组
- arr.slice()
- arr.join("") //方法将一个数组的所有元素连接成一个字符串并返回这个字符串。
- arr.reverse() //数组倒序
- arr.sort() //数组排序,默认排序顺序是根据字符串 Unicode 码点。
# ES5 数组拓展 (opens new window)
- Array.isArray(obj) //判断函数是不是一个数组,返回布尔值
- .indexOf(element) //数组中从左到右查询指定元素,返回该元素索引,没找到返回-1
- .lastIndexOf(elemrnt) 数组中从右到左查询指定元素,返回该元素索引,没找到返回-1
- .forEach() //遍历数组,参数为一个回调函数,回调函数的三个参数:1.当前元素 2.当前元素索引值 3.整个数组,无返回值
- .map() //与 forEach 类似,区别在返回值,回调函数返回值组成一个新数组返回,新数组索引结构和原数组一致,原数组不变
- .every() //参数为回调函数,回调函数返回布尔值,每个回调函数都返回 true 的时候才是 true,当遇到 false 终止执行并返回 false
- .some() //参数为回调函数,回调函数返回布尔值,有一个回调函数都返回 true 的时候终止执行并返回 true。
- .filter() //返回数组的一个子集,回调函数用于逻辑判断是否返回,返回 true 则把当前元素加入到返回数组中,false 则不加新数组只包含返回 true 的值,索引缺失的不包括,原数组保持不变.
- .reduce() //遍历数组,调用回调函数,将数组元素组合成一个值,reduce 从索引最小值开始,reduceRight 反向,方法有两个参数
- 回调函数:把两个值合为一个,返回结果
- value,一个初始值,可选
# 函数节流 (throttle 和 debounce (opens new window))
# String
- .charAt(0) //获取第一个字符串
- .charCodeAt(0) //获取第一个字符串的 Unicode 编码
- .substr(1,2) //截取字符串,第一个是初始位置,第二个是长度
- .substring(1,5)//截取字符串,第一个是初始位置,第二个是结束位置
- .slice(1,5) //与.substring 一样,允许负数
- .split() 方法使用指定的分隔符字符串将一个 String 对象分割成字符串数组 查找
- .search('') 返回索引,找不到为-1
- replace("要替换的元素","替换成") 修改元素
# Math
- Math.round() //返回参数的四舍五入
- Math.abs() //返回参数的绝对值
- Math.max() / Math.min()
- Math.floor//方法返回小于参数值的最大整数(向下取整)
- Math.ceil() //方法返回大于参数值的最小整数(向上取整)
- Math.pow() //方法返回以第一个参数为底数、第二个参数为幂的指数值
- Math.sqrt() //返回参数的平方根
- Math.random() //该方法返回 0 到 1 之间的一个伪随机数,可能等于 0,但是一定小于 1
# Date
- Date.now() //方法返回当前距离 1970 年 1 月 1 日 的毫秒数
- Date.parse() //方法用来解析,返回距离 YYYY-MM-DDTHH:mm:ss.sssZ(Z 代表时区,可选)的毫秒数
var d=new Date()
console.log(""+d.getFullYear()+ //年
"-"+(d.getMonth()+1)+ //月
"-"+d.getDate()+ //日
":"+d.getHours()+ //时
":"+d.getMinutes()+ //分
":"+d.getSeconds()+ //秒
":"+d.getMilliseconds() //毫秒
)
2
3
4
5
6
7
8
9
# this call&apply&bind
var name='one'
var obj={
name:'two'
}
function fn(a,b){
console.log(a+b)
conosle.log(this.name)
}
2
3
4
5
6
7
8
- fn().call(obj,1,2) 执行函数遇到 this 就指向 obj
- fn().apply(obj,[1,2]) 执行函数遇到 this 就指向 obj,与上面写法一样,传递参数方式不同
- fn().bind(obj) 不执行函数,返回函数,this 指向 obj