Js数组

96 阅读8分钟

数组数据类型

  • 什么是数组

    • 数组字面意思就是存放数字的一个组合, 但这么说太过于片面, 更完善的说法应该是 数组是存放一些数据的集合
    • 简单来说我们把数据放到一个盒子中, 这个盒子就是数组, 注意数字内的数据是有顺序的
var arr = [1, 2, 3, 'qwe', 'abc', true, false, undefined, null]
// 我们把一堆数据存放到一个盒子中, 这就叫做数组 对应我们上述的 数组是存放一些数据的集合

创建数组数据类型

  • 使用字面量的方式创建数组
// 创建一个空数组
var arr = [];
​
// 创建一个有内容的数组
var arr1 = [1, 2, 3]
  • 内置构造函数创建数组
// 创建一个空数组
var arr = new Array()
​
// 创建一个有长度的数组
var arr1 = new Array(10)
​
// 创建一个有内容的数组
var arr2 = nee Array(1, 2, 3)

数组的 length 属性

length 就是长度的意思, 代表数组内有多少个成员(数据)

var arr = [1, 2, 3]
console.log(arr.length)     // 3
​
​
var arr1 = [4, 5]
console.log(arr1.length)     // 2

数组的 索引 概念

  • 索引也叫做下标, 就是指一个数据在这个数组内排列在第几个位置上

    • 注意: 在所有的语言中, 索引(下标)都是从0开始的
var arr = ['hello', 'world']
// 在这个数组中, 第一个数据(元素)是 'hello', 那么它的下标就是 0, 后续的 'world', 下标为1
// 想要获取数组中某一个位置上的数据(元素), 可以直接 数组名[下标]
​
console.log(arr[0], arr[1])

for 循环遍历数组

遍历数组就是想办法拿到数组的每一个元素, 通常我们可以通过下标获取到元素的某一项, 所以我们只需要想办法拿到数组的所有下标即可

var arr = [1, 2, 3, 'qwe', 'abc', true, false, undefined, null]
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

数组基本操作案例

  • 冒泡排序
var arr = [9, 6, 3, 1, 4, 7, 8, 2, 5];
console.log('原始数组: ', arr)
for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
        }
    }
}
console.log('交换后的数组: ', arr)
  • 选择排序
var arr = [9, 6, 3, 1, 4, 7, 8, 2, 5];
console.log('原始数组: ', arr)
for (var j = 0; j < arr.length; j++) {
    // 1. 假定数组中的第 0 个是最小数字的索引
    var minIndex = j
    // 2. 遍历数组找到数组中最小的哪一项的下标将其替换之前记录的索引
    for (var i = j; i < arr.length; i++) {
        if (arr[i] < arr[minIndex]) {
            minIndex = i
        }
    }
    // 3. 遍历结束, 找到最小的索引, 将两个位置的数据对换
    var temp = arr[j]
    arr[j] = arr[minIndex]
    arr[minIndex] = temp
}
console.log('排序结束后: ', arr)

