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 相关文章推荐
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
一些关于PHP的知识
2006/11/17 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
javascript实现微信分享
2014/12/23 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python3获取cookie常用三种方案
2020/10/05 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis