跳到主要内容

09-JavaScript数组

江哥03-Js课程60~70节

数组就是专门用于存储一组数据的

  • 和我们前面学习的Number/String/Boolean/Null/undefined不同(基本数据类型)
  • 数组(Array)不是基本数据类型, 是引用数据类型(对象类型)

创建数组格式​

let 变量名称 = new Array(size); 变量名称[索引号] = 需要存储的数据;

let arr = new Array(3);
arr[0] = "lnj";
arr[1] = "zs";

获取数据的格式​

变量名称[索引号];

数组的特点​

Js数组与其他编程语言不同点​

  1. 数组对应的索引中没有存储数据, 默认存储的就是undefined
  2. JavaScript中访问了数组中不存在的索引不会报错, 会返回undefined
  3. 当JavaScript中数组的存储空间不够时数组会自动扩容
  4. JavaScript的数组可以存储不同类型数据（包括字符串、数值、布尔值等）
  5. JavaScript中数组分配的存储空间不一定是连续的
    • JavaScript数组是采用"哈希映射"方式分配存储空间，通过索引找到对应空间
    • 由于数据不是连续的存储空间，在浏览器中各大浏览器也对数组存储空间进行优化
    • 注意点：如果存储的都是相同类型的数据, 尽量分配连续的存储空间，否则反之

创建数组的其它方式​

  1. 通过构造函数创建数组
    • let 变量名称 = new Array(size); 创建一个指定大小数组
    • let 变量名称 = new Array(); 创建一个空数组
    • let 变量名称 = new Array(data1, data2, ...); 创建一个带数据的数
  2. 通过字面量创建数组
    • let 变量名称 = []; 创建一个空数组
    • let 变量名称 = [data1, data2, ...]; 创建一个空数组

数组的遍历​

数组的遍历就是依次取出数组中存储的所有数据, 我们就称之为数组的遍历

let arr = ["a", "b", "c"];
for(let i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

数组解构赋值​

  1. 解构赋值是ES6中新增的一种赋值方式
  2. 数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构
    • let [a, b, c] = [1, 3, 5] let [a, b, [c, d]] = [1, 3, [2, 4]]
    • 若然变量多于数值个数，多出的变量会被定义为undefined. 数值多于变量，数值会被忽略
    • 解决被定义为undefined的问题，可以给数组结构中添加变量默认值let [a, b = 666, c = 888] = [1];
  3. 同样可以使用ES6中新增的扩展运算符来打包剩余的数据
    • let [a, ...b] = [1, 3, 5];
    • ⚠️注意使用了扩展运算符, 那么扩展运算符只能写在最后，放前面会覆盖掉

数组使用方法​

数组增删改查​

清空数组​

常用有三种方式

  1. arr = []
  2. arr.length = 0
  3. arr.splice = [0,arr.length]

将数组转换成字符串​

let str = arr.toString();

将数组转换成指定格式字符串​

  • join方法默认情况下如果没有传递参数, 就是调用toString();
  • join方法如果传递了参数, 就会将传递的参数作为元素和元素的连接符号
let str =  arr.join("+");
console.log(str);
console.log(typeof str);  // 添加了‘+’号会将转换为字符串串起来 [1+2+3+4]

将两个数组拼接为一个数组​

不能使用相加，结果等于1,2,34,5,6 // string 如果使用加号进行拼接会先转换成字符串再进行合拼

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

可使用数组1.concat(数组2);

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let res = arr1.concat(arr2);

可使用扩展运算符

  • 扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组
  • 扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置
  • 这种方法，也不会修改原有的数组, 会生成一个新的数组返回
let res = [...arr1, ...arr2];

对数组中的内容进行反转​

  • 注意: 会修改原有的数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = arr1.reverse();
console.log(typeof res);
console.log(arr1,arr2,arr3);  // 这种方法会修改原有arr1的结果，修改后arr1数组和数组arr3一样

截取数组中指定范围内容​

  • slice方法是包头不包尾(包含起始位置, 不包含结束的位置)
let arr = [1, 2, 3, 4, 5];
let res = arr.slice(1, 3);
console.log(res);  // res = [2,3]
console.log(arr);  // 不更换原有数据

如何查找元素在数组中的位置​

indexOf()方法如果找到了指定的元素, 返回元素对应的位置 indexOf()方法如果没有找到指定的元素, 就会返回-1

let arr = [1, 2, 3, 4, 5, 3];
let res = arr.indexOf(3);   // 返回值 2
let res = arr.indexOf(6);   // 返回值 6
let res = arr.indexOf(3, 4);  // 返回值 5

⚠️注意indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找

indexOf(参数1,参数2) 参数1: 需要查找的元素 参数2: 从什么位置开始查找

lastIndexOf()方法默认是从右至左的查找

let arr = [1, 2, 3, 4, 5, 3];
let res = arr.lastIndexOf(3, 4);
console.log(res);   // 返回值 2

判断数组中是否包含某个元素​

let res = arr.includes(4);
console.log(res);   // 返回结果为布尔值

查找数组位置用indexOf()，是否包含某个元素用includes()

数组的函数应用​

MDN官方解析

Array.prototype.reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

描述​

reduce为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

  • accumulator 累计器
  • currentValue 当前值
  • currentIndex 当前索引
  • array 数组

二维数组​

二维数组就是数组的每一个元素一个数组, 我们就称之为二维数组

let arr = [1, 3, 5]; // 一维数组
let arr = [[1, 3], [2, 4]]; // 二维数组

定义二位数组​

let arr = [[],[]];
let arr = [[1, 3], [2, 4]];

遍历二位数组​

let arr = [[1, 3], [2, 4]];
for(let i = 0; i < arr.length; i++){
    let subArray = arr[i];
    // console.log(subArray);  // 输出数组
    for(let j = 0; j < subArray.length; j++){
        console.log(subArray[j]);  // 嵌套多一条循环，输出二维数组的所有数值
    }
}