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

标签：let   java   books   运算   数组操作   concat   .sh   添加   元素   

数组在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]

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

标签：let   java   books   运算   数组操作   concat   .sh   添加   元素   

原文地址：https://www.cnblogs.com/lakemonster/p/9716243.html