JavaScript数组方法

静态方法：

1、Array . isArray( ) :

方法返回一个布尔值，表示参数是否为数组，它可以弥补typeof运算符的不足；

var arr = [1,2];
typeof arr // "obejct"
Array.isArray(arr)//true

上边代码typeof运算符只能显示数组的类型——object，而Array.isArray方法可以识别数组。

2、push （ ）和 pop（ ）；

从性能方面考虑：pop和push方法 比 unshift 和 shift性能高，pop和push方法只影响数组最后一个元素：pop移除最后一个元素，push在数组末尾增加元素。shift和unshift方法修改第一个元素，之后的每一个元素的索引都需要调整。

push（）：用于在数组的末端添加一个或者多个成员,它返回的是数组的长度！！！

var arr = [1,2];
arr.push(3,4);
console.log(arr)//[1,2,3,4]

补充：

let newArr = [1,2,3].push(1);
newArr.push(0);
console.log(newArr) //TypeError

pop（ ）：用于删除数组的最后一个元素，并返回该元素。（ 此方法改变原数组 ）

对空数组pop（），返回的是undefined。。。

var arr = [1,2,3,4];
arr.pop();//4
console.log(arr)//[1,2,3,]

两者一起用，形成了“后进先出”的栈结构（stack）。

var arr = [];
arr.push(1,2);
arr.push(3)
arr.pop()//3
console.log(arr);//[1,2]

上边代码，3是最后进入数组的，但也是最早离开数组。。。

3、shift和unshift

shift（）方法用于删除数组的第一个元素，并返回该元素。（该方法会改变原数组）

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

push与shift结合起来用，构成了 "先进先出" 的队列结构 ; 

unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。（该方法会改变原数组）

var arr = [1,2];
console.log(arr.unshift(0));//3
console.log(arr)//[0,1,2]

4、join（）：

方法是以指定参数作为分隔符，将所有数组成员链接为一个字符串。如果不传参数，默认以逗号分隔（简单说就是把数组转化成字符串）

var arr = [1,2,3];
console.log(arr.join());// "1,2,3"
console.log(arr.join("-"));// "1-2-3"
console.log(arr.join(" ")); // "1 2 3"

如果数组的成员是undefined或null或空位，会转成空字符串。

var arr = [1,,3];
console.log(arr.join("-"));// "1--3"

var arr1 = [undefined,null];
console.log(arr1.join("-")); // -

用call方法，这个方法也可以用于字符串或类数组的对象。

var str = "asd";
console.log([].join.call(str,"-"));// "a-s-d"

5、concat（）：

方法用于多个数组的合并，它将新数组的成员添加到原数组成员的后边，然后返回一个新数组，原始数组不变。

var arr = [1,2];
var newArr = [3,4];
console.log(arr.concat(newArr))// [1,2,3,4]

上边代码，把newArr插入到arr后边，并且返回一个新数组。。。

6、reverse（）：

方法用于颠倒排列数组元素，返回改变后的数组。（ 该方法 改变原数组）

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

7、slice（）：

方法用于提取目标数组的一部分，返回一个新数组，原数组不变。

arr . slice ( start , end )

它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组最后一个成员。

var arr = [1,2,3,4];
console.log(arr.slice())// [1,2,3,4]
console.log(arr.slice(1)) // [2,3,4]
console.log(arr.slice(1,3)) //[2,3]
console.log(arr.slice(2,10)) // [3,4]

上边代码中，如果没有参数，等于返回一个数组的拷贝，如果参数为负数，则表示倒数计算位置，大家可以自己试下；如果第一个参数大于等于数组的长度，或者第二个参数小于第一个参数，则返回空数组。

slice方法一个重要的应用，将类数组对象转化为真正数组对象。

<div class="box">1</div>
<div class="box">2</div>
<script>
   var box= document.getElementsByClassName("box");
   console.log([].slice.call(box)) //[div.box,div.box]
</script>

类数组对象还有arguments。。。上边代码参数不是真正的数组，但是通过call方法，在他们上边调用silce方法，就可以把他们转为真正的数组

8、splice（index, num, addElement）：

方法用于截取数组成员，并可以在数组截取的位置添加新的数组成员，返回值是被截取的数组元素。不传参数返回的是一个空数组，只传一个参数返回的是参数对应的位置一直往后（该方法改变原数组）

