JS 数组克隆的方法(调用数组的方法时不影响整个数组的使用)

先看一下错误的案例

直接用变量复制一个值，新的值成为了原来的值引用，两者的修改就会互相影响

<script>
    var arr12 = [1, 2, 3, 4, 5];
    var b = arr12;
    b.push(6);
    console.log(b);     //[1, 2, 3, 4, 5,6]
    console.log(arr12)  //[1, 2, 3, 4, 5,6]

    //值被同时更改了
</script>

解决的方案

Tip  :   以下的方法仅仅使用于单纯的数组形式  即:[1,2,3,4,5]的这种情况  对象数组再更改对象里的属性时一下方法都无效

ES5 方法

1.使用遍历

Array.prototype.clone = function(){
    let a=[];
    for(let i=0,l=this.length;i<l;i++) {
        a.push(this[i]);
    }
    return a;
}
let arr = ['aaa','bbb','ccc','wwwww','ddd']
let arr2 = arr.clone()
console.log(arr2)
console.log( arr2 === arr )

2.slice

let arr = [2,4,434,43]
let arr1= arr.slice()
arr[0] = 'a'
console.log(arr1 === arr

3.concat()

Array.prototype.clone=function(){ 
    return [].concat(this); 
    //或者 return this.concat();
}
let arr = ['aaa','asss']
let arr1 = arr.clone()
arr[0] = 123
console.log(arr,arr1)

 

ES6 方法

1.Object.assign() 浅复制，也可以实现数组的克隆

 let arr = ['111', '222', '333'];
 let newarr = Object.assign([], arr);
 console.log(newarr)  //["111", "222", "333"]   赋值对象

2.扩展运算符

let arr = [1, 2, 3, 4, 5];
let arr3 = [...arr];
console.log(arr3) //[1, 2, 3, 4, 5]