js中数组API以及ES6总结

Posted 2020-12-30 wangpenglei

1. 数组API
2. ES6:

1. 数组API:
遍历: 对数组中每个元素执行相同的操作
arr.forEach(): 对原数组中每个元素执行相同的操作
arr.forEach(function(elem,i,arr){
//对当前元素执行操作，并保存回原数组的当前位置
})
arr.map(): 复制出原数组中每个元素，执行相同操作后，放入新数组返回。原数组保持不变。
var newArr=arr.map(function(elem,i,arr){
return 新值
})
过滤和汇总:
过滤: 复制出原数组中符合条件的元素，组成新数组
var subArr=arr.filter(function(elem,i,arr){
return 判断条件
})
汇总: 将数组中每个元素进行统计，得出一个汇总值
var result=arr.reduce(function(prev,elem,i,arr){
//prev: 可获得截止到当前元素的临时汇总值
return prev+elem;
}, base)

2. ES6:
特点: 在不改变原理的基础上，极简化了代码，并解决了部分广受诟病的缺陷。

let:
什么是: 代替var声明变量
为什么: 避免声明提前，并添加块级作用域
何时: 所有的var都要用let代替
兼容: 其实let就是普通的匿名函数自调
强调: 1. let禁止提前使用当前变量
2. 块内的变量，出了块，不能用了！

参数增强:
1. default: 默认值，在定义函数时，可为参数提前指定默认值
如何: function fun(参数, 参数, 参数=默认值)
强调: 有默认值的参数必须放在末尾！
兼容: base=base!==undefined?base:10000;
2. rest: 剩余参数
什么是: 在不确定参数个数时，也能收集所有传入的参数值
何时: 代替arguments
为什么:
1. arguments不是纯正的数组，无法使用数组的API
2. arguments只能获得所有参数值，无法有选择的获得部分参数值
rest的优势:
1. 得到的是一个纯正的数组！
2. 可有选择的接住部分参数值
如何:
定义函数时: function fun(参数1, 参数2,…, …数组名)
调用时: 数组中会接住除之前参数之外的剩余参数值
兼容: 将arguments转为数组:
基本思想: 复制出arguments中每个元素，放入新数组中返回
var args=Array.prototype.slice.call(arguments,1)
//arguments.slice(1)
[].slice.call(arguments,1)
3. spread: 散播, 将一个数组参数打散为单个数值，再传入给函数
何时: 如果函数要求参数值单个传入，但给定的值是一个数组时
如何:
调用时: fun(参数值1,参数值2,…, …数组)
兼容:
fun.apply(null,数组)

箭头函数: 对所有回调函数和匿名函数自调的简化！
三句话:
1. 去掉function改=>
2. 如果只有一个参数，可省略()
3. 如果函数体只有一句话可省略{}，
如果只有一句话，可省略return
问题: 箭头函数内外公用同一个this
所以: 只要希望函数内外的this不通用时，就不能用箭头函数

模板字符串:
什么是: 支持换行和动态生成内容的字符串
何时: 今后不允许再用+拼接字符串！
如何: 整个模板字符串，都要用反引号(`)包裹
模板字符串内，天生支持换行
模板字符串中支持动态生成内容(js表达式):
动态生成的内容必须: ${js表达式}

解构:
什么是: 将对象中的成员，分别取出，分别使用。
何时: 简化对象中成员的使用
如何: 3种:
1. 数组结构: 下标对下标:
var date=[2018, 8, 3]
var [y,m,d]=date;
y=2018 m=8 d=3
鄙视: 不声明第三个变量，交换两个变量的值
对数字类型: 2种:
1. a+=b, b=a-b, a-=b
2. a^=b, b^=a, a^=b
对任意类型: 2种:
1. b=[a,a=b][0]
2. [a,b]=[b,a]

2. 对象解构: 属性对属性
var eric={ id:1001, ename:"埃里克", salary:12000}
var {id, ename, salary }=eric;
id=1001, ename="埃里克", salary=1200

方法解构:
var user={
signin:function(){ … },
signup:function(){ … },
signout:function(){ … },
isAuthenticated(){ … }
}
var {signin,signup}=user;

3. 参数解构:
何时: 不确定参数的个数，顺序时
如何: 2步:
1. 定义函数时: 将所有参数定义为一个对象中的属性
2. 调用函数时: 将要传入的所有属性值，都放在一个对象中传入。

for of:
什么是: 遍历数组或类数组对象中的每个元素
遍历:
1. for(var i=0;i<arr.length;i++)
即可获得元素的位置i，又可获得元素的内容arr[i]
控制遍历的位置和顺序
2. arr.forEach((elem,i,arr)=>{
也可获得元素的位置, 和元素内容elem
但无法控制遍历！
})
3. for(var elem of arr){
仅可获得元素内容elem
无法获得位置i,也无法控制遍历
}

vs for in
for of 只能遍历数组或类数组对象（都是数字下标）
for in 专门用于遍历关联数组或对象（都是自定义字符串下标）