Array 的一些常用 API

vslam 发布于2019-08-23 13:49 / 3334人阅读

摘要：不能通过判断，它是通过比较的。和返回布尔值用于检测数组中的元素是否有满足指定条件的用于检测数组中所有元素是否都符合指定条件。第二个可选参数是累加器的初始值。累加器，即函数上一次调用的返回值。

unshift、push、shift、pop

这4个方法都会改变原数组

unshift() 从前面添加元素，push() 从后面追加元素，返回数组长度

shift() 删除第0个元素，pop() 删除最后一个元素，返回被删除的元素

slice

不改变原数组

slice(m, n)返回原数组索引m（包含）到n（不包含）的元素数组。不传参数默认全部截取，只传一个参数，从该位置截取到末位。类似于String.prototype.substring

let arr = [1,2,3,4,5]
console.log(arr.slice()); // [ 1, 2, 3, 4, 5 ]
console.log(arr.slice(1)); // [ 2, 3, 4, 5 ]
console.log(arr.slice(2,4)); // [ 3, 4 ]
console.log(arr); // [1,2,3,4,5]

splice

改变原数组。

splice(m,n,e1,e2,e3) 从索引m（包括）到n（不包括）的元素删除数组，再在该位置处添加e1，e2，e3。若n传入0，则只增加；若只传m和n，则只删除；若只传m，则从m位置删除到末位。放回删除元素数组

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

concat

拼接，不改变原数组

let arr = [1,2,3], arr1 = [4];
console.log(arr.concat(arr1, 5), arr); // [ 1, 2, 3, 4, 5, ] [ 1, 2, 3 ]
console.log([...arr, ...arr1, 5]); // [ 1, 2, 3, 4, 5 ] （对象也可以这样拼接，但重复的会覆盖，相当与 Object.assign）

of 和 from

of()类似于new Array()，但后者如果传入一个参数，则是设置数组长度。

from() 把伪数组转换为真数组，类似于[].slice.call()（或者写成Array.prototype.slice.call()）

伪数组有DOM集、arguments、{0: "zero", 1: "one", length: 2}

Array.of(1,2,3,4); // [ 1, 2, 3, 4 ]
Array.from({0: "zero", 1: "one", length: 2}); // [ "zero", "one" ]

判断数组的方法有

xx instanceof Array

Array.isArray()

Object.prototype.toString.call() === "[object Array]"

这里补充一点判断类型的技巧：

typeof操作符可以判断出number、boolean、string、function和undefined，而不能判断处具体的Object类型。

判断Array要使用Array.isArray(arr)；

判断null请使用myVar === null；

判断某个全局变量是否存在用typeof window.myVar === "undefined"；

函数内部判断某个变量是否存在用typeof myVar === "undefined"

不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}，如果需要转换可以用 !!myVar

不要使用new Number()、new Boolean()、new String() 创建包装对象；

用parseInt()或parseFloat()来转换任意类型为Number；用String()来转换任意类型为String，或者直接调用某个对象的toString()方法；

indexOf 和 includes

indexOf() 返回索引，不存在就返回 -1。inclues()返回布尔值。

NaN 不能通过indexOf()判断，它是通过“===”比较的。

arr = [1, "2", null, NaN];
arr.indexOf(NaN); // -1
arr.includes(NaN); // true

filter、find 和 findIndex

filter() 返回数组。find() 返回值，不存在就返回 undefined。 findIndex() 返回第一个匹配到的索引，不存在就返回 -1。

// let arr = [1, "2", null, NaN];
// arr.filter(item => typeof item === "number"); // [1, NaN]
// arr.find(item => typeof item === "number"); // 1
// arr.findIndex(item => typeof item === "number"); // 0

some 和 every

返回布尔值

some()用于检测数组中的元素是否有满足指定条件的；every()用于检测数组中所有元素是否都符合指定条件。

不对空数组进行检测，不改变原数组

let arr = [Array(), [], {}, null]
let res1 = arr.some((item, index, arr) => {
    return Object.prototype.toString.call(item) === "[object Array]"
})
let res2 = arr.every((item, index, arr) => {
    return Object.prototype.toString.call(item) === "[object Array]"
})
console.log(res1,res2); // true false

