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 Event学习第三章 早期的事件处理程序
Feb 07 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
详解python之协程gevent模块
2018/06/14 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python中树与树的表示知识点总结
2019/09/14 Python
python实现扫雷游戏
2020/03/03 Python
python画环形图的方法
2020/03/25 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
安全标兵事迹材料
2014/08/17 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
护士个人总结范文
2015/02/13 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
Python使用Web框架Flask开发项目
2022/06/01 Python