扩展运算符(...),用于将数组转化为逗号分隔的参数序列。

...实现数组的拷贝:

数组是一维数组时,扩展运算符可以深拷贝一个数组(对象同理):

let arr = [1, 2, 3, 4, 5, 6];
let arr1 = [...arr];arr == arr1  // false

当数组为多维时,数组中的数组变成浅拷贝(对象同理):

let arr = [1, 2, 3, 4, 5, 6, [1, 2, 3]];
let arr1 = [...arr];
arr1.push(7);
arr1[arr1.length - 2][0] = 100;
console.log(arr); //[1, 2, 3, 4, 5, 6,[100, 2, 3]]
console.log(arr1); //[1, 2, 3, 4, 5, 6, [100, 2, 3],7]

合并数组:

[...arr,...arr2,...arr3]

// 结合解构赋值,生成剩余数组 -- 扩展运算符只能置于参数最后
let [one,...rest] = [1,2,3,4,5];
one   // 1
rest   // [2,3,4,5]

// 扩展字符串成数组

[...'babe']   // ["b", "a", "b", "e"]

// 可以把类数组对象转换为真正的数组function convert2Arr(){return [...arguments];
}let result = convert2Arr(1,2,3,4,5);
result // [1,2,3,4,5]

Array.from()

用于将类数组对象、可遍历的对象转为真正的数组

// 类数组对象
let obj = {0: 'hello',1: 'world',4: 'outof bounds data',length: 3
}Array.from(obj);   // ["hello", "world", undefined]
// 根据属性名对应到数组的index, 超过length部分舍弃。没有对应的属性,置为undefined

// 注意:// Array.from()是一个很不严谨的角色,只要对象含有length属性,且值为正整数就能转,不保证转出来的东西质量是否符合要求。Array.from({user:'babe',length:5})// [undefined, undefined, undefined, undefined, undefined]// Array.from()可接收第二个参数,用于对数组的每一项进行处理并返回Array.from([1,2,3],x=>x*x)// [1, 4, 9]
        Array.from([1,2,3],x=>{x*x})// [undefined, undefined, undefined]  --切记处理函数中一定要返回// Array.from()还可接收第三个参数,这样在处理函数中就可以使用传进去的对象域中的值let that = {user:'babe'}let obj = {0:'babe',1:'zhangsan',2:'lisi',length:3}let result = Array.from(obj,(user) =>{if(user == that.user){return user;}return 0;},that);result   // ["babe", 0, 0]

 Array.of()

用于将一组值转换为数组,存在的意义是替代以构造函数的形式创建数组,修复数组创建因参数不一致导致表现形式不同的伪bug

// 以构造函数的形式创建数组new Array();
new Array(size);   // 参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。
new Array(element0, element1, ..., elementn);   // 参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

以下是对比:

// 原始方式
new Array()   // []
new Array(2)   // [empty × 2]
new Array(1,2,3,4,5)   // [1, 2, 3, 4, 5]// 先进改良方式
Array.of();   // []
Array.of(2);   // [2]
Array.of(1,2,3,4,5);   // [1, 2, 3, 4, 5]

Array.find() 和 Array.findIndex()

find方法用于查找第一条符合要求的数据,找到返回该数据,否则返回undefined

findIndex则用于找到第一条符合要求的数组位置,找到返回index,否则返回-1

arr.find(function(currentValue, index, arr){}[, thisArg])
arr.findIndex(function(currentValue, index, arr){}[, thisArg])// value(数组遍历到的当前值,必须)、index(当前下标,可选)、arr(当前数组,可选)
// thisArg是执行前边callback函数时作为this对象的值,如果这个参数为空, "undefined" 会传递给 "this" 值

例子:

var arr = [1,2,7,8,34,2,15,8];
var v = arr.find((value,index,arr) => {return value > 10;
});
console.log('v='+v);   // v=34
var i = arr.findIndex((value,index,arr) => {return value > 3;
});
console.log('i='+i);   // i=2

Array.includes()

// 检查数组中是否包含某个元素
[1,2,NaN].includes(NaN)

Array.copyWithin()

array.copyWithin(target, start, end)
// target    必需。复制到指定目标索引位置。
// start    可选。元素复制的起始位置。
// end    可选。元素复制的终止位置 (默认为 array.length)。如果为负值,表示倒数。
[1,2,3,4,5,6,7].copyWithin(0,3,5)
//  [4, 5, 3, 4, 5, 6, 7]
["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"].copyWithin(2, 0, 2)
//  ["Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya"]

Array.entries()

Array.entries()返回一个数组的迭代对象,该对象包含数组的键值对数组对象。

var array1 = ['a', 'b', 'c'];
var iterator1 = array1.entries();console.log(iterator1.next().value);
// Array[0, "a"]
console.log(iterator1.next().value);
// Array[1, "b"]

Array.values()

