一、扩展运算符
扩展运算符的表示法是：... （三个点），它可以将数组，字符串，函数返回值，有部署Iterator 接口的对象等转化为对应的参数序列。
扩展运算符的应用：
1、合并数组
var arr1 = [1, 2];
var arr2 = [3];
var arr3 = [4, 5];
// ES5 数组合并写法
arr1.concat(arr2, arr3); // [1, 2, 3, 4, 5]
// ES6 数组合并写法
[...arr1, ...arr2, ...arr3]; // [1, 2, 3, 4, 5]
2、与解构赋值结合使用
let [first, ...rest] = [1, 2, 3, 4, 5];
first; // 1
rest; // [ 2, 3, 4, 5]
const [first, ...rest] = ["yuan"];
first; // "yuan"
rest; // []
const [one, ...another] = [];
one; // undefined
another; // []
这里注意，rest参数后面就不能在设置参数了。
3、函数返回值
在函数返回多个值时，如返回数组或对象，使用扩展运算符可以解决：
let dateFields = [1970, 0, 1];
let d = new Date(...dateFields);
d; // Thu Jan 01 1970 00:00:00 GMT+0800 (中国标准时间)
let dateFields = readDateFields(database);
let d = new Date(...dateFields);
上面代码是从数据库里取出一段数据，然后直接传入构造函数Date里。
4、字符串
[...'yuan']; // ["y", "u", "a", "n"]
5、具有Iterator 接口的对象
任何具有Iterator 接口的对象，如类数组、Set和Map数据结构等，都可以通过扩展运算符转化为真正的数组，那些没有Iterator 接口的数据结构，是不能使用扩展运算符转为数组的。
var nodeList = document.querySelectorAll('div');
var arrList = [...nodeList];
let map = new Map([
["animal", "yuan"],
["type", "monkey"]
]);
console.log([...map.entries()]);
// ["animal", "yuan"]
// ["type", "monkey"]
二、数组方法扩展
1、Array.from()
从一个类似数组或者可迭代对象中创建一个新的数组实例。
这里的类似数组指：拥有 length 属性和若干索引属性的任意对象。
可迭代对象指：可以获取元素中的对象，如Map 和Set 等。
使用方式：Array.from(arrayLike, mapFn, thisArg);
三个参数代表如下：
arrayLike：要转化成数组的目标对象（类似数组或者可迭代对象）；
mapFn：可选参数，新数组中的每个元素都会调这个回调函数，类似数组中的map 方法；
thisArg：可选参数，执行回调函数 mapFn 的 this 对象。
代码案例：
// 1、字符串转数组
Array.from("yuan"); // ["y", "u", "a", "n"]
// 2、Set 对象转数组
let s = new Set(["yuan", "monkey"]);
Array.from(s); // ["yuan", "monkey"]
// 3、Map 对象转数组
let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); // [[1, 2], [2, 4], [4, 8]]
// 4、arguments 类数组对象转数组
function arg() {
return Array.from(arguments);
}
arg(2,3,4); // [2, 3, 4]
// 5、启用第二个参数
let a = [1, 2, 3];
Array.from(a, x => x * x); // [1, 4, 9]
// 6、与length 的关系
Array.from({ length : 3}, (v, i) => i * i); // [0, 1, 4]
2、Array.of()
定义：将一组值转化为数组，这一组值的个数为任意个数。
用法：Array.of(el1, el2, ..., elN);
elN: 指任意个参数；
与Array() 的区别：
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个包含 7 个 undefined 元素的数组。
代码案例：
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
三、数组实例扩展
1、copyWithin()：复制数组的一部分到同一数组的另一个位置，返回的是修改后的数组，不会修改数组的大小。
使用方式：arr.copyWithin(target, start, end);
target（必选）：目标索引，指从该位置开始替换数据。若为负数，则从末尾开始算起。
start（可选）：开始复制元素的起始位置，默认为0，若为负数，则从末尾开始算起。
end（可选）：开始复制元素的结束位置，默认为数组的长度，若为负数，则从末尾开始算起。
[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]
[].copyWithin.call({length: 5, 3: 1}, 0, 3);
// {0: 1, 3: 1, length: 5}
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 兼容写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
2、find() 和 findIndex()：找出第一个符合条件的数组成员。
使用方法：arr.find(callback[, thisArg])
calback：数组的每个元素都执行这个回调函数，且这个回调函数包含三个参数，分别是：
element：当前的值；
index：数组当前元素的位置；
array：数组本身。
thisArg（可选）：指定 callback 的 this。
代码案例：
// 用对象的属性查找数组中的对象
var inventory = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
];
function findCherries(fruit) {
return fruit.name === 'cherries';
}
console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
// 寻找数组中的质数
function isPrime(element, index, array) {
var start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) {
return false;
}
}
return element > 1;
}
console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5
3、fill()：填充数组
使用方法：arr.fill(value, start, end);
value：要填充的值；
start：填充的起始位置，填充不包括第一个位置，默认为0；
end：填充结束位置，填充包括最后一个位置，默认数组的长度。
代码案例：
[1, 2, 3].fill(4) // [4, 4, 4]
[1, 2, 3].fill(4, 1) // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2) // [1, 4, 3]
[1, 2, 3, 4].fill(4, 1, 3) // [1, 4, 4, 4]
[1, 2, 3].fill(4, 1, 1) // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2) // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN) // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({length: 3}, 4) // {0: 4, 1: 4, 2: 4, length: 3}
4、entries()、values()、keys()：遍历数组每个元素的键值对、值、键
代码案例：
// entries
var arr = ["y", "u", "a", "n"];
var iterator = arr.entries();
for (let v of iterator) {
console.log(v);
}
// [0, "y"]
// [1, "u"]
// [2, "a"]
// [3, "n"]
// values
var arr = ["y", "u", "a", "n"];
var iterator = arr.values();
for (let v of iterator) {
console.log(v);
}
// y
// u
// a
/ /n
// keys
var arr = ["y", "u", "a", "n"];
var iterator = arr.keys();
for (let v of iterator) {
console.log(v);
}
// 0
// 1
// 2
// 3
5、includes()：判断数组是否包含某个特定的值，返回的是布尔值
使用方法：arr.includes(value, fromIndex)
value：需要查找的值
fromIndex：查找开始的位置，若为负值，查找开始的位置为数组的长度length + 这个负值fromIndex，默认为0。
代码案例：
var arr = ["y", "u", "a", "n"];
arr.includes("y"); // true
arr.includes("z"); // false
四、总结
1、掌握扩展运算符的使用。
2、掌握数组方法和数组实例方法的扩展。
章节目录
1、ES6中啥是块级作用域？运用在哪些地方？
2、ES6中使用解构赋值能带给我们什么？
3、ES6字符串扩展增加了哪些？
4、ES6对正则做了哪些扩展？
5、ES6数值多了哪些扩展？
6、ES6函数扩展（箭头函数）
7、ES6 数组给我们带来哪些操作便利？
8、ES6 对象扩展
9、Symbol 数据类型在 ES6 中起什么作用？
10、Map 和 Set 两数据结构在ES6的作用
11、ES6 中的Proxy 和 Reflect 到底是什么鬼？
12、从 Promise 开始踏入异步操作之旅
13、ES6 迭代器(Iterator)和 for...of循环使用方法
14、ES6 异步进阶第二步：Generator 函数
15、JavaScript 异步操作进阶第三步：async 函数
16、ES6 构造函数语法糖：class 类
网友评论