JavaScript中数组的基本使用

最近进行JavaScript开发，数组的使用太常见了，而自己记忆力又不好，这里记录下，以便日常查询方便

1. 数组的常用操作方法

数组的常用操作方法很多，包括push、pop、unshift、shift、slice、splice等等，这里直接总结如下

/**
 * 接两个以上的数组，返回新的数组，不影响原来的数组
 */
function testConcat() {
    const originArray = [1, 2]
    const concatArray = [3]
    const newArray = originArray.concat(concatArray)
    console.log(`newArray ==> ${newArray}`) //newArray ==> 1,2,3
    console.log(`originArray ==> ${originArray}`) //originArray ==> 1,2
}

/**
 * 数组的末尾添加新元素，返回新数组的长度，原来数组的内容改变
 */
function testPush() {
    const originArray = [1, 2]
    const originArrayLength = originArray.push(3, 4)
    console.log(`originArrayLength ==> ${originArrayLength}`) //originArrayLength ==> 4
    console.log(`originArray ==> ${originArray}`) //originArray ==> 1,2,3,4
}

/**
 * 在数组的头部添加新元素，返回新数组的长度，原来数组的内容改变
 */
function testUnshift() {
    const originArray = [1, 2]
    const originArrayLength = originArray.unshift(3, 4)
    console.log(`originArrayLength ==> ${originArrayLength}`) //originArrayLength ==> 4
    console.log(`originArray ==> ${originArray}`) //originArray ==> 3,4,1,2
}

/**
 * 将数组的末尾元素移除，返回新数组的长度，原来数组的内容改变
 */
function testPop() {
    const originArray = [1, 2, 3]
    const popItem = originArray.pop()
    console.log(`popItem ==> ${popItem}`) //popItem ==> 3
    console.log(`originArray ==> ${originArray}`) //originArray ==> 1,2
}

/**
 * 将数组的头部元素移除，返回新数组的长度，原来数组的内容改变
 */
function testShift() {
    const originArray = [1, 2, 3]
    const shiftItem = originArray.shift()
    console.log(`shiftItem ==> ${shiftItem}`) //shiftItem ==> 1
    console.log(`originArray ==> ${originArray}`) //originArray ==> 2,3
}

/**
 *  对数组内容进行默认字符编码从小到大的排序，数组内容为数字时，需要定义函数，返回新数组，原数组内容改变
 */
function testSort() {
    const originArray = [1, 3, 4, 2, 6, 5, 4, 10, 7]
    const newArray = originArray.sort((a, b) => {
        return a - b
    })
    console.log(`newArray ==> ${newArray}`)  //newArray ==> 1,2,3,4,4,5,6,7,10
    console.log(`originArray ==> ${originArray}`) //originArray ==> 1,2,3,4,4,5,6,7,10
}

/**
 *  截取新数组，返回新的数组，原来数组内容不变
 */
function testSlice() {
    const originArray = [1, 2, 3, 4]
    const sliceArray = originArray.slice(0, 2)
    console.log(`sliceItem ==> ${sliceArray}`) //sliceItem ==> 1,2
    console.log(`originArray ==> ${originArray}`) //originArray ==> 1,2,3,4
}

/**
 *  删除元素，并添加新元素，返回被删元素组成的数组，原数组内容改变
 */
function testSplice() {
    const originArray = [1, 2, 3, 4]
    const newArray = originArray.splice(1, 2, 10, 20)
    console.log(`newArray ==> ${newArray}`) //newArray ==> 2,3
    console.log(`originArray ==> ${originArray}`) //originArray ==> 1,10,20,4
}

/**
 *  数组倒序，返回倒序后的数组内容，原数组内容改变
 */
function testReverse(){
    const originArray = [1, 2, 3, 4]
    const newArray = originArray.reverse()
    console.log(`newArray ==> ${newArray}`) //newArray ==> 4,3,2,1
    console.log(`originArray ==> ${originArray}`) //originArray ==> 4,3,2,1
}

/**
 *  按照制定字符将数组内容拼接成字符串，返回拼接字符串，原数组内容不变
 */
function testJoin(){
    const originArray = [1, 2, 3, 4]
    const newStr = originArray.join(';')
    console.log(`newStr ==> ${newStr}`) //newStr ==> 1;2;3;4
    console.log(`originArray ==> ${originArray}`) //originArray ==> 1,2,3,4
}

2. 数组的遍历

const originArray = [
    {name: 'xiao', age: 20},
    {name: 'hua', age: 25},
    {name: 'jun', age: 56},
    {name: 'good', age: 36}
]

// 遍历的是索引，通过索引获取数组元素
for (let index = 0; index < originArray.length; index++) {
    console.log(`name ==> ${originArray[index].name}  age ==> ${originArray[index].age}`)
}

// 遍历的是索引，通过索引获取数组元素，同上
for (let index in originArray) {
    console.log(`name ==> ${originArray[index].name}  age ==> ${originArray[index].age}`)
}

// 遍历数组项
for (let item of originArray) {
    console.log(`name ==> ${item.name}  age ==> ${item.age}`)
}

// 遍历数组项，不同于上三种遍历，map中添加return会失效，同时在map之前可以filter进行过滤
originArray.filter(item => item.name == 'xiao').map(item => {
    console.log(`name ==> ${item.name}  age ==> ${item.age}`)
})

以上，自己记录，也希望能帮助他人