ES6中常用的数组方法的扩展

1.数组的原始方法

1.1 push 追加数据

在数组后面追加数据

let arr = [1,2,3]
let res = arr.push(4)

1.2 unshift 头部添加数据

在数组的最前边添加新的元素

let arr = [1,2,3]
let res = arr.unshift(0)

1.3 pop 删除最后一个数据

删除最后一个元素

let arr = [1,2,3]
let res = arr.pop() // 删除最后一个

1.4 shift 删除第一个数据

删除数组的第一个元素

let arr = [1,2,3]
let res = arr.shift() // 删除第一个元素

2.ES5的数组扩展

2.1 isArray()判断数组

判断一个数据是否是数组

let arr = [1,2,3]
console.log(Array.isArray(arr))

2.2 forEach() 循环

对数组进行循环

let arr = [1,2,3]
arr.forEach(function(item,index,arr){
    console.log(`下标为${index}的元素的值是${item}`)
    console.log(arr)
})

2.3 map() 处理数组

把原数组中的数组处理，返回一个新数组

let arr = [1,2,3]
//处理原数组中的元素，返回一个新数组
let newArr = arr.map(function(item){
    return item+1
})


let newArr = arr.map(item=>item+1)
console.log(newArr)

模拟map的底层实现

// 模拟map--->MyMap
let arr = [6,6,6]
Array.prototype.MyMap = function(f){
    let newArray = [];
    // 处理
    for(let i=0; i<this.length;i++){
        // f就是处理的过程
        newArray.push(f(this[i],i,this))
    }
    return newArray;
}
// MyMap中的回调函数就是处理的过程
let newArr = arr.MyMap(function(item,index,arr){
    return item+1
});

2.4 filter() 过滤数组

把原来的数组中的元素过滤出我们需要的元素，组成一个新数组

let arr = [1,2,3,4,5,6,7,8,9,10]
let newArr = arr.filter(function(item,index,arr){
    // 过滤的条件
    return item>5
})
//简写模式
let newArr = arr.filter(item=>item>5)
console.log(newArr)

模拟filter的底层实现

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Array.prototype.MyFilter = function (f) {
    let newArray = [];
    for (let i = 0; i < this.length; i++) {
        // 调用
        if(f(this[i])){
            // 只要执行到{}都是满足条件的元素
            newArray.push(this[i])
        }
    }
    return newArray;
}
let newArr = arr.MyFilter(function(item){
    return item>5
})

//调用
console.log(newArr)

2.5 reduce() 数据累计

不断地将前一项和后一项的值进行运算（具体规则是由回调函数决定的，每次的运算会涉及两项）,把前一轮运算的结果作为当前运算的前一项。返回最后结果。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let sum = 0;
let i = 1;

//100是指开始的值 比如 101 102...
sum = arr.reduce(function(prev,next){
    console.info(`第${i++}轮：前一项:${prev},下一项:${next}`)
    console.info(`本轮结果是${prev+next}`)
    return prev+next;
},100)		//100是指开始的值 比如 101 102...


console.log(sum)

2.6 some() 存在符合条件

只要数组中的某一个元素符合指定的条件，就会返回真，否则返回假。

let arr = [
    { name: "z3", score: 66 },
    { name: "l4", score: 57 },
    { name: "w5", score: 88 },
]
// 是否有人及格
let r = arr.some(function(item){
    // item.score >= 60  返回true或false
    return item.score >= 60
})
console.log(r)

2.7 every() 全部符合条件

数组中的每一个元素符合指定的条件，就会返回真，否则返回假。

let arr = [
    { name: "z3", score: 66 },
    { name: "l4", score: 57 },
    { name: "w5", score: 88 },
]
//全部及格 返回true 否则  false
let r = arr.every(function(item){
    // item.score >= 60  返回true或false
    return item.score >= 60
})
console.log(r)

3.ES6的数组扩展

3.1 from() 伪数组转真实数组

from是类方法（静态方法）把类数组转成真实数组

let lis = document.getElementsByTagName("li")
let newLis = Array.from(lis)

3.2 Array.of() 数转成数组

把数转成数组

let arr = Array.of(3);

3.3 find() 找符合条件的元素

找符合条件的元素（默认找出第1个）

let arr = [
    { name: "z3", score: 66 },
    { name: "l4", score: 57 },
    { name: "w5", score: 88 },
]


let rs = arr.find(function(item){
    return item.score `` 57
})

3.4 findIndex() 根据索引查找

找出符合条件的元素索引（默认找出第1个）

let arr = [
    { name: "z3", score: 66 },
    { name: "l4", score: 57 },
    { name: "w5", score: 88 },
]

let rs = arr.findIndex(function(item){
    return item.score `` 57
})

3.5 includes() 判断是否包含

判断一个元素是否在一个数组中

let arr = [1,2,3]
let r = arr.includes(3)

3.6 fill() 填充数值

给数组填充指定的值

let arr = [1,2,3]'
arr.fill("*",0,2) // 包前不包后

//输入结果：arr[*,*,3];