JS 数组的使用方法

改变原数组的方法(9个)

es5: splice() / sort() / pop() / shift() / push() / unshift() / reverse()

es6: copyWithin() / fill()

不改变原数组的方法(8个)

es5:slice() / join() / toLocateString() / toString() / concat() / indexOf() / lastIndexOf()

es7:  includes()

遍历数组并不会改变原始数组的方法(12个)

es5:forEach() / every() / some() / filter() / map() / reduce() / reduceRight()

es6:  find() / findIndex() / keys() / values() / entries()

splice   添加/删除数组元素,返回被添加/删除的数组

        语法:array.splice(index,howmany,item1,.....,itemX)

        参数:

                index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

                howmany:可选。要删除的项目数量。如果设置为 0,则不会删除项目。

                item1, ..., itemX: 可选。向数组添加的新项目。

sort   数组排序, 返回排序好的数组

        参数可选:   规定排序顺序的比较函数

pop   删除数组的最后一个元素,并返回这个元素。参数:无

shift   删除数组的第一个元素,并返回这个元素。参数:无

push   向数组末尾添加一个元素或多个元素,并返回新数组长度

        参数:   item1, item2, ..., itemX ,要添加到数组末尾的元素

unshift   向数组的开头添加一个或多个元素,并返回新数组长度

        参数:    item1, item2, ..., itemX ,要添加到数组开头的元素

reverse  颠倒数组中元素的顺序

slice   浅拷贝数组的元素,返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象,且原数组不会被修改。

        注意:字符串也有一个slice() 方法是用来提取字符串的,不要弄混了。

        语法:array.slice(begin, end)

        参数:

                begin(可选): 索引数值,接受负值,从该索引处开始提取原数组中的元素,默认值为0。

                end(可选):索引数值(不包括),接受负值,在该索引处前结束提取原数组元素,默认值为数组末尾(包括最后一个元素)。

join  数组转为字符串,join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串,返回生成的字符串。

        语法:array.join(str)

        参数:str(可选): 指定要使用的分隔符,默认使用逗号作为分隔符。

join()/toString()方法在数组元素是数组的时候,会将里面的数组也调用join()/toString(),如果是对象的话,对象会被转为[object Object]字符串。

toLocateString   数组转为字符串,返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接(由逗号隔开)组成。

        语法: array.toLocaleString()

        参数:无

调用数组的toLocaleString方法,数组中的每个元素都会调用自身的toLocaleString方法,对象调用对象的toLocaleString,对象会被转为[object Object]字符串, Date调用Date的toLocaleString

toString   数组转字符串 不推荐, toString() 方法可把数组转换为由逗号链接起来的字符串。

值得注意的是:当数组和字符串操作的时候,js 会调用这个方法将数组自动转换成字符串

concat   用于合并两个或多个数组,返回一个新数组

        语法:var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)

        参数:arrayX(必须):该参数可以是具体的值,也可以是数组对象。可以是任意多个。

ES6扩展运算符...合并数组 

indexOf   查找数组是否存在某个元素,返回下标。返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1

        语法:array.indexOf(searchElement,fromIndex)

        参数:

                searchElement(必须):被查找的元素

                fromIndex(可选):开始查找的位置(不能大于等于数组的长度,否则返回-1),接受负值,默认值为0。

数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素,即数组元素要完全匹配才能搜索成功。

使用场景:数组去重

lastIndexOf   查询指定元素在数组中的最后一个位置。方法返回指定元素,在数组中的最后一个的索引,如果不存在则返回 -1。(从数组后面往前查找)

        语法:arr.lastIndexOf(searchElement,fromIndex)

        参数:

                searchElement(必须): 被查找的元素

                fromIndex(可选): 逆向查找开始位置,默认值数组的长度-1,即查找整个数组。

        关于fromIndex有三个规则:

  1. 正值。如果该值大于或等于数组的长度,则整个数组会被查找。

  2. 负值。将其视为从数组末尾向前的偏移。(比如-2,从数组最后第二个元素开始往前查找)

  3. 负值。其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。

 includes   查找数组是否包含某个元素 返回布尔

        语法:array.includes(searchElement,fromIndex=0)

        参数:

                searchElement(必须):被查找的元素

                fromIndex(可选):默认值为0,参数表示搜索的起始位置,接受负值。正值超过数组长度,数组不会被搜索,返回false。负值绝对值超过长数组度,重置从0开始搜索。

cludes方法是为了弥补indexOf方法的缺陷而出现的:

  1. indexOf方法不能识别NaN
  2. indexOf方法检查是否包含某个值不够语义化,需要判断是否不等于-1,表达不够直观

forEach   按升序为数组中含有效值的每一项执行一次回调函数。

        语法:array.forEach(function(currentValue, index, arr), thisValue)

        参数:

                function(必须): 数组中每个元素需要调用的函数。

                     // 回调函数的参数
                    1. currentValue(必须),数组当前元素的值
                    2. index(可选), 当前元素的索引值
                    3. arr(可选),数组对象本身

                thisValue(可选): 当执行回调函数时this绑定对象的值,默认值为undefined

关于forEach()你要知道

  • 无法中途退出循环,只能用return退出本次回调,进行下一次回调。
  • 它总是返回 undefined值,即使你return了一个值。

下面类似语法同样适用这些规则

    1. 对于空数组是不会执行回调函数的
    2. 对于已在迭代过程中删除的元素,或者空元素会跳过回调函数
    3. 遍历次数再第一次循环前就会确定,再添加到数组中的元素不会被遍历。
    4. 如果已经存在的值被改变,则传递给 callback 的值是遍历到他们那一刻的值。

every   检测数组所有元素是否都符合判断条件

        语法、参数与forEach类似

  1. 如果数组中检测到有一个元素不满足,则整个表达式返回 false,且剩余的元素不会再进行检测。
  2. 如果所有元素都满足条件,则返回 true

some    数组中的是否有满足判断条件的元素

         语法、参数与forEach类似

  1. 如果有一个元素满足条件,则表达式返回true, 剩余的元素不会再执行检测。

  2. 如果没有满足条件的元素,则返回false

reduce    为数组提供累加器,合并为一个值

        语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

        参数:

                function(必须): 数组中每个元素需要调用的函数。

                        // 回调函数的参数
                    1. total(必须),初始值, 或者上一次调用回调返回的值
                    2. currentValue(必须),数组当前元素的值
                    3. index(可选), 当前元素的索引值
                    4. arr(可选),数组对象本身

                initialValue(可选): 指定第一次回调 的第一个参数。

        回调第一次执行时:

  • 如果 initialValue 在调用 reduce 时被提供,那么第一个 total 将等于 initialValue,此时 currentValue 等于数组中的第一个值;
  • 如果 initialValue 未被提供,那么 total 等于数组中的第一个值,currentValue 等于数组中的第二个值。此时如果数组为空,那么将抛出 TypeError。
  • 如果数组仅有一个元素,并且没有提供 initialValue,或提供了 initialValue 但数组为空,那么回调不会被执行,数组的唯一值将被返回。

reduceRight   从右至左累加

这个方法除了与reduce执行方向相反外,其他完全与其一致,请参考上述 reduce 方法介绍。

find & findIndex  根据条件找到数组成员

find()定义:用于找出第一个符合条件的数组成员,并返回该成员,如果没有符合条件的成员,则返回undefined。

findIndex()定义:返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

        语法、参数与forEach类似

keys & values & entries 遍历键名、遍历键值、遍历键名+键值,三个方法都返回一个新的 Array Iterator 对象,对象根据方法不同包含不同的值

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值