深入浅出 JavaScript 数组(建议收藏)

今天来重学 JavaScript 中的数组,看看有哪些你不知道的细节!

数组是最常用的数据类型之一,ECMAScript数组跟其他语言的数组一样,都是一组有序的数据,但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。除此之外,ECMAScript数组的长度也是动态的,会随着数据的增删而改变。

数组是被等分为许多小块的连续内存段,每个小块都和一个整数关联,可以通过这个整数快速访问对应的小块。除此之外,数组拥有一个length属性,该属性表示的并不是数组元素的数量,而是指数组元素的最高序号加1。

在ES6中,可以使用扩展运算符(…)来获取数组元素:

数组的创建方式有以下两种。

最常用的创建数组的方式就是数组字面量,数组元素的类型可以是任意的,如下:

使用构造函数创建数组的形式如下:

如果已知数组元素数量,那么就可以给构造函数传入一个数值,然后length属性就会被自动创建并保存这个值,比如创建一个长度为10的数组:

这样,就可以创建一个长度为10的数组,数组每个元素的值都是undefined。

还可以给Array构造函数传入要保存的元素,比如:

这就出现问题了,当我们创建数组时,如果给数组传入一个值,如果传入的值是数字,那么就会创建一个长度为指定数字的数组;如果这个值是其他类型,就会创建一个质保函该特定制度额数组。这样我们就无法直接创建一个只包含一个数字的数组了。

Array 构造函数根据参数长度的不同,有如下两种不同的处理方式:

  • **new Array(arg1, arg2,…)**:参数长度为 0 或长度大于等于 2 时,传入的参数将按照顺序依次成为新数组的第 0 至第 N 项(参数长度为 0 时,返回空数组);
  • **new Array(length)**:当 length 不是数值时,返回一个只包含 length 元素一项的数组;当 length 为数值时,length 最大不能超过 32 位无符号整型,即需要小于 2,否则将抛出 RangeError。

在使用Array构造函数时,也可以省略 new 操作符,结果是一样的:

鉴于数组的常用性,ES6 专门扩展了数组构造器 Array ,新增了 2 个方法:Array.of和Array.from。Array.of 用得比较少,Array.from 具有很强的灵活性。

Array.of 用于将参数依次转化为数组项,然后返回这个新数组。它基本上与 Array 构造器功能一致,唯一的区别就在单个数字参数的处理上。

比如,在下面的代码中,可以看到:当参数为2个时,返回的结果是一致的;当参数是一个时,Array.of 会把参数变成数组里的一项,而构造器则会生成长度和第一个参数相同的空数组:

Array.from​ 的设计初衷是快速基于其他对象创建新数组,准确来说就是从一个类似数组的可迭代对象中创建一个新的数组实例。其实,只要一个对象有迭代器,Array.from 就能把它变成一个数组(注意:该方法会返回一个的数组,不会改变原对象)。

从语法上看,Array.from 有 3 个参数:

  • 类似数组的对象,必选;
  • 加工函数,新生成的数组会经过该函数的加工再返回;
  • this 作用域,表示加工函数执行时 this 的值。

这三个参数里面第一个参数是必选的,后两个参数都是可选的:

结果如图:

以上结果表明,通过 Array.from 这个方法可以自定义加工函数的处理方式,从而返回想要得到的值;如果不确定返回值,则会返回 undefined,最终生成的是一个包含若干个 undefined 元素的空数组。

实际上,如果这里不指定 this,加工函数就可以是一个箭头函数。上述代码可以简写为以下形式。

除了上述 obj 对象以外,拥有迭代器的对象还包括 String、Set、Map 等,Array.from 都可以进行处理:

当我们使用数组字面量初始化数组时,可以使用一串逗号来创建空位,ECMAScript会将逗号之间相应索引位置的值当成空位,ES6 重新定义了该如何处理这些空位。

我们可以这样来创建一个空位数组:

运行结果如下:

ES6新增的方法和迭代器与早期版本中存在的方法的行为不同,ES6新增方法普遍将这些空位当成存在的元素,只不过值为undefined,使用字面量形式创建如下数组:

使用ES6的Array.form创建数组:

而ES6之前的方法则会忽略这个空位:

由于不同方法对空位数组的处理方式不同,因此尽量避免使用空位数组。

