ES6 数组扩展

最新推荐文章于 2021-10-14 21:15:00 发布
最新推荐文章于 2021-10-14 21:15:00 发布
阅读量183 收藏
点赞数
分类专栏： JS 文章标签： ES6 数组 API
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuyujin1997/article/details/89176019
版权

扩展运算符|展开运算符

...不仅可以操作对象，也可以操作数组。

var arr1 = [1, "asd", {name:"张三"}];
var arr2 = [...arr1];
console.log(arr1[2], arr2[2]);  // {name: "张三"} {name: "张三"}
arr1[2].name = "李四";
console.log(arr1[2], arr2[2]);  // {name: "张三"} {name: "张三"}

可见，...运算符是浅拷贝。

合并数组：

console.log(...[1, , 3], ...[4, 5]);  // 1 undefined 3 4 5

API

  • Array.of(...items) 将参数中所有值作为元素形成数组

  • Array.from(arrayLike, ?mapFn, ?thisArg) 从类数组对象|可迭代对象中创建一个新的数组实例。

  • arr.find(predicate, ?thisArg) 找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 undefined。

  • arr.findIndex(predicate, ?thisArg) 找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 -1。

  • arr.fill(value, ?start, ?end) 将数组中指定区间的所有元素的值，都替换成某个固定的值。

  • arr.copyWithin(target, start, ?end) 在数组内部，将一段元素序列拷贝到另一段元素序列上，覆盖原有的值。

  • arr.keys(o) 返回一个数组迭代器对象，该迭代器会包含所有数组元素的键。

  • arr.values(o) 返回一个数组迭代器对象，该迭代器会包含所有数组元素的值。

  • arr.entries(o) 返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。

  • arr.includes(searchElement, ?fromIndex) 判断当前数组是否包含某指定的值。

  • arr.flat(depth) 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

  • arr.flatMap(callback, ?thisArg) 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

detial

  • Array.of(...items) - Array

    var arr = Array.of(1, 2, 3, 4);
console.log(arr);       // (4) [1, 2, 3, 4]
var arr = Array.of("asd", false, null, undefined, {name:"JT"});
console.log(arr);       // (5) ["asd", false, null, undefined, {…}]
var arr = Array.of(3);  // 只传入一个参数，且为Number类型。
console.log(arr);       // [3]

    JS中Array()和Array.of()的区别

  • Array.from(arrayLike, ?mapFn, ?thisArg) - Array

    • args:
      • arrayLike 想要转换成数组的伪数组对象|可迭代对象。
        • 伪数组对象: 有一个length属性和若干索引属性(名为数值，值为任意类型)的任意对象。
          伪数组对象必须含有length属性，且元素属性名必须是数值|可转换为数值。
        • 可迭代对象: 可以获取对象中的元素，如Map和Set等。
      • mapFn 数组中的每个元素会执行的回调函数(新数组的元素是经过处理的返回值)。
      • thisArg 执行回调函数mapFn时的this对象
    • code
      三个参数
    // arrayLike
console.log(Array.from([1,2,3]));  // (3) [1, 2, 3]

// mapFn
console.log(Array.from([1,2,3], value=>value+1)); // (3) [2, 3, 4]

// thisArg
var aaa = {
  do: function(n) {return n * 2;}
};
var arrayLike = [1, 2, 3];
var arr = Array.from(arrayLike, function(value) {
  return this.do(value);  // mapFn中的this会被置换。
}, aaa);
console.log(arr);   // (3) [2, 4, 6]

    NOTE: 无法在箭头函数表达式的外部动态置换其内部运行时的this对象
    所以，如果有置换函数内部this对象的需求，就应该使用常规的函数写法。

    转换伪数组对象

    var arr = Array.from({
  0: "1",
  1: "2",
  2: "3",
  length: 3
});
console.log(arr); // (3) ["1", "2", "3"]

var arr = Array.from({
  0: "1",
  1: "2",
  2: "3",
  length: 2
});
console.log(arr); // (2) ["1", "2"]

var arr = Array.from({
  0: "1",
  1: "2",
  2: "3",
});
console.log(arr); // (2) []
// 可见，length属性是一个“指标”。若length不存在或为0，会返回一个空数组(含0个元素)。

    转换可迭代对象

    // String
console.log(Array.from("hello")); // (5) ["h", "e", "l", "l", "o"]

// Set
var set = new Set([1, 2, 3, 4]); // arr可迭代，可用于构造Set对象。
console.log(Array.from(set)); // (4) [1, 2, 3, 4]

