导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

针对性攻坚(TODO)

concat 合并两个或多个数组

• 定义：
  • 合并两个或多个数组，返回一个新数组。
• 语法：
  • const newArr = oldArr.concat(arr1, arr2, ..., arrN)
• 参数：
  • arrN 该参数可以是具体的值，也可以是数组对象。可以是任意多个
• 返回值：
  • 返回一个新数组

var arr1 = ['a', 'b', 'c'];
var arr2 = [1, 2, 3];
var arr3 = arr1.concat(arr2);
console.log({
	arr1, arr2, arr3
});

const arr = [1].concat([1,2,[2,3]])
console.log(arr); // [ 1, 1, 2, [ 2, 3 ] ]

ES6 扩展运算符 ... 合并数组

let a = [1, 2, 3]
let b = [0, ...a, 4, 5]
console.log(a, b); //  [ 1, 2, 3 ] [ 0, 1, 2, 3, 4, 5 ]

⭐️ slice 浅拷贝数组的元素

• 定义：
  • 返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
• 语法：
  • arr.slice(begin, end)
• 参数（可选）：
  • begin: 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。
  • end: 索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。
• 返回值：
  • 返回从开始到结束（不包括结束）的新数组
• 注意点：
  • slice()是浅拷贝，对于复杂的数据类型浅拷贝，拷贝的只是指向原数组的指针，所以无论改变原数组，还是浅拷贝的数组，都是改变原数组的数据。

var arr = [
  'Lance',
  {
    a: {
      b: {
        c: 3
      }
    }
  }
]
var arr2 = arr.slice()
arr2[1].a.b = 3
console.log(arr, arr2) // [ 'Lance', { a: { b: 3 } } ] [ 'Lance', { a: { b: 3 } } ]

begin 参数

如果传负数 ，表示从原数组中的倒数第几个元素开始提取

• e.g. slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

var arr = ['l', 'a', 'n', 'c', 'e'];
var arr1 = arr.slice(-3, -1);
console.log(arr1);

var arr = ['l', 'a', 'n', 'c', 'e'];
var arr1 = arr.slice(-3, 1);
console.log(arr1);

如果省略，从索引 0 开始。

var arr = ['l', 'a', 'n', 'c', 'e'];
var arr1 = arr.slice();
console.log(arr1);

⭐️ 如果超出原数组的索引范围，则会返回空数组。

var arr = ['l', 'a', 'n', 'c', 'e'];
var arr1 = arr.slice(10);
console.log(arr1); // []

⭐️ end 参数

提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。

正数

slice(1, 4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。

var arr = ['l', 'a', 'n', 'c', 'e'];
var arr1 = arr.slice(1, 4);
console.log(arr1);

⭐️ 负数

如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

var arr = ['l', 'a', 'n', 'c', 'e'];
var arr1 = arr.slice(1, -2);
console.log(arr1);

省略不传 or 大于数组的长度

如果 end 被省略，或者 end 大于数组的长度，则 slice 会一直提取到原数组末尾。

var arr = ['l', 'a', 'n', 'c', 'e'];
var arr1 = arr.slice(3, 10);
console.log(arr1); // ['c', 'e']

⭐️ join 数组转字符串

• 定义：
  • 将数组按照指定符号拼接成字符串，默认按逗号拼接。
• 语法：
  • arr.join(str)
• 参数（可选）：
  • str: 指定要使用的分隔符，默认使用逗号作为分隔符。
• 返回值：
  • 由 str 拼接起来的字符串
• 注意点：
  • 数组元素是：
    • 数组时，对里边的数组会调用 toString() 方法，如果数组里边还是数组，则继续 toString
    • 对象时，转为字符串 [object Object]