JS中数组的相关方法整理（想要了解数组，看这一篇就足够了）

小张快跑。

已于 2022-03-12 11:02:38 修改

阅读量666

点赞数

分类专栏： JavaScript基础文章标签： javascript 前端 es6

于 2022-02-06 17:16:12 首次发布

本文链接：https://blog.csdn.net/io_123io_123/article/details/122796706

版权

JavaScript基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我们前端程序员在工作中，除了每天欣赏自己写出来的“优美的页面和代码群”之外，我们在工作中接触最多的就是数组。

那么为什么这么说呢：我们可以想，我们页面上所有的数据、图片，文字等，我们不可能永远都是保持一种状态，那么这个页面对于我们后期的使用是非常受限制的，甚至可以说，这个页面是无法使用的。我们需要的数据能够实时地变化、更新。

那么问题来了，我们一个页面所需要地数据量是是十分巨大的，我们要如何保存和使用我们的数据呢？这时候，我们的数组就出现了。在工作得到过程中，我们能够发现，后端给我们返回的数据，或多或少都是数组类型的数据，那么我们就必须掌握如何去使用这个数组，从你这个数组中获取我们所需要的数据。

一、数组的概念

数组是指一组数据的集合，其中的每个数据被称为元素。在数组中，可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

二、数组的创建

JS中提供的创建数组的方式有两种：字面量创建和内置函数创建

2、1 字面量创建数组

var arr=[];//创建一个空数组
var arr1=[1,2,3,4,'red',true];//数组中的每个元素要用“逗号”隔开

2、2 利用new创建内置函数的方式创建数组

var arr = new Array();//创建一个新数组

注意：Array() A要大写

三、数获取数组元素

数组的索引

索引（下标）：用来访问数组元素的序号（数组的下标是从0开始的）

var arr = ["小白","小黄","小黑","小红"]

索引号： 0 1 2 3

格式：数组名[索引号]

四、遍历数组

看完上面的介绍，相信大家对数组已经有了初步的了解，那么我们如何将数组中的元素全部取出来呢？这就是我们下面要说的遍历。

遍历：就是把数组中的每个元素从头到尾都访问一遍。

4、1 利用循环，遍历数组

var arr = ["red","green","blue"];
    for (var i = 0; i < arr.length; i++){
        console.log(arr[i])
    }

注意：因为我们的数组索引号使用0开始的，所以 i 的初始值必须是 0

4、2 for...in 遍历数组

for(var k in 数组){
    k 代表下标
    数组[k]  下标所对应的元素
}

拓展：冒泡排序

冒泡排序：是一种算法，把一系列的数组按照一定的顺序进行排列显示（从大到小或者从小到大）。

冒泡排序的思想：一次比较两个元素，如果他们的顺序错误，就把他们交换过来。

