js如何复制数组而不是引用数组，新数组和原数组互不影响

复制数组而不是引用数组

在js中，对象（object）和数组（array）类型的变量为引用类型，也就是说其存储的实际上并不是具体的值，而是一个指向堆内存的地址。

因此当把一个引用类型，如‘数组’，赋值给另一个变量时，实际上是把另一个变量指向了与原数组相同的地址，对象和数组在赋值的时候都是引用传递，赋值的时候只是传递一个指针。当改变其中一个时，实际上是改变了堆内存中的存储内容，相应的，所有指向该地址的数组都发生了变化。

示例代码：

var arr = ["a", "b", "c", "d"];
var arr_1 = arr;
arr_1[0] = "abc";
console.log(arr);       // arr = ["abc", "b", "c", "d"]; 

实际开发中，需要独立拷贝数组，复制数组数据，但不是引用传递，是两个相互独立的，没有关系的数组。有以下解决方法：

示例代码：

方法1：for

// 需求：复制过来的新数据和原来的数据没有任何关系；
var arr = ["a", "b", "c", "d"];
var arr_1 = [];
for (var i = 0; i < arr.length; i++) {
  arr_1[i] = arr[i]
}
arr_1[0] = 10

console.log(arr);    // ["a", "b", "c", "d"]
console.log(arr_1);  // [10, "b", "c", "d"]

方法2：forEach

var arr = ["a", "b", "c", "d"];
var new_arr = [];
arr.forEach(function(item, index) {
  new_arr.push(item);
});
new_arr[0] = "abc";

console.log(arr);      // ["a", "b", "c", "d"]
console.log(new_arr);  // ["abc", "b", "c", "d"]

方法3：fliter

// 过滤
// 作用：满足过滤条件的元素，组成1个新数组返回；
var arr = ["a", "b", "c", "d"];
var new_arr = arr.filter(function(item, index, arr) {
  // 条件：过滤条件结果为true , 把当前的item组成到新的数组里；
  return arr.indexOf(item) != -1;
});
new_arr[0] = "abc";

console.log(arr);        // ["a", "b", "c", "d"]
console.log(new_arr);    // ["abc", "b", "c", "d"]

方法4：concat

// 拼接
// concat 参数：不传入
// 返回：新数组（和arr一样）
var arr = ["a", "b", "c", "d"];
var new_arr = arr.concat();
new_arr[0] = "abc";

console.log(arr);        // ["a", "b", "c", "d"]
console.log(new_arr);    // ["abc", "b", "c", "d"]

方法5：slice

// 截取
// slice 参数：不传入
// 返回：全部截取，新数组（和arr一样）
var arr = ["a", "b", "c", "d"];
var new_arr = arr.slice();
new_arr[0] = "abc";

console.log(arr);        // ["a", "b", "c", "d"]
console.log(new_arr);    // ["abc", "b", "c", "d"]

方法6：与字符串互转

var arr = ["a", "b", "c", "d"];
var str = arr.join("-");
console.log(str);        // "a-b-c-d"
var new_arr = str.split("-"); // 新数组
new_arr[0] = "abc";

console.log(arr);        // ["a", "b", "c", "d"]
console.log(new_arr);    // ["abc", "b", "c", "d"]

方法7：扩展运算符

var arr = ["a", "b", "c", "d"];
var new_arr = [...arr];   // 赋值给new_arr的是arr的值，而不是数组
new_arr[0] = "abc";

console.log(arr);        // ["a", "b", "c", "d"]
console.log(new_arr);    // ["abc", "b", "c", "d"]