JS数组相关

网抑云的云
73 阅读5分钟

数组

    创建数组方法：
    1. 字面量：var arr = [数据1，数据2，数据3]
    2. 内置构造函数：var arr = new Array()

  • 注意： 使用内置构造函数时，没有给参数时表示一个空数组 ；给一个参数时，表示创建了一个长度为该参数的数组；给定两个参数时表示创建了值为给定值的数组。

  • 数组案例1：

      var arr = [1,3,2,4,5,8,2,10,9]
  var sum = 0
  for(var i = 0; i < arr.length; i++){
       console.log(arr[i])
       sum += arr[i] 
  }
  console.log(sum)   //计算数组中所有值的和

  • 数组案例2：

      var arr = [1,3,2,4,5,8,2,10,9]
  var num = 0
  for(var i = 0; i < arr.length; i++){
      if(num < arr[i]){
          num = arr[i]
      }
  }
  console.log(num)  //求数组中的最大值

  • 简单数据类型与引用数据类型的区别

    1. 存储方式： 1.1：基本数据类型：存储在栈内存中，变量内部就是实际的值 1.2：引用数据类型：变量存储在栈内存中，变量内部存储的是 指向堆内存的地址（对象实际的值）

    2. 赋值的区别： 2.1：基本数据类型：是值的传递，可以理解为将自身的值复制给另一个变量，后续对另一变量修改与我无关 2.2：引用数据类型：是地址的传递，可以理解为将自身的地址复制给另一个变量，后续对地址下的内容修改会有影响

    3. 比较的区别： 3.1：基本数据类型：变量实际的值比较 3.2：引用数据类型：引用地址比较，判断是否执行一个地址

    4. 传参的区别： 4.1：基本数据类型：是值的传递, 将自身的值 复制一份 传递给函数的形参 4.2：引用数据类型：是 地址 的传递, 将自身的地址 复制一份 传递给函数的形参

数组的方法：

1.push

    语法: 数组.push(数据)
    作用: 向 数组末尾 添加数据
    返回值: 追加数据后, 数组最新的长度
    var arr = [1, 2, 3, 500]
    var num = arr.push(500)
    console.log(arr)
    console.log(num)

2.pop

    语法: 数组.pop()
    作用: 删除数组的最后一项
    返回值: 删除的哪一项数据
    var arr = [1, 2, 3, 500]
    var num = arr.pop()
    console.log(arr)
    console.log(num) 

3.unshift

    语法: 数组.unshift(数据)
    作用: 向 数组头部 添加数据
    返回值: 追加数据后, 数组最新的长度
    var arr = [1, 2, 3, 500]
    var num = arr.unshift(1000)
    console.log(arr)
    console.log(num)

4.shift

    语法: 数组.shift()
    作用: 删除数组头部(第一项)的数据
    返回值: 删除的哪一项数据
    var arr = [1, 2, 3, 500]
    var num = arr.shift()
    console.log(arr)
    console.log(num)

5.reverse

    语法: 数组.reverse()
    作用: 反转数组
    返回值: 反转后的数组
    var arr = [1, 2, 3, 500]
    var num = arr.reverse()
    console.log('反转后的数组: ', arr)
    console.log('reverse的返回值: ', num)

6.sort

    语法: 数组.sort(); 数组.sort(function (a, b) {retrun a - b}); 数组.sort(function (a, b) {retrun b - a})
    作用:
        不传参数
            会将数组内所有值, 转换为字符串, 然后一位一位的对比(第一位相同,对比第二位,...)
        传参---函数 return a - b
            会将数组内所有的值, 按照数字的 从小到大排列
        传参---函数 return b - a
            会将数组内所有的值, 按照数字的 从大到小排列
    返回值: 
        不传参数
            将排序后的数组返回
        传递参数
            将排序后的数组返回
6.1 不传参数

    var arr = [1, 2, 3, 500]
    var num = arr.sort()
    console.log('sort后的 arr: ', arr)
    console.log('sort 的返回值: ', num)

6.2 return a - b

    var arr = [1, 2, 3, 500]
    var num = arr.sort(function (a, b) { return a - b })
    console.log('sort后的 arr: ', arr)
    console.log('sort 的返回值: ', num)

6.3 return b - a

    var arr = [1, 2, 3, 500]
    var num = arr.sort(function (a, b) { return b - a })
    console.log('sort后的 arr: ', arr)
    console.log('sort 的返回值: ', num)
        
