JavaScript

阮一峰-javascript (opens new window) MDN-javascript (opens new window)

# 语法

# 表达式（expression）

指一个为了得到返回值的计算式，一定会返回一个值。凡是 JavaScript 语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式。

# 语句

为了进行某种操作，一般情况下不需要返回值,语句以分号结尾，一个分号就表示一个语句结束。多个语句可以写在一行内。

# 运算符

主要用于连接简单的表达式、组成一个复杂的表达式
加法运算符(+) 有拼接、连接的意思
加法运算符是在运行时决定，到底是执行相加，还是执行连接。也就是说，运算子的不同，导致了不同的语法行为，这种现象称为“重载”（overload）。由于加法运算符存在重载，可能执行两种运算，使用的时候必须很小心。

"10"+5=15 //  拼接（特殊）
true + true // 2 允许非数值的相加，布尔值都会自动转成数值，然后再相加。
true + true // 2 允许非数值的相加

1
2
3

其他算数运算符(-)
其他算术运算符（比如减法、除法和乘法）都不会发生重载。它们的规则是：所有运算子一律转为数值，再进行相应的数学运算。

1 - '2' // -1
1 * '2' // 2
1 / '2' // 0.5

1
2
3

自增和自减运算符
自增和自减运算符有一个需要注意的地方，就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。

var x = 1;
var y = 1;
x++ // 1
console.log(x) // 2
++y // 2
console.log(y) //2

1
2
3
4
5
6

布尔运算符 布尔运算符用于将表达式转为布尔值，一共包含四个运算符。(注意：不完全转换为布尔值)

&& (与)：如果第一个运算子的布尔值为 true，则返回第二个运算子的值（注意是值，不是布尔值）；如果第一个运算子的布尔值为 false，则直接返回第一个运算子的值，且不再对第二个运算子求值。可以取代 if 结构
- 可以用于检测或判断是否满足条件 "判断"&&alert("触发")
- // ...
|| (或)：如果第一个运算子的布尔值为 true，则返回第一个运算子的值，且不再对第二个运算子求值；如果第一个运算子的布尔值为 false，则返回第二个运算子的值。
- 可以用于初始化值，var a;a=a||100 //如果a没有赋值的话则会被初始化值为100
- 待添加
!(非)：也叫取反运算符，将布尔值变为相反值，不管什么类型的值取反运算后，都变成了布尔值。
- 如果对一个值连续做两次取反运算，等于将其转为对应的布尔值 ==!!"将此转换为 true 布尔值"==
- 待添加
?:(三元运算符)

# 相等运算(==)符判断规则

如果两个值类型相同，则执行严格相等的运算
如果两个值的类型不同
1. 如果一个是 null，一个是 undefined，那么相等
2. 如果一个是数字，一个是字符串，先将字符串转为数字，然后比较
3. 如果一个值是 true/false 则将其转为 1/0 比较
4. 如果一个值是对象，一个是数字或字符串，则尝试使用 valueOf 和 toString 转换后比较
5. 其它就不相等了

null==undefined //true
NaN==NaN    //false
"1"==true   //true

1
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条件都不满足则执行

1
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++;
}

1
2
3
4
5

while 先执行再循环

var i=0;
do{
  i++;
  console.log(i)
}while(i<10)
}

1
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() //毫秒
           )

1
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)
}

1
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

编辑

#JavaScript

上次更新: 2022/05/24, 23:27:54

虚拟DOM→

JavaScript

# 语法

# 表达式（expression）

# 语句

# 运算符

# 相等运算(==)符判断规则

# 操控语句

# 函数

# 定时器

# setTimeout

# setInterval

# 对象

# JSON

# 数组

# ES5 数组拓展 (opens new window)

# 函数节流 （throttle 和 debounce (opens new window)）

# String

# Math

# Date

# this call&apply&bind

# 函数节流（throttle 和 debounce (opens new window)）