深入理解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 相关文章推荐
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 Javascript
AJAX学习笔记
May 18 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 adodb连接不同数据库
2009/03/19 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
跟老齐学Python之变量和参数
2014/10/10 Python
Python中List.index()方法的使用教程
2015/05/20 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
浅谈python 类方法/静态方法
2020/09/18 Python
python switch 实现多分支选择功能
2020/12/21 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
八一建军节感言
2014/02/28 职场文书
不错的求职信范文
2014/07/20 职场文书
践行三严三实心得体会
2014/10/13 职场文书
关于学习的决心书
2015/02/05 职场文书
文明礼貌主题班会
2015/08/14 职场文书
迎国庆主题班会
2015/08/17 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
golang的文件创建及读写操作
2022/04/14 Golang
app场景下uniapp的扫码记录
2022/07/23 Java/Android