ES6 数组给我们带来哪些操作便利？

一、扩展运算符[1]
扩展运算符的表示法是：... （三个点），它可以将数组，字符串，函数返回值，有部署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"]

二、数组方法扩展[2]
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]

三、数组实例扩展[3]
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 类

  1. 一、扩展运算符 ↩

  2. 二、数组方法扩展 ↩

  3. 三、数组实例扩展 ↩

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,723评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,003评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,512评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,825评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,874评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,841评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,812评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,582评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,033评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,158评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,789评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2赞 352

推荐阅读更多精彩内容

  • ES6&数组扩展
    ES6数组扩展 1.Array.from() 定义：Array.from()用于将两类对象转换成真正的数组：类数组...
    lijaha阅读 427评论 0赞 0
  • ES6 数组扩展 JavaScript
    [JavaScript数组]一篇中介绍了ES6之前的数组方法。本篇介绍一下ES6里新增的数组方法。 keys，va...
    sponing阅读 300评论 0赞 0
  • Javascript常用的数组方法
    Javascript有很多数组的方法，有的人有W3C的API，还可以去MDN上去找，但是我觉得API上说的不全，M...
    顽皮的雪狐七七阅读 4,075评论 0赞 6
  • 亲子日记
    2017.12.31 星期日 晴 17年的最后一天，回顾这一年，幸福的，难忘的，感动的，要感谢的人和事...
    瑞瑞琪琪阅读 122评论 0赞 0