数组常用方法

  • push; pop; unshift; shift;

    • push

      • 语法: 数组名.push(数据)
      • 作用: 向数组末尾添加数据
      • 返回值: 追加数据后, 数组最新的长度
    • pop

      • 语法: 数组名.pop()
      • 作用: 删除数组最后一条数据
      • 返回值: 被删除的数据
    • unshift

      • 语法: 数组名.unshift(数据)
      • 作用: 向数组开头添加数据
      • 返回值: 添加数据后, 数组最新的长度
    • shift

      • 语法: 数组名.shift()
      • 作用: 删除数组第一条数据
      • 返回值: 被删除的数据
  • reverse; sort; splice; slice; concat; join; indexOf; lastIndexOf

    • reverse

      • 语法: 数组名.reverse()
      • 作用: 反转数组
      • 返回值: 反转后的数组
    • sort

      • 语法: 数组名.sort(); 数组名.sort((a, b) => a - b); 数组名.sort((a, b) => b - a)

        • 不传参数: 会将数据转换为字符串后, 一位一位的对比
        • 回调函数内进行 a - b, 那么会按照数字大小升序排序
        • 回调函数内进行 b - a, 那么会按照数字大小降序排序
      • 作用: 根据参数对数组数据实现排序

      • 返回值: 排序后的数组

    • splice

      • 语法: 数组名.splice(开始索引, 多少个); 数组名.splice(开始索引, 多少个, 插入数据1, 插入数据2, ...)
      • 作用: 截取数组部分内容, 并选择性插入内容
      • 返回值: 截取出来的部分内容组成的新数组
    • slice

      • 语法: 数组名.slice(开始索引, 结束索引)

      • 参数:

        • 包前不包后, 包含开始索引位置数据, 不包含结束索引位置数据
        • 不写开始索引, 默认是 0, 结束索引不写, 默认是 length
        • 可以填写负整数, 表示倒数第几个, 其实就是 length + 负整数
      • 作用: 截取数组部分内容

      • 返回值: 截取出来的部分内容组成的新数组

      • 与 splice 的差异

        • 参数含义不同
        • splice 会改变原数组, slice 不会
    • concat

      • 语法: 原始数组.concat(数组1, 数组2, 数据, ...)
      • 作用: 进行数据拼接, 把参数的所有数组或数据, 拼接在原始数组身上
      • 返回值: 拼接好的数组
    • join

      • 语法: 数组名.join('连接符')
      • 作用: 使用连接符, 把数组内的每一个数据连接成一个字符串(不写的话默认使用 逗号)
      • 返回值: 连接好的字符串
    • indexOf

      • 语法: 数组名.indexOf(要检查的数据); 数组名.indexOf(要检查的数据, 开始索引)
      • 作用: 从前到后检查该数据第一次在该数组内出现的索引位置
      • 返回值: 如果在数组内找到了该数据, 那么会返回该数据第一次出现的索引位置, 没找到返回 -1
    • lastIndexOf

      • 语法: 数组名.lastIndexOf(要检查的数据); 数组名.lastIndexOf(要检查的数据, 开始索引)
      • 作用: 从后向前检索该数据第一次在该数组内出现的位置
      • 返回值: 如果在数组内找到了该数据, 那么会返回该数据第一次出现的索引位置, 没找到返回 -1
  • forEach; map; filter; find; findIndex; every; some; reduce;

    • forEach

      • 语法: 数组.forEach(function (item, index, origin) {})

        • item: 数组的每一项
        • index: 数组的每一项对应的下标
        • origin: 原始数组
      • 作用: 遍历数组

      • 返回值: 没有(undefined)

      • 注意: 手写 return 也没用

    • map

      • 语法: 数组.map(function (item, index, origin) {})

        • item: 数组的每一项
        • index: 数组的每一项对应的下标
        • origin: 原始数组
      • 作用: 映射数组

      • 返回值: 和数组长度一样的数组, 只不过内部数据经过映射加工

      • 注意: 映射条件以 return 的形式书写

    • filter

      • 语法: 数组.filter(function (item, index, origin) {})

        • item: 数组的每一项
        • index: 数组的每一项对应的下标
        • origin: 原始数组
      • 作用: 过滤数组

      • 返回值: 返回一个新数组, 内部存储的是原始数组内过滤出来的部分数据

      • 注意: 过滤条件以 return 的形式书写

    • find

      • 语法: 数组.find(function (item, index, origin) {})

        • item: 数组的每一项
        • index: 数组的每一项对应的下标
        • origin: 原始数组
      • 作用: 在数组内查找满足条件的第一项

      • 返回值: 找到的数据

      • 注意: 查找条件以 return 的形式书写

    • findIndex

      • 语法: 数组.findIndex(function (item, index, origin) {})

        • item: 数组的每一项
        • index: 数组的每一项对应的下标
        • origin: 原始数组
      • 作用: 在数组内查找满足条件的第一项的下标

      • 返回值: 找到的数据

      • 注意: 查找条件以 return 的形式书写

    • every

      • 语法: 数组.every(function (item, index, origin) {})

        • item: 数组的每一项
        • index: 数组的每一项对应的下标
        • origin: 原始数组
      • 作用: 判断数组内是否每一个都满足条件

      • 返回值: 一个布尔值

      • 注意: 判断条件以 return 的形式书写

    • some

      • 语法: 数组.find(function (item, index, origin) {})

        • item: 数组的每一项
        • index: 数组的每一项对应的下标
        • origin: 原始数组
      • 作用: 判断数组内是否有一个符合条件的

      • 返回值: 一个布尔值

      • 注意: 判断条件以 return 的形式书写

    • reduce

      • 语法: 数组.reduce(function (prev, item, index, origin) {}, init)

        • prev: 表示初始值或者上一次的运算结果
        • item: 表示数组的每一项
        • index: 表示数组的每一项索引
        • origin: 原始数组
      • 作用: 用来实现叠加效果

      • 返回值: 最终叠加结果

      • 注意:

        • 叠加条件以 return 的形式书写
        • prev 的值, 如果你传递了 init, 就是 init 的值, 如果没有传递 init, 那么就是 数组[0] 的值
        • 如果传递了 init, 循环执行 length 次, 如果没有传递 init, 循环执行 length - 1 次

数据类型之间的区别

存储的区别

  • 基本数据类型存储在 栈内存中, 比如: string; number; undefined; null; boolean;

  • 复杂数据类型(引用数据类型)

    • 将数据本体存放在 堆内存中, 比如对象或者数组, 然后将指向该堆内存的地址, 存放在数组名或者对象名中
    • 数组名或者对象名存放在栈内存中

赋值的区别

  • 基本数据类型:赋值以后,两个变量没有关系了, 相当于将我自己的某一个东西, 复制一份给到你, 然后你的是你的, 我的是我的
  • 复杂数据类型:赋值以后,两个变量操作一个存储空间, 相当于我将我房间的钥匙复制给你一份, 你可以自由进出该房间或者对这个房间的布局做一些调整, 我也可以自由进出该房间并且也可以对这个房间的布局做调整
  • 两种数据类型存储的区别

    • 基础数据类型直接存储在 栈内存中
    • 复杂数据类型会将数据本体存在堆内存中,变量名存储在堆内存中,变量名内部存储着指向堆内存的地址

比较的区别

  • 基本数据类型是 的比较
var a = 1
var b = 2
​
console.log(a == b) // false, 因为两个变量的值是 12, 所以对比结果为 false
  • 复杂数据类型是 存储地址 的比较
var obj1 = {a: 1}
var obj2 = obj1
var obj3 = {a: 1}
console.log(obj1 === obj2) // 两个变量的存储地址相同, 所以为true
console.log(obj1 === obj3) // 两个变量的存储地址不相同, 所以为false

传参的区别

  • 基本数据类型: 将值拷贝一份传递给形参, 在函数内修改不会影响外界
  • 复杂数据类型: 将存储地址赋值给形参, 在函数内修改会影响外界