可能被忽略的一些JavaScript数组方法细节

前言

自以为还算一个比较高产的人吧~但是感觉好久都没有写点什么没有营养的东西了,这一篇本来是打算去年年底都要拿出来说一说的,但是年底事情太多了,加上我真的变懒了拖到现在才要把这个准备了好久的标题完善一下。

之所以会突然想讲一讲JavaScript中的数组,是因为我经历了好多次事后发现很傻的问题,所以就想说还是总结一下,这篇相当于总结一样的文章我也不想讲数组的方法是怎么用的,毕竟不管是在哪,数组方法的使用都有很多教程了,单纯的就来说一说那些我们可能忽略的细节。

抛砖引玉

在开始正式讲被我们忽略的一些数组方法之前,我还是想先举一个例子来说说我在其中躺过的一丢丢小坑~

现在我们随便来有一个小小的需求,写一个方法,有两个参数,一个是数组,另一个是需要添加到数组里面的元素。

function arrPush(arr, target) {
 return arr.push(target);
}

var arr_1 = [1, 2, 3];

console.log(arrPush(arr_1, 4));

上面的代码对你来说应该是很简单的吧,我们的需求就是把[1, 2, 3]变成[1, 2, 3, 4],看起来好像没有错诶~大胆的推测一下最后的console.log()结果是什么呢,你可以自己试一下看看。

好了,不卖关子了,最后的结果是4,诶?你可能已经清楚了这个点,你也可能完全不知道是怎么回事,没关系,清楚了你就当在复习一次,没清楚的话那你真的应该把这篇应该不长的总结看一下下。

意想不到数组方法

上面抛砖引玉之后你可能大概加估计应该也知道了我为什么想要做这样一个总结,尤其是对JavaScript掌握的不是那么好的同学来说,更是特别容易忽略的地方了。

我希望当你看到下面方法名字的时候,应该马上出现那个方法的用法,而且应该知道你可能没有经常用到的它剩下的参数还有它的返回值。

其实很多时候在MDN上面对一个方法的描述已经非常清楚了,但是我们还是会忽略到,所以结合例子来看,可能对你的记忆会更加有帮助。

array.push

上面抛砖引玉的原因,先来说说这个方法,解释一下出现上面情况的原因。

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

这一句话其实已经把上面的答案解释了,我们在return arr.push(target)的时候,返回的是arr.push()函数的返回值,这个值是这个数组新的长度,所以结果是4,来正确的使用一下这个方法。

function arrPush(arr, target) {
 arr.push(target)
 return arr;
}

var arr_1 = [1, 2, 3];

console.log(arrPush(arr_1, 4));

这个时候结果才是我们最后想要的[1, 2, 3, 4],顺便就说说push方法可以同时接收多个参数,像这样arr.push(1, 2, 3, 4) ,返回结果当然还是数组的新长度啦。

array.concat

接着来说说concat合并多个数组的方法,因为想要跟上面的push做一下对比,所以选择接着说这个方法,来看一下小例子。

function arrConcat(arr, arr2) {
 arr.concat(arr2);
 return arr;
}

var arr_1 = [1, 2];
var arr_2 = [3, 4];

console.log(arrConcat(arr_1, arr_2));

由于上面push方法的原因,我们依然选择return arr,这样的结果是什么呢,还是建议大家动手试一试,会发现得到的是[1, 2],哇哦~怎么和push表现不一致呢,为什么又返回了[1, 2]。

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组

当你理解了这个方法的时候,你就会发现MDN上面的表述真的很棒~忍不住想要夸一下它,很清楚了吧,concat方法不会改变原来的数组,也就是当我们return arr的时候,arr并没有发生改变,所以还是[1, 2],改写一下我们的方法。

function arrConcat(arr, arr2) {
 return arr.concat(arr2);
}

var arr_1 = [1, 2];
var arr_2 = [3, 4];

console.log(arrConcat(arr_1, arr_2));

这时候在看就会得到预期的结果了~这个方法其实还有一个神奇的地方,就是它可以直接连接一个值,并且它也能同时连接多个值或者多个数组,或者多个值和多个数组的组合,像这样。

var arr = [1, 2];
arr.concat(3, 4, [5, 6], 7, [8, 9]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

arrary.map 和 array.forEach

因为这两个方法有丢丢类似,所以同时说一下,顺便讲讲它们的区别吧,先来看看它们的基本解释。

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

forEach() 方法对数组的每个元素执行一次提供的函数

从这两句解释来看,它们都是迭代数组的每一个元素,区别是map方法会返回新的数组,而forEach方法不会,那它有返回值吗?答案是有的...

var arr = [1, 2, 3];

var newArr = arr.map(item => {
 return item + 1;
}); // [2, 3, 4];

var newArr2 = arr.forEach(item => {
 return item + 1;
}); // undefined

var newArr3 = arr.map(item => {
 console.log(item + 1);
}); // [undefined, undefined, undefined]

// 2
// 3
// 4

var newArr4 = arr.forEach(item => {
 console.log(item + 1);
}); // undefined

// 2
// 3
// 4

答案我已经写在上面了,map方法必须显示的返回值,而forEach只是对数组的每一个元素执行内部内容。这两个方法的参数是一致的,回调函数和执行回调函数时使用的this值,回调函数中的参数也是一致的,分别是数组当前元素、当前元素索引和数组本身。

一般来说我们用的比较多的也就是回调函数和它的两个参数,很多人忽略了回调函数的第三个参数,其实还蛮好用的,先不表。最后就是改变this值的参数,因为真的很少用,也没有实际案例来说,所以就不多说了,大家知道还有这么个东西就行,如果有实际用到的情况,也可以给我分享一下,学习一下~

arrary.filter

在es5之后的新的数组迭代方法,参数几乎都与上述一致。

- 回调函数(数组当前值,当前值索引,数组本身)

- 执行回调函数的this值

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

本身这个数组过滤的方法使用很简单,我就说一丢丢在使用的时候的小技巧,比如数组去重就很好用。

var arr = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9];
var result = arr.filter((item, index, arr) => {
 return arr.indexOf(item) === index;
});
console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

