在实际开发当中, 数组和对象使用到最多的; 数组和对象有很多的方法, 这里主要探讨一下:

• 数组的增删改查
• 数组的排序方式
• 数组转换成其他数据类型的方式
• ES6数组新增常用的迭代方式

为什么需要数组?

        数组可以存入不限数的数据, 并且可以使用下标值进行访问; 数据在数组的内部是有序排列的, 数组经常被运用在循环遍历当中.

        在DOM中使用map方式映射dom数, 在vue中使用v-for渲染到页面上等等都会出现数组循环遍历的身影; 所以数组是很重要的!!!

(1) 数组的增删改查

增: 使用到一个api的时候, 必须关注三点: 1. 作用  2. 返回值  3. 用法

① push()  影响原数组

        作用: 在数组的末尾添加一个数据

        参数: 一个数据或多个

        返回值: 添加完后新数据的length值

        用法: 数组.push(数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.push(6, 7, 8);const arr2 = arr.push(9, 10, 11);console.log(arr);console.log(arr1);console.log(arr2);</script>

② unshift()  影响原数组

        作用: 从数组的开头增加一个数据

        参数: 一个数据或多个

        返回值: 新数组的length值

        用法: 数组.unshift(数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.unshift(6, 7, 8);const arr2 = arr.unshift(9, 10, 11);console.log(arr);console.log(arr1);console.log(arr2);</script>

③ splice()  影响原数组

        作用: 在指定的下标值前面添加数据

        参数: 1.指定下标值  2.要删除数据的数量  3.添加数据的数量

        返回值: 没有或者说是空数组"[ ]"

        用法: 数组.splice(下标值, 数据......)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.splice(5, 0, "第一个数据", "第二个数据");console.log(arr);console.log(arr1);</script>

④concat()  不影响原数组

        作用: 连接两个数组(先创建当前数组的副本, 然后把第二个数组添加到副本的末尾, 不会影响原数组)

        参数: 第二个数组

        返回值: 连接好的新数组

        用法: 数组1.concat(数组2)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.concat([6, 7, 8, 9, 10]);console.log(arr);console.log(arr1);</script>

删:

① pop()  影响原数组

        作用: 从数组的末尾删除一个数据(一次只能删除一个)

        参数: 无

        返回值: 被删除的数据

        用法: 数组.pop()

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.pop();console.log(arr);console.log(arr1);</script>

  

② shift()  影响原数组

        作用: 从数组的开头删除一个数据(一次只能删除一个)

        参数: 无

        返回值: 被删除的数据

        用法: 数组.shift()

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.shift();console.log(arr);console.log(arr1);</script>

 

③ splice()  影响原数组

        作用: 指定的下标值后面, 删除一个或多个数据

        参数: 1.指定的下标值  2.删除数据的个数

        返回值: 包含被删除数据的数组

        用法: 数组.splice(开始位置, 删除的数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.splice(0, 2);console.log(arr);console.log(arr1);</script>

④ slice()  不影响原数组

        作用: 创建一个含有原来数组中数据的新数组

        参数: 1.开始的原数组的下标值(包含)  2.结束的原数组的下标值(不包含)

        返回值: 获取完数据后的新数组

        用法: 数组.slice(开始位置, 结束位置)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.slice(0, 2);const arr2 = arr.slice(2, 4);console.log(arr);console.log(arr1);</script>

改:

① splice()  影响原数组

        作用: 指定的下标值后面, 删除一个或多个数据, 添加一个或多个数据

        参数: 1.指定的下标值  2.删除数据的个数  3.添加数据的个数

        返回值: 包含被删除数据的数组

        用法: 数组.splice(开始位置, 删除的数据, 添加的数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.splice(0, 2, "第一个元素", "第二个元素");console.log(arr);console.log(arr1);</script>

  

查:

① indexOf()

        作用: 查找指定数据, 有这返回该数据的下标值, 没有这返回-1

        参数: 需查询的数据

        返回值: 指定数据的下标值或-1

        用法: 数组.indexOf(数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.indexOf(1);const arr2 = arr.indexOf(0);console.log(arr);console.log(arr1);console.log(arr2);</script>

 

② includes()

        作用: 查找指定数据, 有这返回true, 没有则返回false

        参数: 需查询的数据

        返回值: true或false

        用法: 数组.includes(数据)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.includes(1);const arr2 = arr.includes(0);console.log(arr);console.log(arr1);console.log(arr2);</script>

  

③ find()

        作用: 返回第一个匹配的数据

        参数: 回调函数

        返回值: 指定数据的下标值或undefined

        用法: 数组.find(回调函数)

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.find(item => item === 1);const arr2 = arr.find(item => item === 0);console.log(arr);console.log(arr1);console.log(arr2);</script>

  <script>const arr = [{ name: '张三', age: 20 }, { name: '李四', age: 30 }];const res1 = arr.find(item => item.age > 18);const res2 = arr.find(item => item.name === '李四');console.log(res1);console.log(res2);</script>

(2) 数组的排序方式

① reverse()

        作用: 翻转数组

        参数: 无

        返回值: 翻转完后的新数组

        用法: 数组.reverse()

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.reverse();console.log(arr);console.log(arr1);</script>

② sort()

        作用: 按需排列数组中数据的顺序

        参数: 回调函数

        返回值: 新顺序的数组

        用法: 数组.reverse(function (a, b) {return a - b / b - a})

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.sort(function (a, b) {return a - b; // 从小到大});console.log(arr);console.log(arr1);</script>

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.sort(function (a, b) {return b - a; // 从大到小});console.log(arr);console.log(arr1);</script>

(3) 数组转换成其他数据类型的方式

① join()

        作用: 将数组转换成字符串

        参数: 分隔符

        返回值: 转换好的新字符串

        用法: 数组.join("分隔符")

  <script>const arr = [1, 2, 3, 4, 5];const arr1 = arr.join(',');const arr2 = arr.join('?');const arr3 = arr.join('!');const arr4 = arr.join('@');const arr5 = arr.join('$');console.log(arr);console.log(arr1);console.log(arr2);console.log(arr3);console.log(arr4);console.log(arr5);</script>

(4) ES6数组新增常用的迭代方式:

map(), forEach(), some(), every(), filter(), reduce(), findIndex()

ES6新增数组迭代方法_hmxs_hmbb的博客-CSDN博客 详细说明.