导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

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]

⭐️ Array.prototype.join

const arr = ['1', '2', '3'];
console.log(arr.join()); // 1,2,3        不传参，默认 ',' 连接
console.log(arr.join('')); // 123
console.log(arr.join(',')); // 1,2,3

var arr = ['a', 'b', 'c', 'd', 'e'];
var str1 = arr.join();
console.log(str1);
var str2 = arr.join('');
console.log(str2);
var str3 = arr.join('-');
console.log(str3);

let arr = [
  ['Lance', 'GC'],
  'Jerry'
]
console.log(arr.join());
console.log(arr[0].join());
console.log(arr.join(''));
console.log(arr[0].join(''));
console.log(arr.join('-'));
console.log(arr[0].join('-'));

// 解析
// arr.join() ->
// 第一个元素还是数组，且里边都是基本类型，则对整个数组 toString => 
// ['Lance', 'GC'].toString() => 变成 'Lance,GC' 字符串，再把它和后边 Jerry join =>
// ['Lance,GC', 'Jerry'].join() => 默认逗号隔开 => 'Lance,GC,Jerry'

// arr[0].join() ->
// ['Lance', 'GC'].join() 相当于 ['Lance', 'GC'].join(',')
// 即把数组中两个成员拿出来，用逗号拼接 => 'Lance,GC'

// arr.join('') ->
// 对数组成员用 '' 空字符串拼接，发现第一个成员是个只包含基本类型数据的数组，需要先 toString 一下
// ['Lance', 'GC'].toString() => 'Lance,GC'
// 然后再把 'Lance,GC' 和 'Jerry' join('')一下，就变成了 'Lance,GCJerry'

// arr[0].join('') ->
// ['Lance', 'GC'].join('') => 'LanceGC'

// arr.join('-') ->
// 先对 ['Lance', 'GC'] 执行 toString 变成 'Lance,GC' =>
// 再把 'Lance,GC' 和 'Jerry' 用 '-' 拼接下，变成 'Lance,GC-Jerry'

// arr[0].join('-') ->
// ['Lance', 'GC'].join('-') 变成 'Lance-GC'

let arr = [
  { name: 'Lance', age: 27 },
  'Jerry'
]

console.log(arr.join('-'));
// [object Object]-Jerry

⭐️ String.prototype.split(separator, limit)

split ：将字符串按照指定的标识符切割成数组。

• separator: 分隔符
• limit: 返回的分割片段数量

var arr = ['a', 'b', 'c', 'd', 'e'];
var str1 = arr.join();
console.log(str1, str1.split(','));
var str2 = arr.join('');
console.log(str2, str2.split(''));
var str3 = arr.join('-');
console.log(str3, str3.split('-', 3));

var str = '123123'
console.log(str.split(''));
console.log(str.split(','));
console.log(str.split('-'));

indexOf() 查找数组是否存在某个元素，返回下标

• 定义：
  • 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
• 语法：
  • array.indexOf(searchElement, fromIndex)
• 参数：
  • searchElement(必须): 被查找的元素
  • fromIndex(可选): 开始查找的位置(不能大于等于数组的长度，返回-1)，接受负值，默认值为0。
• 返回值：
  • 索引 or -1
• 注意：
  • 严格相等的搜索：
    • 数组的 indexOf 搜索跟字符串的 indexOf 不一样,数组的 indexOf 使用严格相等 === 搜索元素，即数组元素要完全匹配才能搜索成功。
  • indexOf() 不能识别 NaN
  • indexOf() 什么都不传，相当于传 undefined

let a=['啦啦', 2, 4, 24, NaN];
console.log(a.indexOf('啦'));  // -1 
console.log(a.indexOf('NaN'));  // -1 
console.log(a.indexOf('啦啦')); // 0

let arr = ['Lance'];
console.log(arr.indexOf()); // -1
console.log(arr.indexOf(undefined)); // -1

let arr2 = ['Lance', undefined];
console.log(arr.indexOf()); // 1
console.log(arr.indexOf(undefined)); // 1

lastIndexOf() 查找指定元素在数组中的最后一个位置

• 定义：
• 语法：