JavaScript 常用数组操作方法

  • 一、不改变原数组:concat()join()slice()toString()valueOf()substring()substr();另加split()replace()

    • 1、concat() 方法用于连接两个或多个数组。仅会返回被连接数组的一个副本。

      var arr1 = [1, 2, 3];
      var arr2 = [4, 5];
      var arr3 = arr1.concat(arr2);
      console.log(arr1);  // [1, 2, 3]
      console.log(arr3);  // [1, 2, 3, 4, 5]
      
    • 2、join()方法用于把数组中的所有元素放入一个字符串中。

      var arr = [1, 2, 3];
      console.log(arr.join());    // 1, 2, 3
      console.log(arr);   // [1, 2, 3]
      
    • 3、slice(start,end) 方法从已有的数组中返回选定的元素。返回一个新数组。包含start到end(不包含end)的arratObject中的元素

      var a = ['a', 'b', 'c', 'd', 'e', 'f'];
      var a1 = a.slice(2,4);
      console.log(a);     // ["a", "b", "c", "d", "e", "f"]
      console.log(a1);    // ["c", "d"]
      
    • 4、toString()返回一个字符串,表示指定的数组及其元素

      var arr = ['a', 'b', 'c', 'd'];
      console.log(arr.toString());    // a,b,c,d
      console.log(arr);   // ["a", "b", "c", "d"]
      
    • 5、substring()substr() 都不改变原数组
      相同点:都只写一个参数时,两者的作用:都是截取字符串从当前下标以后直到字符串最后的字符串片段。
      不同点:第二个参数。
      substr(startIndex,lenth): 第二个参数是截取字符串的长度(从起始点截取某个长度的字符串);
      substring(startIndex, endIndex): 第二个参数是截取字符串最终的下标 (截取2个位置之间的字符串,‘含头不含尾’);

      var str = '123456789';
      console.log(str.substr(2))      // 3456789
      console.log(str.substring(2))   // 3456789
      
      console.log(str.substr(2, 4))       // 3456
      console.log(str.substring(2, 4))    // 34
      
    • 6、split()用于把一个字符串分割成字符串数组

      var arr = 'a, b, c, d, 1, 2, 3';
      var arr1 = arr.split(arr)
      console.log(arr)    // a, b, c, d, 1, 2, 3
      console.log(arr1)   // ["a, b, c, d, 1, 2, 3"]
      
    • 7、replace()用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

      var arr = "a, b, c, 1, 2, 3";
      var arr1 = arr.replace('b', 'G');
      console.log(arr)    // a, b, c, 1, 2, 3
      console.log(arr1)   // a, G, c, 1, 2, 3
      
  • 二、会改变原数组:push()unshift()pop()shift()splice()reverse()sort()排序

    • 1、push()方法可向数组的末尾添加一个或多个元素,并返回新的长度。

      var arr = [1, 2, 3];
      var arr1 = arr.push(5);
      console.log(arr);           // [1, 2, 3, 5]
      console.log(arr1);  // 4
      
    • 2、unshift()方法向数组的开头添加一个或多个元素,并返回新的长度。(该方法可以不传参数,不传参数就是不增加元素)

      var arr = [1, 2, 3, 4, 5];
      console.log(arr.unshift(8, 9)); // 7
      console.log(arr);   // [8, 9, 1, 2, 3, 4, 5]
      
    • 3、pop()方法用于删除数组的最后一个元素,并返回该元素的值

      var arr = [1, 2, 3];
      console.log(arr.pop()); // 3
      console.log(arr);   // [1, 2]
      
    • 4、shift()方法用于删除数组的第一个元素,并返回第一个元素的值。

      var arr = [1, 2, 3];
      console.log(arr.shift());   // 1
      console.log(arr);   // [2,3]
      
    • 5、splice()方法通过删除或替换现有元素或者原地添加新的元素,来修改数组,并以数组形式返回被修改的内容。没有删除元素,则返回空数组

      //从第 2 位开始删除 0 个元素,插入"FF"\"GG"
      var a = ['a', 'b', 'c', 'd']
      var a1 = a.splice(2, 0, 'GG', 'FF')
      console.log(a)      // ["a", "b", "GG", "FF", "c", "d"]
      console.log(a1)     // []
      
      // 从第 2 位开始删除 1 个元素
      var b = ['a', 'b', 'c', 'd']
      var b1 = b.splice(2, 1)
      console.log(b)      // ["a", "b", "d"]
      console.log(b1)     // ["c"]
      
      // 从第 1 位开始删除 1 或多个元素,插入"FF"\"GG"
      var c = ['a', 'b', 'c', 'd']
      var c1 = c.splice(1, 2, 'GG', 'FF')
      console.log(c)      // ["a", "GG", "FF", "d"]
      console.log(c1)     // ["b", "c"]
      
      // 从倒数第 2 位开始删除 1 个元素
      var d = ['a', 'b', 'c', 'd']
      var d1 = d.splice(-2, 1)
      console.log(d)      // ["a", "b", "d"]
      console.log(d1)     // ["c"]
      
      // 删除第2位后的所有元素
      var f = ['a', 'b', 'c', 'd']
      var f1 = f.splice(2)
      console.log(f)      // ["a", "b"]
      console.log(f1)     // ["c", "d"]
      
    • 6、reverse()方法将数组中的元素的位置颠倒,并返回该数组。

      var arr = ['a', 'b', 'c', 'd'];
      console.log(arr.reverse()); // ["d", "c", "b", "a"]
      console.log(arr);   // ["d", "c", "b", "a"]
      
    • 7、sort()方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。(由于它取决于具体实现,因此无法保证排序的时间和空间复杂性)

      var a1 = [1, 30, 4, 21, 100000]
      console.log(a1.sort())      // [1, 100000, 21, 30, 4]
      console.log(a1)     // [1, 100000, 21, 30, 4]
      
  • 三、其它的数组操作方法:indexOflastIndexOfvalueOf()every()some()map()filter()forEach()数组遍历、isArray

    • 1、indexOflastIndexOf都接受两个参数:查找的值、查找起始位置(可选)。
      不存在,返回 -1 ;存在,返回位置。indexOf是从前往后查找, lastIndexOf是从后往前查找。

      var a = ['a', 'b', 'c', 'd'];
      console.log(a.indexOf('b'))     // 1
      console.log(a.indexOf('e'))     // -1
      console.log(a.lastIndexOf('d')      // 3
      console.log(a.lastIndexOf('e'))     // -1
      
    • 2、valueOf()方法返回指定对象的原始值。
      该原始值由 Array 对象派生的所有对象继承。

    • 3、every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。(若收到一个空数组,此方法在一切情况下都会返回 true)

      var age = [18, 20, 16, 15, 22];
      function adult(age){
          return age < 30
      }
      console.log(age.some(adult))   //true
      console.log(age)    //[18, 20, 16, 15, 22]
      
    • 4、some()方法用于检测数组中的元素是否满足指定条件(函数提供)。如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。(如果用一个空数组进行测试,在任何情况下它返回的都是false)

      var age = [18, 20, 16, 15, 22];
      function adult(age){
          return age < 18
      }
      console.log(age.some(adult))   //true
      console.log(age)    //[18, 20, 16, 15, 22]
      
    • 5、map()通过指定函数处理数组的每个元素,并返回处理后的数组。

      var age = [18, 20, 16, 15, 22];
      function adult(x){
          return x - 10
      }
      console.log(age.map(adult)) //[8, 10, 6, 5, 12]
      console.log(age)    //[18, 20, 16, 15, 22]
      
    • 6、filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

      var age = [18, 20, 16, 15, 22];
      function adult(x){
          return x >= 20
      }
      console.log(age.filter(adult)) // [20, 22]
      console.log(age)    // [18, 20, 16, 15, 22]
      
    • 7、forEach()方法对数组的每个元素执行一次提供的函数。

      // array.forEach(function(currentValue, index, arr), thisValue)
      // function(currentValue, index, arr)   必需。 数组中每个元素需要调用的函数。
      //( currentValue.必需。当前元素, 
      //  index.可选。当前元素的索引值,  
      //  arr.可选。当前元素所属的数组对象。)
      // thisValue 可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
      let arr = [1, 2, 3, 4];
      var a= arr.forEach((item, index, array) => {
          console.log(item);
          // 依次打印1, 2, 3, 4, return并没有终止forEach的循环
          return item * 2;
      });
      
      console.log(arr);
      // [1, 2, 3, 4],不会修改元数组
      
    • 8、isArray方法用于判断一个对象是否为数组。

      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      var a = Array.isArray(fruits);
      console.log(a); //true
      
  • 三、ES6新增新操作数组的方法 :find()findIndex()fill()copyWithin()fromofentries()返回迭代器:返回键值对、values() 返回迭代器:返回键值对的value、keys() 返回迭代器:返回键值对的key、includes

    • 1、find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

      var arr = [3, 10, 18, 20];
      var arr1 = arr.find((e) => e < 10);
      console.log(arr1);   // 3
      
    • 2、findIndex()方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。否则返回-1。

      var arr = [3, 10, 18, 20];
      var arr1 = arr.findIndex((e) => e >= 18);
      console.log(arr1);      //  2
      
    • 3、fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。会改变原数组(IE 11 及更早版本不支持 fill() 方法)

      // array.fill(value, start, end)
      // value必需。填充的值。
      // start可选。开始填充位置。
      // end可选。停止填充位置 (默认为 array.length)
      
      const arr = [1, 2, 3, 4, 5];
      console.log(arr.fill(0, 2, 4));     //  [1, 2, 0, 0, 5]
      console.log(arr.fill(7, 1));        //  [1, 7, 7, 7, 7]
      console.log(arr.fill(9));           //  [9, 9, 9, 9, 9]
      
    • 4、copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

      // array.copyWithin(target, start, end)
      // target必需。复制到指定目标索引位置。
      // start可选。元素复制的起始位置。
      // end可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。
      
      const arr = ['a', 'b', 'c', 'd', 'e'];
      console.log(arr.copyWithin(0, 3, 4));   // ["d", "b", "c", "d", "e"]
      console.log(arr.copyWithin(1, 3));      //["d", "d", "e", "d", "e"]
      
    • 5、from()方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

      // Array.from(arrayLike[, mapFn[, thisArg]])
      // arrayLike 想要转换成数组的伪数组对象或可迭代对象。
      // mapFn 可选。如果指定了该参数,新数组中的每个元素会执行该回调函数。
      // thisArg 可选。执行回调函数 mapFn 时 this 对象。
      
      console.log(Array.from('Array'));   // ["A", "r", "r", "a", "y"]
      console.log(Array.from([1, 2, 3], x => x + x));     // [2, 4, 6]
      
    • 6、of()方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

      // Array.of() 和 Array 构造函数之间的区别在于处理整数参数:
      //      Array.of(7) 创建一个具有单个元素 7 的数组,
      //      而 Array(7) 创建一个长度为7的空数组
      //   (注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。
      
      console.log(Array.of(7));   // [7]
      console.log(Array.of(1, 2, 3));   //   [1, 2, 3]
      
      console.log(Array(7));   // [ , , , , , , ]
      console.log(Array(1, 2, 3));   // [1, 2, 3]
      
      
    • 7、entries()方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。(迭代对象中数组的索引值作为 key, 数组元素作为 value。)

      // next方法,可用用于遍历迭代器取得原数组的[key,value]。
      
      var arr = ['a', 'b', 'c', 'd']
      var a = arr.entries()
      
      console.log(a.next().value)     // [0, "a"]
      console.log(a.next().value)     // [1, "b"]
      console.log(a.next().value)     // [2, "c"]
      console.log(a.next().value)     // [3, "d"]
      
      //也可循环打印出来
      for(const b of a){
          console.log(b)
      }
      // [0, "a"]
      // [1, "b"]
      // [2, "c"]
      // [3, "d"]
      // for of是ES6提供的遍历迭代器对象的方式
      
    • 8、values()方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

      var arr = ['a', 'b', 'c', 'd']
      var a = arr.values()
      
      for(const b of a){
          console.log(b)
      }
      
      // a
      // b
      // c
      // d
      // for of是ES6提供的遍历迭代器对象的方式  
      
    • 9、keys()方法返回一个包含数组中每个索引键的Array Iterator对象。

      var arr = ['a', 'b', 'c', 'd']
      var a = arr.keys()
      
      for(const b of a){
          console.log(b)
      }
      // 0
      // 1
      // 2
      // 3
      // for of是ES6提供的遍历迭代器对象的方式  
      
    • 10、includes()方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

      // arr.includes(searchElement, fromIndex)
      //  searchElement   必须。需要查找的元素值。
      //  fromIndex   可选。从该索引处开始查找 searchElement。 默认为 0。
      //          如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。
      
      var arr = ['a', 'b', 'c', 'd']
      
      console.log(arr.includes('a'))      //true
      console.log(arr.includes('a', 3))   //false
      console.log(arr.includes('gg'))     //false
      
      
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容