js数组操作方法以及es6新增方法

Posted 2021-01-09 lakemonster

数组在javascript中是一个引用值，下面列举在学习中遇到的一些数据常用方法

1. 改变原数组
    push(), pop(), shift(), unshift(), sort(), reverse(), splice()

2. 不改变原数组
    concat(), join(), split(), toSting(), slice()

下面就一一介绍这些方法的使用

1. push

push就是从数组的最后面加入新的元素

  var arr = [1,2,3,4];

  arr.push(5);

  console.log(arr);//[1,2,3,4,5]
  //原数组改变成了 [1,2,3,4,5]

2. pop

pop与push相反是删除数组中的最后一个元素,可以联想到内存中压栈(push),出栈(pop)

var arr = [1,2,3,4];

arr.pop();

console.log(arr);//[1,2,3]

3.shift

shift 从数组的第一位开始删除元素

var arr = [1,2,3,4];

arr.shift();

console.log(arr);[2,3,4]

4. unshift

在数组的第一位之前加入元素

var arr = [1,2,3,4];

arr.unshift(0);

console.log(arr);//[0,1,2,3,4]

5. sort

sort可以将无序数组进行排序,sort()的默认排序是按照 ** ASCII升序** 进行排序的,但是系统内部提供了一个接口可以让** 用户自定义排序 **

  //默认排序 升序
  var num = [10,0,2,9,"a","A","z","T","你"];

  var hadSort  = num.sort();

  console.log(hadSort);//[0, 10, 2, 9, "A", "T", "a", "z", "你"];

  //设置倒序输出
  var hadSort = num.sort().reverse();

  console.log(hadSort);//["你", "z", "a", "T", "A", 9, 2, 10, 0]

用户自定义排序:

1. 必须有两个参数
2. 看返回值
   1. 当返回值为负数的时候,那么前面的数放在前面
   2. 返回值为正数的时候,后面的数移动到前面去
   3. 返回值为0不动

  var arr = [5,8,1,5,2,7,4,1,3];

  var newArr = arr.sort(function(a, b){

    if(a - b > 0){

      return 1;

    }else if(a - b < 0){

      return -1;

    }else{

      return 0;

    }

  })
  console.log(newArr) //[1, 1, 2, 3, 4, 5, 5, 7, 8]

  //观察上面式子其实可以简单书写
  //因为无论a-b如何比较,都是返回a-b的值那么函数可以改写

  var newArr = arr.sort(function(a, b){
    return a - b;
  })

  // 当然如果是要降序的话可以使用 reverse()方法,或者return b -a

给一个数组随机乱序排列

var arr = [1,4,7,8,5,2]

arr.sort(function(a, b){

  return Math.random()-0.5;//返回的是-0.5 ---- 0.5之间的数

})

6. reverse

就是倒置数组，将数组内容倒置输出

var arr = [1,2,3,4,5]

console.log(arr.reverse()); //[5, 4, 3, 2, 1]

7.splice

splice("第几位开始(-1是倒着数的第一位(不是倒着数的第0位))","截取多少长度(可以为0)","在切口处添加新的数据")

var arr = [2,5,4,2,5];

var newArr1 = arr.splice(2,3,5,0,0,0,0,0);

console.log(arr); //[2, 5, 5, 0, 0, 0, 0, 0]

console.log(newArr1);//[4, 2, 5]; //这类似于剪切,返回了剪切的值

var arr = [2,5,4,2,5];

var newArr2 = arr.splice(-1,0,"你好");

console.log(arr); //[2, 5, 4, 2, "你好", 5]

console.log(newArr2);//[]

concat

连接两个数组

var arr1 = [1,2,3];

var arr2 = [4,5,6];

var newArr = arr1.concat(arr2);

console.log(newArr)//[1, 2, 3, 4, 5, 6]

console.log(arr1)//[1,2,3] 原数组没有改变

其实连接两个数组有很多方法:
  1. call/apply 改变this指向
  var arr1 = [1,2,3];

  var arr2 = [4,5,6];

  var newArr = Array.apply(arr1,[arr2,arr1]).join(",").split("-");

  console.log(newArr)//[4,5,6,1,2,3]

  var newArr2 = Array.call(arr1,arr1,arr2).join(",").split("-");

  console.log(newArr2)//[1,2,3,4,5,6]

  2. 使用es6语法 ...扩展运算符
  let arr1 = [1,2,3]

  let arr2 = [4,5,6]

  let arr = [...arr1,...arr2]

