在线单页网站制作,phpcms 笑话网站,网络营销推广平台,教人做网站的视频1. 扩展运算符
用三个点(...)表示#xff0c;它如同rest参数的逆运算#xff0c;将数组转为用逗号分隔的参数序列。扩展就是将一个集合分成一个个的。
console.log(...[1, 2, 3]); // 1, 2, 3可以用于函数调用
扩展运算符后还可以放置表达式
...(x 0 ? [a] : [])如…1. 扩展运算符
用三个点(...)表示它如同rest参数的逆运算将数组转为用逗号分隔的参数序列。扩展就是将一个集合分成一个个的。
console.log(...[1, 2, 3]); // 1, 2, 3可以用于函数调用
扩展运算符后还可以放置表达式
...(x 0 ? [a] : [])如果扩展运算符后是一个空数组则不产生任何效果
[...[], 1] // [1]可以替代数组的apply方法
扩展运算符的应用
合并数组
ES5中使用concat方法
const arr1 [a, b];
arr1.concat([c]); // [a, b, c]ES6的合并数组
[...[1, 2, 3], ...[4, 5]]; // [1, 2, 3, 4, 5]与解构赋值结合
用来生成数组
// ES5
a list[0]; rest list.slice(1);
// ES6
[a, ...rest] list;如果用于数组赋值只能将其放在参数的最后一位否则会报错。
const [...first, last] [1, 2, 3, 4, 5]; // 报错函数的返回值
函数只能返回一个值如果要返回多个值可以使用扩展运算符
字符串
将字符串转为真正的数组
[...hello] // [h, e, l, l, o]实现了Iterator接口的对象
任何Iterator接口的对象都可以用扩展运算符转为真正的数组。
Map和Set结构、Generator函数
扩展运算符内部调用的是数据结构的Iterator接口因此只要具有Iterator接口的对
象都可以使用扩展运算符。
2. Array.from()
将类似数组的对象、可遍历对象转为真正的数组
只要是部署了Iterator接口的数据结构Array.from都能转为数组。
Array.from(he);
// [h, e]类似数组的对象本质就是有length属性
Array.from还可以接受第二个参数作用类似map方法用来对每个元素进行处理将处理的值放入返回的数组中。
Array.from(arrayLike, x x * x);
// 等同于
Array.from(arrayLike).map(x x * X);另一个应用将字符串转为数组返回字符串长度。 Array.from({length: 2}, () jack);
// [jack, jack]
// 通过length可以确定第二个参数的运行次数3. Array.of()
将一组值转为数组
Array.of(3, 22, 3); // [3, 22, 3]Array()的不足
Array() // []
Array(3) // [, , , ]
Array(3, 11, 8) // [3, 11, 8]Array.of总是返回参数值组成的数组如果没有参数就返回一个空数组。
Array.of方法可以用代码模拟
function ArrayOf() {return [].slice.call(arguments);
}4. 数组实例的copyWithin()
会在当前数组内部将指定位置的成员复制到其他位置(会覆盖原有成员)然后返回当前数组也就是说使用这个方法会修改当前的数组。
3个参数
target(必选)从该位置开始替换数据start(可选) 从该位置开始读取数据默认为0如果是负数表示倒数。end(可选) 到该位置停止读取默认数组的长度如果是负数表示倒数。
[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]表示从下标为3的位置开始复制到数组末尾的数据在下标为0的位置开始换数据。
对于没有copyWithin方法可以使用以下代码
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);// Int32Array [4, 2, 3, 4, 5]5. 数组实例的find()和findIndex()
find
find方法用于找出第一个符合条件的数组成员参数是一个回调数所有成员都会依次执行该回调函数直到找出第一个返回值为true的成员然后返回该成员。如果没有符合的返回undefined。
[1, 2, -5, 10].find((value, index, arr) {return value 0
})
// -5上面的代码找出小于0的成员。
回调函数可以接受3个参数依次是当前的值、当前的index以及原数组。
findIndex
findIndex返回第一个符合条件的数组成员的位置如果都不符合返回-1。
第一个参数是回调函数第二个参数可选绑定this对象。
6. 数组实例的fill()
给定值填充一个数组。
[a, b, c].fill(7); // [7, 7, 7]
特别适合空数组的初始化。
还可以接受第二个和第三个参数用来指定填充的起始位置和结束位置。
[a, b, c].fill(7, 1, 2);
// [a, 7, c]上面的代码表示fill方法从1号位开始向原数组填充7到2号位之前结束。
7. 数组实例的entries()、keys()和values()
用来遍历数组可用于for…of循环遍历。
分别是遍历键值对、键、值
for(let index of [a, b].keys()) {// code
}8. 数组实例的includes()
方法返回一个布尔值表示某个数组是否包含给定的值与字符串中的includes类似。
2个参数
第一个要检测的值第二个开始搜索的位置默认0。负数表示倒数负数大于数组长度时会重置为0
[1, 2, 3].includes(3, 3); // false
indexOf缺点
不够语气化其含义是找到参数值第一个出现的位置所以要比较是否不等于-1 表达起来不直观。内部使用严格相等运算符(),会导致对NaN误判。
NaN和自身都不相等。
代替模拟代码
const contains (() {Array.prototype.includes ? (arr, value) arr.includes(value) : (arr, value) arr.some(el el value);
})Map结构中的has方法是用来查找键名的
Set结构中的has方法用来查找值的
9. 数组的空位
Array当参数为一个值是则代表生成length为该值的空数组。
Array(3); // [, , ,]在ES5中对空位处理很不一致
forEach()、filter()、every()和some()都会跳过空位map()会跳过空位但会保留这个值join()和toString()会将空位视为undefined而undefined和null会被理解成空字符串。
在ES6中明确规定空位转为undefined
Array.from方法会将数组的空位转为undefined。
扩展运算符也会转为undefined
copyWithin方法会连空位一起复制
fill方法会将空位视为正常的数组位置
for…of 循环也会遍历空位
entries()、keys()、values()、find()和findIndex()会将空位转为undefined
