js数组常见方法

数组方法

• push() 在数组尾部新增元素, 改变原数组
• unshift() 在数组最前面新增元素,改变原数组
• pop() 删除数组末尾的元素, 改变原数组, 返回删除的元素
• shift() 删除数组第一个元素,改变原数组,返回删除的元素
• splice(satrt, 删除元素个数, 添加元素1, 添加元素2,...) : 删除数组元素,并替换,改变原数组, start为开始删除元素的索引
• slice(start, end) 截取从索引 start 到 end的元素,返回一个数组
• concat() 返回一个拼接之后的新数组,可传入一个数组,不会改变原数组

let arr = [1, 2, 3]
const res = arr.concat([4, 5])
console.log(arr) // [1, 2, 3]
console.log(res) // [1, 2, 3, 4, 5]

• forEach() 遍历数组,没有返回值
• indexOf(item) 查找数组中是否包含item, 若包含返回item的索引,否则返回-1
• lastIndexOf() 从数组末尾开始查找是否包含元素,若包含返回item的索引,否则返回-1
• findIndex(): 和indexOf最大的区别是可以查找复杂类型数据的索引

let arr = [1, 2, 3, 'a', 'b', 'c', 'a', 2, {id: 1, name: 'zs'}]
const res = arr.findIndex(item => item.name === 'zs')
console.log(res) // 8 -- 第一次满足条件元素的索引

• find() 查找符合条件的元素,出现满足条件的则停止迭代,未找到返回undefined

let arr = [1, 2, 3, 'a', 'b', 'c', 'a', 2, {id: 1, name: 'zs'}]
const res = arr.find(item => item.name === 'zs')
console.log(res) // {id: 1, name: "zs"} -- 第一次满足条件的元素

• includes() 检测是否包含元素,包含返回 true, 否则 false

let arr = [1, 2, 3, 'a', 'b', 'c', 'a', 2, {id: 1, name: 'zs'}]
const res = arr.includes('b')
console.log(res) // true -- 检测是否包含 'b' 元素

• map() 遍历数组,并对每一项统一处理,返回一个新数组

let arr = [1, 2, 3, 4]
const res = arr.map(item => item * 2)
console.log(res) // [2, 4, 6, 8] 

• sort()排序数组

let arr = [5, 1, 8, 2, 4, 3, 6, 2, 1, 8, 5]
const res = arr.sort((a, b)=> a - b)
console.log(res) // [1, 1, 2, 2, 3, 4, 5, 5, 6, 8, 8]

• reverse() 翻转数组,改变原数组,返回新数组

let arr = [1, 2, 3, 4]
const res = arr.reverse()
console.log(res) // [4, 3, 2, 1]

• join()使用参数连接数组每一项,返回字符串,不传参,默认用 ,连接

let arr = [1, 2, 3, 4]
const res = arr.join()
console.log(res) // 1,2,3,4

• reduce() 常用于累加

let arr = [1, 2, 3, 4]
const res = arr.reduce((pre, cur) => pre + cur, 0)
console.log(res) // 10 -- 每一项的累加和

• some()查找数组中是否存在满足条件的元素,返回布尔值

let arr = [1,  'a',  2, {id: 1, name: 'zs'}]
const res = arr.some(item => item.name === 'zs')
console.log(res) // true

• erery()检测数组每一项是否都满足条件,返回布尔值

let arr = [5, 6, 7, 8]
const res = arr.every(item => item > 2)
console.log(res) // true

• fill(value, start, end): 用value覆盖索引start到end(不覆盖end)的元素

let arr = [1, 2, 3, 4]
const res = arr.fill('a', 1, 3)
console.log(res) // [1, "a", "a", 4]

• copyWithin(target, start, [end])用start到end的元素填充到target位置(覆盖原有元素)

let arr = [1, 2, 3, 4, 5, 6, 7]
const res = arr.copyWithin(2, 3, 5) // 把索引 3 -5 的元素填充到索引为 2 的位置
console.log(res) // [1, 2, 4, 5, 5, 6, 7]

• flat() 参数为一个数字,表示要拉平的层数,默认1, 若不知道嵌套的层数,可用Infinity作为参数

let arr = [1, 'a', [2, 3, [4, 5]], ['b', 'c']]
const res1 = arr.flat()
const res2 = arr.flat(Infinity)
console.log(res1) // [1, "a", 2, 3, [4, 5], "b", "c"]
console.log(res2) // [1, "a", 2, 3, 4, 5, "b", "c"]

数组方法的应用

遍历数组

• 需要遍历数组,对每一项进行操作 --- forEach,for...of,for循环
• 当需要遍历数组,并返回每个元素时 --- map

数组去重

1. Set -- 世界上最短的数组去重方法

let arr = [1, 2, 1, 2, 3, 2, 1, 2]
let newArr = [...new Set(arr)]

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

2. 双重for

function unique(arr) {
	if(!Array.isArray(arr)) return 
	let result = [arr[0]]
	for(let i = 1; i < arr.length; i++) {
		let flag = true
        for (let j = 0; j < result.length; j++) {
            if (arr[i] === result[j]) {
                flag = false
                break
            }
        }
        if (flag) {
            result.push(arr[i])
        }
	}
	return result
}

3. filter + indexOf

function unique(arr) {
	if(!Array.isArray(arr)) return 
	return arr.filter((item, index) => arr.indexOf(item) === index)
}

4. reduce + includes

function unique(arr) {
	return arr.reduce((pre, cur) => pre.includes(cur) ? pre : [...pre, cur], [])
}

数组拷贝

浅拷贝

1. let newArr = [...arr]
2. let newArr = arr.concat()
3. let newArr = arr.slice()

深拷贝

• 利用递归实现

function deepClone(obj) {
  if (obj instanceof Array) {
    var newObj = []
  } else if (obj instanceof Object) {
    var newObj = {}
  } else {
    return obj
  }
  for (let k in obj) {
    newObj[k] = deepClone(obj[k])
  }
  return newObj
}