深入理解javascript中concat方法


Posted in Javascript onDecember 12, 2016

最近在恶补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也可以接受其他类型的值作为参数。它们会作为新的元素,添加数组尾部。

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];

这里虽然内容较少,看起来挺简单。但是真正理解起来真的不容易。

2.从实例中感受concat方法

说完基础的知识,给大家看看我最近遇到的一个题目。原题是这样的。

深入理解javascript中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方法的详解与总结

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
详解微信UnionID作用
May 15 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
JS快速实现简单计算器
Apr 08 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
js仿微信语音播放实现思路
Dec 12 #Javascript
解析JavaScript数组方法reduce
Dec 12 #Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 #Javascript
JS双击变input框批量修改内容
Dec 12 #Javascript
jQuery中animate的几种用法与注意事项
Dec 12 #Javascript
Websocket协议详解及简单实例代码
Dec 12 #Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 #Javascript
You might like
解析php取整的几种方式
2013/06/25 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
详解JS面向对象编程
2016/01/24 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
详解vue axios二次封装
2018/07/22 Javascript
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
个性发展自我评价
2014/02/11 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
商务经理岗位职责
2014/07/30 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Python绘制散乱的点构成的图的方法
2022/04/21 Python