数组方法

//测试数组
const PAGE = [
    { name: '猪爸', age: 24 },
    { name: '猪妈', age: 23 },
    { name: '佩奇', age: 8 },
    { name: '乔治', age: 5 },
    { name: '小羊苏西', age: 7 }
]

1. join

作用：用指定的分隔符将数组每一个元素拼接为字符串
参数：指定的分隔符(如果省略该参数，则默认是逗号隔开)
返回值：拼接好的字符串
会改变原数组

 //  数组的 join 方法
        let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
        // 以传的参数为连接符, 返回的是一个 " 字符串 ", 如果不传那么就是以 " , " 连接
        let bar = arr.join()
        console.log(arr); // ['a', 'b', 'c', 'd', 'e', 'f', 'g']
        console.log(bar); // a*b*c*d*e*f*g

2. pop()

作用：删除数组的最后一个元素
参数：无
返回值：被删除的元素
会改变原数组

 // 数组的 pop 方法; 改变原数组
        let arr = [1, 2, '小白', 3]
        // 删除数组的最后一个 返回的是删除的那一个值, 并且直接改变原数组
        let bar = arr.pop()
        console.log(arr); // [1, 2, '小白']
        console.log(bar); // 3

3. push()

作用：向数组的末尾添加新内容
参数可以添加多个元素用逗号隔开任何数据类型都可以
返回值 新增后数组的长度(这个很重要)
会改变原数组

4. shift()

作用：删除数组的第一个元素
参数：无
返回值：被删除的元素
会改变原数组

 //  数组的 shift 方法; 改变原数组
        let arr = [1, 2, '小白', 3]
        // 删除数组的第 1 个数据, 返回值是被删除的数据
        let bar = arr.shift()
        console.log(arr); // [2, '小白', 3]
        console.log(bar); // 1

5. unshift()

作用：向数组首位添加新内容
参数：要添加的元素, 添加多个元素用逗号隔开
返回值：新数组的长度
会改变原数组

 //  数组的 unshift 方法; 改变原数组
        let arr = [1, 2, '小白', 3]
        // 向数组的最前面添加数据, 改变原数组, 返回的是数组的 length 长度
        let bar = arr.unshift('小顾')
        console.log(arr); // ['小顾', 1, 2, '小白', 3]
        console.log(bar); // 5

6. slice()

作用：按照条件查找出其中的部分内容
参数: arr.slice(n,m)从索引n开始查找到m处(不包括m)
arr.slice(n)第二个参数省略，则一直查找到末尾
arr.slice(0)原样输出内容,可以实现数组克隆
arr.slice(-n,-m)slice支持负参数，从最后一个元素开始算起，-1为最后
一个元素，-2为倒数第二个元素
返回值：返回一个新数组
不改变原数组

   // //  数组的 slice 方法
        let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
        // // 按数组的下标截取 (起始下标开始, 结束的下标) 下标是包前不包后
        let bar = arr.slice(1, 3)
        console.log(arr); // ['a', 'b', 'c', 'd', 'e', 'f', 'g']
        console.log(bar); // ['b', 'c']
        // 只传一个参数那么就是从下标开始一直截取到最后
        let bar = arr.slice(1)
        console.log(bar); // ['b', 'c', 'd', 'e', 'f', 'g']

7. splice()

作用：对数组进行增删改
增加：arr.splice(n,0,m)从索引n开始删除0项,把m或者更多的内容插入到索引n的前面
返回空数组
修改：arr.splice(n,x,m)从索引n开始删除x个,m替换删除的部分
把原有内容删除掉,然后用新内容替换掉
删除：arr.splice(n,m)从索引n开始删除m个内容
(如果第二个参数省略，则从删除到末尾)就是从n开始之后的元素都删除
返回删除的新数组，原有数组会改变

//  数组的 splice 方法; 改变原数组
        let arr = [1, 2, '小白', 3]
        // 传两个参数: (开始的下标, 截取几个) 返回的是截取的数据按照数组的形式返回
        let bar = arr.splice(2, 2)
        console.log(arr); // [1, 2, 3]
        console.log(bar); // ['小白']
        // 传一个参数: (只传一个) 数组的下标开始截取到最后
        let foo = arr.splice(1)
        console.log(arr); // [1]
        console.log(foo); // [2, '小白', 3]
        // 传多个参数: (下标, 截取几个, 替换的数据) 截取的个数是 0 那么就相当于直接插值进去
        let num = arr.splice(1, 0, '你好', '小顾')
        console.log(arr); // [1, '你好', '小顾', 2, '小白', 3]
        console.log(num); // []