在数组中,我们可以通过使用数组的索引来获取数组的值:

如果指定的索引值小于数组的元素数,就会返回存储在相应位置的元素,也可以通过这种方式来设置一个数组元素的值。如果设置的索引值大于数组的长度,那么就会将数组长度扩充至该索引值加一。

数组长度length的独特之处在于,他不是只读的。通过length属性,可以在数组末尾增加删除元素:

数组长度始终比数组最后一个值得索引大1,这是因为索引值都是从0开始的。

一个很经典的ECMASript问题就是如何判断一个对象是不是数组,下面来看常用的数据类型检测的方法。

在 ES6 之前,至少有如下 5 种方式去判断一个对象是否为数组。

  • 通过Object.prototype.toString.call() 做判断:
  • 通过constructor做判断:
  • 通过instanceof做判断:
  • 通过Array.prototype.isPrototypeOf做判断:
  • 通过基于getPrototypeOf做判断:

如果obj是一个数组,那么上面这 5 个判断全部为 true,推荐通过 Object.prototype.toString 去判断一个值的类型。

ES6 新增了 Array.isArray 方法,可以直接判断数据类型是否为数组:

如果 isArray 不存在,那么 Array.isArray 的 polyfill 通常可以这样写:

数字就像是一个森林,里面有很多函“树”,有些方法纯净如水,并不会改变原数组,有些则会改变原数组。

  • 改变原数组的方法:fill()、pop()、push()、shift()、splice()、unshift()、reverse()、sort();
  • 不改变原数组的方法:concat()、every()、filter()、find()、findIndex()、forEach()、indexOf()、join()、lastIndexOf()、map()、reduce()、reduceRight()、slice()、some。

ES提供了两个方法:批量复制方法copeWithin(),以及填充数组方法fill()。这两个方法的签名类似,都需要指定已有数组实例上的一个范围,包含开始索引,不包含结束索引。下面就分别来看一下这两个方法。

使用fill()方法可以向一个已有数组中插入全部或部分相同的值,开始索引用于指定开始填充的位置,它是可选的。如果不提供结束索引,则一直填充到数组末尾。如果是负值,则将从负值加上数组的长度而得到的值开始。该方法的语法如下:

其参数如下:

  • value:必需。填充的值;
  • start:可选。开始填充位置;
  • end:可选。停止填充位置 (默认为array.length)。

使用示例如下:

copyWithin()方法会按照指定范围来浅复制数组中的部分内容,然后将它插入到指定索引开始的位置,开始与结束索引的计算方法和fill方法一样。该方法的语法如下:

其参数如下:

  • target:必需。复制到指定目标索引位置;
  • start:可选。元素复制的起始位置;
  • end:可选。停止复制的索引位置 (默认为array.length)。如果为负值,表示倒数。

使用示例如下:

数组的转化方法主要有四个:toLocaleString()、toString()、valueOf()、join()。下面就分别来看一下这4个方法。

toString()方法返回的是由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串,也就是说,对数组的每个值都会调用toString()方法,以得到最终的字符串:

valueOf()方法返回的是数组本身,如下面代码:

toLocaleString()方法可能会返回和toString()方法相同的结果,但也不一定。在调用toLocaleString()方法时会得到一个逗号分隔的数组值的字符串,它与toString()方法的区别是,为了得到最终的字符串,会调用每个值的toLocaleString()方法,而不是toString()方法,看下面的例子:

需要注意,如果数组中的某一项是null或者undefined,则在调用上述三个方法后,返回的结果中会以空字符串来表示。

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。其使用语法如下:

其中参数separator是可选的,用来指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

该方法返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。

使用示例如下:

ECMAScript给数组添加了几个方法来使它像栈一样。众所周知,栈是一种后进先出的结构,也就是最近添加的项先被删除。数据项的插入(称为推入,push),和删除(称为弹出,pop)只在栈顶发生。数组提高了push()和pop()来实现类似栈的行为。下面就分别来看看这两个方法。

push()方法可以接收任意数量的参数,并将它们添加了数组末尾,并返回数组新的长度。该方法会改变原数组。 其语法形式如下:

使用示例如下:

pop() 方法用于删除并返回数组的最后一个元素。它没有参数。该方法会改变原数组。 其语法形式如下:

使用示例如下:

