1,扩展运算符
(...)三个点,将一个数组转为用逗号分隔的参数序列,扩展运算符背后调用的是遍历器接口(Symbol.iterator)node
譬如: console.log(...[1, 2, 3]) // 输出1 2 3 console.log(10, ...[2, 3, 4], 15) // 输出 10 2 3 4 15 1,运算符还可用于函数的调用 譬如: 求两个数和 function add (x,y){ return x + y; } var param = [10,20] add(...param) // 输出30 2,运算符可与正常函数参数一同使用 例子: function f(a, x, y, z) { } const args = [0, 1]; f(...args, 2, ...[3]); 3,运算符还能够替代apply(小技巧)[将数组转为函数的参数了] // es6以前 function d (x,y){} var param = [1,2] d.apply(null,param) // es6 function d(x,y){} let param = [1,2] d(...param) 4,将a数组添加到b数组 // es6以前 var a = [1,2,3],b = [7,3,1]; Array.prototype.push.apply(a,b) // 输出 [1,2,3,7,3,1] // es6 let a = [1,2,3],b = [8,1,3]; a.push(...b) // 输出 [1,2,3,8,1,3]
2,运算符的使用es6
1,数组复制 const a1 = [1, 2]; // 写法一 const a2 = [...a1]; // 写法二 const [...a2] = a1; 2,数组合并(注:浅拷贝) var a = [1,5],b = [8], c = [10,12]; // es5以前 a.concat(b,c) // 输出 a,b,c合并集合 // es6 [...a, ...b, ...c] 3,与解构赋值结合使用(注:若是扩展运算符用于数组赋值,只能放在参数的最后一位,不然会报错) // ES5 a = list[0], rest = list.slice(1) // ES6 [a, ...rest] = list 下面是另一些例子。 const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5] const [first, ...rest] = []; first // undefined rest // []: const [first, ...rest] = ["foo"]; first // "foo" rest // [] 4,字符串 1,把'first'分解为以字母为值的数组 [...'first'] // 输出["f", "i", "r", "s", "t"] 2,特别注意 (js会将四个字节的 Unicode 字符,识别为 2 个字符)因此建议采用运算符形式 'x\uD83D\uDE80y'.length // 输出4 [...'x\uD83D\uDE80y'].length // 输出3 5,实现了 Iterator 接口的对象 运算符可把该对象转为数组不然则不行 譬如获取页面全部P元素 let nodeList = document.querySelectorAll('p'); let array = [...nodeList]; 6,Map 和 Set 结构,Generator 函数(注意:有Iterator接口的均可以使用运算符) 1,map let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); let arr = [...map.keys()]; // 输出[1, 2, 3] 2,Generator 函数运行后,返回一个遍历器对象 const demo = function*(){ y 1; y 2; y 3; }; [...demo()] // 输出[1, 2, 3]
3,Array.from() 将类数组转为真正数组(任何有length属性的对象,均可以经过Array.from方法转为数组,扩展运算符则不行)数组
1,类对象转数组 let test = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5的写法 var arr = [].slice.call(test); //输出 ['a', 'b', 'c'] // ES6的写法 let arr2 = Array.from(test); //输出 ['a', 'b', 'c'] 2,Array.from还能够接受第二个参数 Array.from([1, 2, 3], (x) => x * x) //输出 [1, 4, 9]
4,Array.of() Array.of方法用于将一组值,转换为数组app
注意: Array.of基本上能够用来替代Array()或new Array(),而且不存在因为参数不一样而致使的重载。它的行为很是统一,而array只有当参数个数很多于 2 个时才会返回数组 Array.of(1,2,3,5)// 输出 [1,2,3,5]
5,数组实例的 copyWithin()函数
Array.prototype.copyWithin(target, start = 0, end = this.length) 此方法接受三个参数。 1,target(必需):从该位置开始替换数据。若是为负值,表示倒数。 2,start(可选):从该位置开始读取数据,默认为 0。若是为负值,表示从末尾开始计算。 3,end(可选):到该位置前中止读取数据,默认等于数组长度。若是为负值,表示从末尾开始计算。 例子: [1, 2, 3, 4, 5].copyWithin(0, 3) [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
6,数组 find() 和 findIndex()this
1,find 用于找出第一个符合条件的数组成员 找出小于0的元素 [1, 4, -5, 10].find((n) => n < 0) 2,findIndex 用于找出第一个符合条件的数组成员位置 找出元素位置 [1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; })
7,数组fill() fill方法使用给定值,填充一个数组 待补充es5
8,数组 entries(),keys() 和 values() ES6新增方法prototype
注:区别在于keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。 譬如: for (let index of ['a', 'b'].keys()) { console.log(index); } // 输出 0 // 输出 1 for (let elem of ['a', 'b'].values()) { console.log(elem); } // 输出 'a' // 输出 'b' for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 输出 0 "a" // 输出 1 "b"