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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP 命名空间实例说明
2011/01/27 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP之header函数详解
2021/03/02 PHP
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
python实现dict版图遍历示例
2014/02/19 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
python实现支付宝转账接口
2019/05/07 Python
python 日期排序的实例代码
2019/07/11 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
日本航空官方网站:JAL
2019/06/19 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
服装设计师求职信
2014/06/04 职场文书
团日活动总结模板
2014/06/25 职场文书
运动会加油稿20字
2014/11/15 职场文书
2014年施工员工作总结
2014/11/18 职场文书
质检员工作总结2015
2015/04/25 职场文书
交通安全教育心得体会
2016/01/15 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript
Python 全局空间和局部空间
2022/04/06 Python