队列是一种先进先出的数据结构,队列在队尾添加元素,在对头删除元素。上面我们已经说了在结果添加数据的方法push(),下面就再来看看从数组开头删除和添加元素的方法:shift()和unshift()。实际上unshift()并不属于操作队列的方法,不过这里也一起说了。

shift()方法会删除数组的第一项,并返回它,然后数组长度减一,该方法会改变原数组。 语法形式如下:

使用示例如下:

注意:如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。

unshift()方法可向数组的开头添加一个或更多元素,并返回新的长度。该方法会改变原数组。 其语法形式如下:

使用示例如下:

数组有两个方法可以对数组进行重新排序:sort()和reverse()。下面就分别来看看这两个方法。

sort()方法是我们常用给的数组排序方法,该方法会在原数组上进行排序,会改变原数组,其使用语法如下:

其中参数sortby是可选参数,用来规定排序顺序,它是一个比较函数,用来判断哪个值应该排在前面。默认情况下,sort()方法会按照升序重新排列数组元素。为此,sort()方法会在每一个元素上调用String转型函数,然后比较字符串来决定顺序,即使数组的元素都是数值,也会将数组元素先转化为字符串在进行比较、排序。这就造成了排序不准确的情况,如下代码:

可以看到,上面第二段代码就出现了问题,虽然5是小于10的,但是字符串10在5的前面,所以10还是会排在5前面,因此可知,在很多情况下,不添加参数是不行的。

对于sort()方法的参数,它是一个比较函数,它接收两个参数,如果第一个参数应该排在第二个参数前面,就返回-1;如果两个参数相等,就返回0;如果第一个参数应该排在第二个参数后面,就返回1。一个比较函数的形式可以如下:

使用箭头函数来定义:

reverse() 方法用于颠倒数组中元素的顺序。该方法会改变原来的数组,而不会创建新的数组。其使用语法如下:

使用示例如下:

对于数组,还有很多操作方法,下面我们就来看看常用的concat()、slice()、splice()方法。

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。其适用语法如下:

其中参数arrayX是必需的。该参数可以是具体的值,也可以是数组对象。可以是任意多个。

使用示例如下:

该方法还可以用于数组扁平化,后面会介绍。

slice() 方法可从已有的数组中返回选定的元素。返回一个新的数组,包含从 start 到 end (不包括该元素)的数组元素。方法并不会修改数组,而是返回一个子数组。其使用语法如下:

其参数如下:

  • start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推;
  • end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

使用示例如下:

splice()方法可能是数组中的最强大的方法之一了,使用它的形式有很多种,它会向/从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组。其使用语法如下:

其参数如下:

  • index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
  • howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。
  • item1, …, itemX:可选。向数组添加的新项目。

从上面参数可知,splice主要有三种使用形式:

  • 删除: 需要给splice()传递两个参数,即要删除的第一个元素的位置和要删除的元素的数量;
  • 插入: 需要给splice()传递至少三个参数,即开始位置、0(要删除的元素数量)、要插入的元素。
  • 替换: splice()方法可以在删除元素的同事在指定位置插入新的元素。同样需要传入至少三个参数,即开始位置、要删除的元素数量、要插入的元素。要插入的元素数量是任意的,不一定和删除的元素数量相等。

使用示例如下:

ECMAScript为数组提供了两个归并方法:reduce()和reduceRight()。下面就分别来看看这两个方法。

reduce() 方法对数组中的每个元素执行一个reducer函数(升序执行),将其结果汇总为单个返回值。其使用语法如下:

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。(1) callback (执行数组中每个值的函数,包含四个参数)

  • previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
  • currentValue (数组中当前被处理的元素)
  • index (当前元素在数组中的索引)
  • array (调用 reduce 的数组)

(2) initialValue (作为第一次调用 callback 的第一个参数。)

输出结果如下:

再来加一个初始值看看:

输出结果如下:

通过上面例子,可以得出结论:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

注意,该方法如果添加初始值,就会改变原数组,将这个初始值放在数组的最后一位。

该方法和的上面的reduce()​用法几乎一致,只是该方法是对数组进行倒序查找的。而reduce()方法是正序执行的。

输出结果如下:

ECMAScript提供了两类搜索数组的方法:按照严格相等搜索和按照断言函数搜索。