Array.values()方法返回一个数组的迭代对象,该对象包含数组的每一项

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();// 以下两种任选一种
for (const value of iterator) {console.log(value);   // "a" "b" "c"
}
console.log(iterator.next().value);   // "a"

Array.keys()

Array.keys()返回一个包含数组中每个索引的迭代对象

var array1 = ['a', 'b', 'c'];
var iterator = array1.keys(); // 以下两种任选一种
for (let key of iterator) {console.log(key);   // 0 1 2
}
console.log(iterator.next().value);   // 0

Array.fill()

Array.fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

arr.fill(value, start, end)
// value:填充值,必选
// start:填充起始位置,可选,默认从0开始
// end:填充结束位置,可选, 

原文:

https://segmentfault.com/a/1190000014784362

转载于:https://www.cnblogs.com/xjy20170907/p/11448200.html

ES6对于数组的扩展相关推荐

  1. [ES6] 细化ES6之 -- 数组的扩展

    扩展运算符 扩展运算符 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列.允许一个表达式在原地展开 // 定义一个数组 var arr ...

  2. ES6查漏补缺【数组的扩展】

    我的ES6 数组的扩展 1.先简单复习一下ES5中的数组方法 2.静态方法 ES5:Array.isArray() ES6:array.from() ES6:array.of() 3.数组实例方法 i ...

  3. ES6标准学习: 4、数组的扩展

    数组的扩展 一.类数组对象与可遍历对象转换为数组 Array.from()方法用于将类数组对象.可遍历对象转换为数组,其中可遍历对象包括es6新增的set和map结构 所谓的类数组对象,本质特征是必须 ...

  4. ES6的新特性(8)——数组的扩展

    数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...

  5. Es6学习笔记(7)----数组的扩展

    参考书<ECMAScript 6入门> http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数 ...[1,2,3] //控制 ...

  6. 第八节:ES6为数组做了哪些扩展?

    广东的小伙伴大家还好吗,天气都热成狗了! 今天就不发预告了,直接推送图文. 前面讲了字符串和数值的扩展,今天要讲的是:数组的扩展.不知道大家能否跟得上这个节奏,你们在阅读中对讲解有存在疑惑,记得留言提 ...

  7. 【ES6】对象、函数、数组的扩展

    对象的扩展 ES6允许直接写入变量和函数,作为对象的属性和方法.这时,属性名为变量名, 属性值为变量的值. let name = 'tom'; let age = 12; let obj = {nam ...

  8. ES6学习(五)—数组的扩展

    ES6学习(五)-数组的扩展 挑重点 文章只列举了一部分 完整版请看阮一峰ES6入门教程 点我查看阮一峰ES6入门教程 一.扩展运算符 扩展运算符(spread)是三个点(-).它好比 rest 参数 ...

  9. ES6 入门教程 9 数组的扩展 9.1 扩展运算符

    ES6 入门教程 ECMAScript 6 入门 作者:阮一峰 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 ES6 入门教程 9 数组的扩展 9.1 扩展运算符 9.1.1 含义 9.1 ...

最新文章

  1. 利用 SIFT 实现图像拼接
  2. 第一行代码第一章——你的第一行Android代码
  3. Problem - 4828 Grids
  4. 流程DEMO-补打卡
  5. 【转】有的共享软件赚了一百万美元,而为什么你没有?我的软件推广成功之路...
  6. 第三十二期:MySQL常见的图形化工具
  7. symfony php 亿万,php – symfony中的内存不足错误
  8. grDevices | 如何在图形中使用数学表达式作为标注文本
  9. python stdout_python 之sys.stdout小记
  10. 2021-2025年中国云计费行业市场供需与战略研究报告
  11. python全套教程大全-千锋出品全套python视频教程,400大全集,你了解吗?
  12. 磁盘分区和目录的区别是什么
  13. 自己的域名申请和google账户申请
  14. 启科量子国产量子编程软件项目或将启动开源计划
  15. 洛谷入门题 深基2 例5~例8
  16. 计算机科学与技术真的会掉头发吗,大学里容易“掉头发”的3个专业,为了防秃头,大家慎重报考!...
  17. 1-2 实验2 点对点通信
  18. [论文笔记] Detection of Glottal Closure Instants from Speech Signals: CNN Method
  19. python艺术画_Python也能绘制艺术画?这里有一个完整教程
  20. Layui表格实现显示空白行数据

热门文章

  1. Entity Framework底层操作封装V2版本号(2)
  2. servlet学习笔记二
  3. Web开发工具大集合
  4. 通过端口映射突破防火墙
  5. windows添加删除程序打不开解决方案
  6. Android应用程序管理系列(二)——PackageManager 包管理者
  7. Mr.J-- 简单生日页面制作
  8. 利用BP神经网络预测水道浅滩演变
  9. ubuntu的两种网络连接模式
  10. 微软解释:关于Outlook 2007的争议