javascript使用 concat 方法对数组进行合并的方…
2019-11-09 16:00:44来源:爱站网 阅读 ()
JS程序的内容多种多样,所以有些知识不是我们能覆盖的,我们会被JS强大的语法所震惊,一起跟随爱站技术频道小编去了解javascript使用 concat 方法对数组进行合并的方法吧!
在介绍前,抛出一个问题:如何将多个数组合并为一个数组?
以下的分享会分为如下小节:
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方法
说完基础的知识,给大家看看我最近遇到的一个题目。原题是这样的。
看例子就能明白是什么意思了。
这道题目中,其中一个解决方案就是:
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.apply([],[[1],[2],[3]])); //[1, 2, 3] console.log([].concat([[1],[2],[3]])); //[[1], [2], [3]]
从代码可以看出,第一段代码是先在空数组上先调用了concat方法,该方法的作用是将新数组的成员,添加到原数组的尾部。再调用了apply方法,传入第一个参数,指定对象执行时所在的作用域,而第二个参数的作用是将数组中的所有成员一次作为参数,在调用时传入数组中。
因此,在concat,apply方法同时使用的时候,两个方法的作用会叠加,也就出现了与单独使用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]]]
上面代码中,concat方法将最数组合并,然后在合并的基础上在对下一层数组进行合并。
console.log([].concat.apply([],[[1],[2],[3]]));//[1, 2, 3] //相当于 console.log([].concat(1,2,3)); //[1,2,3]
总结:
1.单独使用concat方法时,会将新数组的成员,添加到原数组的尾部。
2.使用apply方法来指定concat方法的this指向时,会让两个方法的作用叠加。
3.数组元素合并的方法:
var flatten = function (arr){ return [].concat.apply([],arr); }; var flatten = function (array){ return array.reduce(function(a,b){ return a.concat(b); },[]) }
以上就是爱站技术频道小编为大家提供的javascript使用 concat 方法对数组进行合并的方法,相信大家在看完后会对你有很大的帮助,如果你觉得我们的网站不错,你可以收藏js.aizhan.com吧!
原文链接:https://js.aizhan.com/develop/JavaScript/10000.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- 关于jQuery UI 使用心得及技巧 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash