暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

前囧(06篇)Array 方法详解

前端囧事 2021-01-05
206

属性

length 返回
设置
数组长度

创建数组

new Array
| Array
| []

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

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

Array.of

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

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

改变原数组

Array.push

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

let array = [12]
let length = array.push(34)

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

Array.pop

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

let array = [1234]
let item = array.pop()

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

Array.unshift

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

let array = [234]
let length = array.unshift(01)

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

Array.shift

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

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

Array.reverse

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

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

Array.sort

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

let array = [1234]
    array.sort((a, b) => a - b)    // 从小到大 a - b < 0
    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(40567)     // 添加       [1,2,3,4,5,6,7]  返回值[]
    array.splice(43)              // 删除       [1,2,3,4]        返回值[5,6,7]
    array.splice(310)           // 替换       [1,2,3,0]        返回值[4]
    array.splice(3145)        // 删除+添加   [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(01)  

Array.fill

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

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

循环方法

Array.from

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

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


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

Array.some

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

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


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

Array.every

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

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


[falsetrue].every(Boolean)        // false
[truetrue].every(Boolean)         // true

Array.forEach

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

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

Array.find

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

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


[512813044].find(item => item > 10)      // 12
[512813044].find(item => item < 1)       // undefined

Array.findIndex

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

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


[512813044].findIndex(item => item > 10// 1
[512813044].findIndex(item => item < 1)  // -1

Array.map

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

let array = [1234];
let newArray = [1234].map(a => a + 2)

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

Array.filter

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

[1234].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
 */


[1234].indexOf(2)         // 1
[1234].indexOf(5)         // -1

Array.includes

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

[1234].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

,
格式拼成字符串

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

Array.isArray()

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

Array.isArray([123]);       // true
Array.isArray({foo123});      // false
Array.isArray("foobar");        // false
Array.isArray(undefined);       // false

Array.join

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

['Fire''Air''Water'].join('--')     // "Fire--Air--Water"
[undefinednull'Water'].join('--')       // "----Water"

Array.concat

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

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


文章转载自前端囧事,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论