arr.splice( start , count , addElement1 , addElement2 , ··· ··· )；

splice的第一个参数，是截取的起始位置（从索引0开始），第二个参数是被删除的元素个数。如果后边还有更多的参数，则表示这些就是被插入数组的新元素。

（1）两个参数：

var arr = [1,2,3];
console.log( arr.splice(1,1) )//[2]---从第一位开始截取，截取一位
console.log( arr ) // [1,3]

上边代码：从第一位开始截取，截取一位（起始位是0），返回截取元素是 [ 2 ]，原数组 只剩下 [ 1 , 3 ]

（2）多个参数：

var arr = [1,2,3,4,5];
console.log( arr.splice(1,4,"a","b","c") )//[2,3,4,5]
console.log( arr ) // [1,"a","b","c"]

上边代码：从第一位开始截取，截取4个元素，在截取最后加上三个字符串分别是 a  b  c

（3）一个参数 或者 无参数

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

var arr1 = [1,2,3,4];
console.log( arr1.splice(1) ) // [2,3,4]
console.log( arr1 ) // [1]

上边代码：不传参数返回空数组；只传一个参数，返回第一位往后的数组

（4）第二个参数为0时

如果只想插入元素，splice方法的第二个参数可以设置为0；

var arr = [1,1,2];
console.log( arr.splice(1,0,3) )//[]
console.log( arr ) // [1,3,1,2] 注意插入3的时候，是在第一位的前面插入的

补充：（5）一个参数且为0时

相当于把数组a做了剪切处理

let a = [1, 2, 3, 4]
let b = a.splice(0)
console.log('b为：' , b, 'a为：' , a)

 

9、sort（）：

sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组被改变。

（改变原数组）

var arr1 = ["b","a","c"];
var arr2 = [2,3,1,0];
console.log(arr1.sort()) //["a","b","c"];
console.log(arr2.sort()) // [0,1,2,3]

如果想让sort自定义排序，可以传入一个函数作为参数。

// 按照年龄从小到大排序
var arr1 = [
   {name:"吕星辰",age:18},
   {name:"吕小辰",age:5},
   {name:"吕大辰",age:12}
]
var res = arr1.sort(function(a,b){
   return a.age - b.age
})
console.log(res)
//{name:"吕小辰",age:5},
// {name:"吕大辰",age:12}
// {name:"吕星辰",age:18},

sort的函数本身接受两个参数，表示比较两个数组成员，如果该函数的返回值大于0，表示第一个成员排在第二个成员后边；其他情况都是第一个元素排在第二个元素后边。

例子：

数组乱序：

// 复制一个新数组然后sort排序 随机生成
const arr = [1,2,3,4]
const r = arr.slice().sort(() => Math.random() - .5)

10、map（）：

map方法将数组每一个成员依次传入函数，然后把每一次的执行结果组成一个新数组返回，跟forEach不一样，map有返回值，forEach没有返回值；map是把每次执行的结果返回，每次执行的结果组成一个新数组。

此方法接受一个函数作为参数：

var arr = [1,2,3];
var newArr = arr.map(function(ele,index,self){
      return ele * index;
})
console.log(newArr)//[0,2,6]
console.log(arr) //[1,2,3]

上边代码中，map方法的回调函数有三个参数，ele：为当前成员值，index：当前成员在数组中的位置，self：数组本身（[1,2,3]）；

map方法还可以接受第二个参数，用来绑定回调函数内部的this；

var arr = [1,2,3];
var newArr = arr.map(function(ele,index,self){
      return this[index];
},arr)
console.log(newArr) [1,2,3]

上边代码中，将回调函数内部的this对象，指向arr数组；把arr中的元素挨个拿出来放到一个新数组中；如果第二个参数不传，this指向window。。。

var a = [{age: 20}, {age: 10}, {age: 30}]
var r = a.map(i => {
    return i.age * 10
})
console.log(a)
console.log(r)

 

11、forEach（）：在上一篇文章有讲到，这里就不啰嗦了！！！

链接地址：https://blog.csdn.net/qq_42778001/article/details/93183172

12、filter（）

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。

它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新的数组并返回。（该方法不改变原数组）。

var arr = [1,1,2,4,5];
arr.filter(function(ele,index,self){
  console.log(ele);//数组每一位元素
  console.log(index);//每一个元素对应的索引位0 1 2 3 4
  console.log(self);//arr数组本身[1，1，2，4，5]
  console.log(this);//window对象
})

