JavaScript基础笔记碎片-数组

注意：本篇学习笔记基于原网站： JavaScript教程 - 廖雪峰的官方网站
笔记仅作学习留档使用

本篇目录

增 (Create）
删 (Delete）
改 (Update）
查 (Read）
多维数组

ps.其中的splice() 可以实现增删改，本篇在 增 (Create) 中介绍此函数

增 (Create)

向数组中添加新元素

//push()：末尾 添加若干元素
let arr = [1, 2];
arr.push('A', 'B'); // 返回新的长度 4
console.log(arr); // [1, 2, 'A', 'B']

//unshift()：开头 添加若干元素
let arr = [1, 2];
arr.unshift('A', 'B'); // 返回新的长度
console.log(arr); // ['A', 'B', 1, 2]

splice()可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素，会返回由被删除元素组成的数组，数组从1开始

let arr = ['Microsoft', 'Apple', 'Oracle'];
// 从索引2开始，不删除，添加'Google', 'Facebook'
arr.splice(2, 0, 'Google', 'Facebook');
console.log(arr); // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

// 从索引1开始删除1个元素,然后再添加两个元素
arr.splice(1, 1, 'Google', 'Facebook'); // 返回删除的数组 ['Apple']
console.log(arr); // ['Microsoft', 'Google', 'Facebook', 'Oracle']

// 从索引1开始，删除两个元素
arr.splice(1, 2); // ['Apple', 'Oracle']
console.log(arr); // ['Microsoft']

合并数组 concat() ，可以将当前数组与其他数组或值合并，返回一个新数组。

let arr = ['A', 'B', 'C'];
let newArr = arr.concat([1, 2, 3]);
console.log(newArr); // ['A', 'B', 'C', 1, 2, 3]
console.log(arr); // 原数组不变：['A', 'B', 'C']

删 (Delete)

从数组中移除元素。

//pop()：删除末尾
let arr = [1, 2, 'A', 'B'];
let last = arr.pop(); // 返回 'B'
console.log(arr); // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
console.log(arr); // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
console.log(arr); // []

//shift()：删除开头
let arr = ['A', 'B', 1, 2];
let first = arr.shift(); // 返回 'A'
console.log(arr); // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []

可以修改 length属性为更小的值，直接截断数组（不推荐）

let arr = ['A', 'B', 'C'];
arr.length = 2; // 直接修改数组大小
console.log(arr); // ['A', 'B']，元素'C'被丢弃

改 (Update)

修改数组中已有的元素或顺序。

//reverse()：将数组中元素的顺序完全反转。
let arr = ['one', 'two', 'three'];
arr.reverse();
console.log(arr); // ['three', 'two', 'one']

//sort()：对数组元素进行排序
//默认按字符串Unicode码点排序。对数字排序需传入自定义比较函数。
let arr = ['B', 'C', 'A'];
arr.sort();
console.log(arr); // ['A', 'B', 'C']

//concat()：接收任意个元素和数组，返回一个新的
let arr = ['A', 'B', 'C'];
let added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

join()可以将数组的每个元素都用指定的字符串连接起来，然后返回连接后的字符串；如果元素不是字符串，将自动转换为字符串后再连接。

let arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

也可以直接通过索引赋值，如果索引越界，会导致数组自动扩容，中间空位以 undefined填充。

// 正常修改
let arr = ['A', 'B', 'C'];
arr[1] = 99;
console.log(arr); // ['A', 99, 'C']

// 越界修改（不推荐）
arr[5] = 'X';
console.log(arr); // ['A', 99, 'C', undefined, undefined, 'X']

查 (Read)

获取数组的元素或信息，不改变数组。

let arr = ['A', 'B', 'C'];
//直接访问
//索引从0开始。访问不存在的索引返回 undefined，不会报错。
console.log(arr[0]); // 'A'
console.log(arr[5]); // undefined (索引越界)

//length获取数组长度
console.log(arr.length); // 3

//indexOf()：查找给定元素在数组中**第一次**出现的索引。
//找到则返回索引，未找到则返回 1。严格匹配数据类型。
let arr = [10, 20, '30', 'xyz'];
console.log(arr.indexOf(10)); // 0
console.log(arr.indexOf(30)); // -1 (数字30 ≠ 字符串'30')
console.log(arr.indexOf('30')); // 2

slice()可以截取数组的一部分，返回一个新数组。不传参时，可以用于快速复制整个数组。

let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
console.log(arr.slice(0, 3)); // ['A', 'B', 'C']
console.log(arr.slice(3)); // ['D', 'E', 'F', 'G']

let copy = arr.slice(); // 复制数组
console.log(copy); // 和arr内容一样的新数组
console.log(copy === arr); // false (是不同的数组对象)

多维数组

如果数组的某个元素又是一个数组

let arr = [[1, 2, 3], [400, 500, 600], '-'];
let x = arr[1][1];
console.log(x); // x为500

上述Array包含3个元素，其中头两个元素本身也是Array。