数组的常用方法

就是 JS 自带一些操作数组的方法
数组常用方法得使用格式，必须是数组.xxx()
数组和伪数组的区别
- length 和索引都一样，循环遍历都一样
- 长得也一样
- 唯独数组常用方法，伪数组都用不了

数组基础方法

push()

语法： 数组.push(数据1，数据2，数据3，...)
作用：把所有的参数按照顺序追加到数组的末尾位置
返回值：追加以后数组的长度

var arr = ['hello','world','你好','世界']
var res = arr.push('新来的',[1,20])
console.log('追加到末尾',arr); 
console.log('返回的数组长度',res);

pop()

语法：数组.pop()
作用：删除数组的最后一个值
返回值：被删除的数组
直接操作原始数组

        var arr = ['hello','world','你好','世界']
        var res = arr.pop()
        console.log('被删除的数组',arr);
        console.log('删除的值是：',res);

unshift()

语法：数组.unshift(数据1，数据2，数据3，...)
作用：从数组的最前面插入一些数据
返回值：插入后的数组长度
直接操作原始数组
和push()消耗的性能不一样
- 因为push()从末尾相加跟前面没关系
- unshift() 从前面相加，原先的第一个变第二个，第二个边第三个
- 每边一下都要消耗性能

        var arr = ['hello','world','你好','世界']
        var res = arr.unshift('新来的','新来的2')
        console.log('插入后的数组',arr)
        console.log('插入后的数组长度',res)

shift()

语法：数组.shift()
作用：删除数组的最前面一个数据
返回值：被删除的数据
直接操作原始数组

        var arr = ['hello','world','你好','世界']
        var res = arr.shift()
        console.log('删除后的数组',arr);
        console.log('被删除的数据',res);

ES3.0

reverse()

语法：数组.reverse()
作用：反转数组
返回值：反转后的数组
直接操作原始数组

        var arr = ['hello','world','你好','世界']
        console.log('原数组',arr);
        var res =arr.reverse()
        console.log('反转后的数组',res);

sort()

语法：
1. 数组.sort()
  - 按照每一个数据中得每一位数据的 ASCII码排序
2. 数组.sort(function(a,b) { return a-b })
  - 升序排列
3. 数组.sort(function(a,b) { return b-a })
  - 降序排列
作用：数组排序
返回值，排序后的数组
直接操作原始数组

        var arr = [1, 11, 33, 26, 58, 19, 27, 15, 84, 100]
        // console.log('排序前的数组',arr);
        // var res = arr.sort()
        // console.log('排序后的数组',res);
        // console.log(arr);
        var res = arr.sort(function (a, b) { return a - b })
        console.log('升序',arr);
        var res = arr.sort(function (a, b) { return b - a })
        console.log('降序',res);

splice()

语法：
1. 数组.splice(开始索引，多少个)
  - 从开始索引，截取多少个
  - 第二个参数可以不写，直接到末尾
2. 数组.splice(开始索引，多少个，替换数据1，替换数据2，...)
  - 把替换数据按照顺序插入到你截取的位置
  - 从哪个索引开始删除，那么替换数据的第一个就插入哪个位置
作用:有两个
1. 截取数组
2. 替换新内容
返回值：一定是一个数组
- 如果你截取多个数组，那么数组里面有一个
- 如果你截取一个，那么数组里面有一个
- 如果你一个都不揭去，那么是一个空数组

        var arr = ['hello','world','你好','世界']
        var res = arr.splice(1,2)
        console.log(res);

        // var res = arr.splice(1, 2, '新来的') 
        // console.log('arr',arr);
        // console.log('res',res);

        // var res = arr.splice(1, 0, '新来的','新来的2') 
        // // 从哪删丛哪插入
        // console.log('arr',arr);
        // console.log('res',res);

concat()

语法：数组,concat(数组1，数组2，...)
作用：
- 如果参数是数组，那么把数组拆开，里面的每一项追加到原数组后面
- 如果参数是数据，把么直接追加
返回值：追加好的数组
不改变原始数组

        var arr = ['hello','world','你好','世界']
        var res = arr.concat([10,20],[30,40],100)
        console.log('arr',arr);
        console.log('res',res);

slice()

语法：
1. 数组.slice(开始索引，结束索引) - 包前不包后
  - 第一个参数可以不写，表示从头
  - 第二个参数可以不写，表示末尾
2. 数组.slice(开始索引，结束索引) - 包前不包后
  - 参数可以写一个负整数
  - 当你书写一个负整数以后，表示 length + 负整数
