给array添加元素_前囧（06篇）Array 方法详解

属性

length 返回 或 设置 数组长度

创建数组

new Array | Array | []

// 方式1 三种情况
Array()             // []
Array(2)            // [empty *2]
Array(1, 2)         // [1, 2]

// 方式2 三种情况
new Array()         // []
new Array(2)        // [empty *2]
new Array(1, 2)     // [1, 2]

Array.of

解决 Array() 一个参数的缺陷

Array.of(2)         // [2]
Array.of(1, 2, 3)   // [1, 2, 3]

改变原数组

Array.push

尾部新增一个或多个元素, 返回数组的长度

let array = [1, 2]
let length = array.push(3, 4)

// 返回长度 改变原数组
console.log(length) // 4
console.log(array)  // [1, 2, 3, 4]

Array.pop

尾部取出 一个元素, 并返回这个元素

let array = [1, 2, 3, 4]
let item = array.pop()

// 从原数组中取出最后元素, 并返回
console.log(item)   // 4
console.log(array)  // [1, 2, 3]

Array.unshift

头部添加一个或多个元素, 返回数组的长度

let array = [2, 3, 4]
let length = array.unshift(0, 1)

// 返回长度 改变原数组
console.log(length)
console.log(array)

Array.shift

头部取出一个元素, 并返回这个元素

let array = [1,2,3,4]
let item = array.shift()

Array.reverse

翻转一个数组，改变原数组并返回

let array = [1, 2, 3, 4]
let newArray = array.reverse()
// 改变原数组，并返回
console.log(array)      // [4, 3, 2, 1]
console.log(newArray)   // [4, 3, 2, 1]

Array.sort

排序 原地算法 默认将元素转换字符串，按照utf16比较，返回原数组

let array = [1, 2, 3, 4]
    array.sort((a, b) => a - b)    // 从小到大 a - b 
    array.sort((a, b) => b - a)    // 从大到小 b - a > 0
    array.sort((a, b) => 0)        // 保持不变 0

Array.splice

数组的添加 修改 删除

/**
 * splice(start, deleteCount, ...addItems)
 * start => 起始位置 (正数 负数 0)
 *
 * return [删除或被替换的元素]
 */ 

let array = [1,2,3,4]
    array.splice(4, 0, 5, 6, 7)     // 添加       [1,2,3,4,5,6,7]  返回值[]
    array.splice(4, 3)              // 删除       [1,2,3,4]        返回值[5,6,7]
    array.splice(3, 1, 0)           // 替换       [1,2,3,0]        返回值[4]
    array.splice(3, 1, 4, 5)        // 删除+添加   [1,2,3,4,5]      返回值[0]

Array.copyWithin

浅复制 同数组的 一部分数据 覆盖 另一部分相同长度的数据，并返回它，不会改变原数组的长度

/**
 * copyWithin(pasteIndex, copyStart, copyEnd)
 * pasteIndex   粘贴位置索引 (正数 负数 0)
 * copyStart    拷贝开始位置 default => 0
 * copyEnd      拷贝结束位置 default => length
 */

let array = [1,2,3,4]
    array.copyWithin(1)     // [1, 1, 2, 3] 等同 array.copyWithin(1, 0, 4)
    array.copyWithin(0, 1)  

Array.fill

填充数组, 开始索引到终止索引

Array(5).fill()         // [undefined, undefined, undefined, undefined, undefined]
Array(5).fill(1, 1, 2)  // [empty, 1, empty × 3]

循环方法

Array.from

浅拷贝 把类数组或可迭代对象转为数组

/**
 * from(arrayLike[, mapFn[, thisArg]])
 * arrayLike => 类数组, 可迭代对象
 * mapFn =>     回调函数
 * thisArg =>   回调函数绑定的this
 */

Array.from({0: '1', 1: '2', length: 2}, a => a) // ['1', '2']
Array.from({0: '1', 1: '2', length: 3}, a => a) // ['1', '2', undefined]
Array.from({0: '0', 1: '1', length: 2}, function (a) {return this.name + a + '岁'}, {name: '小强今年'})  // ["小强今年0岁", "小强今年1岁"]