// Map
var map = new Map([["k1", "v1"], ["k2", "v2"]]);
// map.set("k1", "v1").set("k2", "v2");
var arr = Array.from(map);
console.log(arr);   // (2) [Array(2), Array(2)]
arr = arr.flat();
console.log(arr);   // ["k1", "v1", "k2", "v2"]

    NOTE: Set和Map对象的赋值

    • Set对象添加元素
      • new Set().add(1).add(2)
      • new Set([1, 2])
    • Map对象添加键值对
      • new Map().set("k1", "v1").set("k2", "v2")
      • new Map([["k1", "v1"], ["k2", "v2"]])

  • arr.find(predicate, ?thisArg) 返回找到的数组元素值(找不到就返回undefined)
    preficate: function(element, index, array)
    当断言为真时(predicate()返回true)，返回对应的element值。

    var arr = [1, 2, 3, 4, 5];
arr.find(function(element, index, array) {
  // console.log(`arr[${index}] = ${element}`);
  return element > 2;   // 3 这是元素值
  // return index == 1;       // 2
});

    arr.find()当断言为真时，返回的是元素的值element。
    arr.findIndex()当断言为真时，返回的是元素的下标index。
    若有多个元素满足断言，只返回第一个。

  • arr.findIndex(predicate, ?thisArg) 返回找到的数组元素的下标(找不到就返回-1)

    var arr = [1, 2, 3, 4, 5];
arr.findIndex(function(element, index, array) {
  return element > 2;   // 2 这是下标
  // return index == 1; // 1
});

  • arr.fill(value, ?start, ?end) 返回arr(经过修改)
    将下标在[start, end)区间内的元素值用指定的value填充|替换(直接操作原数组)。
    默认值：start == 0, end == arr.length(即填充所有元素)

    var arr = Array.from("Hello");
console.log(arr);   // (5) ["H", "e", "l", "l", "o"]

arr.fill("你好", 2, 4);
console.log(arr);   // (5) ["H", "e", "你好", "你好", "o"]
arr.fill(666);
console.log(arr);   // (5) [666, 666, 666, 666, 666]

  • arr.copyWithin(target, start, ?end) 返回arr(经过修改)
    用索引在[start, end)区间内的元素，依次覆盖数组的元素(从target开始)
    end默认值等于length。

    Array.from("0123456789");
// (10) ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
Array.from("0123456789").copyWithin(2, 5);
// (10) ["0", "1", "5", "6", "7", "8", "9", "7", "8", "9"]
Array.from("0123456789").copyWithin(2, 5, 7);
// (10) ["0", "1", "5", "6", "4", "5", "6", "7", "8", "9"]

  • 遍历
    keys()可遍历数组的索引index。
    values()可遍历数组的元素值element。
    entries()可遍历数组的[index, element]对。
    三者都返回array Iterator类型的对象。
    不同的是：iterator.next().value。分别是[index], [element], [index, element]。
    各有两种遍历方式：for...of和普通for。

    • arr.keys(o) - Array Iterator

      var arr = Array.from("abc");

var iterator = arr.keys();
for (var index of iterator) {
  console.log(`${index} ${arr[index]}`);
}

var iterator = arr.keys();  // 重新获取iterator
for (var i = 0; i < arr.length; i++) {
  var index = iterator.next().value;
  console.log(`${index} ${arr[index]}`);
}

      iterator.next()返回一个固定格式的对象{value: xxx, done: 布尔值}。

    • arr.values(o) - Array Iterator

      var arr = Array.from("abc");
var iterator = arr.values();
for (var value of iterator) {
  console.log(value);
}

var iterator = arr.values();
for (var i = 0; i < arr.length; i++) {
  console.log(iterator.next().value);
}

    • arr.entries(o) - Array Iterator

      var arr = Array.from("abc");
var iterator = arr.entries();
for (var entry of iterator) {
  console.log(entry);
}

// for..of中的entry实际为[index, element]，可替换。
var iterator = arr.entries();
for (var [index, element] of iterator) {
  console.log(index, element);
}

var iterator = arr.entries();
for (var i = 0; i < arr.length; i++) {
  console.log(iterator.next().value);
}

// iterator.next() 是 {value: [index, element], done: 布尔值};
// iterator.next().value 是 [index, element];
var iterator = arr.entries();
for (var i = 0; i < arr.length; i++) {
  var value = iterator.next().value;
  console.log(value[0], value[1]);
}

  • arr.inlcudes(searchElement, ?fromIndex)

    var arr = Array.from("abc");
console.log(arr.includes("b"));     // true
console.log(arr.includes("b", 2));  // false

    NOTE
    arr.include(searchElement, ?fromIndex) arr中是否有指定的元素值。
    set.has(value) set中是否有指定的value
    map.has(key) map中是否有指定的key

  • arr.flat(depth) 返回arr(经过修改)
    depth默认为1。

    [1, [2, [3, [4, [5, 6, 7]]]]].flat()  // 相当于flat(1)
