Array数组方法

几种数组

• 稀疏数组，例如[1,,2,3,4] => [1,empty,2,3,4]，仅了解
• 伪数组/类数组，具有length属性，但不具备其他数组属性和方法
  • arguments
  • document.querySelectAll()获取的DOM节点
  • 字符串
• 数组

数组转字符串（不影响原始值）

toString

方法可把数组转换为字符串，并返回结果，可适用于多维数组

const arr = [1,[2,[3,[4,5]],6]]
console.log(arr.toString());  // 1,2,3,4,5,6
console.log(Array.prototype.toString.call([1,[2,[3,[4,5]],6]])); // 1,2,3,4,5,6

join

把数组中的所有元素转换一个字符串，对于嵌套数组最好不传参数，因为只会在第一次后插入分隔符，跟split相反

const arr = [1,[2,[3,[4,5]],6]]
console.log(arr.join()); // 1,2,3,4,5,6
console.log(arr.join('-')); // 1-2,3,4,5,6

字符串/伪数组转数组

split

• 把一个字符串分割成字符串数组，跟join相反

const str = '123'
console.log(str.split()); // ['123']
console.log(str.split('')); // ['1', '2', '3']

Arrary.prototype.slice.call()

const str = '123'
console.log(Array.prototype.slice.call(str)) // ['1', '2', '3']
function test() {
    console.log(Array.prototype.slice.call(arguments)); // [1, 2, 3]
}
test(1,2,3)

ES6新增的Array.from方法

---

push pop unshift shift （会改变原来的数组）

• push 在最后增加，返回新增后数组长度
• unshift 在最前增加，返回新增后数组长度
• pop 在最后删除，返回删除的项目
• shift 在最前删除，返回删除的项目

排序 reverse sort 随机排序（会改变原数组）

const arr = [9,5,7,2,1,3]
console.log(arr.sort()); //正序 从小到大 [1, 2, 3, 5, 7, 9]
console.log(arr.sort(()=> Math.random() - 0.5)); // sort的随机排序
console.log(arr.sort((a,b)=>b-a)); // 倒序 从大到小 [9, 7, 5, 3, 2, 1]
console.log(arr.reverse()); //颠倒数组 [3, 1, 2, 7, 5, 9]
console.log(arr.reverse() === arr); // true
console.log(arr.sort() === arr); // true

拼接 concat（不影响原数组）

concat会复制一份数组，进行拼接后返回

const arr = [1,2]
console.log(arr.concat(3,4,5)); // [1, 2, 3, 4, 5] 也可用ES6的扩展运算符[...arr,x1,x2]
console.log(arr.concat([3,4])); // 会进行简单的处理 [1, 2, 3, 4]
console.log(arr.concat([3,[4]])); // 需递归处理 [1, 2, 3, Array(1)] 
console.log(arr.concat([1,2],[5,6])); // [1, 2, 1, 2, 5, 6]

删改 slice splice

