js数组的常见方法&数组的遍历

01、数组的一些常见方法

• 数组的四个基本方法：（数组的添加和删除）

  方法	描述	备注
  push()	向数组的最后面插入一个或多个元素,返回结果为该数组新的长度	会改变原数组
  pop()	删除数组中的最后一个元素,返回结果为被删除的元素	会改变原数组
  unshift()	在数组最前面插入一个或多个元索,返回结果为该数组新的长度	会改变原数组
  shift()	删除数组中的第一个元素,返回结果为被删除的元素	会改变原数组

• 数组的常见方法：

  方法	描述	备注
  slice()	从数组中提取指定的一个或多个元索，返回结果为新的数组	不会改变原数组
  splice()	从数组中删除指定的一个或多 个元素，返回结果为新的数组	会改变原数组
  concat()	连接两个或多个数组,返回结果为新的数组	不会改变原数组
  join()	将数组转换为字符串，返回结果为转换后的字符串	不会改变原数组
  reverse()	反转数组，返回结果为反转后的数组	会改变原数组
  sort()	对数组的元素，默认按照Unicode编码,从小到大进行排序	会改变原数组

• 遍历数组的方法：

  方法	描述	备注
  for循环	这个大家都懂
  forEach()	和 for循环类似,但需要兼容IE8以上	forEach()没有返回值。也就是说，它的返回值是 undefined
  map()	对原数组中的每一项进行加工 ，将组成新的数组	不会改变原数组
  filter()	对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组，返回结果为新的数组。可以起到过滤的作用	不会改变原数组
  every()	如果有一项返回false ，则停止遍历，此方法返回false	一假即假。要求每一项都返回true，最终的结果才返回true
  some()	只要有一项返回true，则停止遍历，此方法返回true	一真即真。要求每一项都返回false ,最终的结果才返回 false
  reduce	为数组中的每一个元素 ，依次执行回调函数

• 数组的其他方法：

  方法	描述
  indexOf(value)	从前往后索引,获取value在数组中的第一个下标
  lastIndexOf(value)	从后往前索引，获取value在数组中的最后一个下标
  find(function())	找出第一个满足「指定条件返回true」 的元素。
  findIndex(function())	找出第一个满足「指定条件返回true」的元索的index
  Array.from(arrayLike)	将伪数组转化为真数组
  Array.of(value1, value2, value3)	将一系列值转换成数组。

02、数组的四个基本方法(数组元素的添加和删除)

1. push()

   push()：向数组的最后面插入一个或多个元素，返回结果为该数组新的长度。

   语法：

   数组的新长度 = 数组.push(元素)
   

   例子：

   var arr = ["王一"，"王二"，"王三"];
   var result1 = arr.push("王四"); //末尾插入一个元素
   var result2 = arr.push("王五","王六"); //末尾插入多个元素
   console.log(result1); //打印结果: 4
   console.log(resu1t2); //打印结果: 6
   console.log(JSON.stringify(arr)); //打印结果: ["王一","王二”,"王三”,"王四","王五","王六"]
   

2. pop()

   pop()：删除数组中的最后一个元素，返回结果为被删除的元素。

   语法：

   被删除的元素 = 数组.pop()
   

   例子：

   var arr = ["王一","王二","王三"];
   var result1 = arr.pop();
   console.log(resu1t1); //打印结果:王三
   console.log(JSON.stringify(arr)); //打印结果: ["王一","王二"]
   