8.join

返回一个字符串

  var arr = ["加","油","不","放","弃"];

  console.log(arr.join("-")); "加-油-不-放-弃"

9. split

split() 方法用于把一个字符串分割成字符串数组

var arr = ["加","油","不","放","弃"];

console.log(arr.join("-")); "加-油-不-放-弃"

var newArr = arr.join("-");

console.log(newArr.split());//["加-油-不-放-弃"]

console.log(newArr.split(""));//["加", "-", "油", "-", "不", "-", "放", "-", "弃"]

console.log(newArr.split("-"))//["加", "油", "不", "放", "弃"]

10.toString

toString() 方法可把一个逻辑值转换为字符串，并返回结果

  var arr = [1,2,3,4,5];

  var str = arr.toString();

  console.log(str)//1,2,3,4,5

  typeof(str); //String

11.slice

截取字符串 slice("从该位开始截取(包含)","截取到该位(改位不截取,不包含)"),一个参数,从第n位开始一直到列表的最后的一位,规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。不能整个截取

var arr = [1,2,3,4,5,6];

var newArr = arr.slice(2,4);

console.log(arr);//[1, 2, 3, 4, 5, 6];

console.log(newArr);//[3, 4];

var newArr1 = arr.slice(-1);

ES6新增方法

map() 映射, reduce()汇总, filter()过滤, forEach()迭代

1. map

1.
  var arr = [4,5,8,6];
  
  var newArr= arr.map((item)=>{
  
    return item
    
  })
  console.log(newArr)//[4, 5, 8, 6]
2.
  var arr = [88,70,14,55,78,99];
  
  var newArr = arr.map((item)=>{
  
    if(item>60){
    
      return "及格";
      
    }else{
    
      return "不及格";
      
    }
  })
  console.log(newArr);//["及格", "及格", "不及格", "不及格", "及格", "及格"]
3.
  var arr = [1,2,3,4,5,6]
  
  var newArr = arr.map((item)=>{
  
  return item*2;
})
  相当于=>
  var arr = [1,2,3,4,5,6]
  
  function fx(x){
  
    return x*x
}
 var newArr = arr.map(fx);
 
 console.log(newArr) //[1, 4, 9, 16, 25, 36]

2.reduce

• reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
• reduce() 可以作为一个高阶函数，用于函数的 compose。

• 注意: reduce() 对于空数组是不会执行回调函数的。

  arr.reduce(callback,[initialValue])

  • callback （执行数组中每个值的函数，包含四个参数）
    • previousValue （第一项的值或者上一次叠加的结果值，或者是提供的初始值（initialValue））
    • currentValue （数组中当前被处理的元素）
    • index （当前元素在数组中的索引）
    • array （数组本身）
  • initialValue （作为第一次调用 callback 的第一个参数，可以控制返回值的格式）

 var arr = [1,2,3,4];
 
 var result = arr.reduce((pre,item,index,array)=>{
   
   console.log(pre,item,index);
   
   return pre + item;
 })
 console.log(result);
 //1 2 1
 //3 3 2
 //6 4 3
 //10


 如果有个初始值,第一次调用callback的参数存在
 var arr = [1,2,3,4];
 
 var result = arr.reduce((pre,item,index,array)=>{
   
   return pre + item;
   
 },100)
 console.log(result); //110

3. filter

添加过滤条件得到想要的

var num = [1,88,2,9,2,7,7];

        var result = num.filter((item)=>{
      
            if(item%2==0){
        
                return item;
        
            }
        })
  console.log(result)//[88,2,2]

4.forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。注意: forEach() 对于空数组是不会执行回调函数的

var books = ["乱世佳人","飘","傲慢与偏见","老人与海"];

var index1 = [];

var items = [];

var bookList = books.forEach((item,index)=>{
  
      items.push(item);
      
      index1.push(index);

  })
  console.log(items);["乱世佳人", "飘", "傲慢与偏见", "老人与海"]
  
  console.log(index1);[0, 1, 2, 3]