选取范围 [start,end）：左闭右开

slice （不修改原数组）

• 选取数组的一部分，并返回一个新数组
• 提取字符串的某个部分，并以新的字符串返回被提取的部分

const arr = [1,2,3,4,5]
console.log(arr.slice()); // 不传参数 ，拷贝一份原数组 [1, 2, 3, 4, 5]
console.log(arr.slice(2)); // [3, 4, 5]
console.log(arr.slice(2,4)); // [3, 4]
console.log(arr.slice(-4)); // [2, 3, 4, 5]
console.log(arr.slice(-4,-2)); // [2, 3]
console.log(arr.slice(4,2)); // 无交集,所以返回空数组 []

const str = 'Hello World'
console.log(str.slice()); //不传参数  直接输出Hello World
console.log(str.slice(6)); // World
console.log(str.slice(2,7)); // llo W
console.log(str.slice(-5)); // World
console.log(str.slice(-8,-3)); // lo Wo
console.log(str.slice(5,2)); // 无交集,所以返回空字符串

splice （修改原数组）

用于添加或删除数组中的元素，若是删除，则返回被删除的元素数组，不删除，则返回空数组

• 参数1（必填）：index 指定从哪里开始添加或者删除元素，不填则返回空数组
• 参数2（可选）：规定删除多少元素，如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素
• 参数3（可选）：需要添加的元素，在arr[index]添加

const arr=[1,2,3,4,5,6,7,8,9]
console.log(arr,arr.splice()); // [1, 2, 3, 4, 5, 6, 7, 8, 9] []
console.log(arr,arr.splice(4)); // [1, 2, 3, 4] [5, 6, 7, 8, 9]
console.log(arr,arr.splice(-2)); // [1, 2, 3, 4, 5, 6, 7] [8, 9]
console.log(arr,arr.splice(2,5)); // [1, 2, 8, 9] [3, 4, 5, 6, 7]
console.log(arr,arr.splice(-3,2)); // [1, 2, 3, 4, 5, 6, 9] [7, 8]
console.log(arr.splice(2,-1)); // 第二个参数需要大于等于0的数字，否则返回都为[]
console.log(arr,arr.splice(0,0,'a','b')); // ['a', 'b', 1, 2, 3, 4, 5, 6, 7, 8, 9] []
console.log(arr,arr.splice(0,0,['a','b'],'c')); // [['a', 'b'], 'c', 1, 2, 3, 4, 5, 6, 7, 8, 9] []
console.log(arr,arr.splice(2,0,'a','b')); //在arr[2]的位置上添加元素 [1, 2, 'a', 'b', 5, 6, 7, 8, 9] [3, 4]

查找元素方法 indexOf lastIndexOf

indexOf

从头开始查找元素，返回元素第一次出现的位置，找不到返回-1

lastIndexOf

从尾开始查找元素，返回元素最后一次出现的位置，找不到返回-1

indexOf/lastIndexOf的参数2合法取值是 0 到 stringObject.length - 1

const arr=[1,2,3,4,5,6,7]
console.log(arr.indexOf(8)); // -1
console.log(arr.indexOf(3)); // 2
console.log(arr.lastIndexOf(8)); // -1
console.log(arr.lastIndexOf(3)); // 2

ES6新增查找元素方法 includes find findIndex

includes

判断一个数组是否包含一个指定的值，如果是返回 true，否则false

• 参数1（必填）：传入需要查找的参数
• 参数2（可选）：从哪里开始查找，默认为0，若是传入负数，则从 arr.length + index 开始查找

const arr=[1,2,3,4,5,6,7]
console.log(arr.includes(3)); // true
console.log(arr.includes(8)); // false
console.log(arr.includes(3,2)); // true
console.log(arr.includes(3,3)); // false
console.log(arr.includes(3,-5)); //长度为7, 7 +(-5)=2，从arr[2]开始查找 所以true
console.log(arr.includes(3,-4)); // false
console.log([1,2,undefined].includes(undefined)); // true

find

find() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 undefined

findIndex

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 -1

arr = [1,22,33,3,4,5]
console.log(arr.find(function(n){return n > 22})); // 33
console.log(arr.find(function(n){return n > 55})); // undefined
console.log(arr.findIndex(function(n){return n > 22})); // 2
console.log(arr.findIndex(function(n){return n > 55})); // -1

ES6新增方法 Array.of() Array.from() Array.fill()

Array.of

方法用于将一组值转换为数组，不考虑参数的数量或类型

console.log(Array(3)); //创建一个长度为3的空数组 [空属性 × 3]
console.log(Array.of(3)); // [3]
console.log(Array(3,4,5)); // [3, 4, 5]
console.log(Array.of(3,4,5)); // [3, 4, 5]
console.log(Array.of([3,[4]])); // [[3,[4]]]

Array.from

用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组

console.log(Array.from('123')); // ['1', '2', '3']
function test() {
    console.log(Array.prototype.slice.call(arguments)); // [1, 2, 3, 4, 5]
    console.log(Array.from(arguments)); // [1, 2, 3, 4, 5]
    console.log([...arguments]); // [1, 2, 3, 4, 5]
}
test(1,2,3,4,5)

fill

用于将一个固定值替换数组的元素

const arr = [1,2,3,4,5]
console.log(arr.fill(6)); // [6, 6, 6, 6, 6]
console.log(arr.fill(6,2,4)); // [1, 2, 6, 6, 5]