JavaScript数组的方法、ES5、ES6新增的数组方法

javascript数组方法

1.push()数组尾部添加

在数组尾部添加一个或者多个元素

返回值：返回新数组的长度

改变原数组

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

2.unshift()数组头部添加

在数组头部添加一个或者多个元素

返回值：返回新数组的长度

改变原数组

var arr = [1,2,3]
arr.unshift(4)
console.log(arr) //输出 [4,1,2,3]

3.pop()数组尾部删除

删除数组的最后一位元素

返回值：返回被删除的数据

改变原数组

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

4.shift()数组头部删除

删除数组的第一项元素

返回值：返回被删除的数据

改变原数组

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

5.reverse()数组反转

反转数组中的元素

返回值：返回反转后数组

改变原数组

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

6.sort()数组排序

对数组的元素进行排序（默认根据首字符的先后排序。)

返回值：返回新数组

改变原数组

let arr = [1,3,5,2,4,23,122,34];
//没有参数:时按照首字符的先后排序
arr.sort()//arr=[1,122,2,23,3,34,4,5];
//有参数
arr.sort(function(a,b){
    return a-b;//从小到大排序
    return b-a;//从大到小排序
})
​

7.splice() 添加、删除、替换

向数组中添加，或从数组删除，或替换数组中的元素

返回值：返回删除的数据所组成的数组

改变原数组

结构1：arr.splice(index,del) 纯删除
从index下标开始，删除del几个元素
​
结构2：arr.splice(index,del,item) 替换
从index下标开始，删除几个，并在该位置添加item
​
结构3：arr.splice(index，0，item) 纯添加
从index下标开始，删除0个，并且在该位置添加item，index开始全部往后移动

8.slice()截取

从数组中截取指定的字段，返回出来

返回值L返回截取出来的字段，放入新数组中

不改变原数组

结构1：arr.slice(index,end)
从index下标位置开始截取，一直到end结束，不包括end
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(0,3)//newArr = [0,1,2];
​
结构2：arr.slice(inedx)
从index下标位置开始截取，一直到最后
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [2，3，4，5，6，7];
​
结构3：arr.slice(-num)
截取倒数num个元素
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(-5)//newArr = [3,4,5,6,7]

9.split()转数组

通过指定的分隔符,将字符串分割成数组。

返回值:返回一个新的数组

不改变原数组

let str = wqz-ttj；
let arr = str.split('-');
console.log(arr);// arr=['wqz','ttj'];

10.join()转为字符串

数组里的元素,通过指定的分隔符,以字符串的形式连接起来

返回值：返回一个新的字符串

//将数组用 - 符号连接起来
let arr = [1,2,3,4,5];
let str = arr.join('-');
console.log(str)//str = 1-2-3-4-5;

11.indexOf()查找

查找元素在数组中第一次出现的位置

返回值：存在该元素,返回下标,不存在 返回 -1

不改变原数组

