JavaScript 数组(Array)方法汇总

数组(Array)常用方法;

      数组常用的方法：concat(),every(), filter(), forEach(),  indexOf(), join(), lastIndexOf(), map(), pop(), push(), reduce(), reduceRight(),  reverse(), shift(), slice(), some(), sort(), splice(), toLocaleString(), toString(),  unshift(),其中every(),filter(),forEach(), indexOf(), lastIndexOf(),map(), reduce(), reduceRight()和some ECMAScript 5新增的方法。

1.  concat() 方法用于连接两个或多个数组;  (注: 原数组不变，创建一个新的数组)。
   
   

   var arr1 = [1,2,3];
   var arr2 = [4,5,6];
   var arr3 = [7,8];
   arr1.concat(arr2);  // [1, 2, 3, 4, 5, 6]
   arr1.concat(arr2,arr3); //连接多个数组，[1, 2, 3, 4, 5, 6, 7, 8]
   arr1  // [1,2,3]

   View Code
2.  join() 方法将数组分割成字符串并连接在一起，返回最后生成的字符串;可以指定一个字符串分隔数组的各个元素； (注:原数组不变，创建一个新数组)。
   
   

   var arr = [1,2,3];
   arr.join();  // "1,2,3"  默认为逗号
   arr.join(''); // "123"
   arr.join('|') // "1|2|3"
   arr  // [1,2,3]

   View Code
3. slice(start,end) 方法用于截取数组指定的一部分,参数start规定选取的开始位置，end规定选取的结束位置(不包含该元素); 如果只有一个参数，则表示选取的开始位置。如果参数中出现负数,表示相对数组中最后一个元素的位置，如-1，表示倒数第一个元素，-3表示倒数第三个元素。（注:原数组不变，创建一个新数组）
   
   

   var arr = [1,2,3,4,5,6,7,8];
   arr.slice(0,3); // [1, 2, 3]
   arr.slice(3,5); // [4, 5]
   arr.slice(4)  // [5, 6, 7, 8]
   arr.slice(3,-1);  // [4, 5, 6, 7]
   arr.slice(-3,-2)  // [6]

   View Code
4. splice(index,howmany,item) 方法在数组中插入或者删除元素,返回删除的元素。参数index,表示规定添加/删除元素的位置(索引)，使用负数可从数组结尾处规定位置；参数howmany，表示要删除的数量,0表示不删除元素；参数item,表示向数组添加的元素；(注: 原数组发生改变)
   
   

   var arr = [1,2,3,4,5,6,7,8,9]
   arr.splice(8)  // [9]  一位参数默认截取到最后
   arr  //[1, 2, 3, 4, 5, 6, 7, 8] 
   arr.splice(1,0) // [] 第二个参数为0，不会删除数组元素
   arr  //  [1, 2, 3, 4, 5, 6, 7, 8]
   arr.splice(-1) // [8]  起始为负数
   arr.splice(6,0,'javaScript') // []
   arr //  [1, 2, 3, 4, 5, 6, "javaScript", 7]
   arr.splice(6,2,'Vue') // 删除项["javaScript", 7]  替换元素
   arr  // 原数组[1, 2, 3, 4, 5, 6, "Vue"]

   View Code
5.  push()和pop() 方法  (注: 原数组发生了改变)
   push()方法在数组的尾部添加一个或者多个元素，并返回数组新的长度。
   
   

   var arr = ['javaScript','HTML','Css'];
   arr.push('Vue');  // 4
   arr // ["javaScript", "HTML", "Css", "Vue"]
   arr.push('Sass','Jq') // 6
   arr  // ["javaScript", "HTML", "Css", "Vue", "Sass", "Jq"] 

   View Code

   pop()方法删除数组的最后一个元素，减少数组长度并返回删除的值。

   

   var arr = ['JavaScript','Vue','React'];
   arr.pop()  // "React"
   arr  // ["JavaScript", "Vue"]

   View Code
6. shift()与unshift()方法 （注： 原数组发生了改变）
   unshift() 方法在数组的头部添加一个或者多个元素，返回数组新的长度；
   
   

   var arr = [];
   arr.unshift('Vue','JavaScript');  // 2
   arr; // ["Vue", "JavaScript"]

   View Code
   shift() 方法删除数组的第一个元素并返回删除的值；
   
   

   var arr = ['JavaScript','Vue','React'];
   arr.shift();  // "JavaScript"
   arr; //["Vue", "React"]

   View Code
7. reverse() 和sort()方法 （注: 原数组发生了改变）
   reverse() 方法将数组的颠倒顺序，返回逆序的数组。
   
   

   var arr = ['JavaScript','Vue','React']
   arr.reverse() // ["React", "Vue", "JavaScript"]
   arr  //["React", "Vue", "JavaScript"]

   View Code

   sort() 方法将数组中的数组排序并返回排序后的数组(升序排列)，sort()方法会调用每个数组项的toString()方法转换成字符串，然后比较得到后的字符串，已确定排列顺序；
   (a) 如果数组里面的内容为字母，则以字母表的顺序排列（按照字符编码的顺序进行排序）。

   

   var arr = ["React", "Vue", "JavaScript"];
   arr.sort(); // ["JavaScript", "React", "Vue"]

   View Code

   (b) sort(sortFun) 参数sortFun 为一个函数

   

   var arr = [78,56, 99, 9, 44,123,45,555,678,999,12,123];
   arr.sort(); // [12, 123, 123, 44, 45, 555, 56, 678, 78, 9, 99, 999] 未传入函数参数
   ---------------------------------------------------
   var arr = [78,56, 99, 9, 44,123,45,555,678,999,12,123];
   arr.sort(function(a,b){
      return a - b;           // 返回 负数，0， 正数 
   })   // [9, 12, 44, 45, 56, 78, 99, 123, 123, 555, 678, 999]

   View Code