var arr = [1,1,2,4,5];
var newArr = arr.filter(function(ele,index,self){
  return index % 2 === 0
})
console.log(newArr);//[1,2,5]

上边代码返回的是偶数位置的成员组成新的数组。

filter方法也可以接受第二个参数，用来绑定参数函数内部的this变量；

var arr = [11,21,22,14,35];
var obj = {age:20}
var myfilter = function(ele){
  if( ele > this.age ){
    return true;
  }
}
var newArr = arr.filter(myfilter,obj)
console.log(newArr)//[21,22,35]

上边代码返回大于20的元素，并组成一个新数组，函数内部的this指向参数二 obj对象。

利用filter可以实现数组去重：(原理就是indexOf返回的是数组中第一次出现的位置，如果元素后边有重复的，第一次出现的位置与index不符，会被过滤掉)

var arr = [1,2,3,4,4,1]
var newArr = arr.filter(function(ele,index,self){
    return self.indexOf(ele) === index
})
console.log(newArr)//[1,2,3,4]

12、some（）、every（）

这两个方法类似 " 断言 " (assert),返回一个布尔值，表示判断数组成员是否符合某种条件。

some方法是只要一个成员的返回值是true，则整个some方法就返回true。

var arr = [1,2,3];
var boolean = arr.some(function(ele,index,self){
  return ele > 2 ;
})
console.log(boolean)//true

every方法是所有成员的返回值都是true，整个every方法才返回true

var arr = [1,2,3];
var boolean = arr.every(function(ele,index,self){
  return ele > 0 ;
})
console.log(boolean)//true

some和every都可以接受第二个参数，用来绑定参数函数内部的this。。。

补充：两个数组对象去重

在小程序云开发中，云数据库中的数据和后台返回的数据去比对，返回的数据与云数据库的数据不同才会存到云数据库中，因为有可能有重复的数据项：

// arr_1 : 后台返回的数据，格式 [{}, {}, ··· ···]
// arr_2 : 云数据库中返回的所有数据，格式同上！
// 比对两个数组，过滤掉相同数据项
function filters(arr_1, arr_2) {
  const newData = []
  arr_1.forEach((ele, index) => {
      const status = arr_2.every(item => {
          return ele['id'] !== item['id']
      })
      if(status) {
          newData.push(arr_1[index])
      }
  })
  return newData
}

 

13、reduce（）

reduce方法是依次处理数组的每个成员，最终累计为一个值。

var arr = [1,2,3,4];
var res = arr.reduce(function(prev,cur){
  return prev + cur;
})
// 1 + 2 = 3
// 3 + 3 = 6
// 6 + 4 = 10
console.log(res); //10

上边代码，第一次执行，prev是数组的第一个成员，cur是数组的第二个成员，他们两个相加等于3；第二次循环的时候，prev是上一次计算的结果3，cur是数组的第三个成员3，他们两个相加等于6,；第三次循环，prev是上一次运算的结果6，cur是数组的第四位4，他们两个相加等于10；循环结束，返回最后的结果10。

reduce的第一个参数是一个函数，函数本身有四个参数：

     prev：累积变量，默认是数组的第一个成员，如果给reduce定义第二个参数，则默认值为第二个参数。

     cur：当前变量，默认是数组的第二个成员

     index：当前位置（从0开始）

     self：原数组

只有前两个是必须的（最常用），后两个则是可选的。

如果想对初始的变量prev指定初始值，可以把它放在reduce方法的第二个参数中。

var arr = [1,2,3,4];
var res = arr.reduce(function(prev,cur){
  return prev + cur;
},1)
// 1 + 1 = 2
// 2 + 2 = 4
// 4 + 3 = 7
// 7 + 4 = 11
console.log(res); //11

看下一个合并数组的例子：

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

var newArr = arr.reduce(function(prev,next,index){
    return prev.concat(next)
})
console.log(newArr);//[1,2,3,4,5,6,7]

补充：

（1）对象属性求值：

做项目时，一个非常常见的需求——所有商品的总价是根据商品列表中的商品数量乘单价计算出来的，reduce派上用场了：

eg：

var data = [
    {price:2000,count:1},
    {price:2200,count:3},
    {price:3100,count:2},
    {price:1200,count:6},
];

let sum = data.reduce((prev,next)=>{
    return prev + next.price * next.count
},0)
console.log(sum)//22000  

