es6新增的数组方法

时间：2021-01-29 12:06:36 阅读：0 评论：0 收藏：0 [点我收藏+]

数组创建

Array.of()

将参数中所有值作为元素形成数组。

如：

console.log(Array.of(1, 2, 3, true,‘www‘)); // [1, 2, 3, true, ‘www‘]

console.log(Array.of())   //[]

Array.from()

将【类数组对象】或【可迭代对象】转化为数组。

Array.from(arrayLike)
Array.from(arrayLike, mapFn) //==》 Array.from( arrayLike.map(mapFn) ）
Array.from(arrayLike, mapFn, thisArg) //==》 Array.from( arrayLike.map(mapFn.bind(thisArg)) ）

arrayLike 【类数组对象】或【可迭代对象】

mapFn 【map 函数】

thisArg 【 map 函数】的this对象

/*1类*/
console.log(Array.from([1, 2, 3])); // [1, 2, 3] 

/*2类*/
console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]

/*3类*/
let map = {
    do: function(n) {
        return n * 2;
    }
}
let arrayLike = [1, 2, 3];
console.log(Array.from(arrayLike, function (n){
    return this.do(n);
}, map)); // [2, 4, 6]

类数组对象

必须含有 length 属性
且【元素属性名】必须是【数值】或者【可转换为数值的字符】

Array.from(arraylike) 转化成数组时：

arraylike的length作为转化后的数组的length
如果arraylike转化后的项不够，缺少的项用undefined补齐；
如果arraylike转化后的项数量>length,只保留索引 < length

Array.from({
  0: ‘1‘,
  1: ‘2‘,
  2: 3,
});

//返回：[]




 Array.from({
  0: ‘1‘,
  1: ‘2‘,
  2: 3,
  length:3
});

//返回：["1", "2", 3]

Array.from({
  a: ‘1‘,
  1: ‘2‘,
  2: 3,
  length:3
});

// 返回：[undefined, "2", 3]


Array.from({
  a: ‘1‘,
  ‘1‘: 2,
  3: ‘str‘,
  2: 3, 
  length:4
});
// 返回：[undefined, 2, 3, "str"]



//上面的对象如果length设置的不对

Array.from({
  a: ‘1‘,
  ‘1‘: 2,
  3: ‘str‘,
  2: 3, 
  length:3
});
// 返回：[undefined, 2, 3]


Array.from({
  a: ‘1‘,
  ‘1‘: 2,
  3: ‘str‘,
  2: 3, 
  length:5
});
// 返回：[undefined, 2, 3, "str", undefined]

可迭代对象Map转成数组

会转成二维数组
map的每组【键值对】转化成一个【一维数组】：[key1, value1]
每个【键值对组成的一维数组】作为二维数组的单元：[ [key1,value1],[key2,value2],...]

Map对象没有length,有size, 转化后数组length== Map对象的size

let map = new Map();
map.set(‘key0‘, ‘value0‘);
map.set(‘key1‘, ‘value1‘);
console.log(Array.from(map)); 
// [[‘key0‘, ‘value0‘],[‘key1‘,‘value1‘]]

Set对象转化成数组

Set对象没有length,有size, 转化后数组length== Set对象的size

let arr = [1, 2, 3];
let set = new Set(arr);
console.log(Array.from(set)); // [1, 2, 3]

字符串转化成数组

等同于string.split(‘‘)

let str = ‘abc‘;
console.log(Array.from(str)); // ["a", "b", "c"]

console.log(str.split(‘‘)); // ["a", "b", "c"]

扩展的方法

查找

find()

查找并返回第一个符合条件【元素】

找到就结束遍历

let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3

findIndex()

查找并返回第一个符合条件【元素的索引】

找到就结束遍历

let arr = Array.of(1, 2, 1, 3);
// 参数1：回调函数
// 参数2(可选)：指定回调函数中的 this 值
console.log(arr.findIndex(item => item = 1)); // 0

findIndex和indexOf同样时返回第一满足条件的索引，有何不同？

findIndex是满足【指定任意条件】
indexOf 是满足【是指定元素】

填充

使用指定值替换指定区域的值