ECMAScript通过了3个严格相等的搜索方法:indexOf()、lastIndexOf()、includes()。这些方法都接收两个参数:要查找的元素和可选的其实搜索位置。lastIndexOf()方法会从数组结尾元素开始向前搜索,其他两个方法则会从数组开始元素向后进行搜索。indexOf()和lastIndexOf()返回的是查找元素在数组中的索引值,如果没有找到,则返回-1。includes()方法会返回布尔值,表示是否找到至少一个与指定元素匹配的项。在比较第一个参数和数组的每一项时,会使用全等(===)比较,也就是说两项必须严格相等。

使用示例如下:

ECMAScript也允许按照定义的断言函数搜索数组,每个索引都会调用这个函数,断言函数的返回值决定了相应索引的元素是否被认为匹配。使用断言函数的方法有两个,分别是find()和findIndex()方法。这两个方法对于空数组,函数是不会执行的。并且没有改变数组的原始值。他们的都有三个参数:元素、索引、元素所属的数组对象,其中元素是数组中当前搜索的元素,索引是当前元素的索引,而数组是当前正在搜索的数组。

这两个方法都从数组的开始进行搜索,find()返回的是第一个匹配的元素,如果没有符合条件的元素返回 undefined;findIndex()返回的是第一个匹配的元素的索引,如果没有符合条件的元素返回 -1。

使用示例如下:

在ES6中,Array的原型上暴露了3个用于检索数组内容的方法:keys()、values()、entries()。keys()方法返回数组索引的迭代器,values()方法返回数组元素的迭代器,entries()方法返回索引值对的迭代器。

使用示例如下(因为这些方法返回的都是迭代器,所以可以将他们的内容通过Array.from直接转化为数组实例):

ECMAScript为数组定义了5个迭代方法,分别是every()、filter()、forEach()、map()、some()。这些方法都不会改变原数组。这五个方法都接收两个参数:以每一项为参数运行的函数和可选的作为函数运行上下文的作用域对象(影响函数中的this值)。传给每个方法的函数接收三个参数,分别是当前元素、当前元素的索引值、当前元素所属的数对象。

forEach 方法用于调用数组的每个元素,并将元素传递给回调函数。该方法没有返回值,使用示例如下:

该方法还可以有第二个参数,用来绑定回调函数内部this变量(回调函数不能是箭头函数,因为箭头函数没有this):

map() 方法会返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。该方法按照原始数组元素顺序依次处理元素。该方法不会对空数组进行检测,它会返回一个新数组,不会改变原始数组。使用示例如下:

第二个参数用来绑定参数函数内部的this变量:

该方法可以进行链式调用:

forEach和map区别如下:

  • forEach()方法:会针对每一个元素执行提供的函数,对数据的操作会改变原数组,该方法没有返回值;
  • map()方法:不会改变原数组的值,返回一个新数组,新数组中的值为原数组调用函数处理之后的值;

filter()方法用于过滤数组,满足条件的元素会被返回。它的参数是一个回调函数,所有数组元素依次执行该函数,返回结果为true的元素会被返回。该方法会返回一个新的数组,不会改变原数组。

可以使用filter()方法来移除数组中的undefined、null、NAN等值

该方法会对数组中的每一项进行遍历,只有所有元素都符合条件时,才返回true,否则就返回false。

该方法会对数组中的每一项进行遍历,只要有一个元素符合条件,就返回true,否则就返回false。

12种JavaScript中最常用的数组操作整理汇总

数组是最常见的数据结构之一,我们需要绝对自信地使用它。在这里,我将列出 JavaScript 中最重要的几个数组常用操作片段,包括数组长度、替换元素、去重以及许多其他内容。

大多数人都知道可以像这样得到数组的长度:

有趣的是,我们可以手动修改长度。这就是我所说的:

甚至创建指定长度的新数组:

这不是一个很好的实践,但是值得了解。

我们常常需要清空数组时候会使用:

如果 arr 的值是共享的,并且所有参与者都必须看到清除的效果,那么这就是你需要采取的方法。

但是,JavaScript 语义规定,如果减少数组的长度,则必须删除新长度及以上的所有元素。

而且这需要花费时间(除非引擎对设置长度为零的特殊情况进行了优化)。实际上,一个性能测试表明,在所有当前的 JavaScript 引擎上,这种清除方法更快。

