前言
数组操作是 JS 基础中的基础，不论是在工作中对数据的处理，还是在面试中的 JS 问题都离不开数组。本文便对 JS 数组的基本操作(增删改查)进行了详尽的说明。关于更复杂的操作留在下篇进行讲解(map,filter,reduce)。
数组创建方法
let arr = [1,2,3]
let arr = new Array(1,2,3)
let str = '1,2,3'
str.split(',') //["1", "2", "3"]
let str = '123'
str.split('') //["1", "2", "3"]
Array.from('1,2,3')
Array.from({0:'a',1:'b',2:'c',length:3}) //["a", "b", "c"]
复制代码
伪数组
伪数组的原型链中没有数组的原型，也就是没有数组的pop，push，shift等方法。 例如我们选取页面上所有的div元素
let divList = document.querySelectorAll('div')
此时的divList就是一个伪数组 我们可以通过 ES6 新语法: Array.from(divList)将其转化为一个真正的数组。
数组浅拷贝
arr.slice(0)
删除数组中的元素
删除头部元素
arr.shift()
删除尾部元素
arr.pop()
删除中间的元素
arr.splice
arr.splice(index,1) // 删除数组下标为 index 的元素
arr.splice(index,1,'x') //删除数组下标为 index 的元素,并添加'x'
arr.splice(index,1,'x','y') // 删除在数组下标为 index 的元素,并添加'x','y'
复制代码
查看数组的所有属性
let arr = [1,2,3,4,5 ]
Object.keys(arr) //["0", "1", "2", "3", "4"]
Object.values(arr) //[1, 2, 3, 4, 5]
复制代码
for in && for of
// for in 循环
let arr = [1,2,3,4,5 ]
for(let i in arr) {
console.log(i)
}
// 0,1,2,3,4 打印的是数组的下标
复制代码
// for of 循环
let arr = [1,2,3,4,5 ]
for(let i of arr) {
console.log(i)
}
// 1,2,3,4,5 打印的是数组的值
复制代码
for 循环
也可以通过 for 循环。(for 循环能解决大部分问题)
let arr = ['a','b','c','d','e' ]
for(let i = 0 ; i < arr.length; i++) {
console.log(`${i}: ${arr[i]}`)
}
// 0:a,1:b,2:c,3:d,4:e 这样我们就把数组的下标跟值都取出来了
复制代码
forEach
let arr = ['a','b','c','d','e' ]
arr.forEach((item,index)=>{
console.log(`${index}: ${item}`)
})
// 0:a,1:b,2:c,3:d,4:e 这样我们就把数组的下标跟值都取出来了
复制代码
不懂 forEach的话，我们可以自己实现一个 forEach:
function forEach(array,fn){
for(let i = 0 ; i < array.length; i++) {
fn(array[i],i,array)
}
}
复制代码
查看数组单个属性
查看某个元素是否在数组中(indexOf)
let arr = ['a','b','c','d','e' ]
arr.indexOf('b') // 1
arr.indexOf('f') // -1
// 如果查找的元素在数组中则返回对应下标，不在则返回-1
复制代码
indexOf 兼容性不太好,我们可以用 for 循环自己实现一个:
function indexOf(array,item) {
let index = -1
for(let i = 0; i < array.length; i++) {
if(array[i] === item) {
index = i
break
}
}
return index
}
复制代码
按条件查看元素(find)
let arr = [1,2,3,4,5 ]
arr.find((item) => {
return item % 2 === 0
})
// 2
// find 接受一个函数，返回在数组中满足条件的第一个值
复制代码
注意 find 函数返回的是值不是下标!
复制代码
按条件查看元素下标(findIndex)
let arr = [1,2,3,4,5 ]
arr.findIndex((item) => {
return item % 4 === 0
})
// 3
// findIndex 接受一个函数，返回在数组中满足条件的第一个值的下标
复制代码
增加数组中的元素
在尾部增加元素
let arr = [1,2,3,4,5 ]
arr.push(7) // 6
// push 的返回值是数组新长度，并且会修改原数组
// 此时arr = [1,2,3,4,5,7]
复制代码
在头部增加元素
let arr = [1,2,3,4,5 ]
arr.unshift(111) // 6
// push 的返回值是数组新长度，并且会修改原数组
// 此时arr = [111,1,2,3,4,5]
复制代码
在中间增加元素
let arr = [1,2,3,4,5 ]
arr.splice(3,0,444)
// arr 值为 [1, 2, 3, 444, 4, 5]。
// 公式为 arr[index,0, 'x'] 会在 index 的前一个位置增加'x'元素
复制代码
修改数组中的元素
let arr = [1,2,3,4,5 ]
arr.splice(0,1,'x') // 返回[1]
// 此时 arr = ["x", 2, 3, 4, 5]
// 删除在数组下标为 0 的元素,并添加'x',也就相当于修改数组下标为0的值了。
arr[0] = 'xxx' // 'xxx'
// 此时 arr = ["x", "xxx", 3, 4, 5]
// 如果知道想要修改元素的下标也可以直接修改
复制代码
反转顺序(reverse)
let arr = [1,2,3,4,5 ]
arr.reverse() // [5, 4, 3, 2, 1]
复制代码
但如果我们想要反转字符串的顺序呢?例如将:'abcde' 变为 'edcba':
str.split('').reverse().join('')
自定义顺序(sort)
升序:arr.sort((a,b)=>{return a-b})
降序:arr.sort((a,b)=>{return b-a})
或者冒泡排序:
var arr = [3, 4, 1, 2];
function bubbleSort (arr) {
var max = arr.length - 1;
for (var j = 0; j < max; j++) {
// 声明一个变量，作为标志位
var done = true;
for (var i = 0; i < max - j; i++) {
if (arr[i] > arr[i + 1]) {
var temp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = temp;
done = false;
}
}
if (done) {
break;
}
}
return arr;
}
