数组的常用方法总结

---

一、Array.toString()和String.split()

toString()

将数组转化成字符串，每一项元素用逗号隔开

const arr=[1,2,3,'h',4]
console.log(arr.toString());
console.log(typeof arr.toString());
//1,2,3,h,4
//string

split()

将字符串转化为数组，括号内的参数为分隔符。

const str='abcahjd'
console.log(str.split());
console.log(str.split('') instanceof Array);
console.log(str.split(''));
console.log(str.split('a'));
//[ 'abcahjd' ]
//true
//['a', 'b', 'c', 'a', 'h', 'j', 'd']
//[ '', 'bc', 'hjd' ]

二、Array.join()

join() 方法接收一个参数，即字符串分隔符，返回包含所有项的字符串

let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue

三、Array.shift()

shift()方法用于删除数组的第一项，同时减少数组的length 值，返回被删除的项

let colors = ["red", "green"]
let item = colors.shift(); // 取得第一项
console.log(item) // red
console.log(colors.length) // 1

四、Array.reverse()和Array.sort()

reverse()

数组的反转，会改变原数组

let values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); // 5,4,3,2,1

sort()

sort()方法接受一个比较函数，用于判断哪个值应该排在前面

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15

五、Array.slice()和Array.splice()

Array.slice()

数组的截取方法返回新的数组，可传两个参数；注意：不会改变原来数组；传入的参数都是代表元素的下标

let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
console.log(colors)   // red,green,blue,yellow,purple
concole.log(colors2); // green,blue,yellow,purple
concole.log(colors3); // green,blue,yellow

Array.splice()具有删除，插入，替换的功能

1、删除的功能
splice(index,count)，会改变原数组
参数:index:开始位置的索引，count:要删除元素的个数
返回:返回的是包含被删除元素的数组对象

const str=[1,2,3,4,5,6,7]
console.log(str.splice(1,2));
//[ 2, 3 ]

2、插入的功能
splice(index,0,插入的项)
参数：
index:插入元素的索引值
0：要想具备插入功能，第二个参数必须是0
插入的项：插入的元素【可以是数组，多个元素】

const str=[1,2,3,4,5,6,7]
console.log(str.splice(1,0,'江江','a','b'))
console.log(str);
//[]
//[1,'江江','a','b',2,3,4,5,6,7]

3、替换的功能
splice(index,num,value)
参数：
index:开始的索引位置
num:删除项的数(如果num为0，就是插入功能；这里num不要为0)
value:插入的值
返回:返回的是包含被删除的元素的数组对象

const str=[1,2,3,4,5,6,7]
console.log(str.splice(1,1,'江江','a','b'))
console.log(str);
//[ 2 ]
//[1,'江江','a','b',3,4,5,6,7]

六、添加元素的方法

1、Array.push()

向数组的最后一项添加元素，改变原来的数组，返回值为添加元素后的数组长度

const colors=['red','blue','green']
const newColors=colors.push('skyblue','yellow')
console.log(newColors);

2、Array.unshift()

向数组的第一项添加元素，会改变原来的数组，返回值为添加元素后的数组长度

let colors = new Array(); // 创建一个数组
let count = colors.unshift("red", "green"); // 从数组开头推入两项
alert(count); // 2

3、concat()

首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组

const colors=['red','blue','green']
const colors2=colors.concat('yellow',['black','brown'])
console.log(colors);
console.log(colors2);

七、查找元素的方法

1、indexOf()

返回要查找的元素在数组中的位置，如果没找到则返回 -1

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.indexOf(4) // 3

2、includes()

返回要查找的元素在数组中的位置，找到返回true，否则false

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes(4) // true

3、find()

返回第一个匹配的元素

const people = [
    {
        name: "Matt",
        age: 27
    },
    {
        name: "Nicholas",
        age: 29
    }
];
people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}

八、迭代的方法

1、some()

