操作数组方法的参数、返回值分别是什么？

学习数组的方法，一般从参数和返回值这两点出发，以下只是日常工作中常见的数组方法合集，如果想了解全部数组方法，建议去MDN官方查询

MDN官方网址：MDN Web Docs

1.增加数组里的元素

参数：想要添加的元素

返回值：新数组的长度

会改变原数组

（1）在数组最后一个元素后面添加

   arr.push() 

（2）在数组第一个元素前面添加

   arr.unshift()

let arr = [10, 20, 30, 40, 50]

        // arr.push(60)

        console.log(arr.push(60))  // 6

        console.log(arr)   // [10, 20, 30, 40, 50, 60]

        console.log(arr.unshift(1))   // 7

        console.log(arr)   // [1,10, 20, 30, 40, 50, 60]

2.删除数组里的元素

参数：想要删除的元素

返回值：返回删除的那个元素

会改变原数组

（1）删除数组里面的最后一个元素

   arr.pop() 

（2）删除数组里面第一个元素

   arr.shift()

let arr = [1, 10, 20, 30, 40, 50, 60]

        console.log(arr.pop(60));   // 60

        console.log(arr)    // [1, 10, 20, 30, 40, 50]

        console.log(arr.shift(1))    // 1

        console.log(arr)   // [10, 20, 30, 40, 50]

特殊：arr.splice() 既可以删除元素，还可以插入和添加元素

它的参数有三个：

1.索引（需要从哪个索引开始删除元素）

2.删除的个数 （删除范围：左闭右包）

（个数为1，就是删除索引为第一个参数的元素）

3.插入的元素

返回值：被删除的元素组成的数组

会改变原数组

 (1)删除指定元素

 let arr = [1, 10, 20, 30, 40, 50, 60]

        // arr.splice(0, 2)

        console.log(arr.splice(0, 2));

        console.log(arr); //[20, 30, 40, 50, 60]

（2）插入元素

 let arr = [1, 10, 20, 30, 40, 50, 60]

        console.log(arr.splice(0, 0, 70));  // [] 没有被删除的数据返回的是空数组

        console.log(arr);  // [ 70, 1, 10, 20, 30, 40, 50, 60] 

（3）在指定位置添加元素

let arr = [1, 10, 20, 30, 40, 50, 60]

        console.log(arr.splice(1, 2, 70)); // [10,20]

        console.log(arr);  // [1, 70, 30, 40, 50, 60]

3.查询指定范围的元素

arr.slice() 

参数：（起始下标，结束下标）包含起始下标，不包含结束下标

不传参数：实现浅拷贝

传一个参数：从索引值开始截取

传两个参数：从索引值到索引值截取

返回值：查询到的元素数组

不会改变原数组

let arr = [1, 10, 20, 30, 40, 50, 60]

        console.log(arr.slice(0, 3)); // [1,10,20]

4.连接数组 （应用场景: 移动端列表上拉加载更多）

arr.concat()

参数：需要连接起来的数组

返回值：连接后的新数组

不会改变原数组

let arr = [1, 10, 20]

let newArr = [30, 40, 50]

console.log(arr.concat(newArr)) // [1, 10, 20, 30, 40, 50]

5.把数组元素按照分隔符拼接成一个字符串

arr.join()

参数：分隔符 默认以逗号作为分隔符进行拼接（参数为空字符串 则不需要分隔符直接拼接）

返回值：拼接后的字符串

不会改变原数组

let arr = [1, 10, 20, 10, 40, 10, 60]

        console.log(arr.join(''));   // 1102010401060

        console.log(arr.join('-'));  // 1-10-20-10-40-10-60

        console.log(arr.join());  // 1,10,20,10,40,10,60

6.翻转数组

arr.reverse()

返回值：新数组

会改变原数组

let arr = [1, 10, 20, 30, 40, 50, 60]

console.log(arr.reverse());  //[60，50，40，30，20，10，1]

7.数组排序

arr.sort()

参数：回调函数（函数中的两个参数是数组中两个相邻的元素）

如果数组里面的值是数组，不传参会自动从小到大排序

返回值：重新排序后的新数组

会改变原数组

let arr1 = [

            { name: '张三', age: 24 },

            { name: '张三', age: 27 },

            { name: '张三', age: 14 },

            { name: '张三', age: 10 },

            { name: '张三', age: 30 },

        ]

  arr1.sort((a, b) => a.age - b.age)

        console.log(arr1.sort((a, b) => a.age - b.age)); //根据年龄从小到大排

        console.log(arr1.sort((a, b) => b.age - a.age)); //根据年龄从大到小排

8.拿到目标项的索引

(1)元素是复杂数据类型用findIndex()

参数：回调函数

返回值:

        (1)找到了 回调函数return true 循环结束 返回当前下标

        (2)没找到 回调函数return false 循环继续 全部遍历完还没找到 返回-1

不会改变原数组

let arr = [

            { name: '张三', age: 20 },

            { name: '李四', age: 21 },

            { name: '王五', age: 22 },

            { name: '赵六', age: 23 }

        ]

        let res = arr.findIndex(item => item.name === '赵六')

        console.log(res); // 3

        let result = arr.findIndex(item => item.name === '1111赵六')

        console.log(result); // -1

(2)元素是值类型用indexOf()  

参数: 目标元素

返回值: （1）找到了，返回目标元素的下标 （2）没有找到，返回-1

不会改变原数组