案例
var arr = [5,4,3,2,1]
    for(var i = 0;i <= arr.length - 1;i++){  //外层循环控制趟数（循环整个数组）
        for(var j = 0;j <= arr.length - i -1;j++){  //内层循环控制次数
         // 使用 if 判断，交换两个变量的值（这里使用的是：通过第三个变量来交换当前两个变量的值）
            if(arr[j] > arr[j + 1]){
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
console.log(arr);

五、数组API

数组的使用能够极大的方便我们对于数据的使用和操作，而官方也为我们封装了大量的数组相关的API（JS中预定义的函数或者方法），来提供我们的开发效率。

API	用途	备注
toString()	将数组转换为字符串	元素之间用逗号隔开
join()	将数组转换为字符串	可以指定元素之间分隔符号，默认是按照“逗号”分隔
reverse()	翻转数组
sort()	对数组进行排序	默认是按照Unicode排序升序： var points = [40,100,1,5,25,10]; points.sort(function(a,b){return a-b}); 降序： var points = [40,100,1,5,25,10]; points.sort(function(a,b){return b-a});
concat(arr1,arr2,arr3,...)	拼接多个数组	arr1，arr2表示要拼接的数组返回值：返回拼接后的数组，原数组不会发生变化
indexOf()	检测数组中是否含有某个元素	返回值：返回下标，如果找不到，返回 -1
slice(start,end)	截取数组元素	start：开始的下标；end：结束的下标，不包含end本身 end为空，截取到最后；end为负数，表示倒数返回值：返回截取的元素，原数组不会发生变化
splice(start,end)	删除数组元素	start：开始的下标；count：删除的长度 count为空，表示删除到最后；count为负数，表示倒数；count为0，表示在当前位置插入返回值：返回删除的元素，原数组会发生变化
push()	在数组的末尾添加元素	返回值：返回-数组的长度，原数组会发生变化
pop()	删除数组末尾的一个元素	返回值：删除的元素，原数组会发生变化
unshift()	在数组的开头添加元素	返回值：返回数组的长度，原数组会发生变化
shift()	删除数组开头的一个元素	返回值：返回删除的元素，原数组会发生变化

在我们平时的开发过程中，如果我们能供熟练运用这写数组的相关API，那么我们的开发效率将会大大提升，如果感觉我上面的介绍不是很详细，那么大家可以去下面这个网站，里面有具体的介绍

Array - JavaScript | MDN

六、数组的高阶函数

6、1 every （判断数组的每一个元素是否都符合条件）

every(函数)：数组的每个元素都会通过函数进行处理，判断是否符合指定的条件

函数接收3个参数 value、index、array （固定顺序，参数名随意，没有用到的参数可以不写）如图：

every()的返回值：数组的每个元素，经过函数处理，都符合条件，则返回 true，只要有一个不符合条件，则返回 false 。

案例1：判断数组中的每一个元素是否都是正数

  <script>
      // every: 数组的每个元素都符合条件
      let nums = [11, -2, 45, 767, 32, 4, 5]
      // 判断数组中是否 每一个 都是正数
      // every(函数): 数组的每个元素都会通过函数进行处理, 判定是否符合指定的条件
      // 函数接收3个参数, 是固定顺序, 参数名随意
      var res = nums.every((value, index, array) => {
        console.log('值value:', value)
        console.log('下标index:', index)
        console.log('array:', array)
        // 条件: 值是正数 > = 0
        return value > 0 // 满足条件 返回true
     })
      // every的结果: 数组的每个元素, 经过函数处理 都是true, 则最终结果是true, 否则是false
      console.log(res ? '都是正数' : '非都是正数')
    </script>

案例2：判断数组中是否每一个元素都是奇数

<script>
var a = [11, 22, 33, 44, 55]
      // 判断: a中是否都是奇数
      var res = a.every((value, index, array) => {
        // 奇数: 对2取余 结果1的
        return value % 2 == 1
     })
      // 省略1: 方法体中没有用到的参数, 可以省略不写
      res = a.every(value => {
        return value % 2 == 1
     })
      // 省略2: 箭头函数的方法体, 只有一行, 省略{return }
      res = a.every(value => value % 2 == 1)
      // 省略3: 隐式类型转换 0假 1真
      res = a.every(value => value % 2)
      console.log(res ? '都是奇数' : '非都是奇数')
      var b = [32, 43, 12, 45, 67]
      // 判断b中是否每个值都大于20
      var res = b.every(value => value > 20)
      console.log(res ? '都>20' : '非都>20')
</script>

6、2 some（判断数组中至少有一个满足条件）

some()： 只要数组中有一个元素满足条件，就返回true

函数接收3个参数 value、index、array （固定顺序，参数名随意，没有用到的参数可以不写），和every的参数一样。

some()的返回值：数组中只要有一个满足条件的, some的结果就是true，一个也没有，就返回false

案例：判断数组中是否有偶数

  <script>
      // some: 至少有一个 满足条件的
      var nums = [11, 22, 3, 5]
      // 判断是否有 偶数
      var res = nums.some(value => {
        // 所有参数 同 every 方法
        return value % 2 == 0
     })
      // 简化语法:
      res = nums.some(value => value % 2 == 0)
      // 数组中只要有一个满足条件的, some的结果就是true
      console.log(res ? '有偶数' : '没有偶数')
</script>

6、3 map（数组映射）

map()：映射--数组的每个值, 改造之后形成新的数组

函数接收3个参数 value、index、array （固定顺序，参数名随意，没有用到的参数可以不写），和every的参数一样。

map()的返回值：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

<script>
    // map: 映射--数组的每个值, 改造之后形成新的数组
    var nums = [1, 2, 3, 4, 5, 6]
    // 把数组的每个值 x2, 得到新的数组
    var res = nums.map(value => {
      return value * 2
    })
    //  简化写法 return的返回值, 会形成新的数组
    res = nums.map(value => value * 2)
    console.log('res:', res)
</script

6、4 filter（数组过滤）

filter()：数组过滤——筛选符合条件的元素并返回新数组，原数组不变

函数接收3个参数 value、index、array （固定顺序，参数名随意，没有用到的参数可以不写），和every的参数一样。
filter()的返回值：当filter筛选出符合条件的值，会返回一个新的数组

注意：filter不会检测空数组

案例1：找出所有偶数

 <script>
      // filter: 过滤-- 把满足条件的元素组合成新的数组
      var nums = [11, 2, 43, 65, 76, 8, 87, 9]
      // 找出所有偶数
      var res = nums.filter(value => {
        return value % 2 == 0
     })
      // 简化
      res = nums.filter(value => value % 2 == 0)
      console.log('res:', res)
</script>

案例2：找出符合条件的人

<script> 
var emps = [
       { name: 'mike', salary: 8999, age: 39 },
       { name: 'lucy', salary: 6999, age: 31 },
       { name: 'tom', salary: 4999, age: 32 },
       { name: 'john', salary: 3999, age: 25 },
     ]
      // 任务1: 找出所有 薪资 大于5000的人
      var res = emps.filter(value => value.salary > 5000)
      console.log(res)
      // 任务2: 找出所有 年龄 小于35 的人
      var res = emps.filter(value => value.age < 35)
      console.log(res)
</script>

6、5 forEach（遍历数组，代替for循环）

forEach():单纯遍历数组，用于代替for循环

函数接收2个参数：value，index（用法和every方法一致）

forEach没有返回值

案例：利用forEach遍历数组，并修改数组中的值

 <script>
      // forEach: 单纯遍历数组, 用于代替 for 循环
      var names = ['mike', 'lucy', 'lily', 'john']
      // forEach没有返回值
      names.forEach((value, index) => {
        console.log('value:', value)
        console.log('index:', index)
     })
      // for循环遍历数组写法: 过于繁琐 所以基本不用
      // for (let i = 0; i < names.length; i++ ) {
      //   let value = names[i]
      // }
      var emps = [
       { name: 'mike', salary: 8999, age: 39 },
       { name: 'lucy', salary: 6999, age: 31 },
       { name: 'tom', salary: 4999, age: 32 },
       { name: 'john', salary: 3999, age: 25 },
     ]
      // 把每个人的薪资+1000, 年龄+2
      emps.forEach(value => {
        // += 的全写格式
        // 利用 = 赋值符号, 来修改 原始值
        value.salary = value.salary + 1000
        value.age += 2
     })
      console.log(emps)
  </script>

6、6 reduce（归纳、合并）

reduce()：归纳，合并——可以把数组中元素，归纳成一个值

函数接收2个参数：sum、value（sum：初始值，value：当前元素的值）

reduce()的写法：
  var res = nums.reduce((sum, value) => {
        // 参数1: sum, 每次累加后的结果
        // 每次遍历, 把值累加给sum. 返回值是新的sum总和
        return sum + value
     }, 0)
reduce()的简化：
res = nums.reduce((sum, value) =>sum + value, 0)

案例：计算总价

 <script>
      var products = [
       { name: 'iphone1', count: 3, price: 8888 },
       { name: 'iphone2', count: 5, price: 2888 },
       { name: 'iphone3', count: 1, price: 4888 },
       { name: 'iphone4', count: 13, price: 6888 },
     ]
      // 计算出总金额
      // 0 是 sum 的默认值, sum=0
      var total = products.reduce((sum, value) => {
        // 先算乘除 再算加减
        return sum + value.count * value.price
     }, 0)
      console.log(total)
 </script>