当前位置:网站首页>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
边栏推荐
- Five key technologies to improve the devsecops framework
- 2021-11-08
- 学习笔记:Unity CustomSRP-11-Post Processing---Bloom
- 何时适合进行自动化测试?(下)
- Three 之 three.js (webgl)旋转属性函数的简单整理,以及基于此实现绕轴旋转的简单案例
- 狼叔来找翻译人员了--plato--持续翻译中.....
- MySQL foreign key constraint
- Anti crawler (0): are you still climbing naked with selenium? You're being watched! Crack webdriver anti crawler
- 学习笔记:Unity CustomSRP-13-ColorGrading
- Graphics. Fromimage reports an error "graphics object cannot be created from an image that has an indexed pixel..."
猜你喜欢

Using PHP post temporary file mechanism to upload arbitrary files

DevOps生命周期,你想知道的全都在这里了!

MySQL basics 3

看板快速启动指南

Open source rule engine - Ice: dedicated to solving flexible and complex hard coding problems

What are the reasons for the failure of digital transformation?

Redis persistence

Simple application of parallel search set (red alarm)

JS array common methods

工具在数字化转型中扮演了什么样的角色?
随机推荐
Interpretation of common SQL statements
C language hash dictionary and notes
日志简介和构建web应用
How to add beautiful code blocks in word | a very complete method to sort out and compare
Unique primary key ID of tidb sub table -- solution to failure of sequence and Gorm to obtain primary key
mariadb数据库的主从复制
Master-slave replication of MariaDB database
Blender程序化地形制作
2021-10-08
SQLyog的基本使用
!!!!!!!!!!!!!!!!!!
Semi synchronous replication of MariaDB
MFC implementation resources are implemented separately by DLL
Kanban Quick Start Guide
Basic use of sqlyog
Three 之 three.js (webgl)简单实现根据点绘制线/弧线(基于LineGeometry / Line2 / LineMaterial,绘制两点基于圆心的弧线段)
Source code analysis of how to use jump table in redis
JS array common methods
Uniapp wechat sharing
JSP -- Introduction to JSP