上班代码，设置了一个初始项0，如果不设置初始项，第二次循环时，一个数是没有price和count属性的，最后打印结果会是NaN。。。

（2）数组去重：

数组去重使用别的方法也能做到，而且更方便，在这只是演示下reduce的用法而已。

// prev默认值是一个数组，依次判断数组每一个元素是否在数组里边，否，则push
const res = [1,2,1,3,4,5]
const newRes = res.reduce((prev, next) => {
    if(prev.indexOf(next) === -1) prev.push(next)
    return prev
}, [])

（3）过滤对象中的属性及属性值：

对象的过滤是我在实际开发中想到的，使用reduce封装了一个函数，具体业务需求是这样的，使用过element form表单的自定义验证都知道，data中需要定义一个rules规则，为了方便页面中所有规则都统一放在这里边了，假设一个页面中有2个权限属于不同的业务范畴，提交的时候，如果不把另一个权限验证去掉，验证不会通过，因为另一个权限验证还是开着的。

解决方法就是：在提交之前过滤掉不需要用到的权限验证，即可解决。

rules: {
  name: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
  mobile: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', validator: is_Mobile }],
  intro: [{ required: true, message: '请填写门店介绍', trigger: 'blur' }]
}

// 起始值也是一个空对象，依次判断数组中的key是否在对象中，
// 这个方法其实就是过滤掉不在数组中的key value值
function filterObj(rules, keys) {
  return keys.reduce((result, key) => {
    if(rules.hasOwnProperty(key)) {
       result[key] = rules[key]
    }
    return result
  }, {})
}

filter(obj, ['name', 'intro']) // obj是所有的数据
// 输出
/**
rules: {
  name: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
  intro: [{ required: true, message: '请填写门店介绍', trigger: 'blur' }]
}
**/

（4）过滤数组对象中的属性

一个很开发中很常见的需求，后台返回一堆数据，格式是一个数组里边包含许多对象，如果想过滤掉数组对象中的一些属性， 

使用reduce可以很方便的过滤掉：

<script>
    // 过滤掉数组对象中的height字段 
    const arr = [
        {name: 'lxc1', age: 20, height: 170},
        {name: 'lxc2', age: 21, height: 172},
    ]
    function filterData(data) {
        return data.reduce((prev, next) => {
            prev.push({name: next['name'], age: next['age']})
            return prev
        }, [])
    }
    const res = filterData(arr)
    console.log(res)
</script>

结果为：

(5)  计算数组中所有元素出现的次数

// 判断对象的key是否存在，如果存在，key对应的值++，否则，值设置为1
const r = [1,2,3,4,1,1,1,2,3]
const res = r.reduce((p, n) => {
    p[n] = p[n] ? ++p[n] : 1
    return p
}, {})
console.log('res', res) // {1: 4, 2: 2, 3: 2, 4: 1}

 

 

14、indexOf（）、lastIndexOf（）

indexOf返回的是给定元素在数组中第一次出现的位置，如果没有返回-1。（与字符串的indexOf方法一样）

var arr = [1,2,3,4];
console.log(arr.indexOf(2)); //1

var str = "1234";
console.log(str.indexOf("34")) //2

lastIndexOf（）返回是给定元素在数组中最后出现的位置，如果没有返回-1；

var arr = [1,2,3,4,3];
console.log(arr.lastIndexOf(3)); //4

补充：

15、find()

ES6方法，查找并返回数组中符合条件的第一个元素( 返回元素本身 )，未查找到返回undefined。。。

var a = [{age: 20}, {age: 10}, {age: 30}, {age: 10}]
var b = 0
var r = a.find((i, index) => {
    b = index
    return i.age === 10
})
console.log(a)
console.log(r)
console.log(b)

16、findIndex()

ES6方法，查找并返回数组中符合条件的第一个元素在数组中的索引，未查找到返回-1。。。

var a = [{age: 20}, {age: 10}, {age: 30}, {age: 10}]
var r = a.findIndex((i, index) => {
    return i.age === 10
})
console.log(a)
console.log(r)

补充：

1、把 "name,age,sex" 转换为 "+name+age+sex" , 要考虑到逗号之间没有值的情况

const STR = "name,age,sex"
const r = STR.split(",").filter(k => k).map(k => `+${k}`).join(",")
// "+name+age+sex"