7.splice
    语法: 数组.splice(开始索引, 多少个);  数组.splice(开始索引, 多少个, 数据1, 数据2, 数据3...)
    作用: 
        不传参数: 剪切数组中的某一段数据
        传递参数: 剪切数组中的某一段数据, 将第三个参数开始, 当成新数据插入到数组内
    返回值: 截切后的数据(数组形式)

    7.1 不传参数

    var arr = [1, 2, 3, 500]
    var num = arr.splice(1, 3)
    console.log('splice 后的 arr: ', arr)
    console.log('splice 的 返回值: ', num)

    7.2 传递参数

    var arr = [1, 2, 3, 500]
    var num = arr.splice(1, 3, '数据1', '数据2', '数据3', '数据4')
    console.log('splice 后的 arr: ', arr)
    console.log('splice 的 返回值: ', num)
    var arr = [100, 1, 101, 3, 2, 102]
    下标     0   1   2   3  4   5
    console.log('原始数组: ', arr)

8.slice

    8.1 正常传参
    var arr = [1, 2, 3, 500]
    var num = arr.slice(1, 5)
    console.log('slice 后的 arr: ', arr)
    console.log('slice 的返回值: ', num)
    
    8.2 传递负数
    var arr = [1, 2, 3, 500]
    var num = arr.slice(1, -1)  // arr.length + (-1)    ---> 6 + (-1)   ---> 6 - 1 ---> 5
    console.log('slice 后的 arr: ', arr)
    console.log('slice 的返回值: ', num)

    8.3 不传结束索引     相当于写了 数组.length

    var arr = [1, 2, 3, 500]
    var num = arr.slice(2)
    console.log('slice 后的 arr: ', arr)
    console.log('slice 的返回值: ', num)

    8.4 一个参数都不传
        相当于复制整个数组, 或者只传递第一个参数为 0

    var arr = [1, 2, 3, 500]
    var num = arr.slice()
    console.log('slice 后的 arr: ', arr)
    console.log('slice 的返回值: ', num)

9.concat

    语法: 数组.concat(数据1, 数据2)
    作用: 将 参数, 合并到 指定数组内(如果参数写了数组, 那么会将数组的每一个值合并到指定数组)
    返回值: 合并后的数组
    var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4]
    var num = arr.concat(100, 200, 'QF', 'haha', [600, 700, 800])
    console.log('concat 后的 arr: ', arr)
    console.log('concat 的返回值: ', num)

10.join

    语法: 数组.join(连接符)
    参数可以不传, 不传递默认按照 , 逗号
    作用: 通过连接符连接数组的每一个值
    返回值: 连接好的字符串

    10.1 传递参数
    var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4]
    var num = arr.join('|')
    console.log('join 后的 arr: ', arr)
    console.log('join 的返回值: ', num)

    10.2 不传参数
    var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4]
    var num = arr.join()
    console.log('join 后的 arr: ', arr)
    console.log('join 的返回值: ', num)

11.indexOf

    语法: 数组.indexOf(数据);   数组.indexOf(数据, 开始索引)
    作用: 在数组内寻找指定数据
    返回值: 
        1. 找到数据的时候, 返回数据第一次出现的下标
        2. 找不到的时候, 返回 -1  
    var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4]  
    var num = arr.indexOf(4, 5)
    console.log('indexOf 后的 arr: ', arr)
    console.log('indexOf 的返回值: ', num)

12.lastIndexOf

    语法: 数组.lastIndexOf(数据);   数组.lastIndexOf(数据, 开始索引)
    作用: 在数组内寻找指定数据(倒叙寻找)
    返回值: 
        1. 找到数据的时候, 返回数据第一次出现的下标
        2. 找不到的时候, 返回 -1
    var arr = [1, 2, 300, 4, 5, 4, 4, 4, 4]  
    var num = arr.lastIndexOf(4, 4)
    console.log('lastIndexOf 后的 arr: ', arr)
    console.log('lastIndexOf 的返回值: ', num)

遍历数组

1. forEach

    语法: 数组.forEach(function(item, index, origin){})
    参数: 
        1. 数组实际每一项的值
        2. 数组每一项对应的下标
        3. 原数组
    作用: 遍历数组
    返回值:   返回值是 undefined  哪怕你手写了 return 也是 undefined

    var arr = [1, 2, 3, 4, 5]
    var num = arr.forEach(function(item, index, origin) {
    console.log(item, index, origin)
        return item
    })
    console.log(num)
    arr.forEach(function(item) {
        console.log(item)
    })

