依据阮一峰教程摘取的自己可能用到的特性
扩展运算符
...,好比rest参数的逆运算
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
替代apply方法
扩展运算符可以展开数组,不需要apply来一个一个传入
// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的写法
function f(x, y, z) {
// ...
}
let args = [0, 1, 2];
f(...args);
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
扩展运算符的应用复制数组,对a1不会产生影响
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
合并数组
// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
与解构赋值结合
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 // []
字符串,转化字符串为数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
实现Iterator接口的对象,任何带该接口的对象都可以扩展成真正的数组,不带该接口可以用Array.from转化
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
Array.from() 将类数组对象和可遍历对象(Set,Map)转为真正的数组
接受一个类似map的方法参数
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
return p.textContent.length > 100;
});
// arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}
find(),findIndex() find()用于找出第一个符合条件的数组成员,若没有则返回undefined
findIndex()返回的是index,没有返回-1,还可以找到indexOf找不到的NaN
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
都接受第二个参数,来绑定回调的this对象
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
fill()
浅拷贝,会影响原数据
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
entries(),keys(),value()
遍历数组,entries()是对键值对的遍历,values是对键值的遍历,keys是对键名的遍历
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"
includes返回布尔值,而且可以找到indexOf找不到的NaN
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
Map和Set数据结构有一个has方法,与includes区别:
Map的has查找键名
Set的has查找值
数组的空位
ES6中的方法将空位转为undefined,ES5中比较乱,如下:
forEach()
,filter()
,reduce()
,every()
和some()
都会跳过空位。map()
会跳过空位,但会保留这个值join()
和toString()
会将空位视为undefined
,而undefined
和null
会被处理成空字符串。