有几种方法可以解决这个问题。如果需要替换指定索引处的元素,请使用 splice:

splice 在数组删除有更多的说明

如果你需要根据项目的内容替换项目,或者必须创建一个新数组,请使用 map:

map 接受函数作为其参数。它将对数组中的每个元素调用该函数一次,并生成一个新的函数返回的项数组。

关于 map 有个经典的面试题:[\’1\’, \’2\’, \’3\’, \’4\’, \’5\’].map(parseInt) => ?

在某些情况下,你需要删除数组中的某些元素,然后创建一个新的元素。在这种情况下,使用在ES5中引入的很棒的 filter 方法:

filter 的工作原理与 map 非常相似。向它提供一个函数,filter 将在数组的每个元素上调用它。如果要在新数组中包含此特定元素,则函数必须返回 true,否则返回 false。

如果你想将多个数组合并为一个数组,有两种方法。

Array 提供了 concat 方法:

ES6 中引入了 spread operator,一种更方便的方法:

还有一种比较奇特方法:

上面 2 种通用的方法,都不会改变原数组,最后一种奇特方法,会改变 push 的原数组,谨慎使用。

Array.prototype.push.apply 和 concat 对比:

  • 数据上万情况下,两者性能相差毫秒个位数级别
  • Array.prototype.push.apply 数组长度有限制,不同浏览器不同,一般不能超过十万, concat 无限制
  • Array.prototype.push.apply 会改变原数组, concat 不会

正常情况下我们都应该使用 concat 和 spread operator,有种情况下可以使用,如果频繁合并数组可以用 Array.prototype.push.apply。

总所周知,定义数组变量存储不是数组值,而只是存储引用。 这是我的意思:

因为 arr2 持有对 arr1 的引用,所以对 arr2 的任何更改都是对 arr1 的更改。

我们也可以使用 ES6 的 spread operator:

也可以使用前面合并使用的 concat 方法

注意:如果想要了解更多的数组复制,请查询 数组深拷贝和浅拷贝 相关资料,这里只实现了浅拷贝。

数组去重是面试经常问的,数组去重方式很多,这里介绍比较简单直白的三种方法:

可以使用 filter 方法帮助我们删除重复数组元素。filter 将接受一个函数并传递 3 个参数:当前项、索引和当前数组。

可以使用 reduce 方法从数组中删除所有重复项。然而,这有点棘手。reduce 将接受一个函数并传递 2 个参数:数组的当前值和累加器。

累加器在项目之间保持相同,并最终返回:

可以使用 ES6 中引入的新数据结构 set 和 spread operator:

还有很多其他去重方式,比如使用 {} + for。

有时我们必须将一些其它数据结构,如集合或字符串转换为数组。

类数组:函数参数,dom 集合

字符串:

集合:

数组遍历方式很多,有底层的,有高阶函数式,我们就来介绍几种:

for:

for-in:

for-of:

forEach:

while:

迭代辅助语句:break 和 continue

  • break 语句是跳出当前循环,并执行当前循环之后的语句
  • continue 语句是终止当前循环,并继续执行下一次循环

上面方式中,除了 forEach 不支持跳出循环体,其他都支持。高阶函数式方式都类似 forEach 。

性能对比:

如果是编写一些库或者大量数据遍历,推荐使用 while。有名的工具库 lodash 里面遍历全是 while。正常操作,for-of 或者 forEach 已经完全满足需求。

下面介绍几种高级函数式,满足条件为 true 立即终止循环,否则继续遍历到整个数组完成的方法:

其他高阶函数式方法,例如 forEach map filter reduce reduceRight every sort 等,都是把整个数组遍历。

这个功能说不是很常用,但是有时候又会用到:

二维数组:

三维数组:

concat.apply 方式只能扁平化二维数组,在多了就需要递归操作。

ES6+(ES2019) 给我们提供一个 flat 方法:

默认只是扁平化二维数组,如果想要扁平化多维,它接受一个参数 depth,如果想要展开无限的深度使用 Infinity:

还有一种面试扁平化二维数组方式:

如何从数组中添加元素?

我们可以使用 push 从数组末尾添加元素,使用 unshift 从开头添加元素,或者使用 splice 从中间添加元素。concat 方法可创建带有所需项目的新数组,这是一种添加元素的更高级的方法。

