JS数组方法concat()用法实例分析


Posted in Javascript onJanuary 18, 2020

本文实例讲述了JS数组方法concat()用法。分享给大家供大家参考,具体如下:

数组方法concat()

  1. concat()可以基于当前数组中的所有项创建一个新数组。即这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。
    没有给concat方法传递参数的情况下,它只是复制当前数组并返回副本。
    如果传递的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中
    如果传递的值是不是数组,这些值会被简单的添加到数组的末尾
    注意:该方法不会改变先后的数组,而仅仅会返回被连接数组的一个副本。

  2. 定义和用法:concat() 方法用于连接两个或多个数组。

  3. 语法:arrayObject.concat(arrayX,arrayX,……,arrayX)
  4. 参数:arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。
  5. 返回值:返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

方法一:

function connectArray() {
  var result = [];
  var len = 0;
  //获取所有数组的总长度
  for(var i = 0; i < arguments.length; i++) {
    len += arguments[i].length;
  }
  for(var i = 0; i < len; i++) {
    if(i < arguments[0].length) {
      result[result.length] = arguments[0][i];
    }
    else if( i < arguments[1].length + arguments[0].length) {
      result[result.length] = arguments[1][i - arguments[0].length];
    }
    else if(i < arguments[2].length + arguments[1].length + arguments[0].length)
    result[result.length] = arguments[1][i - arguments[0].length- arguments[1].length];
  }
  return result;
}
var arr1 = [1, 2, 3, 4, 5, 6];
var arr2 = ['A', 'B', 'C'];
var arr3 = ['AAA', 'BBB', 'CCC'];
var arr4 = ['Hello', 'World'];
// 连接数组
console.log(connectArray(arr1));
console.log(connectArray(arr1, arr2)); // [1, 2, 3, 4, 5, 6, "A", "B", "C"]
console.log(connectArray(arr1, arr2, arr3)); // [1, 2, 3, 4, 5, 6, "A", "B", "C", "A", "B", "C"]

运行结果:

JS数组方法concat()用法实例分析

方法二:

var arr1 = [1, 2, 3, 4, 5, 6];
var arr2 = ['A', 'B', 'C'];
var arr3 = ['AAA', 'BBB', 'CCC'];
var arr4 = ['Hello', 'World'];
// 以下未考虑复杂情况,仅供参考:
Array.prototype.copyConcat =function() {
  var result = [],
    len = this.length,
    argLen = arguments.length;
  // result = this;  //这样将this的值直接赋值给result不行,因为是将this的引用赋值给result
  //将this的值复制给result
  for(var i = 0; i < this.length; i++) {
    result[result.length] = this[i];
  }
  // 不传递参数
  if(arguments.length == 0) {
    return result;
  }
  // 有参数的时候
  for(var i = 0; i < argLen; i++) {
    if(Array.isArray(arguments[i])) {// 参数是数组项的时候
      for(var j = 0; j < arguments[i].length; j++) {
        result[result.length] = arguments[i][j];
      }
    }
    else { //参数不是数组项的时候
      result[result.length] = arguments[i];
    }
  }
  return result;
};
// 不传递参数
var resultArr1 = arr1.copyConcat(); // [1, 2, 3, 4, 5, 6]
console.log(resultArr1);
// 传递参数但不是数组
console.log(arr1.copyConcat('xxx', 'yyy', 'zzz'));// [1, 2, 3, 4, 5, 6, "xxx", "yyy", "zzz"]
// 传递参数,参数是数组
console.log(arr1.copyConcat(arr2)); // [1, 2, 3, 4, 5, 6, "A", "B", "C"]
console.log(arr1.copyConcat(arr2, arr3, arr4));// [1, 2, 3, 4, 5, 6, "A", "B", "C", "AAA", "BBB", "CCC", "Hello", "World"]
// 传递的参数:字符串、数字和数组
console.log(arr1.copyConcat('参数', '999', arr2, arr3));// [1, 2, 3, 4, 5, 6, "参数", "999", "A", "B", "C", "AAA", "BBB", "CCC"]
console.log(arr1); // 1,2,3,4,5,6

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
关于vue-router的那些事儿
May 23 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
JS实现纵向轮播图(初级版)
Jan 18 #Javascript
JS数组方法reverse()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(初级版)
Jun 24 #Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 #Javascript
微信小程序开发中var that =this的用法详解
Jan 18 #Javascript
JavaScript实现滑动门效果
Jan 18 #Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 #Javascript
You might like
php array_flip() 删除数组重复元素
2009/01/14 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现堆栈与队列的方法
2015/01/15 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python双向循环链表实现方法分析
2018/07/30 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
python缩进长度是否统一
2020/08/02 Python
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
大学生自荐书范文
2013/12/10 职场文书
大学生求职自荐信
2013/12/12 职场文书
家长评语和期望
2014/02/10 职场文书
中秋节主持词
2014/04/02 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python