// (3) [1, 2, Array(2)]
[1, [2, [3, [4, [5, 6, 7]]]]].flat(0) // 不操作
// (2) [1, Array(2)]
[1, [2, [3, [4, [5, 6, 7]]]]].flat(1)
// (3) [1, 2, Array(2)]
[1, [2, [3, [4, [5, 6, 7]]]]].flat(2)
// (4) [1, 2, 3, Array(2)]
[1, [2, [3, [4, [5, 6, 7]]]]].flat(Infinity)  // 深度递归层数不确定，用Infinity(仅此处)。
// (7) [1, 2, 3, 4, 5, 6, 7]

  • arr.flatMap(callback, ?thisArg) 返回新数组，每个元素都是回调函数的返回值。(解构深度depth为1)。
    callback: function(value, index, array) {...}

    var arr = [1, 2, 3];

console.log(JSON.stringify(arr.flatMap(value => value*2 )));    // [2,4,6]
console.log(JSON.stringify(arr.flatMap(value => [value*2] )));  // [2,4,6]
console.log(JSON.stringify(arr.flatMap(value => [[value*2]] )));// [[2],[4],[6]]

console.log(JSON.stringify(arr.map(value => value*2 )));        // [2,4,6]
console.log(JSON.stringify(arr.map(value => [value*2] )));      // [[2],[4],[6]]
console.log(JSON.stringify(arr.map(value => [[value*2]] )));    // [[[2]],[[4]],[[6]]]

    arr.flatMap(callback, ?thisArg)和arr.map(callback, ?thisArg)返回值有差异。

源码

ES6 Array.from()源码