作用：获取数组里面的某些数据
返回值：一个数组
- 如果你获取的是多个数据，数组里面就有多个
- 如果你获取一个数据，数组里面就有一个
- 如果你一个都不获取，那么是个空数组
不改变原始数组

        var arr = ['hello','world','你好','世界']
        var res = arr.slice(1,2)
        console.log('arr',arr);
        console.log('res',res);

        // 因为 length 是 4, -2 的位置实际上相当于 4 + -2 = 2
        var res2 = arr.slice(1,-2)
        console.log('res2',res2);

join()

语法：数组.join('连接符号')
作用：把数据里面的被一个数据使用连接符号连接在一起
返回值：是一个连接好的内容，是一个 String 类型

        var arr = ['hello','world','你好','世界']
        var res = arr.join()
        var res = arr.join('——')
        console.log(arr);
        console.log(res);

ES5.0

indexOf()

语法：
1. 数组.indexOf()
2. 数组.indexOf(数据，开始索引)
  - 从那个索引开始向后查找
作用：查看数组里面指定这个数据的索引
返回值：
- 如果有这个数据，是第一个满足条件的索引
- 如果没有这个数据，那么是 -1

        var arr = ['hello','world','你好','世界','hello']
        var res = arr.indexOf('hello')
        console.log(arr)
        console.log(res) 

        // var res = arr.indexOf('hello',1)
        // console.log(arr)
        // console.log(res)

lastIndexOf()

语法：

数组.lastIndexOf(数据)
数组.lastIndexOf(数据，开始索引)
- 从那个一个索引开始向前查找

作用：反向查看数组里面指定这个数据的索引
返回值：
- 如果有，就是找到第一个数据的索引
- 如果没有，就是 -1
- 注意：虽然是从后往前查找，但是索引还是正常索引

        var arr = ['hello','world','你好','世界','hello']
        var res = arr.lastIndexOf('zzz')
        console.log(res);

        var res2 = arr.lastIndexOf('hello',3)
        console.log(res2);

forEach()

语法：forEach(function(item,index,arr) {} )
- item: 数组的每一项
- idnex: 数组每一项的所有
- arr: 原始数组
作用：取代 for 循环的作用，遍历数组
- 在不考虑性能的时候，可以用 forEach 取代 for 循环
没有返回值

        var arr = ['hello','world','你好','世界','hello']
        var res = arr.forEach(function (item,index,arr){
            // 这个函数，会根据数组里面有多少个数据执行多少回
            // console.log('我执行了');
            // 这个函数每一次执行的时候，item 分别是数组里面的每一项的索引
            // 这个函数没一次执行的时候，arr每次都是原始数组
            console.log(item,index,arr)
        })

map()

语法：数组.map(function(item,index,arr) {} )
- item: 数组的每一项
- idnex: 数组每一项的所有
- arr: 原始数组
作用：映射数组
返回值：是一个新的数组
- 里面是对原始数组每一个数据的操作
- 返回值数组，一定和原始数组长度一样
不改变原始数组
map 底层封装
1. 准备一个新的数组
2. 遍历原始数组，分别执行函数
3. 把每次函数执行时候的返回值放到新数组里
4. 把新数组当作 map 的返回值给出来

        var arr = [10,100,1000]
        var res =arr.map(function(item,index,arr){
            console.log(item,index,arr)

            return item
        })
        console.log(res);

fliter()

语法：数组.filter(function(item,index,arr) {} )
- item: 数组的每一项
- idnex: 数组每一项的所有
- arr: 原始数组
作用：过滤原始数组中的数据，把满足条件的放在新数组里面
返回值：新数组，里面是所有原始数组中满足条件的项
不改变原始数组
filter 底层封装
1. 准备一个新数组
2. 循环遍历原始数组
  - 数组有多少项，函数执行多少回
  - 每一回，如果返回值是 true, 那么就把这一项放在新数组里面
  - 如果返回值是 false,那么就不把这一项放在新数组里面
3. 把新数组当作 filter 的返回值返回给你

        var arr = [10,20,30,40,50]
        var res = arr.filter(function(item,index,arr){
            return item > 30
        })
        console.log(res)

every()

语法：数组.every(function(item,index,arr){})
- item: 数组的每一项
- idnex: 数组每一项的所有
- arr: 原始数组
作用：判断原始数组里面是不是每一个都满足体哦阿健
返回值：是一个布尔值
- 如果原始数组中每一个都满足条件，那个就是一个 true
- 如果原始数组中有任意一个不满足条件，那么就是一个 false
every 底层原理
1. 假设一个变量为 true, 表示所有数据都满足条件
2. 循环遍历数组
  - 执行传递进来的函数
  - 如果函数返回来的的是 true, 那么循环继续
  - 如果函数返回的是 false, 那么把我的假设改成 false,结束循环
3. 循环结束以后，把我的假设当作 every 的返回值

        var arr = [10,20,30,40,50]
        var res = arr.every(function(item,index,arr){
            console.log(item,index,arr)
            return item < 40
        })
        console.log(res);

