当前位置:网站首页>es6数组的使用
es6数组的使用
2022-04-23 05:21:00 【你的美,让我痴迷】
// //将参数转化为数组
console.log(Array.of(1,3,4,5,2));//[1,3,4,5,2]
//Array.from()
//将类数组对象或可迭代对象转化为数组。
// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2]
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]
//mapFn 可选,map 函数,用于对每个元素进行处理,放入数组的是处理后的元素。
console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]
// thisArg 可选,用于指定 map 函数执行时的 this 对象。
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 属性,且元素属性名必须是数值或者可转换为数值的字符。
let arr = Array.from({
0: '我不是数字的',
1: '2',
2: 3,
length: 3
});
console.log(arr[0]); // ['1', '2', 3]
// 没有 length 属性,则返回空数组
let array = Array.from({
0: '1',
1: '2',
2: 3,
});
console.log(array); // []
// 元素属性名不为数值且无法转换为数值,返回长度为 length 元素值为 undefined 的数组
let array1 = Array.from({
a: 1,
b: 2,
length: 2
});
console.log(array1); // [undefined, undefined]
// 转换可迭代对象
// 转换 map
let map2 = new Map();
map2.set('key0', 'value0');
map2.set('key1', 'value1');
console.log(Array.from(map2)); // [['key0', 'value0'],['key1',
// 'value1']]
// 转换 set
let arr2 = [1, 2, 3];
let set = new Set(arr2);
console.log(Array.from(set)); // [1, 2, 3]
// 转换字符串
let str3 = 'abc';
console.log(Array.from(str3)); // ["a", "b", "c"]
// find()
// 查找数组中符合条件的元素,若有多个符合条件的元素,则返回第一个元素。
let arr4 = Array.of(1, 2, 3, 4);
console.log(arr4.find(item => item > 2)); // 3
// 数组空位处理为 undefined
console.log([, 1].find(n => true)); // undefined
// findIndex()
// 查找数组中符合条件的元素索引,若有多个符合条件的元素,则返回第一个元素索引。
let arr5 = Array.of(1, 2, 1, 3);
// 参数1:回调函数
// 参数2(可选):指定回调函数中的 this 值
console.log(arr5.findIndex(item => item == 2)); // 1
// 数组空位处理为 undefined
console.log([, 1].findIndex(n => true)); //0
// fill()
// 将一定范围索引的数组元素内容填充为单个指定的值。
let arr6 = Array.of(1, 2, 3, 4);
// 参数1:用来填充的值
// 参数2:被填充的起始索引
// 参数3(可选):被填充的结束索引,默认为数组末尾
console.log(arr6.fill(0,1,2)); // [1, 0, 3, 4]
// copyWithin()
// 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
// 参数1:被修改的起始索引
// 参数2:被用来覆盖的数据的起始索引
// 参数3(可选):被用来覆盖的数据的结束索引,默认为数组末尾
console.log([1, 2, 3, 4].copyWithin(0,1,3)); // [2,3,4,4]
// 参数1为负数表示倒数
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()
// 遍历键值对。
for(let [key, value] of ['a', 'b'].entries()){
console.log(key, value);
}
// 0 "a"
// 1 "b"
// 不使用 for... of 循环
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]
// 数组含空位
console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]
// keys()
// 遍历键名。
for(let key of ['a', 'b'].keys()){
console.log(key);
}
// 0
// 1
// 数组含空位
console.log([...[,'a'].keys()]); // [0, 1]
// values()
// 遍历键值。
for(let value of ['a', 'b'].values()){
console.log(value);
}
// "a"
// "b"
// 数组含空位
console.log([...[,'a'].values()]); // [undefined, "a"]
// includes()
// 数组是否包含指定值。
// 注意:与 Set 和 Map 的 has 方法区分;Set 的 has 方法用于查找值;Map 的 has 方法用于查找键名。
// 参数1:包含的指定值
console.log([1, 2, 3].includes(1)); // true
// 参数2:可选,搜索的起始索引,默认为0
console.log([1, 2, 3].includes(1, 2)); // false
// NaN 的包含判断
console.log([1, NaN, 3].includes(NaN)); // true
// 嵌套数组转一维数组
// flat()
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()); // [1, 2, 3]
// 复制数组
let arr7 = [1, 2],
arr8 = [...arr7];
console.log(arr8); // [1, 2]
// 数组含空位
let arr9 = [1, , 3],
arr10 = [...arr9];
console.log(arr10); //[1, undefined, 3]
// 合并数组
console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]
效果:
版权声明
本文为[你的美,让我痴迷]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_45932157/article/details/124352177
边栏推荐
- egg中的cors和proxy(づ ̄3 ̄)づ╭~踩坑填坑的过程~ToT~
- SQLyog的基本使用
- Project manager's thinking mode worth trying: project success equation
- Study notes: unity customsrp-12-hdr
- 4 个最常见的自动化测试挑战及应对措施
- On distributed lock
- Using PHP post temporary file mechanism to upload arbitrary files
- 使用zerotier让异地设备组局域网
- Let the LAN group use the remote device
- 我这位老程序员对时代危险和机遇的一点感悟?
猜你喜欢
狼叔来找翻译人员了--plato--持续翻译中.....
One month countdown, pgconf What are the highlights of the latest outlook of asia2021 Asian Conference?
Laravel database
2021-10-08
Devops life cycle, all you want to know is here!
How to set the initial value of El input number to null
Power consumption parameters of Jinbei household mute box series
The introduction of lean management needs to achieve these nine points in advance
When is it appropriate for automated testing? (bottom)
Uniapp wechat sharing
随机推荐
青岛敏捷之旅,来了!
MySQL series - install MySQL 5.6.27 on Linux and solve common problems
If the route reports an error after deployment according to the framework project
Traversal of tree
开源规则引擎——ice:致力于解决灵活繁复的硬编码问题
MFC实现资源单独Dll实现
工具在数字化转型中扮演了什么样的角色?
Interview summary
2021-11-01
On distributed lock
Three 之 three.js (webgl)旋转属性函数的简单整理,以及基于此实现绕轴旋转的简单案例
改进DevSecOps框架的 5 大关键技术
Flip coin (Blue Bridge Cup)
egg测试的知识大全--mock、superTest、coffee
2021-09-23
Logrus set log format and output function name
Laravel database
PIP free export with path (@ file: / / /) notes
MFC implementation resources are implemented separately by DLL
egg中的cors和proxy(づ ̄3 ̄)づ╭~踩坑填坑的过程~ToT~