• some方法作用: 判断 数组中是否有满足条件的元素 (逻辑或 ||, 有任意一个满足即可)
• 应用场景 : (1)判断数组中有没有奇数 (2)非空判断 : 判断表单数组中，有没有元素value为空
• some语法特点 :
  (1) 回调执行次数 != 数组长度
  (2) 回调函数内部return
  return true * 循环结束。 找到满足条件的元素, some自身返回true
  return false : * 循环继续。没有找到满足条件的，如果所有的元素都是返回false，最终some默认返回false
  (3) 方法自身的返回值
  true: 有满足条件的元素
  false: 没有满足条件的元素

//判断数组中有没有奇数  
let arr = [10,21,30,40,50]
let res = arr.some( item=>item % 2 == 1 )
console.log( res )

2、every()

• every 方法作用: 判断 数组中是否 所有元素 都满足条件 (逻辑&&, 全部满足)
• 应用场景 : (1)判断数组中是否所有元素都是 偶数 ;(2)开关思想 : 购物车是否全选
• every语法特点 :
  (1) 回调执行次数 != 数组长度
  (2) 回调函数内部return
  return true * 循环继续。满足条件,如果所有元素都满足,最终every默认返回值true
  return false : * 循环结束。不满足条件，此时every返回值false
  (3) 方法自身的返回值
  true: 所有满足都满足条件
  false: 有元素不满足条件

let arr = [10,20,30,40,50]
let res = arr.every( item=>item % 2 == 0 )
console.log( res )

3、forEach()

• forEach方法作用: 相当于 for循环另一种写法
• 应用场景 : 遍历数组
• forEach语法特点 :回调执行次数等于数组长度；回调函数内部return 无；方法自身的返回值 无

let arr = [20,55,60,75,80,33]
arr.forEach((item,index)=>{
    console.log(item,index)
} )

4、filter()

• filter方法作用: 根据条件,筛选数组
• 应用场景 : (1)筛选数组中的偶数 (2)商品价格筛选
• filter语法特点 :(1) 回调执行次数 == 数组长度；(2) 回调函数内部return；return true : 满足筛选条件，放入新数组中；return false : 不满足筛选条件，不放入新数组中；(3) 方法自身的返回值，筛选之后的新数组

//需求：筛选数组中的偶数
let arr = [20,55,60,75,80,33]
let res = arr.filter( item=>item % 2 == 0 )
console.log(res)

5、map()

• map方法作用: 根据某种规则映射数组，得到映射之后的新数组
• 应用场景 : (1)数组中所有的元素 * 0.8 (2)将数组中的js对象 隐射成 html字符串
• map语法特点:回调执行次数等于数组长度；回调函数内部return，return 新元素，如果没有return, 新元素是undefined
• 方法自身的返回值，映射后的新数组

let res = arr.map(item => item * 0.8)
console.log(res)

6、findIndex()

• findIndex方法作用: 找元素下标

• 应用场景 :
  (1)如果数组中是值类型，找元素下标用： arr.indexOf( 元素 )
  (2)如果数组中是引用类型，找元素下标： arr.findIndex( )

• findIndex语法特点 :
  (1) 回调执行次数 != 数组长度
  (2) 回调函数内部return
  return true * 循环结束。 找到元素，返回当前元素下标
  return false : * 循环继续。没找到。 如果全部都是false，最终返回固定值-1
  (3) 方法自身的返回值
  -1 : 没有
  下标 : 有

//判断数组中是否所有元素都是 偶数 
let arr = [ 
    { name:'张三',age:20}, 
    { name:'李四',age:30}, 
    { name:'王五',age:40}, 
]
let index = arr.findIndex( item=>item.name == '李四' )
console.log( index )

7、reduce()

• 数组reduce遍历 : 为每一个元素执行一次回调,返回最后一次回调的结果
• reduce场景 : 求数组累加和

/* 
         第一个参数:回调函数   (sum,item,index)=>{}
            sum : 上一次回调return 返回值
            item: 当前元素
            index: 当前下标
         第二个参数 : sum初始值。  一般给0, 如果不给,遇到空数组reduce就会报错
         reduce自身返回值： 最后一次sum的结果
         */
        let arr = [20,50,60,70]
        let res = arr.reduce( (sum,item,index)=>{
            console.log( sum,item,index)
            return sum + item
        } , 0 )
        console.log(res)  

---