2. map

    语法: 数组.map(function (item, index, origin) {})
    参数: 
        1. 数组每一项实际的值
        2. 数组每一项实际的值对应的下标
        3. 原数组
    作用: 映射数组
    返回值: 返回一个和原数组长度一样的数组, 返回的数组的每一个值, 取决参数的return怎么写
    
    var arr = [1, 2, 3, 4, 5]
    var newArr = arr.map(function (item, index, origin) {
       console.log(item, index, origin)
       return item * 2
    })
    console.log('newArr ---> ', newArr)

3. filter

    语法: 数组.filter(function (item, index, origin) {})
    参数: 
        1. 数组每一项实际的值
        2. 数组每一项实际的值对应的下标
        3. 原数组
    作用: 过滤数组
    返回值: 过滤数组后的新数组, 过滤条件取决于 参数的 return 怎么写

    var arr = [1, 2, 3, 4, 5]
    arr.filter(function (item, index, origin) {
        console.log(item, index, origin)
    })
    var newArr = arr.filter(function (item, index, origin) {
        return item > 3
    })
    console.log(newArr)

4. find

    语法: 数组.find(function (item, index, origin) {})
    参数: 
        1. 数组每一项实际的值
        2. 数组每一项实际的值对应的下标
        3. 原数组
    作用: 查找数据
    返回值: 在数组内找到的第一个数据(不是数组)


    var arr = [1, 2, 3, 4, 5]
    arr.find(function (item, index, origin) {
        console.log(item, index, origin)
    })
    var num = arr.find(function (item, index, origin) {
        return item > 3
    })
    console.log(num)

5. findIndex

    语法: 数组.findIndex(function (item, index, origin) {})
    参数:
        1. 数组每一项实际的值
        2. 数组每一项实际的值对应的下标
        3. 原数组
    作用: 查找数据 第一次出现的 下标
    返回值: 在数组内找到的第一个数据出现的下标


    var arr = [1, 2, 3, 4, 5]
    arr.findIndex(function (item, index, origin) {
        console.log(item, index, origin)
    })
    var num = arr.findIndex(function (item, index, origin) {
        return item > 3
    })
    console.log(num)

6. every

    语法: 数组.every(function(item, index, origin){})
    参数:
        1. 数组第一项实际的值
        2. 数组第一项实际的值对应的下标
        3. 原数组
    作用: 判断数组内数据是否全都满足条件
    返回值: 一个布尔值
        true ---> 数组内数据全都符合条件
        false ---> 数组内起码有一个数据 不符合条件

    var arr = [1, 2, 3, 4, 5]
    arr.every(function (item, index, origin) {
       console.log(item, index, origin)
    })
    var num = arr.every(function (item, index, origin) {
        console.log(item, index, origin)
        return item > 0
    })
    console.log(num)

7. some

    语法: 数组.some(function (item, index, origin) {})
    参数:
        1. 数组每一项实际的值
        2. 数组每一项实际的值对应的下标
        3. 原数组
    作用: 判断数组内数据是否  有一项 满足条件的
    返回值: 一个布尔值
        true: 表示数组内至少有一项满足条件
        false: 数组内数据全都不满足条件

    var arr = [1, 2, 3, 4, 5]
    arr.some(function (item, index, origin) {
        console.log(item, index, origin)
    })
    var num = arr.some(function (item, index, origin) {
        return item > 300
    })
    console.log(num)

8. reduce

    语法: 数组.reduce(function (prve, item, index, origin) {}, init)
    reduce方法的参数: 
        1. 如果传递第二个参数 init, 执行次数和数组长度相同
        2. 如果不传递第二个参数 init, 默认第一值为数组第一项的值, 并且执行次数在数组长度上 减1
    参数的函数中4个形参的含义:
        1. 表示初始值或者数组第一项的值(具体是什么取决于是否传递 init)
        2. 数组每一项实际的值
        3. 数组每一项实际的值对应的下标
        4. 原数组
    作用: 累加(叠加)
    返回值: 循环运行结束后得到的值

    var arr = [1, 2, 3, 4, 5]
    arr.reduce(function (prve, item, index, origin) {
        console.log(prve, item, index, origin)
    })
    var num = arr.reduce(function (prve, item, index, origin) {
        console.log(prve)
        return prve + item
    }, 'init--->')
    <!-- 以下为累加 -->
    var num = arr.reduce(function (prve, item, index, origin) {
        return prve + item
    }, 0)
    console.log(num)
avatar
文章
阅读
粉丝