锦天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入浅出ES6（二）：迭代器和for-of循环
lgh1117的专栏
04-28 1808
我们如何遍历数组中的元素？20年前JavaScript刚萌生时，你可能这样实现数组遍历： for (var index = 0; index myArray.length; index++) { console.log(myArray[index]); } 自ES5正式发布后，你可以使用内建的forEach方法来遍历数组： myArray.forEach(function (valu
ES6---数组array新增方法
Wbiokr的博客
03-25 3万+
let与const命令是es6标准最基础也是最常见的命令符 ,在es5的js标准中，定义变量只能使用var命令符，var命令 符只能进行全局与函数作用域的变量定义，es6新增的let则改变了这一现状。●find :let arr=[1,2,234,'sdf',-2]; arr.find(function(x){ return x<=2; })//结果：1，返回第一个符合条件的x值 arr.f
数组方法
qq_53784895的博客
04-27 155
1 arr.push() 从后面添加元素，返回值为添加完后的数组的长度 let arr = [1,2,3,4,5] console.log(arr.push(5)) // 6 console.log(arr) // [1,2,3,4,5,5] 2 arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素 let arr = [1,2,3,4,5] console.log(arr.pop()) // 5 console.log(arr) //[1,2,3,4] 3 arr.shift(
JS ES6新增 数组常用方法总结
qq_42044542的博客
06-06 1002
es5：concat 、join 、push、pop、shift、unshift、slice、splice、substring和substr 、sort、 reverse、indexOf和lastIndexOf 、every、some、filter、map、forEach、reduce es6：find、findIndex、Array.from、includes、Array.of、fill、copyWithin ES6方法普遍浏览器兼容性如上表，有兼容性需要的小伙伴谨慎使用，或使用babel 将e.
JS(ES6)合并数组
N years的博客
08-30 5万+
　　我们在项目过程中，有时候会遇到需要将两个数组合并成为一个的情况。 　　比如： var a = [1,2,3]; var b = [4,5,6];        有两个数组a、b，需求是将两个数组合并成一个。方法如下： 　　1、concat 　　　　js的Array对象提供了一个叫concat()方法，连接两个或更多的数组，并返回结果。 var c = a.concat(b);...
ES6数组的扩展详解
08-30
主要介绍了ES6数组的扩展,结合实例形式详细对比分析了ES6数组的新增方法与相关使用技巧,需要的朋友可以参考下
es6数组之扩展运算符操作实例分析
10-15
主要介绍了es6数组之扩展运算符操作,结合实例形式总结分析es6数组扩展运算符具体原理、实现方法及操作注意事项,需要的朋友可以参考下
ES6中的数组扩展方法
09-01
主要介绍了ES6中的数组扩展方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
ES6 新增的 Array 操作
包磊磊的博客
05-14 710
https://juejin.im/post/5c846af3f265da2da835a875 1、find 和 findIndex find() 传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回这个元素，并且终止搜索。 const arr = [1, "2", 3, 3, "2"] console.log(arr.find(n => typeof n === "...
ES6-数组
是一座岛
05-16 1267
一. 数组创建 概述 Array.of(x,…) ：将参数中所有值作为元素形成数组 Array.from(x,fn) ：将类数组对象或可迭代对象转化为数组 类数组对象：必须含有lenght属性，且元素属性名必须是数值或者可转换数值的字符 使用方法 // 1.创建数组 let arr1 = Array.of(1,2,'xu') // [1, 2, "xu"] let arr2 = new Arr...
【ES6】操作数组的常用方法
qq_45516629的博客
03-30 694
原文章地址：https://www.jianshu.com/p/e1b43e56de08#fnref1 除了 Object 之外，Array 类型恐怕是 ECMAScript 中最常用的类型了；数组的每一项可以保存任何类型的数据；数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。 （一）数组的创建（二）数组自带属性（三）检测是否为数组（四）数组元素的增加与删除（五）数组与...
ES6数组的各种方法
PeaYing的博客
08-31 4万+
1.ES6数组的各种方法 2.forEach（）函数 ①数组名.forEach（function（数组中一个元素的值）{对这个值进行处理....}） ②数组名.forEach（test）test为方法名，不用加（），把函数引用传进去 ③利用函数引用这种方式的话，会自己把每个值传进去，不需要用（）传进去 3.map（）方法 ①map（）方...
es6创建新数组的几种方式
wanglicc的博客
02-17 3572
1 Array(数量) let array = Array(5); console.log(array) Array.of(value) var array = Array.of(1,2,3,5,5); console.log(array) Array(数量).fill(value) var array = Array(5).fill(7); console.log(array) let ...
Javascript ES6 学习笔记 一： 数组Array新增方法
qiu7qiu7的博客
10-03 306
数组Array常用方法以及ES6中新增的方法： 1.Array.prototype.forEach() forEach()方法是在ES5中加入到ES规范中的，他的作用就是就是进行循环遍历，基本的语法形式如下： let arr = ['a','b','c','d']; arr.forEach(function(val, index, arr){ console.log(this,v...
ES6展开数组的方式
u010234868的专栏
10-14 1314
ES6之前展开数组的方式1： const arr = [1, 2, 3]; console.log( arr[0], arr[1], arr[2] ) // 1 2 3 方式2： const arr = [1, 2, 3]; console.log.apply(console, arr); // 1 2 3 ES6展开数组可以使用rest参数的形式： const arr = [1, 2, 3]; console.log(...arr); // 1 2 3 ...
ECMAScript6（ES6）标准之数组Array扩展方法
尐轩web前端网络日志
12-19 1万+
ES6对于数组又扩展了很多方法 包括静态方法和原型链上添加的方法 让我们可以更方便的操作数组静态方法Array.from()这个方法可以将 类数组对象（有length属性的对象）和可遍历对象（ES6新增的Set与Map数据结构） 转化为真正的数组在ES6之前，要想让类数组对象变成数组 通常做法是调用slicelet arrLike = { 0: 10, 1: 20,
JS中的4种for循环
热门推荐
wuyujin1997的博客
03-22 18万+
分类 普通for循环 自行指定循环次数。 for (i = 0; i < loopTimes; i++) { console.log(i); } for..in循环 属历史遗留，用于遍历对象的属性(数组的索引值也算属性)。 但有一个缺点：如果手动向数组添加成员属性，则： 虽然数组的length不变，但用for..in遍历数组会遍历到那些新定义的属性。 for (property...
JS中Map对象的创建，遍历(7种)和使用(增删改查)
wuyujin1997的博客
03-22 5万+
intro JS中的Object类型实际上是一种键值对映射(key-value pairs)。 但是JS中这种键值对映射有点问题：key只能为string类型。 为了和其他编程语言有相似的数据结构(如Map, Dict等)，ES6中新增了Map类型。 API Map() 构造方法。 size 成员方法，返回map的大小。 set(key, value) - Map 新增键值对/修改值，可“链式调用...
JS中Map和Array的转换
wuyujin1997的博客
04-07 5万+
Map和Array的转换 var map = new Map(); map.set(1, "111"); map.set(2, "222"); map.set(3, "333"); // map -> array var arr = Array.from(map); // 二维数组 console.log(arr.flat()); // 压平(成为一维数组) // (6) [1, ...
es6数组去重
最新发布
05-31
ES6 数组去重可以使用 Set 数据结构来实现，Set 对象允许你存储任何类型的唯一值，这样就可以通过将数组转换为 Set 来达到去重的效果。 具体实现如下： ``` const arr = [1, 2, 3, 3, 4, 4, 5]; const uniqueArr =...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值