3. unshift()

   unshift()：在数组最前面插入一个或多个元索，返回结果为该数组新的长度。插入元索后，其他元索的索引会依次调整。

   语法：

   数组的新长度 = 数组.unfhift(元素)
   

   例子：

   var arr = ["王一","王二”,"王三"];
   var result1 = arr.unshift("王四"); //最前面插入- -个元素
   var result2 = arr.unshift("王五"，"王六"); //最前面插入多个元素
   console.log(resu1t1); //打印结果: 4
   console.log(resu1t2); //打印结果: 6
   console.log(JSON.stringify(arr)); //打印结果: ["王五","王六","王四","王一","王二","王三"]
   

4. shift()

   shift()：删除数组中的第一个元素，返回结果为被删除的元素。

   语法：

   被删除元素 = 数组.shift()
   

   例子：

   var arr = ["王一"，"王二","王三"];
   var result1 = arr.shift();
   console.log(resu1t1); //打印结果:王一
   console.log(JSON.stringify(arr)); //打印结果: ["王二"， "王三"] 
   

03、数组的常见方法

1. slice()

   slice()：从数组中提取指定的一个或者多个元素，返回结果为新的数组(不会改变原来的数组)。

   PS:该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回。

   语法：

   新数组 = 原数组.slice(开始位置的索引,结束位置的索引) // 值得注意的一点：包含开始索引，不包含结束索引
   

   例子：

   var arr = ["a", "b", "c", "d", "e", "f"];
   var result1 = arr.slice(2); //从第二个值开始提取
   var result2 = arr.slice(-2); //提取最 后两个元素
   var result3 = arr.s1ice(2,4); //提取从第二个到第四个之间的值(不包括第四个值)
   var result4 = arr.s1ice(4,2); //空
   console.log("arr:" + JSON.stringify(arr));
   console.log("resu1t1:" + JSON.stringify(resu1t1));
   console.log("resu1t2:" + JSON.stringify(result2));
   console.log("resu1t3:" + JSON.stringify(result3));
   console.log("resu1t4:" + JSON.stringify(resu1t4));
   

   补充：

   很多前端人员会使用slice()将伪数组转化为真数组，写法如：

   array = Array.prototye.slice.ca11 (arrayLike)
   或者
   array = [].slice.call(arrayLike)
   

   但在ES6中有一个新的API来处理这种情况：（专门用来将伪数组转化成真数组）

   array = Array.from(arrayLike)
   

2. splice()

   splice()：从数组中添加/删除指定的一个或多个元素,返回结果为新的数组(会改变原来的数组)。

   备注:该方法会改变原数组，会将指定元素从原数组中删除;被删除的元素会封装到一个新的数组中返回。

   语法：

   新数组=原数组.splice(起始索引index,需要删除的个数,第三个参数,第四个参数...);
   

   上方语法中，第三个及之后的参数，表示：向原数组中添加新的元素，这些元素将会自动插入到开始位置索引|的前面。

   例1：

   var arr1= ["a", "b","c"，"d", "e", "f"];
   var result1 = arr1.splice(1); //从第 index为1的位置开始，删除元素
   console.log("arr1:"+ JSON.stringify(arr1)); //输出结果：["a"]
   console.log("resu1t1: " + JSON.stringify(result1));//输出结果:["b","c","d","e", "f"]
   

   例2：

   var arr2 = ["a","b","C","d","e","f"];
   var result2 = arr2.splice(-2); //删除最后两个元素
   console.log("arr2:"+ JSON.stringify(arr2)); //输出结果：["a","b","c","d"]
   console.log("resu1t2: " + JSON.stringify(resu1t2));//输出结果：["e","f"]
   

   例3：

   var arr3 = ["a","b","c","d","e","f"];
   var result3 = arr3.splice(1, 3); //从第index为1的位 置开始删除元素，一共删除三个元素
   console.log("arr3: " + JSON.stringify(arr3)); //输出结果：["a","e","f"]
   console.log("result3:"+ JSON.stringify(resu1t3));//输出结果：["b","c","d"]
   

   例4（第三个参数的用法）：

   var arr4 = ["a", "b", "C", "d", "e", "f"];
   //从第index为1的位置开始删除元素，一共删除三个元素。并且在index=1 的前面追加两个元素
   var resu1t4 = arr4.splice(1, 3,"千古壹号","vae");
   console.log("arr4: "+JSON.stringify(arr4));//输出结果:["a","千古壹号","vae","e","f"]
   console.log("resu1t4: " + JSON.stringify(resu1t4));//输出结果:["b", "C", "d"]
   

3. concat()

   concat()：连接两个或多个数组，返回结果为新的数组。 (不会改变原数组)

   语法：

   新数组 = 数组1.concat(数组2,数组3...);
   

   例子：

   var arr1 = [1,2,3];
   var arr2 = ["a","b","c"];
   var arr3 = ["千古壹号","vae"];
   var result1 = arr1.concat(arr2);
   var result2 = arr2.concat(arr1,arr3);
   console.log("arr1 =" + JSON.stringify(arr1));//输出结果:[1,2,3]
   console.log("arr2 =" + JSON.stringify(arr2));//输出结果:["a","b","c"]
   console.log("arr3 =" + JSON.stringify(arr3));//输出结果:["千古壹号","vae"]
   console.log("resu1t1 =" + JsoN.stringify(result1));//输出结果:[1,2,3,"a","b","c"]
   console.log("resu1t2 =" + JSON.stringify(result2));//输出结果:["a","b","c",1,2,3,"千古壹号","vae"]
   

   从打印结果中可以看到,原数组并没有被修改。

4. join()

   join()：将数组转换为字符串，返回结果为转换后的字符串(不会改变原来的数组)。

   PS: join()方法可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符；如果不指定连接符，则默认使用,作为连接符，此时和toString()的效果是一致的。

   语法：

   新的字符串 = 原数组.join(参数);//参数选填
   

   例子：

   var arr = ["a", "b", "c"];
   var result1 = arr.join(); //这里没有指定连接符，所以默认使用作为连接符
   console.log(result1) //输出结果: a,b,c
   var result2 = arr.join("-"); //使用指定连接符
   console.log(result2) //输出结果: a-b-c
   var result3 = arr.join(""); //使用指定连接符
   console.log(result3) //输出结果: abc
   

5. reverse()

   reverse()：反转数组，返回结果为反转后的数组(会改变原来的数组)。

   语法：

   反转后的数组 = 数组.reverse();
   

   例子：

   var arr = ["a", "b", "c", "d", "e", "f"];
   var result = arr.reverse(); //将数组arr进行反转
   
   console.log("arr =" + JSON.stringify(arr)); //输出["f","e","d","c","b","a"]
   console.log("result =" + JSON.stringify(result));//输出["f","e","d","C", "b","a"]
   

   从打印结果可以看出，原来的数组经被改变了。

6. sort()方法

   sort(): 对数组的元素进行从小到大来排序(会改变原来的数组)。

   sort()方法举例：

   • 无参时

     如果在使用sort()方法时不带参，则默认按照Unicode编码,从小到大进行排序。

     例1(当数组中的元素为字符串时)：

     var arr1 = ["e", "b", "d", "a", "f", "c"];
     var result = arr1.sort(); //将数组arr1进行排序
     console.log("arr1 =" + JSON.stringify(arr1)); //输出["a","b","C","d","e","f"]
     console.log("resu1t =" + JSON.stringify(result));//输出["a","b","C","d","e","f"]
     

     例2(当数组中的元素为数字时)：

     var arr2=[5,2,11,3,4,1];
     var result = arr2.sort(); //将数组arr2 进行排序
     console.log("arr2 =" + JSON.stringify(arr2));//输出[1,11,2,3,4,5]
     console.log("result =" + JSON.stringify(result));//输出[1,11,2,3,4,5]
     

     上方的打印结果中，你会发现,使用sort()排序后，数字11竟然在数字2的前面。这是为啥呢?因为上面讲到了，sort()方法是按照Unicode编码进行排序的。

   • 带参时

     如果在sort()方法中带参,我们就可以自定义排序规则。具体做法如下:

     我们可以在sort()添加一个回调函数,来指定排序规则。回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数

     浏览器根据回调函数的返回值来决定元素的排序: (重要)

     • 如果返回一个大于0的值,则元素会交换位置
     • 如果返回一个小于0的值，则元素位置不变
     • 如果返回一个0，则认为两个元索相等，则不交换位置

     例子：

     var arr3=[5,2,11,3,4,1];
     //自定义排序规则
     var result = arr3.sort(function(a, b) {
         if (a>b){ //如果a大于b，则交换a和b的位置
             return 1;
         }elseif(a<b){//如果a小于b,则位置不变
             return -1;
         } else{//如果a等于b,则位置不变
             return 0;
         }
     });
     console.log("arr3 =" + JSON.stringify(arr3));//输出[1,2,3,4,5,11]
     console.log("result =" + JSON.stringify(resu1t));//输出[1,2,3,4,5,11]
     

     优化代码：

     var arr3=[5,2,11,3,4,1];
     //自定义排序规则
     var result = arr3. sort(function(a, bJ {
     	return a - b; //升序排列
     	// return b - a; //降序排列
     });
     console.log("arr3 =" + JSON.stringify(arr3));//输出[1,2,3,4,5,11]
     console.log("result ="+ JSON.stringify(result));//输出[1,2,3,4,5,11]
     

04、数组的遍历

遍历数组即：获取并操作数组中的每一个元素。 在我们的实战开发中,使用得非常频繁。

遍历数组的方法包括: every()、filter()、 forEach()、map()、some()

PS：这几个方法不会修改原数组

语法：

数组/boolean/无 = 数组.every/filter/forEach/map/some(
                    function(item, index, arr){
                    		程序和返回值;
                    })

有了这几种方法，就可以替代一些for循环了。下面依次来介绍。

1. for循环遍历

   例子：

   var arr = ["生命壹号"， "许嵩"，"永不止步"];
   for(var i = 0; i<arr.length;i++){
   	console.log(arr[i]); // arr[]代表的是数组中的每一个元素i
   }
   console.log(arr);
   

2. forEach()遍历

   forEach()这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8 ,则不要使用forEach，改为使用for循环来遍历即可。

   forEach(方法需要一个函数作为参数。 这种函数，是由我们创建但是不由我们调用的,我们称为回调函数。

   数组中有几个元素，该回调函数就会执行几次。执行完毕后,浏览器会将遍历到的元素。

   回调函数中传递三个参数:

   • 第一个参数，就是当前正在遍历的元素
   • 第二个参数，就是当前正在遍历的元素的索引
   • 第三个参数，就是正在遍历的数组

   例子：

   var arr = ["王一”，"王二”，"王三”];
   arr.foreach(function(item, index, obj) {
       console.log("item:" + item);
       console.logC"index:" + index);
       console.log("obj:" + obj);
       console.log("-----------");
   });
   

   注意, forEach()的返回值是undefined。也就是说,它没有返回值。如果你尝试tempArry = arr. forEach()这种方式来接收,是达不到效果的。

3. map()方法

   解释：对数组中每一项运行回调函数，返回该函数的结果,组成的新数组(返回的是加工之后的新数组)。

   例1（拷贝的过程中改变数组元素的值）：

   有一个已知的数组arr， 我要求让arr中的每个元素的值都加10，这里就可以用到map方法。代码举例:

   var arr=[1，3,6，2,5，6];
   var arr2 = arr.map(function (item, index) {
   	return item + 10; //让arr1中 的每个元素加10
   })
   console.log(arr2);
   

   例2（重要案例）：

   const arrl = [
   { name: '千古壹号'，age: '28' },
   { name:'许嵩'，age: '32' }
   ];
   const arr2 = arr1.map(item => item.name); //将数组arrl中的name 属性，存储到数组arr2中
   console.log('arr1:'+ JSON.stringify(arr1));
   console.log('arr2:' + JSON.stringi fy(arr2)); //输出["千古壹号","许嵩"]
   

4. filter()

   解释：对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组(返回值就是这个新的数组)。

   例1（找出数组arr中大于4的元素，返回一个新的数组。）：

   var arr=[1,3,6,2,5,6];
   var arr2 = arr1.filter(function(item, index) {
   	return item > 4; //将arr1中大于4的元素返回，组成新的数组
   });
   console.log(JSON.stringify(arr2)); //输出[6,5,6]
   

   ES6写法：

   const arr1 = [1, 3, 6, 2, 5, 6];
   const arr2 = arr1.filter(item => item > 4); //将arr1中大于4的元素返回，组成新的数组
   console.log(JSON.stringify(arr2));
   

   例2（获取数组A中指定类型的对象,放到数组B中）：

   const arr1p [
       { name: '许高',type:'一线' },
       { name: '周杰伦',type: '过气' },
       { name: '邓紫棋',type: '一线' }
   ];
   const arr2 = arr1.filter(item => item.type == '一线'); //筛选出一线歌手
   console.log(JSON. stringify(arr2));
   

5. every()方法

   every()：对数组中每一项运行回调函数 ，如果都返回true，every就返回true ；如果有一项返回false ，则停止遍历， 此方法返回false.

   PS: every)方法的返回值是boolean值，参数是回调函数。

   例子：

   var arr = ["千古","宿敌","南山忆","素颜"];
   var bool = arrl.every(function(element,index,array) {
       if (element.length > 2) {
       return false;
       }
       return true;
   });
   console.log(bool); //输出结果: false.只要有一个元素的长度是超过两个字符的，就返回false
   
   var arr2 = ["千古","宿敌","南山”,"素颜"];
   var bool2 = arr2.every(function(element,index,array) {
       if (element.length > 2) {
       return false;
       }	
       return true;
   });
   console.log(bool2); //输出结果， true. 因为每个元素的长度都是两个字符。
   

6. some()方法

   some() : 对数组中每一项运行回调函数，只要有一项返回true，则停止遍历，此方法返回true。

   注意: some()方法的返回值是boolean值。

7. reduce()方法

   reduce()：为数组中的每一个元素,依次执行回调函数。

   语法：

   arr.reduce(
   	function(previousValue, item, index, arr) {
   },initialvalue)
   

   参数解释：

   • previousValue:上一次调用回调函数时的返回值，或者初始值
   • currentntValue :当前正在处理的数组元素
   • currentIndex :当前正在处理的数组元素下标
   • array :调用reduce()方法的数组
   • initialValue :可选的初始值(作为第一次调用回调函数时传给 previousValue的值)

   PS：如果能熟练使用reduce的用法，将能替代很多其他的数组方法。

   例子：

   var arr=[2,0,1,9,6];
   var sumValue = arr.reduce (function(total, item) { //计算 arr数组中，所有元素项的综合
   	return total + item;
   },0);
   console.log('sumvalue:' + sumvalue); //打印结果: 18
   

05、数组的其他方法

1. indexOf()和lastIndexOf：获取数据的索引

   语法：

   索引值 = 数组.indexof(value);
   索引值 = 数组.lastIndexof(value);
   

   解释：

   • indexOf(value) :从前往后索引，获取value在数组中的第一个下标。
   • lastIndexOf(value) :从后往前索引，获取value在数组中的最后一个下标。

   作用：

   利用这个方法,我们可以判断某个值是否在指定的数组中。如果没找到则返回-1。

   例1：

   var arr = ["a", "b","C","d","e","d","c"];
   console.log(arr.indexOf("c"));//从前往后，找第-一个"c"在哪个位置
   console.log(arr.lastIndexOf("d"));//从后往前，找第一个"d"在哪个位置
   

   例2(判断某个值是否在数组中)：

   var arr = [" 29926392220","29965620629","28003663436","28818504366"];
   var str=[
   {name:"smyh", id: "12334"},
   {name:"vae", id: "28818504366"}
   ];
   str.filter(item => {
   	return arr.indexof(item.id)!=-1;
   })
   

2. find()

   语法：

   find(function(item,index,arr) {return true})
   

   作用：找出第一个满足[指定条件返回true]的元素。

   PS：一旦找到符合条件的第一个元素 ,将不再继续往下遍历。

   例子：

   let arr=[2,3,2,5,7,6];
   let result = arr.find(function (item, index) {
   	return item > 4; //遍历数组arr, 一旦发现有第一个元素大于4，就把这个元素返回
   });
   console.log(result); //打印结果: 5
   

3. findIndex()

   语法：

   findIndex(function(item,index,arr) { return true})
   

   作用：找出第一个满足[指定条件返回true]的元索的index.

   例子：

   let arr=[2,3,2,5,7,6];
   let result = arr.findIndex(function (item, index) {
   	return item > 4; //遍历数组arr, 一旦发现有第一个元素大于4，就把这个元素的index返回
   });
   console.log(result); //打印结果: 3
   

4. Array.from()

   语法：

   array = Array.from(arrayLike)
   

   作用：将伪数组或可遍历对象转换为真数组。

   伪数组与真数组的区别:

   伪数组的原型链中没有Array.prototype，而真数组的原型链中有Array.prototype。因此伪数组没有pop、join等属性。

5. Array.of()

   语法：

   Array.of(value1,value2,value3)
   

   作用：将一系列值转换成数组。

   例子：

   let arr = Array.of(1，abc,true);
   console.log(arr);
   

06、other

1. isArray()：判断是否为数组

   布尔值 = Array.isArray(被检测的值)
   

   以前，我们会通过A instanceof B来判断A是否属于B类型。但是在数组里，这种instanceof方法已经用的不多了，因为有下面isArray()方法。

2. toString()：数组转换字符串

   字符串 = 数组.toStirng();
   

   作用：把数组转换成字符串，每项用,分割。

3. valueOf()：返回数组本身

   数组本身 = 数组.value0f();
   

   这个方法的意义不大。因为我们指直接写数组对象的名字，就已经是数组本身了。