本文介绍关于JS 数组合并时的常见8种情况，需要的朋友可以参考一下：


目录

  • 1、ES6 解构
  • 2、遍历与添加操作
  • 3、contact
  • 4、join 与 split
  • 5、解构添加
  • 6、splice
  • 7、apply、call、bind
  • 8、两个数组的交叉合并
  • 总结


1、ES6 解构

在es6中,解构指的是按照一定的模式从数组和对象中提取值,对变量进行赋值的行为。常见的有对象结构、数组解构和混合解构,是一种将数据结构分解成更小的部分的过程,从而达到简化提取信息的目的。

点击了解es6解构更多详情。这里只展示数组解构：

// 等号左边是右边的模板,必须一样 
 let [a,b,c] =[1,2,3];
 console.log(a,b,c);

（1）可预设默认值

[a,b,c='JS'] =[1,2];
console.log(a,b,c);

（2）可使用归并参数

[a,b,...c] =[1,2,3,5,6,66];
console.log(a,b,...c);

（3）可省略部分参数

[,,c] =[1,2,3,5,6,66];
console.log(c);

2、遍历与添加操作

（1）常用遍历方法：forEach、map、filter、every、for、for in、for of等。

（2）常用添加方法：push（后追加）、unshift（前追加）等。

let arr = [];
let arr1 = [];
arr.forEach(item => {
	arr1.push(item);
})

3、contact

concat() 方法用来连接两个或更多的数组，并返回结果。不改原数组值，生成新的数组。

实例：合并三个数组的值

var a = ["Google", "Taobao"];
var b = ["Runoob", "Wiki", "Zhihu"];
var c = a.concat(b);
document.write(c);

输出结果：

Google,Taobao,Runoob,Wiki,Zhihu

4、join 与 split

join() 把数组的所有元素放入一个字符串。
split() 把字符串分割为字符串数组。

实例：把一个字符串分割成字符串数组；把数组中的所有元素转换为一个字符串。

var str="How are you doing today?";
var n=str.split(" ");
console.log(n)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
console.log(energy)

输出结果：

How,are,you,doing,today?
Banana,Orange,Apple,Mango

5、解构添加

arr.push(...array)
arr.unshift(...array)

arr变成合并后的样子，array值不变。

6、splice

splice() 从数组中添加或删除元素。

①实例：数组中添加新元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");

输出结果：

Banana,Orange,Lemon,Kiwi,Apple,Mango

②实例：数组中删除元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1);

输出结果：

Apple

7、apply、call、bind

函数名.apply(执行环境对象,实参列表数组);
apply()可以调用当前函数，并可以指定其执行环境对象。
（1）call()、apply()、bind() 都是用来重定义 this 这个对象的！

var name = '小立', age = 22
var obj = {
  name: "小芬",
  objAge: this.age,
  myName: function () {
    console.log(this.name + "年龄" + ":" + this.age)
  }
}
var ll = {
  name: "沙扬娜拉",
  age: 21
}
obj.myName.call(ll)
obj.myName.apply(ll)
//bind 返回一个新的函数，必须调用才会被执行
obj.myName.bind(ll)()

输出结果：

沙扬娜拉年龄:21
沙扬娜拉年龄:21
沙扬娜拉年龄:21

（2）apply 的所有参数须放在一个数组中传递

var name = '小立', age = 22
var obj = {
  name: "小芬",
  objAge: this.age,
  myName: function (location, destination) {
    console.log("从" + location + "出发的" + this.name + "年龄:" + this.age + "旅行目的地为" + destination)
  }
}
var ll = {
  name: "沙扬娜拉",
  age: 21
}
obj.myName.call(ll, "新加坡", "北京")
obj.myName.apply(ll, ["韩国", "上海"])
obj.myName.bind(ll, "菲律宾", "新疆")()
obj.myName.bind(ll, ["菲律宾", "新疆"])()

输出结果：

从新加坡出发的沙扬娜拉年龄:21旅行目的地为北京
从韩国出发的沙扬娜拉年龄:21旅行目的地为上海
从菲律宾出发的沙扬娜拉年龄:21旅行目的地为新疆
从菲律宾,新疆出发的沙扬娜拉年龄:21旅行目的地为undefined

8、两个数组的交叉合并

实例：将省份和城市的数组交替合并

var province = ["广东", "湖南", "甘肃", "福建"]
var city = ["广州", "长沙", "兰州", "泉州", "福州"]
arrMerge(province, city)

function arrMerge (arr1, arr2) {
  var arr3 = []
  var minLength = 0
  // 找出合并数组中长度最小的数组
  minLength = arr1.length > arr2.length ? arr2.length : arr1.length
  // 交替合并
  for (let i = 0; i < minLength; i++) {
    arr3.splice(arr3.length, 0, arr1[i], arr2[i])
  }
  // 将多余的元素添加到较长的数组后面
  if (arr1.length > arr2.length) {
    arr3.splice(arr3.length, 0, ...arr1.slice(minLength))
  } else {
    arr3.splice(arr3.length, 0, ...arr2.slice(minLength))
  }
  console.log(arr3.join(''))
}

输出结果：

广东广州湖南长沙甘肃兰州福建泉州福州

总结

到此关于JavaScript数组合并的8种常见方法介绍就结束了