fill(fillVal，startIndex [，endIndex])
fillVal：用来填充的【值】
startIndex：被填充的【起始索引】
endIndex(可选)：被填充的【结束索引】，默认为数组length, 【此位置不在填充范围】
不改变数组长度
改变原有数组元素

将【startIndex 】到【endIndex】前的值[不包括位置endIndex]，全部替换成【fillVal】

等同于

arr = arr.map((item, index)=>{
　　if(index>=startIndex && index<endIndex) return fillVal
　　else return item
})

let arr = Array.of(1, 2, 3, 4);
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]

//将第1位开始到 第2位前【不包括位置2】的值替换成0

copyWithin(changeStartIndex, templateStartIndex[, templateEndIndex])

使用数组内的某段数据的副本，替换另一段的数据

changeStartIndex 被修改位置的开始索引
templateStartIndex 模板开始的索引
templateEndIndex 【可选】模板结束的索引，默认为数组length, 【此位置不在模板范围】
不改变数组长度
改变原有数组元素

用【templateStartIndex ，templateEndIndex-1 】位置值的副本，替换【从changeStartIndex 位置开始的值】，【替换长度 = Math.min（副本长度，替换区域长度）】

//使用区域【3，4-1】值，替换从0开始区域的值
console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4]
 
// 使用区域【0，length-1】值， 替换从【倒数第二】开始到第0位【包括】区域的值
console.log([1, 2, 3, 4].copyWithin(-2, 0)); // [1, 2, 1, 2]
 
console.log([1, 2, ,4].copyWithin(0, 2, 4)); // [, 4, , 4]

遍历

entries()

遍历键值对

返回Array Iterator[数组迭代器]
通过 Iterator1.next().value 可逐步访问每项键值对, 只能单向遍历，且每项只有遍历一次，遍历完就不能再被遍历

const arr = [1,  "m", 0];

const lter1 = arr.entries();
const lter2 = arr.entries();
const lter3 = arr.entries();


console.log(lter1.next().value) // [0,1]
console.log(lter1.next().value) // [1,‘m‘]
console.log(lter1.next().value) // [2,0]
console.log(lter1.next().value) // undefined


console.log([...lter2]) //[[0,1], [1,‘m‘],[2,0]]
console.log(lter2.next().value) // undefined


console.log(lter3.next().value) // [0,1]
console.log([...lter3) //[[1,‘m‘],[2,0]]

Iterator

Iterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念：

迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。

迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。

迭代过程

迭代的过程如下：

通过 Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置

随后通过 next 方法进行向下迭代指向下一个位置， next 方法会返回当前位置的对象，对象包含了 value 和 done 两个属性， value 是当前属性的值， done 用于判断是否遍历结束

当 done 为 true 时则遍历结束

keys()

遍历键名。

数组的键名就是索引

console.log([...[,‘a‘].keys()]); // [0, 1]

values()

遍历键值。

空位用undefined 填充

console.log([...[,‘a‘].values()]); // [undefined, ‘a‘]

包含

includes(searchVal[, searchStartIndex])

数组是否包含指定值。

searchVal 搜索的值
searchStartIndex 【可选】从此的位置开始搜索

注意：与 Set 和 Map 的 has 方法区分；Set 的 has 方法用于查找值；Map 的 has 方法用于查找键名。

// 参数1：包含的指定值
[1, 2, 3].includes(1);    // true
 
// 参数2：可选，搜索的起始索引，默认为0
[1, 2, 3].includes(1, 2); // false
 
// NaN 的包含判断
[1, NaN, 3].includes(NaN); // true

嵌套数组转一维数组

flat(zIndex)

zIndex：【可选】指定转换的嵌套层数，使用Infinity代表无限平拍

console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
 
// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
 
// 不管嵌套多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
 
// 自动跳过空位
console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]

flatMap(func[, thisArg])

先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。

func：flat前的数组的处理
thisArg：func的this对象

console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]

扩展运算符

复制数组

空位用undefined填充

let arr = [1, 2],
    arr1 = [...arr];
console.log(arr1); // [1, 2]
 
// 数组含空位
let arr2 = [1, , 3],
    arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]

合并数组

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

es6新增的数组方法

标签：val map key values als 副本 col 查找 rgb

原文地址：https://www.cnblogs.com/baixinL/p/14342153.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行