谈ECMAScript中的数组类型

前言

除了对象类型之外，数组类型是一种特别常用的类型。当然，数组在其他语言中是不可或缺的属性。我们都知道js和其他语言中的数组是数据的有序列表，但是javaScript中的数组在某种程度上是不同的。具体的区别在于js中数组保存的数据可以是任何类型的数据。比如我可以把数字保存在第一位，字符串保存在第二位，第三和第四位的所有对象都完全OK。同时，我可以轻松操作数组的大小，新数据的长度会自动增加。动态调整什么都没问题！而C或其他语言的数组则与js的数组完全不同，至于什么是数组，如何创建，如何使用等等，不言而喻，我默认也是知道的！

文本

我们对数据的日常操作离不开数组。可以说数组被广泛使用，接口等返回的数据大多使用数组

首先，检查数组

我们已经知道什么是数组，那么如何检测数组呢？

实际上，有两种方法可以检测阵列：

实例

let arr=[]console . log(arr instance of array)//true instance of的判断其实就是判断两个操作数的构造函数的原型属性。在全局执行环境中，instanceof当然可以判断数组的类型。如果一个网页同时有两个框架怎么办？我将一个数组从一个帧传递到另一个帧，但是我从一个帧传入的数组和这个帧中的数组有不同的构造函数。使用instanceof判断是否为数组时，会出现问题。我该怎么办？

02、数组。数组

可以说，新增了Array.isArray()方法来解决这个问题。不管你从哪里来，去哪里，只要判断自己是不是数组类型，看看栗子就知道了：

让arr=[]；console . log(array . isarray(arr))//true第二，数组方法

当数组存储了我们需要的数据后，我们就对数据进行各种操作，数组为我们提供了以下方法(常用)

01、Array.prototype.join()

join()方法将数组的所有元素(如array对象)连接成一个字符串，然后返回该字符串，如果是一个元素，则直接返回该字符串

栗子：

让arr=['苹果'，'西红柿'，'香蕉']console . log(arr . join())//apple，西红柿，bananaconsole.log(arr.join(')))//apple .番茄. banana console . log(arr . join('-')//apple-番茄-banana let arr 1=[' apple ']console . log(arr 1 . join('))//apple从示例中可以看出，当没有添加任何内容时，会直接返回所有元素的字符串；添加分隔符时，会将新添加的字符直接添加到元素中；当数组中只有一个元素时，无论添加什么都会直接返回到该元素。

02、Array.prototype.push()

push()方法用于将一个或多个元素添加到数组的末尾，并返回数组的新长度

另一个栗子：