some()

语法：数组.some(function(item,index,arr) {} )
- item: 数组的每一项
- idnex: 数组每一项的所有
- arr: 原始数组
作用：判断数组中是不是有某一个满足体哦阿健
返回值：一个布尔值
- 如果原始数组中有任意一个数据满足条件，那个就是一个 true
- 如果原始数组中有所有数据都不满足条件，那么就是一个 false
some 底层原理
1. 准备一个假设变量，赋值为 fales, 表示所有都不满足条件
2. 循环遍历数组
  - 执行传递过来的函数
  - 如果函数返回的是 false, 那么什么也不做，循环继续
  - 如果函数返回的是 true,那么直接结束魂环，改变假设变量
3. 循环结束以后，把假设变量当作 some 的返回值

        var arr = [10,20,30,40,50]
        var res = arr.some(function(item,index,arr){
            console.log(item,index,arr)

            return item > 10
        })
        console.log(res)

ES2015(ES6)

copyWithin()

语法：数组.copyWithin(目标位置，开始索引，结束索引) - 包前不包后
- 目标位置:当你替换内容的时候，从哪一个索引位置开始替换
- 开始索引:数组哪一个索引位置当作替换内容,默认值是 0
- 结束索引:数组哪一个索引位置结束当作替换内容,默认是末尾
作用：使用数组里面的内同替换数组里面的内容
返回值：是一个新的数组
- 替换后的数组

        var arr = [100,200,300,400,500]
        // 第一个参数 0 ，表示不管将来我用什么东西替换，都从 0 位置开始替换
        // 第二个参数 3 ，表示原始数组索引 [3] 位置开始向后查找
        // 因为没有写第三个参数，默认到末尾
        // 找到的就是 400 500
        // 把 400 和 500 两个数从 [0] 开始替换
        var res = arr.copyWithin(0,3)
        console.log('res',res);

        // 第三个参数 4 ，表示原始数组索引 [4] 位置结束查找
        // 找到的就是 400
        var res2 = arr.copyWithin(0,3,4)
        console.log('res2',res2)

fill()

语法：数组.fill(要填充的数据，开始索引，结束索引) - 包前不包后
- 要填充的数据：你想用什么数据填充数组里面每一位
- 开始索引：从哪一个索引开始填充，默认值是 0
- 结束索引：填充到哪一个索引位置，默认值是末尾
- 前提：数组要有 length
作用：使用指定数据填充数组
返回值：填充好的数组

        var arr = new Array(30)
        // 第一个参数是填充到末尾
        // 第二个参数是从哪开始填充
        // 第三个参数是填充到哪里结束 - 包前不包后
        var res = arr.fill('你好',5,10)
        console.log(res)

includes()

语法：数组.includes(数据)
作用：查看数组中是不是有某一个数据
返回值：一个布尔值
- 有数据就是 true
- 没有数据就是 false

        var arr = [10,20,30,40,50]
        var res = arr.includes(40)
        console.log(res)

flat()

语法：数组.flat(数字)
- 数字：表示扁平化多少层，默认是 1
- 数字这个参数还可以填写 infinity
作用：拍平数组
返回值：拍平以后的数组

        var arr = [
            10,20,30,
            [40,50],
            [60,70,[80,90]]
        ]
        // 写 1 就是 一层
        // infinity 表示无限
        var res = arr.flat(Infinity)
        console.log(res)

flatMap()

语法：数组.flatMap(function(item,index,arr) {} )
作用：拍平数组,但是只能拍一层
返回值：一个新数组
- 一边拍平，一边映射

        var arr = [[10,20,31],[41,50,60]]
        var res =arr.flatMap(function(item){
            return item.filter(function(item){return item % 2 == 0})
        })
        console.log(res);

find()

语法：数组.find(function(item) {} )
作用：根据条件找到数组里面第一个满足条件的数据
返回值：找到的那个数据

        var arr = [10,20,30,40,50]
        var res =arr.find(function(item){
            return item > 20
        })
        console.log(res);

findIndex()

语法：数组.findIndex(function(item) {} )
作用：根据条件找到数组里面满足条件的数据
返回值：找到的那个 数据的索引

        var arr = [10,20,30,40,50]
        var res =arr.findIndex(function(item){
            return item > 20
        }) 
        console.log(res);

js 数组的常用方法

数组的常用方法

数组基础方法

push()

pop()

unshift()

shift()

ES3.0

reverse()

sort()

splice()

concat()

slice()

join()

ES5.0

indexOf()

lastIndexOf()

forEach()

map()

fliter()

every()

some()

ES2015(ES6)

copyWithin()

fill()

includes()

flat()

flatMap()

find()

findIndex()