资讯专栏INFORMATION COLUMN

Js数组处理方式整理

SKYZACK / 1678人阅读

摘要:它的参数是一个回调函数,数组中的每一个成员依次执行这个回调函数。颠倒数组中元素的顺序。该参数是数组片断结束处的数组下标。会改变原数组必需。整数,规定添加删除项目的位置,使用负数可从数组结尾处规定位置。把数组转换为本地数组,并返回结果。

数组的转化

Array.from将类似数组的对象和可遍历的对象转为真正的数组

var arr1 = Array.from(arrayLikeObj); //ES6

var arr2 = [ ].slice.call(arrayLikeObj): //ES5

Array.of将一组值转换为数组

Array.of(3,11,7) // [3,11,7]
数组的复制

copyWithin将指定位置的成员复制到其它位置(会覆盖原有成员),然后返回当前数组。
此方法会修改原数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

接受三个参数

* target(必需):从该位置开始替换数据
* start(可选):从该位置开始读取数据,默认为0,如果是负值,表示倒数(右边第一位为-1)
* end(可选):到该位置前停止读取数据,默认为数组长度,如果是负值,表示倒数
[1,2,3,4,5,6].copyWithin(0,2) // [3,4,5,6,5,6]

[1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5]
数组的查找

查找成员

find方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数,数组中的每一个成员依次执行这个回调函数。
如果找到第一个符合条件的成员,返回该成员。如果没有符合条件的,则返回undefined

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

find方法的回调函数接受三个参数
value:当前值
index:当前位置
arr:原数组

查找成员位置

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

indexOf也可以返回成员位置,如果不存在,则返回-1,所以很多时候也用来判断成员是否存在

if (arr.indexOf(el) !== -1) {
    ... // el不存在数组中时执行
}

-判断成员是否存在

include方法判断某个给定值是否存在数组中,返回布尔值。

[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
数组的填充

使用fill()给定值填充数组

接受三个参数
target(必需):用该数值填充数组
start(可选):从该位置开始填充,不接收负值
end(可选):到该位置前停止填充

["a", "b", "c"].fill(7, 1, 2) // ["a",7,"c"]
数组的遍历取值

键名遍历:keys( )
键值遍历:values( )
键值对遍历:entries( )

可以用for...of循环遍历

for (let index of ["a", "b"].keys()) {
  console.log(index);}
// 0
// 1

for (let elem of ["a", "b"].values()) {
  console.log(elem);}
// "a"
// "b"

for (let [index, elem] of ["a", "b"].entries()) {
  console.log(index, elem);}
// 0 "a"
// 1 "b"
数组的元素操作

concat()连接两个或更多的数组,并返回结果。
arr1.concat(arr2)

ES6中可利用扩展运算符直接写成
[ ...arr1,...arr2]

join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop()删除并返回数组的最后一个元素

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

reverse()颠倒数组中元素的顺序。

shift()删除并返回数组的第一个元素

slice()
从某个已有的数组返回选定的元素(返回一个新数组)

arr.slice(start,end)

start

必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end

可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

sort()
对数组的元素进行排序(按照字符编码的顺序)

如果要按照数值大小对数字排序,必须使用一个排序函数arr.sort(sortNumber)

splice()删除元素,并向数组添加新元素。会改变原数组

arr.splice(index,howmany,item1,.....,itemX)

index

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

howmany

必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, ..., itemX

可选。向数组添加的新项目。

toSource()返回该对象的源代码。

toString()把数组转换为字符串,并返回结果。

toLocaleString()把数组转换为本地数组,并返回结果。

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

valueOf()返回数组对象的原始值

参考阮一峰《ECMAScript 6 入门》:http://es6.ruanyifeng.com/#do...

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

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

相关文章

  • 【重温基础】JS中的常用高阶函数介绍

    摘要:也可以直接调用内置方法常用高阶函数方法的作用是接收一个函数作为参数,对数组中每个元素按顺序调用一次传入的函数并返回结果,不改变原数组,返回一个新数组。 Ps. 晚上加班到快十点,回来赶紧整理整理这篇文章,今天老大给我推荐了一篇文章,我从写技术博客中收获到了什么?- J_Knight_,感受也是很多,自己也需要慢慢养成记录博客的习惯,即使起步艰难,难以坚持,但还是要让自己加油加油。 前...

    gitmilk 评论0 收藏0
  • 【重温基础】21.高阶函数

    摘要:欢迎您的支持系列目录复习资料资料整理个人整理重温基础篇重温基础对象介绍重温基础对象介绍重温基础介绍重温基础相等性判断重温基础闭包重温基础事件本章节复习的是中的高阶函数,可以提高我们的开发效率。 本文是 重温基础 系列文章的第二十一篇。 今日感受:想家。 本人自己整理的【Cute-JavaScript】资料,包含:【ES6/ES7/ES8/ES9】,【JavaScript基础...

    wua_wua2012 评论0 收藏0
  • 前端开发知识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 评论0 收藏0
  • 前端开发知识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    Sike 评论0 收藏0
  • 前端开发知识点整理

    摘要:前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理,涵盖前端理论与前端实践两方面。 前言:本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。 初衷...

    tracy 评论0 收藏0

发表评论

0条评论

SKYZACK

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<