arrary.pop 和 arrary.shift

上面说了很多了~大家估计也大概知道我们容易忽略的一个是方法的返回值,还有就是没有经常使用的参数,所以我这两个方法就直接上说明了。

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度

这两个方法用法完全相同,区别就是一个弹出的是数组最后的元素,一个弹出的是数组最前面的元素,弹出这个大家看了上面方法的解释也应该知道我想表达的是方法返回值元素~

var arr = [1, 2, 3];

console.log(arr.pop()); // 3
console.log(arr.shift()); // 1

console.log(arr.length); // 1

结语

我并没有把所有的数组方法的拿出来说一下是觉得上述这些例子已经足以告诉大家平常我们在使用的时候容易忽略的地方,也不是什么很难理解的东西,所以就说到这里吧~剩下的方法就靠大家自己去仔细的使用了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • JavaScript数组方法大全(推荐)

    数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习,下面小编给大家整理了关于数组的操作方法,一起看看吧. 数组创建 JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 var arr3 = new Array("lily","lucy&

  • javascript中FOREACH数组方法使用示例

    Array.prototype.forEach()方法让数组的每一项都执行一次给定的函数. - MDN 假设有这么一个场景,你拿到了这么一个数组 [   { symbol: "XFX", price: 240.22, volume: 23432 },   { symbol: "TNZ", price: 332.19, volume: 234 },   { symbol: "JXJ", price: 120.22, volume: 5323 },

  • js 定义对象数组(结合)多维数组方法

    在php中定义数组很简单,但是在js中如果搞成字符为下标会出错,所以结合对象来搞 var top_ = { 'index':'首页', 'user':'用户', 'tree':'模块树' } ; var all_list = [ { "index": [ {'name':'网站栏目管理','url':'1.html'}, {'name':'网站栏目管理2','url':'2.html'} ] }, { "user": [ {'name':'用户管理','url':'

  • js数组方法reduce经典用法代码分享

    以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要单挑reduce方法,一个原因是我对这个方法掌握不够,不能够用到随心所欲.另一个方面,我也感觉到了这个方法的庞大魅力,在许多的场景中发挥着神奇的作用. 理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. a

  • JavaScript学习笔记之ES6数组方法

    ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. ES6给数组添加了一些新特性,而这些新特性到目前为止完全可以运用到自己的业务层.在这一节中将总结有关于ES6给数组提供一些新特性的使用方法. ES6提供

  • JavaScript基础进阶之数组方法总结(推荐)

    数组常用方法总结: 下面我只总结了es3中常用的数组方法,一共有11个.es5中新增的9个数组方法,后续再单独总结. 1个连接数组的方法:concat() 2个数组转换为字符串的方法:join().toString() 6个增删数组元素的方法:pop().push().shift().unshift().slice().splice() 2个数组排序方法:reverse().sort() 连接数组的方法: 1.concat() 作用:连接两个数组,合并为一个新数组. 用法:arr1.concat

  • Javascript中数组方法汇总(推荐)

    Array.prototype中定义了很多操作数组的方法,下面介绍ECMAScript3中的一些方法 1.Array.join()方法 该方法将数组中的元素都转化为字符串并按照指定符号连接到一起,返回最后生成的字符串,可以包含一个参数,为连接数组元素的符号,默认为逗号. var ay = [1,2,3]; ay.join(); // =>"1,2,3" ay.join("+"); // => "1+2+3" ay.join("

  • js数组方法扩展实现数组统计函数

    复制代码 代码如下: /*****************************************************CreateBy:joe zhou*Description:数组统计函数****************************************************/$.extend({    max: function (arr) {        return cacl(arr, function (item, max) {            if

  • 基于JavaScript Array数组方法(新手必看篇)

    Array类型是ECMAScript中最常用的引用类型.ECMAScript中的数据与其它大多数语言中的数组有着相当大的区别.虽然ECMAScript中的数据与其它语言中的数组一样都是数据的有序列表,但不同的是,ECMAScript数组中的每一项可以保存任何类型的数据,无论是数值.字符串或者是对象.同时,ECMAScript中的数组大小是可以动态调整的,即可以根据数据的添加自动增长以容纳新增的数据.下面总结一下JavaScript中数组常用的操作函数及用法. •创建数组 创建数组主要有构造函数和

  • 数组方法解决JS字符串连接性能问题有争议

    1.传统上,字符串连接一直是js中性能最低的操作之一. var text="Hello"; text+=" World!"; 早期浏览器没有对这种运算进行优化. 由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果.频繁地在后台创建和销毁字符串导制性能异常低下. 2.发现这一点后,开发者们利用数组对象进行优化. var buffer=[],i=0; buffer[i++]="Hello";//通过相应索引值添加元素比push方法快 bu

随机推荐