这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
本文主要记录关于数组操作的“常规操作”，助您工作更顺心，emmm，明天又是要学习一天提升自己的黄金时刻啦~~加油
基本操作中常见情况
主要涉及到数组的一些常用方法，也是开发中使用频率较高的，本文适合对数组的方法有一定理解的朋友阅读🈷
伪数组转数组
-
推荐用法
const ArrLike = {0: 'hello', 1: 'world', length: 2} // Array.from(ArrLike) 可以返回一个数组， 参数是：拥有 length 属性的对象或可迭代的对象。 Array.from(ArrLike) -
替代方案
// [].slice.call(ArrLike, 0, 0) // 0, 0 默认不写也行 [].slice.call(ArrLike)
数组降维
-
推荐用法
const Arr = [[111, 2, 33], [55, 66, 77], {key: 'value'} ] // Arr.flat(n) - n 默认为2，为 Infinity 时 可展开任意层 Arr.flat() // [222, 333, 444, 55, 66, 77, {…}] -
替代方案
// 先字符串化 再分割，缺点也明显，新数组中对象没有正确的得到 Arr.join().split(',') // ["111", "2", "33", "55", "66", "77", "[object Object]"]
数组去重
-
推荐用法
const Arr = [1, 2, 1, 2, 1, 2, 3] // 使用Set() [...new Set(Arr)]
数组合并
-
推荐用法
const Arr1 = [1, 2, 3], Arr2 = [4, 5, 6]; // 扩展运算符合并的数组是浅拷贝 [...Arr1, ...Arr2] // [1, 2, 3, 4, 5, 6] -
替代方案
Arr1.concat(Arr2)
交换变量
-
推荐用法
// 不使用第三个变量，就能完成交换赋值 [a, b] = [b, a]
数组求和
-
推荐用法
const Arr = [1, 2, 3, 4] Arr.reduce((sum, num) => sum += num, 0) // 10
数组循环方法的使用
用了下面的方法，再也不用想着for循环了，开心😄
由原数组生成任意想要生成的新数组
const Users = [{id: 1,name: 'aYin', age: 26, sex: 'male'}, {id: 2,name: 'zz', age: 23, sex: 'female'}, {id: 3,name: 'aYin', age: 26, sex: 'male'}]
// 生成一个包含名字和id的数组
const newArr = Users.map(user => {
return {
// 这里可以添加任意你想返回的数据 或者 插入你想插入的自定义数据
id: user.id,
name: user.name
}
})
newArr // [{id: 1,name: 'aYin'}, {id: 2,name: 'zz'}]
筛选符合条件指定目标
寻找第一个符合的子项
// 当然find 方法只会帮你找到第一个
const aYin = Users.find(user => user.id === 1) // [{id: 1,name: 'aYin', age: 26, sex: 'male'}]
寻找所有符合的子项
// filter
const aYin = Users.filter(user => user.name === 'aYin')
// [{id: 1,name: 'aYin', age: 26, sex: 'male'}, {id: 3,name: 'aYin', age: 26, sex: 'male'}]
批量改变原数组每一项内容
// forEach
const customData = ['帅', '漂亮', '真帅']
Users.forEach((user, index) => {
user.character = customData[index]
})
Users // [{id: 1,name: 'aYin', age: 26, sex: 'male', character: "帅"}, {id: 2,name: 'zz', age: 23, sex: 'female', character: "漂亮"}, {id: 3,name: 'aYin', age: 26, sex: 'male', character: "真帅"}]
判断是否是数组
-
Array.isArray()
Array.isArray(Users) // true -
instanceof
Users instanceof Array // true -
Object.prototype.toString
toString.call(Users) === "[object Array]" // true -
constructor
constructor 可以被重新赋值，不建议使用
Users.constructor === Array // true