Array.some

是否有一个满足函数条件     返回Boolean

/**
 * some(mapFn[, thisArg])
 * mapFn =>     回调函数
 * thisArg =>   回调函数绑定的this
 */

[false, true].some(Boolean)                     // true
[false, true].some(function (a) {return a})     // true

Array.every

是否全部满足函数条件     返回Boolean

/**
 * every(mapFn[, thisArg])
 * mapFn =>     回调函数
 * thisArg =>   回调函数绑定的this
 */

[false, true].every(Boolean)        // false
[true, true].every(Boolean)         // true

Array.forEach

每个元素执行给定函数, 没有返回值

[1, 2, 3].forEach((item)=> console.log(item)) // console 1 2 3

Array.find

返回满足函数条件的第一个元素的值, 否则返回undefined

/**
 * find(mapFn[, thisArg])
 * mapFn =>     回调函数
 * thisArg =>   回调函数绑定的this
 */

[5, 12, 8, 130, 44].find(item => item > 10)      // 12
[5, 12, 8, 130, 44].find(item => item 1)       // undefined

Array.findIndex

返回满足函数条件的第一个元素的索引, 否则返回 -1

/**
 * findIndex(mapFn[, thisArg])
 * mapFn =>     回调函数
 * thisArg =>   回调函数绑定的this
 */

[5, 12, 8, 130, 44].findIndex(item => item > 10) // 1
[5, 12, 8, 130, 44].findIndex(item => item 1)  // -1

Array.map

执行回调函数，返回新生成数组

let array = [1, 2, 3, 4];
let newArray = [1, 2, 3, 4].map(a => a + 2)

console.log(array)      // [1, 2, 3, 4]
console.log(newArray)   // [3, 4, 5, 6]

Array.filter

过滤 返回满足函数条件的所有元素

[1, 2, 3, 4].filter(a => a > 1)     // [2, 3, 4]

Array.flatMap

拉平一层

[[1], [2], [3]].flatMap(a => a)     // [1, 2, 3]

Array.flat

拉平一层或多层

[1, [2, [3, [4]]]].flat(3)          // [1, 2, 3, 4]

查找

Array.indexOf

返回给定元素的第一个索引, 否则返回 -1

/*
 * indexOf(searchVal, fromIndex)
 * searchVal 要找的元素
 * fromIndex 从那个位置开始找 fromIndex 为负数 负数倒着数 length +  fromIndex
 */

[1, 2, 3, 4].indexOf(2)         // 1
[1, 2, 3, 4].indexOf(5)         // -1

Array.includes

返回查询结果, 查到 true 查不到 false

[1, 2, 3, 4].includes(2)        // true

Array Iterator 对象

Array.keys

返回一个包含数组中每个索引键的Array Iterator对象

var array = ["a", , "c"];
var sparseKeys = Object.keys(array);
var denseKeys = [...array.keys()];

// 即使item是empty也会获取到key
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]

Array.values

返回一个包含数组中每个值的Array Iterator对象

var array = ['a', 'b', 'c'];
var denseKeys = [...array.values()];    // ["a", "b", "c"]

Array.entries

返回一个新的Array Iterator对象，格式为 键/值

let array = ['a', 'b', 'c'];
for (let key of array.entries()) {
   console.log(key) // [0, a] [1, b] [2, c]
}

其他

Array.toString

用 , 格式拼成字符串

[undefined, null, false, 1, 'a', () => {}].toString()       // ,,false,1,a,() => {}

Array.isArray()

是否为数组, 解决typeof [] === 'object'的问题

Array.isArray([1, 2, 3]);       // true
Array.isArray({foo: 123});      // false
Array.isArray("foobar");        // false
Array.isArray(undefined);       // false

Array.join

以 separator 合并成 string 如果一个元素为 undefined 或 null，它会被转换为空字符串

['Fire', 'Air', 'Water'].join('--')     // "Fire--Air--Water"
[undefined, null, 'Water'].join('--')       // "----Water"

Array.concat

可以合并数组，对象，元素

[].concat(1, [2,3,4])        // [1,2,3,4]