if (arr.indexOf(ele) === -1){//说明元素不存在!!
    console.log('元素不存在!)
} else {
    console.log(' 元素存在! ')
}

12.lastIndexOf()查找

查找元素最后一次在数组中出现的位置

返回值： 存在该元素,返回下标,不存在 返回 -1

不改变原数组

var list = [1, 2, 3, 4];
    var index = list.lastIndexOf(4); //3
    var index = list.lastIndexOf("4"); //-1

13.concat()拼接

两个数组里的元素拼接成一个新的数组

返回值: 返回拼接后的新数组

不改变原数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = arr1.concat(arr2);//arr = [1,2,3,4,5,6];
arr1.push(arr2);//arr1 = [1,2,3,[4,5,6]];
该方法和push的区别:push是直接把后一个数组原封不动的添加到第一个数组后面

ES5新增的数组方法

1.forEach()遍历数组

该方法等同于for循环

没有返回值

arr.forEach(function(item,index,arr){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身
})

2.map()映射

map的使用和forEach大致相同

有返回值，返回一个新数组，新数组的长度和原数组的长度相等

//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身
​
let arr = [1,32,54,6,543];
let res = arr.map(function(item,index,arr){
    return item*2;
})
console.log('原数组'，arr) //输出 '原数组' [1, 32, 54, 6, 543]
console.log('新数组'，res) //输出 '新数组' [2, 64, 108, 12, 1086]

3.filter()过滤

遍历数组，把满足条件的数组过滤出来放入新数组

返回值：过滤出符合条件的元素

不改变原数组

let arr = [1, 3, 5, 2, 4, 6];
let res3 = arr.filter(function(item, index) {
  return item > 4;
});
console.log(res3); //输出 [5,6]
过滤出布尔类型为true的项

let arr2 = [0, "", undefined，null，false, 1, 3, 4];
let res4 = arr2.filter(function(item, index) {
  return item;
});
console.log(res4); //输出 [1,3,4]

4.some()

判断数组中元素是否满足条件，

返回值：只要有一个满足返回true，全部不满足才返回false，

不改变原数组

 var list = [1,2,3,4,5];
    var result = list.some(function (item, index, array) {
      return item >= 3;
    });
    console.log(result);//输出 true

5.every()

判断数组中元素是否满足条件，

返回值：只要有一个不满足就返回false，全部满足才返回true，

不改变原数组

 var list = [1,2,3,4,5];
    var result = list.every(function (item, index, array) {
      console.log(item, index, array);
      return item >= 3;
    });
    console.log(result);//输出 false

6.find()查找

查找满足条件的元素

返回值：存在返回满足条件的第一个元素，不存在返回undefined

不改变原数组

var arr = [1,2,3,4,5]
var res = arr.index(function(item,index,array) {
    return item>=3
})
console.log(res) //输出 3

7.findIndex()查找

find()和findIndex()都是从数组的0号位，依次向后检查

查找满足条件的第一个元素下标

返回值：存在该元素,返回下标,不存在 返回 -1

不改变原数组

注意

findIndex()和indexOf()不同，(刚接触的时候乍一看和indeOf()一模一样,仔细看才发现大有不同)

indexOf()是传入一个值，找到了返回索引，没有找到返回-1属于ES5

findIndex()是传入一个测试条件，也就是函数，找到了返回当前项索引,没有找到返回-1. 属于ES6

var arr = [1,2,3,4,5]
var res = arr.findIndex(function(item,index,array) {
    return item>=3
})
console.log(res) //输出 2

该方法可快速查找对象数组满足条件的索引，indexOf不支持

let arr = [{ id: 1, name: 'coco' }, { id: 2, name: 'dudu' }]
      let res = arr.findIndex(item => item.id == 1)
      console.log(res)  //输出 0

8.reduce()求和

将元素进行累计求和

返回最终操作的结果

不改变原数组

var arr = [1,2,3,4]
var he = arr.reduce(function(sum,item,index,array)sum+=item，0)
console(he) //输出 10
sum初始值为0
item  每一个元素
index 下标
array 原数组

ES6新增的数组方法

1.Array.from()

将一个类似数组对象或者可遍历的对象转换成一个真正的数组

包括 ES6 新增的数据结构 Set

注意

讲一个类似数组对象转换为一个真正的数组，必须具备以下条件

1. 该 伪数组/类数组 对象必须具有length属性，用于指定数组的长度，如果没有length，那么转换后的数组是一个空数组

2. 该 伪数组/类数组 对象的属性名必须为数值类型或者字符串型的数字

var obj = {0:"张三"，1:"18",2:"男",length:3}
ES5的写法
var arr1 = [].slice.call(obj); // ['张三', '18', '男']
ES6的写法
var obj1 = Array.from(obj)    //  ['张三', '18', '男']
​
如果不加length属性
var all = {0:"张三"，1:"18",2:"男"}
var all1 = Array.from(all)
console.log(all1) // 输出 []  空数组

2.findeLast()和findLastIndex()

findeLast()和findLastIndex(),从数组的最后一个成员开始，依次向前检查

判断元素满足条件

findLast()返回满足条件的元素，不满足返回undefined

findLastIndex()返回满足元素的下标，不满足返回-1

var arr = [1,2,4,5]
 arr.findLast(item=>item>4)  // 5
 arr.findLastIndex(item=>item>4) //下标3

3.includes()包含

判断一个数组是否包含指定的一个值

返回值：包含返回true，不包含返回false

不改变原数组

let site = ['runoob', 'google', 'taobao'];
 
site.includes('runoob'); 
// true 
 
site.includes('baidu'); 
// false

4.set 数据结构

Set数据结构 类似于数组 与数组的区别是里面没有重复的值 Set本身是一个构造函数，用来生成Set数据结构

Set函数可以接受一个数组作为参数，用来初始化。

实例方法

• add(value)：添加某个值 ，返回Set结构本身

• delete(value)：删除某个值，返回一个布尔值，表示是否删除成功

• has(value)：返回一个布尔值，表示该值是否是Set的成员

• clear()：清除所有的成员，没有返回值

const s = new Set();
 s.add(1).add(2).add(3); // 向 set 结构中添加值  
 s.delete(2)             // 删除 set 结构中的2值   
 s.has(1)                // 表示 set 结构中是否有1这个值 返回布尔值 
 s.clear()               // 清除 set 结构中的所有值
 //注意：删除的是元素的值，不是代表的索引

遍历

Set结构的结构与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值

s.forEach(function(item) {
    console.log(item) // 1 2 3
})