let arr=['apple '，'西红柿'，' banana ']console . log(arr . push(' orange ')//4 console . log(arr . push(' pear '，' peach '))//6 console . log(arr)；//['苹果'，'西红柿'，'香蕉'，'橘子'，'梨'，'桃子']03、Array.prototype.pop()

pop()方法删除数组的最后一个元素，然后返回删除的修改元素。这个方法将改变数组的长度，如果数组是空的，它将返回undefined

对方说他不想说话，扔了一个栗子：

let arr=['苹果'，'西红柿'，'香蕉'，'橘子'，'梨']console . log(arr . pop())//pear console . log(arr . pop())//orange sole . log(arr)/['苹果'，'西红柿'，'香蕉']04、Array.prototype.concat()

Concat方法是合并两个或多个数组，然后返回一个合并的新数组，但不改变原始数组

得到了一个新的栗子：

让arr=['苹果','西红柿]让arr1=['香蕉','橘子','梨]控制台。日志(arr。concat(arr 1))；//['苹果','西红柿','香蕉','橘子','梨]console.log(arr.concat(2，arr 1))；//['苹果','西红柿',2,'香蕉','橘子','梨]控制台。日志；//['苹果','西红柿'](原数组)05、Array.prototype.sort()

分类方法对数组进行排序，返回排序的数组

一个简单的粟子：

让array=[1，3，2，4，5，7，6，8]控制台。log(数组。sort())//[1，2，3，4，5，6，7，8]拓展的粟子：

让数组=[ { id: 5，名称： 'jk' }，{ id: 2，名称： 'jc' }，{ id: 3，名称： 'jg' }，{ id: 4，名称： 'jp' }，{ id: 1，名称： 'jq' }，{ id: 6，名称： 'jr '结果不出意外也是正序排序，降序反过来就好的了

06、Array.prototype.slice()

切片()方法从数组中返回选中的元素，对原数组进行浅拷贝

第一个参数为从0开始

第二个参数为从0开始

粟子：

让数组=[ { id: 5，名称： 'jk' }，{ id: 2，名称： 'jc' }，{ id: 3，名称： 'jg' }，{ id: 4，名称： 'jp' }，{ id: 1，名称： 'jq' }，{ id: 6，名称： 'jr '字符串让str='this1是slice'console.log(str.slice(0，5))//this1截取元素用的，但是原数组不会改变！

07、数组。原型。拼接()

拼接()方法用于添加、移除、删除数组的元素，修改后的元素以数组形式返回。

第一个参数为修改开始的位置

第二个参数为删除的个数

第三个参数为插入的参数

粟子：

让数组=[ { id: 5，名称： 'jk' }，{ id: 2，名称： 'jc' }，{ id: 3，名称： 'jg' }，{ id: 4，名称： 'jp' }，{ id: 1，名称： 'jq' }，{ id: 6，名称： 'jr '让arr={id: 7，name : ' YY ' }控制台。log(数组。拼接(1，1，arr))；//[ { id: 2，name : ' JC ' }]控制台。log(数组)；//[ { id: 5，名称： 'jk' }，id: 7，名称： 'yy' }，{ id: 3，名称： 'jg' }，{ id: 4，名称： 'jp' }，id: 1，名称： 'jq' }，{ id: 6，名称： 'jr' } .方法直接返回修改的内容，第一个原木返回的就是删除的元素，如果第二参数为0或者为负数的时候则会返回一个空的数组，第二个原木是改变后的数组。该方法会将原数组修改！

08、Array.prototype.shift()

班次()方法会将数组的第一个元素进行删除，然后返回删除的元素（如果数组为空将会返回未定义),该方法会修改数组的长度粟子：

让数组=[ { id: 5，名称： 'jk' }，{ id: 2，名称： 'jc' }，{ id: 3，名称： 'jg' }，{ id: 4，名称： 'jp' }，{ id: 1，名称： 'jq' }，{ id: 6，名称： 'jr '

unshift()该方法则是在数组的开头添加一个或者多个元素

粟子：

让数组=[ { id: 5，名称： 'jk' }，{ id: 2，名称： 'jc' }，{ id: 3，名称： 'jg' }，{ id: 4，名称： 'jp' }，{ id: 1，名称： 'jq' }，{ id: 6，名称： 'jr '

反向()方法用翻转数组元素的位置，然后返回该数组

让arr=[1，2，3，4，5]console . log(arr . reverse())//[5，4，3，2，1]11、Array.prototype.indexOf()

indexOf()方法用于给定的元素，然后从数组的开头查找数组。如果存在，则返回数组的下标，如果不存在，则返回-1

简单的栗子：

让array=[1，2，3，4，5，6，7，8，9] console.log (array。(3)的索引//2第二个栗子：(简单的重复数据删除)

let array=[1，2，3，4，5，1，2，6，8，3，8，9]函数arr(arr){ if(arr . length===0)returnlet n=[]；for(设I=0；长度；I){ if(n . indexof(arr[I])===-1){ n . push(arr[I])} }返回n } console . log(arr(arr(array))/[1，2，3，4，5，6，8，9 ]12、Array.prototype.lastIndexOf()

lastIndexOf()方法从数组的末尾搜索给定的元素，如果找到了，则返回其下标，如果不存在，则返回-1；

栗子：

Vararr1=[1，2，3，4，5]console . log(arr 1 . last indexof(3))//2迭代

1、Array.prototype.forEach()

forEach()方法为数组中的每个元素执行一次编写的回调函数(注意，一旦开始循环，就不能跳出循环)

回调函数接收三个参数

数组当前项目值

数组当前项的下标

当前数组简单栗子：

var word=['一'，'二'，'三'，'四']；words.forEach((item，index)={ if(item==' two '){ words . splice(index，1)})；console . log(word)//['一'，'三'，'四']2、Array.prototype.map()

map()方法迭代方法返回的新数组

简单的栗子：

让arr=[1，2，3，4，5，6]让arrs=arr . map(item=item 10)console . log(arrs)//[11，12，13，14，15，16]经典栗子：

设a=[1，2，3]。地图(parseInt)a？甲多少钱？有的答案可能是123，有的答案可能是其他。而且，这是一个经典的面试问题。你看的时候觉得很简单吗？

是不是很惊喜？或者这是你想要的？按照MDN的说法，是因为我们的回调函数通常接受一个参数，但是接受一个参数并不意味着map()方法只传递一个参数给回调函数。上面的例子是因为parsent在我们使用的时候通常会传递一个参数进行转换，但是parsent可以接受两个参数，只有第二个参数是二进制的，所以第二个参数会变成二进制的，所以第三个参数parsent。

会忽略，所以返回这个答案！

3、Array.prototype.some()

some()方法用于确定回调函数中的逻辑是返回true还是false

栗子：

var arr=['apple '，' banana '，' mango '，' guava']checkarr=(arr，val)={ return arr . some(item=val===item)} console . log(check arr(arr，' apple ')//true 4，Array.prototype.reduce()

reduce()方法接收一个函数作为累加器，数组中的每个值(从左到右)开始减少，最后变成一个值

第一个值是累加器(最后一个回调函数返回的值/最初的第一个值)

第二个值是当前值

第三个值是当前下标

第四个值是当前数组的简单栗子：

Vararr=[1，2，3，4，5] const data=arr。reduce ((prev，curr)=prev curr)console . log(data)//15组合数组中对象的值并累加它们(与find一起使用):

让tableNetWorkData=[{ ' newLocker ' : 6，' newSection': -2，' newSite': 1，' partnerShip': 'self'}，{'newLocker': 5，' newSection': 24，' newSite': 1，' partnerShip': 'self'}，{ ' newSection ' : 65，' newSite': 'if(pers){ pers . new locker=CurrNeXt . new locker；pers . newsection=current next . newsection；pers . newsite=current next . newsite；} else { let newPers={ new locker : currency next . new locker，newsection : currency next . newsection，newsite : currency next . newsite，partnership : currency next . partnership } per . push(newPers)} return per }，[])；console.log(结果)的结果如下：

要复制的另一个数组：

让arr=[1，2，2，3，4，5，5，6，8，7，7，9，8]让result=arr.reduce((prev，curr)={ if(prev . length===0 | | prev[prev . length-1]！==curr) {prev。push (curr)} return prev}，[])控制台。记录(结果)以查看结果：

5、Array.prototype.every()

every()方法用于检测数组的所有元素是否都通过了指定函数的逻辑运算。如果是，则返回真，否则返回假。请注意，无论逻辑如何，空数组都将返回true

回调函数通常采用三个参数：

现值

当前值的下标

原始数组

简单的栗子：

var arr=[1，30，39，21，10，13]；console . log(arr . every(curr={ return curr 45 }))；//预期输出： true6、Array.prototype.filter()

filter()方法是对原始数组进行过滤的方法，返回一个由所需元素组成的新数组，想象成一个漏斗，过滤一些匹配的元素！(不会改变原始数组)

现值

当前值的下标

原始数组

栗子：

让水果=['苹果'，'香蕉'，'葡萄'，'芒果'，'橘子']让filterindexOf=function(query){ return水果. filter(item={ return item . tolowercase()。indexOf(query . tolowercase())-1 })} console . log(filterindexOf(' an ')//[' banana '，' mango '，' orange']7、Array.prototype.toString()

方法是将数组元素转换成字符串

栗子：

var array1=['ca '，' ba '，' a '，' 1a ']；console . log(array 1 . ToString())；//'ca，ba，a，1a'8，Array.prototype.find()

find()方法返回数组中满足所提供测试函数的第一个元素的值

现值

当前值的下标

原始数组

栗子：

让arr=[ {name: '苹果'，value: 2}，{name: '香蕉'，value: 0}，{name: '樱桃'，value : 5 }]；let RES=arr . find((item)={ return item . name==='香蕉'；}) console.log (RES)//{name : '香蕉'，value : 0}摘要

我们对带有数组的数据的大多数常规操作都无法避免对带有数组的数据的进一步逻辑操作。因此，我们应该熟悉和熟练使用数组的一些方法。只有熟练运用数组的各种方法，才能对后端返回的数据进行一次穿梭操作，完成业务操作甚至更琐碎的操作，避免在使用数组方法时给自己挖一些不必要的坑。我们应该严格按照规范使用数组方法，这样就不会有上帝看不懂的bug。当然，文章介绍了一些常用的方法，对于数组还有其他方法没有写出来，所以需要自己去找。如有错误，请随时指出。非常感谢！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。