8. concat()

作用：用于连接两个或多个数组
参数：参数可以是具体的值，也可以是数组对象。可以是任意多个
返回值：返回连接后的新数组
不改变原数组
基本操作

       // 4. 数组的 concat 方法; 不改变原数组
        let arr = [1, 2, '小白', 3]
        // 拼接数组的方法, 返回的是拼接后的数组
        let bar = arr.concat([10, 11], ['校花', '校草'])
        console.log(arr); // [1, 2, '小白', 3]
        console.log(bar); // [1, 2, '小白', 3, 10, 11, '校花', '校草']

结合reduce 实现拍平数组

   const arr = [1, 2, 3, [1, 2, 3, 4, [2,[1,[8,[9]]], 3, 4]]]

    function e(arr1) {
      return arr1.reduce((sum, item) => {
        return sum.concat(Array.isArray(item) ? e(item) : item)
      }, [])
    }
    
    console.log(e(arr))

9. indexOf()

作用：检测当前值在数组中第一次出现的位置索引
参数：arr.indexOf(item,start)item:查找的元素 start:字符串中开始检索的位
返回值：第一次查到的索引，未找到返回-1
不改变数组

10. lastlndexOf()

作用：检测当前值在数组中最后一次出现的位置索引
参数：array.lastIndexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
返回值：第一次查到的索引，未找到返回-1
不改变原数组

11. includes()

作用：判断一个数组是否包含一个指定的值
参数：指定的内容
返回值：布尔类型
不改变原数组

12. sort()

作用：对数组的元素进行排序（默认是从小到大来排序并且是根据字符串来排序的）
参数：可选(函数) 规定排序规则默认排序顺序为按字母升序
返回值：排序后新数组
改变原数组
sort在不传递参数情况下，只能处理10以内（个位数）数字排序

        //  数组的 sort 方法; 改变原数组
        let arr = [1, 3, 7, 9, 101, 5, 15]
        // 第一个参数不会变, 不传参只能处理 10 以内的数据排序, 从小到大
        let bar = arr.sort()
        console.log(arr); // [1, 101, 15, 3, 5, 7, 9]
        console.log(bar); // [1, 101, 15, 3, 5, 7, 9]
        // 从小到大排序
        let bar = arr.sort((a, b) => {
            return a - b
        })
        console.log(arr); // [1, 3, 5, 7, 9, 15, 101]
        console.log(bar); // [1, 3, 5, 7, 9, 15, 101]
        // 从小到大排序
        let bar = arr.sort((a, b) => {
            return b - a
        })
        //不管 返回  还是 原数组 都是会改变的
           console.log(arr);//[101, 15, 9, 7, 5, 3, 1]
        console.log(bar);//[101, 15, 9, 7, 5, 3, 1]

13. map()

作用：按照某种映射关系，把数组的每一个元素给修改了
回调函数执行次数 == 数组长度
返回值：返回映射之后的新数组如果没有return, 则map的返回值都是undefined
经典场景：数据驱动渲染dom树(将数组直接渲染到页面)

Array.prototype.PAGE_map = function (callback) {
    const res = []
    for (let i = 0; i < this.length; i++) {
        res.push(callback(this[i], i, this))
    }
    return res
}

console.log(PAGE.PAGE_map((item, index) => `${item.name}--${item.num}--${index}`))
// [ '猪爸--24--0', '猪妈--23--1', '佩奇--8--2', '乔治--5--3', '小羊苏西--7--4' ]

14. filter()

作用：筛选数组
回调函数执行次数 == 数组长度
return true : 符合筛选条件，当前元素放入新数组中
return false : 不符合筛选条件，当前元素不放入新数组中
返回值：返回筛选之后的新数组
应用场景: 筛选数组,将符合条件的元素放入新数组中

Array.prototype.PAGE_filter = function (callback) {
    const res = []
    for (let i = 0; i < this.length; i++) {
        callback(this[i], i, this) && res.push(this[i])
    }
    return res
}

console.log(PAGE.PAGE_filter(item => item.num >= 10))
// [
//     { name: '猪爸', age: 24 },
//     { name: '猪妈', age: 23 },
//    
// ]

15. some()

作用：判断数组中是否有符合条件的元素 (逻辑或 ||)
回调函数执行次数 != 数组长度
return true : 循环结束。找到了满足条件的元素
return false : 循环继续。没找到，循环继续。如果所有元素全部遍历还是没找
到，最终结果就是false
返回值： true : 有符合条件的元素
false : 没有符合条件的元素

