【干货】Array数组常用的方法(超详细)

647 阅读6分钟

什么是数组?

是一组数据的集合,用于在单个变量中存储多个值

一.检测是否为数组

1. Array.isArray

用来检测传递的值是否为数组(H5中提供的方法)

示例001.png

二.把数组转换为字符串

1.toString():

把数组转换为数组值(逗号分隔)的字符串

实例:

var arr =[1,2,3,4,2]
arr.toString() //'1,2,3,4,2'

2.join():

可将所有数组元素结合为一个字符串。 它的行为类似 toString(),但是还可以规定分隔符:

var arr =[1,2,3,4,2]
arr.join("*") //'1*2*3*4*2'

三.添加删除数组元素

1.push()

向数组的末尾添加一个或更多元素,并返回新数组的长度

代码示例

var arr =[1,2,3,4,2]
var arr1 = arr.push('pink') // arr1的值是6

2.pop()

后面删除元素,只能是一个,返回值删除的元素

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

3.shift()

前面删除元素,只能删除一个 返回值删除的元素

let arr = [1,2,3,4,5] 
console.log(arr.shift()) // 1 
console.log(arr) // [2,3,4,5]

4.unshift()

前面添加元素, 返回值是添加完后的数组的长度

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

5.splice()----添加/删除

从数组中添加/删除元素,返回值是被删除的元素(会改变原始数组)

语法

var arr = [1,2,3,4]
arr.splice(value,num,item...)

参数

value: 必选参数,添加/删除元素的位置,负数从数组结尾往左开始

num : 必选参数,删除元素的数量,不删除写 0

item : 可选 ,要添加的元素

代码如下

002.png

四.ES5新增数组方法

1.forEach()

用于迭代(遍历)数组,相当于数组遍历的 for循环 没有返回值

语法

array.forEach(function(value,index,array))
  • value: 每个数组元素
  • index:每个数组元素的索引号
  • array:当前的数组

示例

        var arr = [1, 2, 3, 4, 5]
        var sum = 0
        arr.forEach(function (value, index, array) {
            console.log('每个数组元素' + value)
            console.log('每个数组元素的索引号' + index)
            console.log('数组本身' + array)
            sum += value
        })
        console.log(sum); // 15

2.filter()

用于检测数组元素筛选,并返回符合条件所有元素的新数组

注意

  1. filter()不会对空数组进行检测
  2. 不会改变原始数组
  3. 符合条件的元素返回一个新数组

语法:

array.filter(function(value,index,array))
  • value: 每个数组元素
  • index:每个数组元素的索引号
  • array:当前的数组

示例:

  var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index,array) {
     //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value >= 20;
  });
  console.log(newArr);//[66,88] //返回值是一个新数组

3.some()

用于检测数组中的元素是否满足指定条件

注意

  • 一个元素满足条件,终止循环,返回布尔值
  • some() 不会对空数组进行检测。
  • some() 不会改变原始数组。

语法:

array.some(function(value,index,array))
  • value: 每个数组元素
  • index:每个数组元素的索引号
  • array:当前的数组
 var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
    //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value < 3;
  });
console.log(flag);//返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

4.every()

检测数组所有元素是否都符合指定条件一个元素不满足,则终止循环,剩余不在检测,返回布尔值

注意:   

1.every() 不会对空数组进行检测。

2.every() 不会改变原始数组

语法

array.every(function(value,index,array))
  • value: 每个数组元素
  • index:每个数组元素的索引号
  • array:当前的数组

示例:

        var arr = [2,4,6,8,10]
        var a = arr.every(function(item){
            return item % 2 === 0
        })
        console.log(a); // true

5.map()

通过指定函数对数组进行处理,返回值是新数组

注意

  • 不会改变原数组,只是将处理后的结果以新数组的形式返回
  • map() 不会对空数组进行检测。

语法

map的使用语法,回调函数可以接受三个参数,map的第二个参数指定回调函数的this

array.map(function(Value,index,array), thisValue)
  • value: 每个数组元素
  • index:每个数组元素的索引号
  • array:当前的数组

示例:

       var arr = [2, 4, 6, 8, 10]
        var a = arr.map(function (value, index) {
            console.log(value);
            console.log(index);
            return value + index
        })
        console.log(a); //  [2, 5, 8, 11, 14]

五.ES6新增的数组方法

1.find()

用于找出第一个符合条件的数组元素,之后的值不再进行检测如果没有找到返回undefined 语法

array.find(function(value,index,array))
  • value: 每个数组元素
  • index:每个数组元素的索引号
  • array:当前的数组 示例:
var arr = [{
                name: 'jerry',
                sex: 'man'
            },
            {
                name: 'jack',
                sex: 'woman'
            },
            {
                name: 'jack',
                sex: 'man'
            }
        ]
        var jack = arr.find(function (obj) {
            return obj.name == 'jack';
        })
        console.log(jack); // 返回符合条件的第一个对象{name: "jack", sex: "woman"}

        var bill = arr.find(function (obj) {
            return obj.name == 'bill';
        })
        console.log(bill); // undefined

2.findIndex()

给定条件,返回数组中第一个满足该条件的值的下标,之后的值不再进行检测,当没有找到满足该条件的值时,返回 -1 语法

array.findIndex(function(value,index,array))
  • value: 每个数组元素
  • index:每个数组元素的索引号
  • array:当前的数组 示例:
var arr = [{
                name: 'jerry',
                sex: 'man'
            },
            {
                name: 'jack',
                sex: 'woman'
            },
            {
                name: 'jack',
                sex: 'man'
            }
        ]
        var jack = arr.findIndex(function (obj) {
            return obj.name == 'jack';
        })
        console.log(jack); // 1

        var bill = arr.findIndex(function (obj) {
            return obj.name == 'bill';
        })
        console.log(bill); // -1

3.includes()

3.reduce()----累加器

该方法用于对数组中的每个元素累加,将结果汇总返回(可以理解为累加器)

语法

array.reduce(callback(total, currentValue, currentIndex, arr), initialValue)

参数

callback : 必选,执行函数

total : 必选,初始值,或者计算结束后的返回值

currentValue :必选,当前元素

currentIndex : 可选,当前元素的索引

arr : 可选,当前元素所属的数组对象

initialValue : 可选,传递给函数的初始值

代码示例

用的箭头函数,也可以使用普通函数来实现,返回值用一个变量来接收,如果写在函数里面直接 return 出去就行

003.png

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

find() 方法,它返回数组中找到的元素的值,而不是其索引。

9.reverse()----翻转数组

用于颠倒数组中元素的顺序

代码示例

6.png

10.sort()----冒泡排序

用于对数组的元素进行排序

语法

array.sort(sortfunction)

参数

sortfunction :可选。规定排序顺序-升-降。必须是函数

代码示例

升序

7.png

降序

8.png

some和every的区别

every():

只要有一个元素不符合条件,就返回 false;

some():

只要有一个元素符合条件,就返回 true

14.Set 对象作用----数组去重

代码示例

12.png

15.slice()

用于提取字符串的某个部分,并以新的字符串返回被提取的部分

注意:  slice() 方法不会改变原始数组。

语法

array.slice(start, end)

参数: start : 可选,从何处选取,为负数从尾部选取,包含最后一个

end :可选,选几个

代码示例

13.png