从数组的末尾添加元素:

从数组的开头添加元素:

push 方法的工作原理与 unshift 方法非常相似,方法都没有参数,都是返回数组更新的 length 属性。它修改调用它的数组。

使用 splice 添加数组元素:

只需要把 splice,第二个参数设为 0 即可,splice 在数组删除有更多的说明

使用 concat 添加数组元素:

数组允许我们对值进行分组并对其进行遍历。 我们可以通过不同的方式添加和删除数组元素。 不幸的是,没有简单的 Array.remove 方法。

那么,如何从数组中删除元素?

除了 delete 方式外,JavaScript 数组还提供了多种清除数组值的方法。

我们可以使用 pop 从数组末尾删除元素,使用 shift 从开头删除元素,或者使用 splice 从中间删除元素。

filter 方法可创建带有所需项目的新数组,这是一种删除不需要的元素的更高级的方法。

从数组的末尾删除元素:

通过将 length 属性设置为小于当前数组长度,可以从数组末尾删除数组元素。 索引大于或等于新长度的任何元素都将被删除。

pop 方法删除数组的最后一个元素,返回该元素,并更新length属性。pop 方法会修改调用它的数组,这意味着与使用 delete 不同,最后一个元素被完全删除并且数组长度减小。

从数组的开头删除元素:

shift 方法的工作原理与 pop 方法非常相似,只是它删除了数组的第一个元素而不是最后一个元素。

shift 和 pop 方法都没有参数,都是返回已删除的元素,更新剩余元素的索引,并更新 length 属性。它修改调用它的数组。如果没有元素,或者数组长度为 0,该方法返回 undefined。

使用 splice 删除数组元素:

splice 方法可用于从数组中添加、替换或删除元素。

splice 方法接收至少三个参数:

  • start:在数组中开始删除元素的位置
  • deleteCount:删除多少个元素(可选)
  • items…:添加元素(可选)

splice 可以实现添加、替换或删除。

删除:

如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

如果 deleteCount 被省略了,或者它的值大于等于array.length – start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。

如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。

添加:

添加只需要把 deleteCount 设置为 0,items 就是要添加的元素。

替换:

添加只需要把 deleteCount 设置为和 items 个数一样即可,items 就是要添加的元素。

注意:splice 方法实际上返回两个数组,即原始数组(现在缺少已删除的元素)和仅包含已删除的元素的数组。如果循环删除元素或者多个相同元素,最好使用倒序遍历。

使用 delete 删除单个数组元素:

使用 delete 运算符不会影响 length 属性。它也不会影响后续数组元素的索引。数组变得稀疏,这是说删除的项目没有被删除而是变成 undefined 的一种奇特的方式。

实际上没有将元素从数组中删除的原因是 delete 运算符更多的是释放内存,而不是删除元素。 当不再有对该值的引用时,将释放内存。

使用数组 filter 方法删除匹配的元素:

与 splice 方法不同,filter 创建一个新数组。

filter 接收一个回调方法,回调返回 true 或 false。返回 true 的元素被添加到新的经过筛选的数组中。

清除或重置数组:

最简单和最快的技术是将数组变量设置为空数组

清除数组的一个简单技巧是将其 length 属性设置为 0。

使用 splice 方法,不传递第二个参数。这将返回原始元素的一个副本,这对于我们的有些场景可能很方便。也是一种数组复制方法技巧。

使用 while 循环,这不是一种常用清除数组的方法,但它确实有效,而且可读性强。一些性能测试也显示这是最快的技术。

剔除假值:

是否有一个真值:

是否全部都是真值:

补零:

数组最大值和最小值:

判断回文字符串:

数组模拟队列:

队列先进先出:

获取数组最后一个元素:

像我们平常都是这样来获取:

感觉很麻烦,不过 ES 有了提案,未来可以通过 arr[-1] 这种方式来获取,Python 也有这种风骚的操作:

目前我们可以借助 ES6 的 Proxy 对象来实现:

注意:这样方式虽然有趣,但是会引起性能问题,50万次循环下,在Chrome浏览器,代理数组的执行时间大约为正常数组的50倍,在Firefox浏览器大约为20倍。在大量循环情况下,请慎用。无论是面试还是学习,你都应该掌握 Proxy 用法。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。