博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Array 的一些常用 API
阅读量:5951 次
发布时间:2019-06-19

本文共 3250 字,大约阅读时间需要 10 分钟。

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); // -1arr.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 ] */

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

转载地址:http://jasxx.baihongyu.com/

你可能感兴趣的文章
Java8 本地DateTime API
查看>>
jQuery 增加 删除 修改select option
查看>>
[原][osgearth]osgearthviewer读取earth文件,代码解析(earth文件读取的一帧)
查看>>
springboot 常用插件
查看>>
一个基于特征向量的近似网页去重算法——term用SVM人工提取训练,基于term的特征向量,倒排索引查询相似文档,同时利用cos计算相似度...
查看>>
[转]Newtonsoft.Json高级用法
查看>>
35个Java代码性能优化总结
查看>>
Spring+SpringMVC+MyBatis+easyUI整合基础篇(一)项目简述及技术选型介绍
查看>>
第一百五十一节,封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全...
查看>>
vue实例
查看>>
(zhuan) LSTM Neural Network for Time Series Prediction
查看>>
web页面防盗链功能使用--request.getHeader("Referer")
查看>>
AAuto如何设置定时器
查看>>
Java Code Examples for org.apache.ibatis.annotations.Insert
查看>>
为linux扩展swap分区
查看>>
python \uxxxx转中文,Python列表中的字典 \uxxxx转中文,
查看>>
解决ios下的微信打开的页面背景音乐无法自动播放(转载)
查看>>
系统编程是什么
查看>>
git rebase简介(基本篇)
查看>>
Backup and Recovery Basics1
查看>>