深入理解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 图片预览效果 推荐
Dec 22 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
layui table 多行删除(id获取)的方法
Sep 12 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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
react-router实现按需加载
2017/05/09 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
jquery ztree实现右键收藏功能
2017/11/20 jQuery
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python中字符串的处理技巧分享
2016/09/17 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python构建图像分类识别器的方法
2019/01/12 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
银行学习十八大感想
2014/01/11 职场文书
实训报告范文大全
2014/11/04 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python