ES6 数组扩展

程序员文章站 2023-12-22 12:29:34

...

扩展运算符|展开运算符

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

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()源码

ES6 数组扩展

扩展运算符|展开运算符

API

detial

源码

es6函数扩展

es6——异步编程的解决方案 Promise

PHP使用GETDATE获取当前日期时间作为一个关联数组的方法

如何安装PHP扩展libzookeeper

ES6 数组扩展

删数组有得有反复值

Javascript功能扩展

ES6 --- 数组扩展

关于php 创建数组的10篇课程推荐

java利用数组求平均值,最大值,最小值