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

本文实例讲述了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"]

运行结果:

方法二:

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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

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

时间: 2020-01-18

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

JavaScript使用concat连接数组的方法

本文实例讲述了JavaScript使用concat连接数组的方法.分享给大家供大家参考.具体如下: 下面的代码演示了JS中如何通过concat函数链接多个数组 <!DOCTYPE html> <html> <body> <script> var parents = ["Jani", "Tove"]; var brothers = ["Stale", "Kai Jim", &quo

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

本文实例讲述了JS数组方法join()用法.分享给大家供大家参考,具体如下: join()方法 定义和用法: join() 方法用于把数组中的所有元素放入一个字符串. 元素是通过指定的分隔符进行分隔的. 语法:arrayObject.join(separator) 参数:可选,指定要使用的分隔符. 注:不给join()方法传入任何值,或者给它传入undefined,则使用逗号作为分隔符. IE7及更早版本会错误的使用字符串"undefined"作为分隔符. 数组中的某一项是null或u

JS数组方法shift()、unshift()用法实例分析

本文实例讲述了JS数组方法shift().unshift()用法.分享给大家供大家参考,具体如下: shift()方法 1. 定义:从数组中删除第一个元素,并返回该元素的值.此方法更改数组的长度. 2. 语法: arr.shift() 3. 参数:/ 4. 返回值:从数组中删除的元素(当数组为空时返回undefined). 代码如下: 方法一: var arr1 = [1, 2, 3, 4, 'A', 'B', 'C']; var arr2 = []; Array.prototype.copyS

JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)

JavaScript concat 方法 concat 方法连接两个或多个字符串,其语法如下: 复制代码 代码如下: str_object.concat(str1, str2, ...) str_object 是需要连接的第一个字符串(对象),str1 是需要连接的第二个字符串,str2 是需要连接的第三个字符串,依次类推,至少需要一个str1. concat 实例 复制代码 代码如下: <script language="JavaScript"> var str = &q

JS Array创建及concat()split()slice()的使用方法

JS Array创建及concat()split()slice()的使用方法 1 var a = new Array(); 2 var b=new Array(20); 3 var c= new Array("red","green","white"); alert(b.length) //20 数组可以根据需要增大或减小.因此, c[3] = "purple"; alert(c.length) //4 如果 c[25]=&q

JavaScript中使用concat()方法拼接字符串的教程

这种方法将两个或多个字符串,并返回一个新的单字符串. 语法 string.concat(string2, string3[, ..., stringN]); 下面是参数的详细信息: string2...stringN : 这些是要连接字符串. 返回值: 返回一个连接字符串. 例子: <html> <head> <title>JavaScript String concat() Method</title> </head> <body>

JS数组合并push与concat区别分析

本文实例讲述了JS数组合并push与concat区别.分享给大家供大家参考,具体如下: 注意 concat 拼写,二者功能很相像,但有两点区别. 先看代码: var arr = []; arr.push(1); arr.push([2, 3]); arr.push(4, 5); arr = arr.concat(6); arr = arr.concat([7, 8]); arr = arr.concat(9, 10); arr.each(function(index, value){ alert

JS数组方法push()、pop()用法实例分析

本文实例讲述了JS数组方法push().pop()用法.分享给大家供大家参考,具体如下: push()方法 1. 定义:向数组的末尾添加一个或更多元素,并返回新的长度. 2. 语法: arr.push(element1, ..., elementN) 3. 参数:可以接收任意个数量的参数 4. 返回值:返回修改后数组的长度. var arr1 = [1, 2, 3, 4]; var arr2 = ["C", "B", "A"]; Array.pr

浅谈JavaScript的push(),pop(),concat()方法

push 方法 将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1 [item2 [. . . [itemN ]]]]) 参数 arrayObj 必选项.一个 Array 对象. item, item2,. . . itemN 可选项.该 Array 的新元素. 说明 push 方法将以新元素出现的顺序添加这些元素.如果参数之一为数组,那么该数组将作为单个元素添加到数组中.如果要合并两个或多个数组中的元素,需要使用 concat 方法. 版本要求在:5.5

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

本文实例讲述了JS数组方法reverse()用法.分享给大家供大家参考,具体如下: reverse()方法 定义:反转数组项的顺序 语法: arr.reverse() 参数:/ 返回值:返回该数组的引用. 代码如下: var arr1 = [1, 2, 3, 4, 5, 6]; var arr2 = ['A', 'B', 'C']; var arr3 = ['AAA', 'BBB', 'CCC']; var arr4 = ['Hello', 'World']; Array.prototype.c

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

本文实例讲述了JS数组方法slice()用法.分享给大家供大家参考,具体如下: slice()方法 slice(),它能基于当前数组中的一个或多个创建一个新数组.可以接受一或两个参数,即要返回的起始和结束位置. 一个参数:slice()方法返回从该参数指定位置开始到当前数组末尾的所有项. 两个参数:该方法返回起始和结束位置之间的项(但不包括结束位置的项). slice不会影响原始数组. 结束位置小于起始位置,返回空数组. 可以接受负数,用数组长度加上该负数来确定相应位置. var arr = [

JS数组的常见用法实例

本文实例讲述了JS数组的常见用法.分享给大家供大家参考.具体方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">

js中this的用法实例分析

本文实例分析了js中this的用法.分享给大家供大家参考.具体分析如下: 实例1:第一种调用this的方法--以函数形式调用.它代表全局对象window 复制代码 代码如下: <script type="text/javascript"> function t(){  alert(this);//这里this表示window对象. } t(); </script> 实例2:第二种调用this的方法--以对象属性的形式调用.它代表该对象.实例中onclick为p元

JS中prototype的用法实例分析

本文实例讲述了JS中prototype的用法.分享给大家供大家参考.具体分析如下: JS中的phototype是JS中比较难理解的一个部分   本文基于下面几个知识点:   1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A.   2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法 例子如下: function People(name

JS函数this的用法实例分析

本文实例讲述了JS函数this的用法.分享给大家供大家参考.具体如下: 在js中写函数时,很多用到this. this究竟是什么,this是个关键字,是个指针,指向执行环境作用域,也称之为上下文. 先说下函数吧,个人理解是函数是在语言中重复调用的代码块. 在JS里,把函数赋值给对象的属性时,称之为方法 如: var m={}; m.title='title'; m.show=function(){ alert(this.title) } m.show() 就是把函数作为对象m的方法来调用 这样的

PHP数组函数array_multisort()用法实例分析

本文实例分析了PHP数组函数array_multisort()用法.分享给大家供大家参考,具体如下: 有时候我们需要对二维数组的某个键的值进行排序,这里就是讨论这个问题.我们可以使用array_multisort()这个函数.array_multisort() 函数对多个数组或多维数组进行排序. 参数中的数组被当成一个表的列并以行来进行排序 - 这类似 SQL 的 ORDER BY 子句的功能.第一个数组是要排序的主要数组.数组中的行(值)比较为相同的话,就会按照下一个输入数组中相应值的大小进行

php数组键值用法实例分析

本文实例讲述了php数组键值用法.分享给大家供大家参考.具体分析如下: 先看一个数组: <?php $switching = array( 10, // key = 0 5 => 6, 3 => 7, 'a' => 4, 11, // key = 6 (整个数组中整型键索引最大的值是5) '8' => 2, // key = 8 (字符串健'8'转换为8) '02' => 77, // key = '02'(注意不是2) 0 => 12 /*前面值为10的键被赋予