1、 扩展符 // 可以将数组转为用逗号相隔开的参数序列
1 // 2 console.log(...[1,2,3]) // 1, 2, 3 3 4 // 用于函数调用 5 function add(x, y) { 6 return x + y; 7 } 8 9 const numbers = [4, 38]; 10 add(...numbers) // 42 11 12 //
扩展符的应用
1 // (1) 复制数组 (浅复制) 2 let arr = [ 1, 2, 3, 4 ] 3 // ES5 方法 4 let arr1 = arr.concat() 5 // ES6 扩展符用法 6 let arr1 = [...arr]; 7 let [...arr1] = arr; 8 9 // (2) 合并数组 10 var arr = [1,2]; 11 var arr1 = [3,4]; 12 var arr2 = [5,6]; 13 // ES5 14 var arr3 = arr.concat(arr1,arr2) // [1, 2, 3, 4, 5, 6] 15 // ES6 16 let arr3 = [...arr1, ...arr2, ...arr] 17 18 // (3) 与解构赋值一起使用, 扩展符只能在最后使用否则报错 19 let [a, ...b] = [1, 2, 3, 4, 5] 20 a // 1 21 b // [2, 3, 4, 5] 22 23 // (4) 将字符串转换成数组, 扩展符能识别四个字符的Unicode 字符 24 [...'hello'] 25 // [ "h", "e", "l", "l", "o" ] 26 27 let str = 'x\uD83D\uDE80y'; 28 29 str.split('').reverse().join('') 30 // 'y\uDE80\uD83Dx' 31 32 [...str].reverse().join('') 33 // 'y\uD83D\uDE80x' 34 35 // (5)
2、Array.from() // 将类似数组的对象、伪数组和可遍历的对象转换为真正的数字
1 // 类似数组的对象
2 let likeArray = {
3 '0': 'a',
4 '1': 'b',
5 '2': 'c',
6 length: 3
7 };
8 // dom 节点
9 let nodeList = document.querySelectorAll("div")
10 // 函数中的arguments对象
11
12 // 以上都能转换成数组 只要是部署了 Iterator 接口的数据结构,Array.from
都能将其转为数组。
13 // ES5 的方法
14 Array.prototype.slice.call(likeArray)
15 // ES6 方法
16 Array.from(likeArray)
17 Array.from(nodeList)
Array.from() // 第一个参数是要转成数组的对象,第二个参数是一个函数,相当于转换成数组后进行 map遍历的函数, 第三个参数可以用来绑定this
1 Array.from(arrayLike, x => x * x); 2 // 等同于 3 Array.from(arrayLike).map(x => x * x); 4 5 Array.from([1, 2, 3], (x) => x * x) 6 7 // 此外还可以获取节点文本内容 8 let divs = document.querySelectorAll('div'); 9 10 // map() 11 let names1 = Array.from(divs, s => s.textContent);
Array.from() // 还可以将字符串转换成数组
1 let str = "abc" 2 // ES5 3 let arr = str.split(""); 4 // ES6 5 let arr1 = Array.from(str) // ["a", "b", "c"] 6 7 // Array.from()的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种 Unicode 字符,可以避免 JavaScript 将大于\uFFFF的 Unicode 字符,算作两个字符的 bug。
3、 Array.of() // Array.of
方法用于将一组值,转换为数组。 主要是用来弥补 Array() 方法由于参数个数不同转换成数组的形式不同
1 Array() // [] 2 Array(3) // [, , ,] 3 Array(3, 11, 8) // [3, 11, 8] 4 // Array() 方法当只有一个参数的时候视为数组的长度,而Array.of() 就解决了这个问题 5 Array.of() // [] 6 Array.of(3) // [3] 7 Array.of(3, 11, 8)// [3,11,8] 8 9 // Array.of() 方法模拟 10 function ArrayOf(){ 11 return [].slice.call(arguments); 12 }
4、copyWithin() // 将指定位置的成员复制到其他位置(会覆盖其他成员),会修改当前数组
Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数(参数都应该是数值类型,不就就转换为数值)。
-
- target(必需):从该位置开始替换数据。如果为负值,表示倒数。
- start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
// 将3号位复制到0号位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] // -2相当于3号位,-1相当于4号位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] // 将3号位复制到0号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5}
5、find() 和 findIndex()
find() // 找出第一个符合条件的数组成员,找到返回true,没找到返回undefined
findIndex() // 找出第一个符合条件的数组成员位置,找到范围index,没找到返回-1
两个方法都有两个参数 第一个函数,第二个是用来绑定函数的this指向
arr.find( ( item, index, arr )=> {} )
arr.findIndex( ( item, index, arr )=> {} )
1 function f(v){ 2 return v > this.age; 3 } 4 let person = {name: 'John', age: 20}; 5 [10, 12, 26, 15].find(f, person); // 26 6 7 // 另外,这两个方法都可以发现NaN,弥补了数组的indexOf方法的不足。 8 [NaN].indexOf(NaN) 9 // -1 10 11 [NaN].findIndex(y => Object.is(NaN, y)) // Object.is() 判断两个值是否相同
6、fill() // 使用定值填充一个数组
arr.fill( "item", start, end ) , 要填充的值,起始(从1开始), 结束。 会抹去原数组成员
需要注意的是:如果填充的值是一个对象,那么只是对象的赋值,而不是深拷贝。