Array.prototype.PAGE_some = function (callback) {
   let flag = false
   for (let i = 0; i < this.length; i++) {
       flag = callback(this[i], i, this)
       if (flag) break
   }

   return flag
}

console.log(PAGE.PAGE_some(item => item.num >= 23)) // true
console.log(PAGE.PAGE_some(item => item.num >= 50)) // false

16. forEach()

参数

item :遍历项

index : 遍历项索引

arr:数组本身作用：遍历数组
类似于for循环遍历数组
回调函数执行次数 == 数组长度
没有返回值

Array.prototype.PAGE_forEach = function (callback) {
    for (let i = 0; i < this.length; i++) {
        callback(this[i], i, this)
    }
}

PAGE.PAGE_forEach((item, index, arr) => {
    console.log(item, index)
})
    { name: '猪爸', age: 24 },//0
    { name: '猪妈', age: 23 },//1
    { name: '佩奇', age: 8 },//2
    { name: '乔治', age: 5 },//3
    { name: '小羊苏西', age: 7 }//4

17. every()

作用：判断数组中 是否所有的元素都满足条件 (逻辑与&&)
回调函数执行次数 != 数组长度
return true : 循环继续。当前元素满足条件,则继续判断，如果循环执行完毕
还是true,则最终的结果就是true
return false : 循环结束。 只要找到不满足条件的元素，循环立即结束。最终every
的返回值是false
返回值：true : 所有的元素都符合条件
false : 有元素不符合条件
应用场景: 开关思想 (购物车全选框)

Array.prototype.PAGE_every = function (callback) {
    let flag = true
    for (let i = 0; i < this.length; i++) {
        flag = callback(this[i], i, this)
        if (!flag) break
    }

    return flag
}

console.log(PAGE.PAGE_every(item => item.num >= 23)) // false
console.log(PAGE.PAGE_every(item => item.num >= 0)) // true

18. findIndex()

作用: 查找元素的下标
回调函数执行次数 != 数组长度
return true : 循环结束。找到了,此时返回值就是下标\

return false : 循环继续。没找到，循环继续。如果所有元素全部遍历还是
没找到，最终结果就是-1

返回值：元素下标或者 -1

19. reduce()

pre第一个参数前一项

next: 第二个参数下一项

前两个值在回调函数里作为参数

最后一个值,一般是0 作为起始值

作用：求数组累加和方法
对数组个元素执行一次回调函数,累加最后一次回调的结果
参数：第一个是reduce回调函数，第二个是初始值一般为0
在回调函数中还有四个参数
1. 函数处理累加的计算结果
2.当前被执行的数组元素
3.当前被执行的数组元素下标
4.PAGE:原数组，也就是调用reduce方法的数组
reduce场景: 数组元素求和、求数组元素最大值

Array.prototype.PAGE_reduce = function (callback, initValue) {
    let start = 0, pre
    if (initValue) {
        pre = initValue
    } else {
        pre = this[0]
        start = 1
    }
    for (let i = start; i < this.length; i++) {
        pre = callback(pre, this[i], i, this)
    }
    return pre
}

// 计算所有age相加
const age = PAGE.PAGE_reduce((pre, next) => {
    return pre + next.age
}, 0)
console.log(age) // 67

20.Array.from()
伪数组转数组\

具体操作场景数组去重展开运算符和Array.from() 效果一样

function unique(arr) { 
  if (!Array.isArray(arr)) { 
     console.log('type error!') 
        return 
}
return Array.from(new Set(arr)) }

function unique(arr) {
    if (!Array.isArray(arr)) { 
        console.log('type error!') 
            return 
            } 
     return [...new Set(arr)] }

21.find()
22. 数组的 reverse 方法;
改变原数组
使原数组反转\

 //首先这个方法是写在数组的原型上的方法

var arr = [1,2,3,4,5];

Array.prototype.myReverse = function (){

for(var i=0;i<this.length/2; i++){

var temp =this[i];

this[i] = this[this.length -1-i];

this[this.length-1-i] = temp;

}

return this;

}

arr.myReverse();
 //  数组的 reverse 方法;
           改变原数组
         let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
        // 使原数组反转
         let bar = arr.reverse()
         console.log(arr); // ['g', 'f', 'e', 'd', 'c', 'b', 'a']
         console.log(bar); // ['g', 'f', 'e', 'd', 'c', 'b', 'a']

数组方法总结