数组是引用类型，至于引用数据类型和基础数据类型，可以看下js相关文档。

有些时候我们需要复制一个数组，用来进行某些操作

数组复制分为浅拷贝和深拷贝

浅拷贝：

当修改复制之后的数组，原数组的值也会发生改变

浅拷贝的几种方法

1. 直接赋值

let arr = [1, 2, 3]

let arr2 = arr

arr2[0] = 0

console.log(`arr: ${arr}`)
console.log(`arr2: ${arr2}`)

2. ES6展开操作符, 这种你会发现第一层修改了没受影响，但是第二层的一旦改变，两者都会发生改变， 这也是浅拷贝

const arr1 = [1, 2, 3, {c: 1}]

const arr2 = [...arr1]

arr1[3].c = 2

console.log(arr1) // [ 1, 2, 3, { c: 2 } ]
console.log(arr2) // [ 1, 2, 3, { c: 2 } ]

3. concat， slice， 跟上面的运算符一样

const arr1 = [1, 2, 3, {a: 1}]
const arr2 = arr1.concat()
const arr3 = arr1.slice(0)
arr2[3].a = 3
console.log(arr1) // [ 1, 2, 3, { a: 3 } ]
console.log(arr2) // [ 1, 2, 3, { a: 3 } ]
console.log(arr3) // [ 1, 2, 3, { a: 3 } ]

4. for循环， 同上

const arr1 = [1, 2, 3, {a: 1}]
let arr2 = []
for(let i = 0; i < arr1.length; i++) {
    arr2.push(arr1[i])
}
arr2[3].a = 2
console.log(arr1) // [ 1, 2, 3, { a: 2 } ]
console.log(arr2) // [ 1, 2, 3, { a: 2 } ]

此外Object.assign也是浅拷贝

下面来看下深拷贝，在此介绍两种方法

1.JSON.parse(JSON.stringify(arr))

const arr1 = [1, 2, 3, {a: 1}]
const arr2 = JSON.parse(JSON.stringify(arr1))

arr2[3].a = 2

console.log(arr1) // [ 1, 2, 3, { a: 1 } ]
console.log(arr2) // [ 1, 2, 3, { a: 2 } ]

2. 自己使用递归的方式写，下面是实现的代码，只是数组层面，对象也可以实现，应该是newArr判断下类型，之所以非数组和非对象设置为空，是为了三重运算成功，只考虑这两种类型

const newArr = Object.prototype.toString.call(arr).slice(8, -1) === 'Array' ? [] : Object.prototype.toString.call(arr).slice(8, -1) === 'Object' ? {} : '' 

const arr1 = [1, 2, 3, {a: 1}, {a: 2, b: {a: 1, d: [{a: 1, b: 2}]}}]
function deepCopy(arr) {
    const newArr = []
    for(let i in arr) {
        console.log(arr[i])
        if (typeof arr[i] === 'object') {
            newArr[i] = deepCopy(arr[i])
        } else {
            newArr[i] = arr[i]
        }
    }
    console.log(newArr)
    return newArr
    
}
const arr2 = deepCopy(arr1)
arr2[4].b.d[0].a = 2
console.log('arr1')
console.log(arr1) // [1,2,3,{"a":1},{"a":2,"b":{"a":1,"d":[{"a":1,"b":2}]}}]
console.log('arr2')
console.log(arr2) // [1,2,3,{"a":1},{"a":2,"b":{"a":1,"d":[{"a":2,"b":2}]}}]

差不多就这些，借鉴了网上的一些方法

1.数组filter方法作用

筛选数组,将满足条件的元素放入新数组中

2.语法 : array.filter( function ( item, index,arr) {} )

第一个参数: item,必须,当前元素的值

第二个参数 : index,可选,当前元素在数组中的索引值

第三个参数 : arr,当前元素所处的数组对象

3.filter方法特点

(1)函数执行次数 === 数组长度

(2)函数内部的return

return true : 满足筛选条件,放入新数组中

return false : 不满足条件,不放入新数组中

(3)filter方法的返回值

返回筛选之后的新数组,如果没有符合条件的元素则返回空数组

4.注意点:

(1)filter()方法不会对空数组进行检测

(2)filter()方法不会改变原始数组

5.应用场景 : 筛选数组

示例 :价格筛选

//封装函数渲染页面
const renderData = (arr) => {
    document.querySelector('.list').innerHTML = arr.map( item => 
            `<div class="item">
            <img src="${item.picture}" alt="">
            <p class="name">${item.name}</p>
            <p class="price">${item.price}</p>
            </div>`
    ).join('')
}
renderData(goodsList)
//点击事件
const aList = document.querySelectorAll('.filter a')
//遍历数组
aList.forEach( ( item,index ) => 
    item.onclick = function () {//注册点击事件
        //类名排他
        document.querySelector('.active').classList.remove('active')
        item.classList.add('active')
        //判断筛选
        if (index === 0) {//0-100
            renderData(goodsList.filter(item => item.price < 100))
        }else if (index === 1) {//100-300
            renderData(goodsList.filter(item => item.price >= 100 && item.price < 300))
        }else if (index === 2) {//100-300
            renderData(goodsList.filter(item => item.price > 300 ))
        }else {
            renderData(goodsList)
        }
    }
)

:

完整代码-删除

数组.splice( 下标key， 删除个数 )
数组直接被修改

<script>

    let arr = [
        'Peter',
        'Kim',
        'Lucy',
        'Alina',
        'John'
    ];

    console.log(JSON.stringify(arr));
    // ["Peter","Kim","Lucy","Alina","John"]

    arr.splice(2, 1);

    console.log(JSON.stringify(arr));
    // ["Peter","Kim","Alina","John"]


</script>

更多函数说明：

JavaScript Array splice() 方法

完整代码-插入数组

<script>

    let arr = [
        'Peter',
        'Kim',
        'Lucy',
        'Alina',
        'John'
    ];

    console.log(JSON.stringify(arr));
    // ["Peter","Kim","Lucy","Alina","John"]

    arr.splice(3, 0, 'KKK', 'OOO');

    console.log(JSON.stringify(arr));
    // ["Peter","Kim","Lucy","KKK","OOO","Alina","John"]


</script>

封面