8. toString() 和 toLocaleString() （注: 原数组不发生改变）
   toString()方法 将数组的每个元素转换成字符串，返回用逗号分隔开的字符串
   
   

   [1,2,3].toString(); //"1,2,3"
   ['JavaScript','Vue','React'].toString(); //"JavaScript,Vue,React"
   [1,['JavaScript','Vue',{'title':'标题'}],2].toString(); //  "1,JavaScript,Vue,[object Object],2"

   View Code

   toLocaleString()方法 把数组转换为本地字符串；

   

   [1,2,3].toLocaleString()  // "1,2,3"
   [new Date()].toLocaleString(); //  "2018/6/2 上午11:50:12"

   View Code

       

      ECMAScript 5定义了9个新的数组方法来遍历、映射、过滤、检测、简化和搜索数组；

1. forEach(function(item,index,list){})方法  从头到尾遍历数组,为每个元素调用指定的函数； 参数function(item,index,list) {}  item,表示数组每一项的值，index,表示元素索引，list,表示为遍历的数组本身；
   
   

   var  data = [1,2,3,4,5,6];
   var sum = 0;
   data.forEach((item) => {
     sum += item;   // 求和
   });
   sum // 21
   
   // 每个数组元素自加1
   data.forEach((item,index,list) => {
     list[index] = item + 1;  
   });
   data /// [2, 3, 4, 5, 6, 7]
   
   ------------------------------------
   // 注意： forEach() 对于空数组是不会执行回调函数的
   var data = [];
   data.forEach((item) => {
     console.log(item)    // 不执行
   })
   // 注意，非数组调用报错
   var data = '';
   data.forEach((item) => {
   })

   View Code
2. map()方法 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

   map() 方法按照原始数组元素顺序依次处理元素。

   注意： map() 不会对空数组进行检测。

   注意： map() 不会改变原始数组。

   

   var arr = [2,3,4,5,6,7,8];
   var mapArr = arr.map((item) => {
     return Math.pow(item,3);  // 返回每一项的的3次幂
   });
   mapArr  // [8, 27, 64, 125, 216, 343, 512]
   arr  // [2, 3, 4, 5, 6, 7, 8]   原数组不发生改变

   View Code
3. filter()方法 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。
   
   

   var arr = [2,4,6,8,10,15];
   // 取数组小于 6 或者 大于 12 的数
   arr.filter((item) => {
      return item < 6 || item > 12;  // [2, 4, 15]
   })
    // 取数组能整除2的数
   arr.filter((item) => {
     return item%2 == 0;  // [2, 4, 6, 8, 10]
   })

   View Code
4. every()和some()方法 （注：不改变原数组）
   every()方法  用于检测数组所有元素是否都符合指定条件（通过函数提供）,返回值为true or false; 当且针对数组中的所有元素调用判定函数都返回true时，才返回true。
   
   

   var arr = [1,2,3,4,5,6,7,8];
   // 所有值小于10 
   arr.every((item) => {
     return item < 10;   // true  
   });
   
   arr.every((item) => {
     return item < 4; // false
   })

   View Code

   some() 方法 当数组中至少存在一个元素调用判定函数返回true,它就返回true。
   some() 方法会依次执行数组的每个元素：

   

   var arr = [2,4,6,8,10,15];
   arr.some((item) => {
     return item < 2;  // false
   })
   
   arr.some((item) => {
     return item < 4; // true
   })

   View Code
5.  reduce()和reduceRight()方法 用指定的函数将数组进行组合，最终计算为一个值；
   reduce()接收两个参数，第一个参数是执行简化操作的函数(必选)，第二参数是传递给函数的初始值(可选)。
   
   

   var arr = [1,2,3,4,5,6,7,8];
   // 求和
   arr.reduce((x,y) => {
     return x + y;
   },0);
   // 求最大值
   arr.reduce((x,y) => {
      return x>y ? x : y;  // 8
   })

   View Code

   reduceRight()原理与reduce()一样，不同的是reduceRight()按照数组从高到低处理数组。

   

   var arr = [2,3,4];
   //2^(3^4) 乘方从右到左
   arr.reduceRight((x,y) => {
      return Math.pow(y，x);  // 2.4178516392292583e+24
      //  return Math.pow(x,y);  // 4096
   })

   View Code
6. indexOf()和lastIndexOf()方法
   indexOf () 方法 用于搜索整个数组中某个字符串在数组中首次出现的位置，并返回该值在数组中的索引。 没有找到返回-1； indexOf(),从头到尾搜索，lastIndexOf()方法从末尾开始搜索。
   

   var arr = ['javaScript','Vue','React','CSS3'];
   arr.indexOf('vue') // -1
   arr.indexOf('CSS3');  // 3
   arr.lastIndexOf('CSS3'); // 3
   arr.lastIndexOf('Vue');  // 1

   View Code