let arr = [1, 10, 20, 10, 40, 10, 60]

        const res = arr.indexOf(40)

        console.log(res);  // 4

        console.log(arr.indexOf(100)); // -1

9.加工数组（ 根据规则映射数组 得到"新数组"）

map()

实际应用场景：后台返回的数组和页面元素的数组不一致 需要映射成一致(图表)

参数：回调函数 （回调函数内部返回值 return 新数组的元素）

返回值 ：映射后的新数组

 let arr = [1, 10, 20, 10, 40, 10, 60]

        const res = arr.map(item => item * item)

        console.log(res); // [1, 100, 400, 100, 1600, 100, 3600]

注意：如果通过map来进行条件判断，内部回调函数返回的是布尔值，map的返回值是一个由这些布尔值组成的数组 

10.循环遍历数组元素

foreach()

参数 ：回调函数

无返回值

注意：如果强制在foreach内部停止循环会报错，可以使用try-catch捕获

1.简单应用（纯遍历）：

let arr = [1, 10, 20, 10, 40, 10, 60]

        arr.forEach(item => console.log(item)) // 1, 10, 20, 10, 40, 10, 60

2.项目中全选功能的应用（设置每一个元素的select值为true）

let arr = [

            { name: '张三', select: false },

            { name: '李四', select: true },

            { name: '王五', select: false },

            { name: '赵六', select: true },

            { name: '孙七', select: false },

        ]

        arr.forEach(item => item.select = true)

11.筛选

filter（）

参数：回调函数 

回调函数内部返回值:

       return true 满足条件放入新数组

       return false 不满足条件不放入新数组

返回值：新数组

 let arr = [

            { product: '商品1', select: false },

            { product: '商品2', select: true },

            { product: '商品3', select: false },

            { product: '商品4', select: true },

            { product: '商品5', select: false },

        ]

        //筛选出用户选中的商品

        const res = arr.filter(item => item.select)

        console.log(res);

        //删除用户选中的商品

        const newArr = arr.filter(item => !item.select)

        console.log(newArr);

12.求累加和

reduce()

参数：

第一个参数 回调函数(里面有三个参数 ： sum累加器,item,index）  

第二个参数 初始值

返回值 ：最后一次累加的结果

完整语法：arr.reduce((sum,item,index)=>{},0)

注：如果不设置初始值，默认是数组的第一项，并且从数组的第二项开始遍历，但没有初始值的情况下遇到空数组就会报错，一般初始值常设为0

Q：这个案例主要是辨别 reduce初始值什么时候加什么时候不加?

A：如果数组的每一项是对象 最后需要的结果是数字或者字符串(也就是对象里面的值) 就要加初始值

const arr = [{

            name: '张三',

            salary: 10000

        }, {

            name: '李四',

            salary: 10000

        }, {

            name: '王五',

            salary: 10000

        },

        ]

        const res = arr.reduce(function (sum, item) {

            sum += item.salary * 0.3

            return sum

        }, 0)

        console.log(res);  // 9000

13.判断数组里面的所有元素是否都符合函数里面的条件

every() 

参数：回调函数 （回调函数里面也有三个参数 item index 还有数组本身）

返回值（布尔类型）：如果回调函数的每一次判断返回的都是true，就返回 true，否则返回 false

（一假则假，全真则真）

 const arr = [10, 20, 30, 40, 50]

        const res = arr.every(function (item) {

            console.log('hhhh');

            return item > 2

        })

        console.log(res);  //true 循环了5次

const arr1 = [10, 20, 30, 40, 50]

        const res1 = arr.every(function (item) {

            console.log('略略略');

            return item > 10

        })

        console.log(res1);  //false 循环了1次

14.判断数组里面的是否有元素符合函数里面的条件 【和every相反】

some（） 

参数：回调函数 （回调函数里面也有三个参数 item index 还有数组本身）

返回值（布尔类型）：如果回调函数的每一次判断返回的都是false，就返回 false；只要回调函数有一次判断返回的是true，就返回 true

（一真则真，全假则假）

15.找到数组里面符合条件的元素 找到后立马停止执行

find()

参数：回调函数 （回调函数里面也有三个参数 item index 还有数组本身）

返回值：符合条件的元素

注：函数执行次数和是否找到符合条件的元素有关 如果都没找到就执行arr.length次 只要找到一个就立马停止

const arr = [10, 20, 30, 40, 50]

        const res = arr.find(item => {

            console.log('嘻嘻嘻');

            return item > 20

        });

        console.log(res); // 30 函数执行了3次

关于数组的其他方法补充：

1.Array.isArray()     判断一个变量是数组还是对象

const arr = [10, 20, 30, 40, 50]

        console.log(Array.isArray(arr));  //true

        console.log(Array.isArray(1));    //false

2.Array.from() 将伪数组转换为真数组

伪数组：具有数组的长度length属性和索引,但不具备数组一样的push等方法

Q：哪些地方有伪数组?  

A：arguments (动态参数 使用的较少);document.querySelectorAll; NodeList增加节点

//获取子元素的两种方法:

        //1.自己找自己

        const lisDom = document.querySelectorAll('ul li')

        console.log(lisDom);

        //2.通过父元素获取所有的子元素

        const lisDom2 = document.querySelector('ul').children

        console.log(lisDom2);

        //把伪数组转换成真数组

        const res = Array.from(lisDom2)

        res.push('呵呵呵')

        console.log(res);