map 和 forEach

map() 对数组中的每个元素进行处理，得到新的数组，不改变原数组

forEach() 相当于 for 循环，返回 undefined，不改变原数组

let res = [0,1,2,3,4].map((item, idx)=> item * idx); // [ 0, 1, 4, 9, 16 ]

reduce

reduce((accumulator, currentValue, currentIndex, array)=>{}, initValue)

第一个参数是迭代器函数，函数的作用是对数组中从左到右的每一个元素进行处理。第二个可选参数是累加器的初始值。没有时，累加器第一次的值为currentValue。

accumulator 累加器，即函数上一次调用的返回值。第一次的时候为 initialValue || arr[0]

currentValue 数组中函数正在处理的的值，第一次的时候是 initialValue || arr[1]

currentIndex 数组中函数正在处理的的索引

array 函数调用的数组

console.log(
    [1,2,3].reduce((a,b,c,d)=>{
        console.log(a,b,c,d);
        return a+b; // 下一次的a
    }, 4)
); // 10
/* 
    4 1 0 [ 1, 2, 3 ]
    5 2 1 [ 1, 2, 3 ]
    7 3 2 [ 1, 2, 3 ] 
*/

当然累乘或者做其他业务也是可以的。

海外云主机私有云 linux的一些常用命令常用api接口 java的一些代码深度学习的一些应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99605.html

常用数组操作方法

摘要：是对象内置的方法参数是字符串是的数组参数有函数和默认初始值函数有四个参数上一次的返回值当前值当前值索引当前数组求和替换方案求和，利用截取改变数组再利用递归求和合并方法用于合并两个或多个数组。来源于：阿贤博客在日常的开发中离不开前端对数据的处理，在这里整理下ES6/ES7/ES8...新的数组api。扁平化n维数组 Array.flat() -- ES10 方法会按照一个可指定的...

vvpale 2019-08-23 16:43 评论0 收藏0
关于一些常用数组API的记忆方法（借鉴）

摘要：为开始截取的索引可为负值，为结束的索引可选向从目标数组中添加删除项目，然后返回被删除的项目。返回累加之后的结果上一次调用回调返回的值，或者是提供的初始值数组中当前被处理的数组项当前数组项在数组中的索引值调用方法的数组帮助记忆增删查改增 arr.push(); // 目标数组尾部添加，返回新数组长度 arr.unshift(); // 目标数组首部添加，返回新数组...

Pluser 2019-08-22 16:07 评论0 收藏0
ECMAScript 5.1 实用特性概览

摘要：返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。方法测试数组中的某些元素是否通过了指定函数的测试，返回值非常实用的功能，判断数组中是否某元素符合特定条件。 ECMAScript 5发布于2009年12月。ECMAscript 5.1版(下文称ES5)发布于2011年6月，，并且成为ISO国际标准（ISO/IEC 16262:2011） http://www.ecma...

xiao7cn 2019-08-21 10:57 评论0 收藏0
ECMAScript 5.1 实用特性概览

摘要：返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。方法测试数组中的某些元素是否通过了指定函数的测试，返回值非常实用的功能，判断数组中是否某元素符合特定条件。 ECMAScript 5发布于2009年12月。ECMAscript 5.1版(下文称ES5)发布于2011年6月，，并且成为ISO国际标准（ISO/IEC 16262:2011） http://www.ecma...

bang590 2019-08-01 15:31 评论0 收藏0
前端常用代码片段(五)

摘要：当运行时，如果不为，则将超时函数推送到事件队列，并且函数退出，从而使调用堆栈清零。因此，该方法从头到尾不经过直接递归调用即可处理，因此调用堆栈保持清晰，无论迭代次数如何。前端常用代码片段(一) 点这里前端常用代码片段(二) 点这里前端常用代码片段(三) 点这里前端常用代码片段(四) 点这里 1.tap事件点透问题？问题点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触...

MoAir 2019-08-23 14:41 评论0 收藏0