javascript中concat方法深入理解
最近在恶补js知识的时候,总是会因为js强大的语法而感到震撼。因为以前对前端方面的疏忽,导致了一些理解的错误。因此痛改前非,下定决心,不管做什么事情,都要有专研的精神。
在介绍前,抛出一个问题:如何将多个数组合并为一个数组?
以下的分享会分为如下小节:
1.concat方法的基础介绍
2.从实例中感受concat方法
1.concat方法的基础介绍
concat方法用于多个数组的合并。它将新数组的成员,添加到原数组的尾部,然后返回一个新数组,原数组不变。
console.log([].concat([1],[2],[3])); // [1, 2, 3] console.log([].concat([[1],[2],[3]])); // [[1], [2], [3]] console.log([].concat(4,[[5,6],[7]])); // [4, [5, 6], [7]]
上面代码中,第一个返回值是将一个空数组与三个数组[1],[2],[3]合并为一个数组,因此返回了[1, 2, 3]。第二个是将一个空数组与一个二维数组合并,二维数组的成员为[1],[2],[3],因此返回了[[1], [2], [3]],注意,返回的是二维数组。第三个例子同理。这里对概念的理解很重要,即将新数组的成员,添加到原数组的尾部。
除了接受数组作为参数,concat
也可以接受其他类型的值作为参数。它们会作为新的元素,添加数组尾部。
1 console.log([].concat(1,2,3)); //[1,2,3]; 2 //等同于 3 console.log([].concat(1,[2,3])); //[1,2,3]; 4 console.log([].concat([1],[2,3])); //[1,2,3];
这里虽然内容较少,看起来挺简单。但是真正理解起来真的不容易。
2.从实例中感受concat方法
说完基础的知识,给大家看看我最近遇到的一个题目。原题是这样的。
看例子就能明白是什么意思了。
这道题目中,其中一个解决方案就是:
var flatten = function (arr){return [].concat.apply([],arr); };
这一段简单的函数就可以实现将数组中的元素合并的功能。但是当我在理解这个返回值的时候,出现了一个问题。
问题:为什么使用apply方法和没有使用apply方法会有区别?
console.log([].concat.apply([],[[1],[2],[3]])); //[1, 2, 3] console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]]
上面代码中,同样是在一个空数组中向尾部添加新数组,第一个返回的是[1,2,3]。第二个却是一个二维数组。
经过一段时间的折腾,终于理解了其中不同的原因所在。
首先,我们在空数组中调用实例方法concat的时候,是传入concat中的参数,在push到数组的末尾。
console.log([].concat(1,2,3)); //[1, 2, 3] console.log([].concat([1],[2],[3])); //[1, 2, 3] console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]] console.log([].concat([[[1],[2],[3]]])); // [[[1], [2], [3]]]
上面代码中,从单个元素,到一维数组,二维数组,三维数组逐渐变化的。
在Javascript中call,apply,bind方法的详解与总结 文章中,有提到 apply
方法的作用与call
方法类似,也是改变某个函数中this
指向(函数执行时所在的作用域),然后在指定的作用域中,调用该函数。同时也会立即执行该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数。
apply
方法的第一个参数也是this
所要指向的那个对象,如果设为null或undefined或者this,则等同于指定全局对象。第二个参数则是一个数组,该数组的所有成员依次作为参数,在调用时传入原函数。原函数的参数,在call
方法中必须一个个添加,但是在apply
方法中,必须以数组形式添加。
console.log([].concat([1],[2],[3])); //[1, 2, 3] console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]]
console.log([].concat.apply([],[[1],[2],[3]])); //[1, 2, 3]
在上面代码中,上半段直接使用concat方法,将传入的参数合并到空数组中。下半段中,调用了String对象的实例方法apply,将concat()函数内部的this指向了[],并且在[]作用域下,传入调用concat需要的参数,并且以数组的方式传入。再看几个例子。
console.log([].concat([1,2,3])); //[1, 2, 3] console.log([].concat.apply([],[[1],[2],[3]]));//[1, 2, 3] console.log([].concat([[1],[2],[3]]));//[[1], [2], [3]] console.log([].concat.apply([],[[[1],[2],[3]]]));//[[1], [2], [3]] console.log([].concat([[[1],[2],[3]]]));//[[[[1], [2], [3]]]] console.log([].concat.apply([],[[[[1],[2],[3]]]]));//[[[1], [2], [3]]]
总结:
1.单独使用concat方法时,会将新数组的成员,添加到原数组的尾部,然后返回一个新数组,原数组不变;如果传入的其他类型的值,它们会作为新的元素,添加到数组末尾。
2.数组元素合并的方法:
var flatten = function (arr){return [].concat.apply([],arr); };
var flatten = function (array){return array.reduce(function(a,b){return a.concat(b);},[]) }
如果对不理解apply方法,可以前往这篇文章:Javascript中call,apply,bind方法的详解与总结
转载请注明出处:http://www.cnblogs.com/Uncle-Keith/p/5852721.html
转载于:https://www.cnblogs.com/unclekeith/p/5852721.html
javascript中concat方法深入理解相关推荐
- JavaScript中getBoundingClientRect()方法详解
JavaScript中getBoundingClientRect()方法详解 getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bo ...
- Javascript 中 atob 方法解码中文字符乱码问题
解决 Javascript 中 atob 方法解码中文字符乱码问题 由于一些网络通讯协议的限制,你必须使用 window.btoa() 方法对原数据进行编码后,才能进行发送.接收方使用相当于 wind ...
- vue路由守卫中next方法的理解
vue路由守卫中next方法的理解 在网上看到了一篇通俗易懂的文章,此文章出处 在这里我用通俗点的说法解释上next(),next(false),next('/'),next(error),希望通过这 ...
- javascript中display方法或者visibility隐藏元素实现的效果
在前端开发html页面的时候,可以使用js中实现,修改元素的属性,达到隐藏元素,以及隐藏后的元素的显示的效果:需要修改元素的display方法或者visibility,两种方案实现的效果不同,可参考下 ...
- java concat用法_java中concat()方法的使用说明
concat()方法介绍: 将几个字符串连接到一起. 例如: s = s.concat(str1);//将字符串str1接到字符串s后面 s = s.concat(str2);//将字符串str1接到 ...
- JavaScript中事件循环的理解 Event Loop
为了解决单线程运行阻塞问题,JavaScript用到了计算机系统的一种运行机制,这种机制就叫做事件循环(Event Loop) 事件循环(Event Loop) 在JavaScript中,所有的任务都 ...
- javascript中闭包的一些理解
闭包是javascript中绕不开的话题,关于闭包的一些概念和应用,这方面资料比较多,在此就不再赘述.众所周知,闭包的一个作用就是 让一些变量始终保持在内存中 ,在此我用一些实际代码对这句话作进一步的 ...
- JavaScript中shift() 方法
输出: shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值. 返回值 数组原来的第一个元素的值. 说明 如果数组是空的,那么 shift() 方法将不进行任何操作,返回 und ...
- javascript中toFixed()方法详解
最近做的项目涉及到金额的计算,有一种方式就是进行四舍五入的规则进行小数点后面的尾数处理,以前一直以为toFixed方法就是四舍五入的,知道一个用户反馈了金额计算的bug我才如梦初醒(亏了一毛钱),才仔 ...
- JavaScript中的方法是什么
作者:Shadeed 译者:前端小智 来源:dmitripavlutin 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.c ...
最新文章
- 26.SpringBoot事务注解详解
- 用一个实际例子理解Docker volume工作原理
- C++需要输出一个参数的地址时可能达不到预期的效果
- linux nfs时间不对,NFS挂载主机或不稳定的原因与解决方法
- apache 添加下载文件头
- 将excel转为python的字典_python读取excel数据转换成字典
- springboot+dubbo+nacos开发实战
- oracle视图用法,oracle视图大全
- Cocos数据篇[3.4](3) ——XML数据操作
- 线程--匿名内部类实现多线程的2种方式
- macOS分辨率修改器哪个好用?
- 为什么恢复后的文件打不开?U盘数据恢复常见问题
- html5 main form 结合,web组件之表单(HTML5)
- 多服务台排队系统仿真基于c语言,带优先级的多服务台排队系统Monte Carlo模拟
- leetcode:6071. 完成所有任务需要的最少轮数【尽可能的多一点3】
- 计算机视觉——三维视觉III:立体视觉与三维建模
- 兼容树莓派CM4定制产品
- 融云及时通讯 加入群聊
- 全国计算机四级——操作系统原理笔记
- 三星4k3d电视测试软件,技术篇 | 央视4K超高清频道怎么看?三星电视让您大饱眼福!...
热门文章
- 必备9种能力、9种手段、9种心态
- [引]VS2005帮助文档 : 加密 概述
- 服务提供者框架讲解 之 myJDBC
- 每次开机都要选择Windwos10才能进系统的原因及解决方法--	【亲测有效】
- JAVA读锁不使用效果一样_为什么Java的同步集合不使用读/写锁?
- python mysql使用教程_python进阶之Mysql入门教程
- git刷新分支列表_如何使用Git小技巧让你开发协作过程更加顺利?
- 笔记本安装linux
- sql交叉表查询_初学前端需要注意什么 SQL连接相关内容有哪些
- EasyUI:combobox设置不可编辑更改