前言
本文章内容仅总结项目中常用的方式，未囊括所有。
目录
1.对象的操作
2.数组的操作
对象的操作
对象浅拷贝
1.对象合并Object.assign
let obj1 = { name: 1, value: { name: 1 } }
let obj2 = Object.assign({}, obj1)
obj2.name = 2
obj2.value.name = 2
console.log(obj1.name) // 1
console.log(obj1.value.name) // 2
2.对象展开{...}
let obj1 = { name: 1, value: { name: 1 } }
let obj2 = { ...obj1 }
obj2.name = 2
obj2.value.name = 2
console.log(obj1.name) // 1
console.log(obj1.value.name) // 2
3.封装shallowClone
function shallowClone(obj) {
let newObj = {}
for (let key in obj) {
if (obj.hasOwnProperty(key)){
newObj[key] = obj[key]
}
}
return newObj
}
对象深拷贝
1.对象序列化与反序列化
JSON.parse(JSON.stringify())常用的深拷贝方式，针对function和undefined的值时无法进行拷贝。
let obj1 = { name: 1, value: { name: 1 } }
let obj2 = JSON.parse(JSON.stringify(obj1))
obj2.name = 2
obj2.value.name = 2
console.log(obj1.name) // 1
console.log(obj1.value.name) // 1
2.封装deepClone
function deepClone(obj) {
if (obj === null) return obj
if (obj instanceof Date) return new Date(obj)
if (obj instanceof RegExp) return new RegExp(obj)
if (typeof obj !== 'object') return obj
let cloneObj = new obj.constructor()
for (let key in obj) {
if (obj.hasOwnProperty(key)){
cloneObj[key] = deepClone(cloneObj[key])
}
}
return cloneObj
}
对象遍历
1.for in
let obj = { name: 1, value: '2' }
for (let i in obj) {
console.log(obj[i])
}
2.Object.keys、Object.values
前者：obj对象的key组成的数组
后者：obj对象的value组成的数组
let obj = { name: 1, value: '2' }
Object.keys(obj).forEach(v => {
console.log(obj[v])
})
console.log(Object.keys(obj)) // ["name", "value"]
console.log(Object.values(obj)) // [1, "2"]
数组的操作
数组的"基操"
1.数组合并concat，返回一个新的数组。
let arr1 = [1, 2]
let arr2 = [3]
let arr3 = arr1.concat(arr2)
console.log(arr3) // [1, 2, 3]
2.数组替换、删除splice，修改原数组。
// 替换
let arr = [1, 2]
arr.splice(0, 1, 3)
console.log(arr) // [3, 2]
// 删除
arr.splice(0, 1)
console.log(arr) // [2]
3.往前插入值unshift，删除数组的第一个元素并返回第一个元素的值shift，往后追加值push，删除并返回数组的最后一个元素pop
// 往前插入
let arr1 = [1, 2]
arr1.unshift(3)
console.log(arr1) // [3, 1, 2]
// 删除数组的第一个元素并返回第一个元素的值
let arr2 = [1, 2]
arr2 = arr2.shift()
console.log(arr2) // 1
// 往后追加
let arr3 = [1, 2]
arr3.push(3)
console.log(arr3) // [1, 2, 3]
// 删除并返回数组的最后一个元素
let arr4 = [1, 2, 3]
arr4 = arr4.pop()
console.log(arr4) // 3
4.数组拼接字符串join
let arr = [1, 2]
let str = arr.join('-')
console.log(str) // 1-2
5.数组分割slice(start, end)，取前中括号包含内容（即不包括end位置的元素），返回一个新的数组。
let arr = [1, 2, 3]
let arr1 = arr.slice(0, 2)
console.log(arr1) // [1, 2]
6.数组反转reverse，修改原数组。
let arr = [1, 2, 3]
arr.reverse()
console.log(arr) // [3, 2, 1]
7.检测数组是否包含值includes
let arr = [1, 2, 3]
console.log(arr.includes(1)) // true
console.log(arr.includes(4)) // false
数组的遍历
1.for i++、for i--最普遍的使用，循环中使用async、await的最佳选择，可以中断循环。
// i++
let arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// 1、2、3
// i--
for (let i = arr.length; i >= 0; i--) {
console.log(arr[i])
}
// 3、2、1
2.for of推荐使用。
let arr = [1, 2, 3]
for (let item of arr) {
console.log(item)
}
// 1、2、3
3.forEach调用数组的每个元素，并将元素传递给回调函数。
let arr = [1, 2, 3]
arr.forEach(('当前元素', '当前元素的索引值', '当前元素所属的数组对象') => {
// to do something
})
4.map遍历数组，返回所有满足条件的值，其间无法break循环。
let arr = [1, 3, 2, 4]
let arr1 = arr.map((v, i) => {
if (v > 2) {
return v
}
})
console.log(arr1) // [undefined, 3, undefined, 4]
5.find查找数组中存在的值，找到则返回该值，否则返回undefined（找到后会break循环）。
let arr = [1, 3, 2, 4]
let item1 = arr.find((v) => v === 1)
let item2 = arr.find((v) => v === 5)
console.log(item1) // 1
console.log(item2) // undefined
6.findIndex查找数组中存在值的下标，找到则返回该下标位置，否则返回-1（找到后会break循环）。
let arr = [1, 3, 2, 4]
let index1 = arr.findIndex((v) => v === 1)
let index2 = arr.findIndex((v) => v === 5)
console.log(index1) // 0
console.log(index2) // -1
7.sort常用于排序，返回一个新的数组。
let arr = [1, 3, 2, 4]
let arr1 = arr.sort((a, b) => a - b)
let arr2 = arr.sort((a, b) => b - a)
console.log(arr1) // [1, 2, 3, 4]
console.log(arr2) // [4, 3, 2, 1]
8.filter常用于过滤出满足条件的值，返回一个新的数组。
let arr = [1, 2, 3, 4]
let arr1 = arr.filter((v) => v > 2)
console.log(arr1) // [3, 4]
9.reducer常用于数组的去重，返回一个新的数组。
let arr = [1, 1, 2, 2, 3]
let arr1 = arr.reduce((prev, element) => {
if (!prev.find(v => v === element)) {
prev.push(element)
}
return prev
}, [])
console.log(arr1) // [1, 2, 3]
网友评论