JS：数组

1 数组

1.1 对象的分类

1. 自定义对象：通过五种方式创建的对象
2. 内建对象：JavaScript 内置的对象，可直接使用其属性和方法，如：
   Array、Boolean、Date、Math、Number、String、RegExp、Function、Events
3. 宿主对象：由运行环境（如浏览器）提供的对象，如window、document等

1.2 数组的概念

数组是存储有序数据的集合，每个数据称为元素，可存放任意类型数据。它是一种将多个数据存储在单一变量中的优雅方式。

数组是特殊对象，与普通对象区别在于：

• 普通对象使用字符串作为属性名
• 数组使用数字索引（从0开始的整数）
• 数组的存储性能通常优于普通对象

1.3 数组的创建方式

1.3.1 字面量创建（推荐）

let arr = [ "jack", 18, function() { console.log("hello") }, { name: "张三" }, [1, 2, 3, [1, 2, 3]] ]; arr[2](); console.log(arr[3].name); console.log(arr[4][3][2]);

1.3.2 构造函数创建

1. 创建空数组后赋值：

let arr1 = new Array(); arr1[0] = "jack"; arr1[1] = 18; arr1[2] = function() { console.log("hello") }; arr1[3] = { a: 1 }; console.log(arr1);

1. 直接填充内容：

var arr2 = new Array("hello", "你好", 8); console.log(arr2);

1. 设置初始长度：

var a1 = new Array(10); // 10个空位 var a2 = [10]; // 单元素10 console.log(a1, a2);

1.4 数组的基本操作

1.4.1 索引（下标）

访问数组元素的序号（从0开始）

1.4.2 读取元素

语法：数组名[索引]
读取不存在的索引返回undefined

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]; console.log(arr[0]); // "孙悟空" console.log(arr[999]); // undefined

1.4.3 修改元素

语法：数组[索引] = 值

arr[0] = "玉皇大帝";

1.4.4 获取长度

语法：数组.length

• 连续数组：元素个数
• 非连续数组：最大索引+1

console.log(arr.length);

1.4.5 修改length

arr.length = 2; // 截断数组 arr.length = 10; // 扩展空位

1.4.6 末尾添加元素

语法：数组[数组.length] = 值

arr[arr.length] = "玉皇大帝";

1.5 数组检测方法

1. instanceof

console.log(arr instanceof Array);

1. Array.isArray（推荐）

console.log(Array.isArray(arr));

1. Object.prototype.toString.call

console.log(Object.prototype.toString.call(arr)); // [object Array]

1. constructor（不推荐）

a.constructor = Object; console.log(a.constructor === Object); // 可能误判

1.6 数组遍历

1.6.1 for循环

for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }

1.6.2 优化for循环

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

1.6.3 for...in

for (let i in arr) { console.log(arr[i]); }

1.6.4 for...of

for (let item of arr) { console.log(item); }

1.6.5 forEach

arr.forEach(function(item, index, array) { console.log(item, index); });

1.6.6 map

let arr1 = arr.map(item => item + "!"); console.log(arr1);

1.7 冒泡排序

var arr = [1, 3, 6, 4, 5, 2, 10]; for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < arr.length - 1 - i; j++) { if (arr[j] > arr[j + 1]) { [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; } } } console.log(arr);

1.8 数组方法

1.8.1 添加/删除元素

方法	说明	返回值
push()	末尾添加	新长度
pop()	删除末尾	被删元素
unshift()	开头添加	新长度
shift()	删除开头	被删元素

var arr = ["孙悟空", "沙和尚", "猪八戒"]; arr.push("唐僧"); // 末尾添加 arr.unshift("玉皇大帝"); // 开头添加 let last = arr.pop(); // 删除末尾 let first = arr.shift(); // 删除开头

1.8.2 其他数组方法

• slice：提取数组片段

  let res = arr.slice(2, -2);

• indexOf/lastIndexOf/includes：查找元素

  console.log(arr.indexOf("green")); console.log(arr.includes("green"));

• concat/扩展运算符：合并数组

  console.log(a.concat(b, c)); console.log([...a, ...b, ...c]);

• join/toString：数组转字符串

  console.log(arr.join("%")); console.log(arr.toString());

• split：字符串转数组

  console.log(str.split(","));

修改原数组的方法

• splice：删除/替换元素

  arr.splice(2, 2, 3, 4, 5);

• reverse：反转数组

  arr.reverse(); console.log(arr);

自定义方法实现

• 反转原理封装：

  Array.prototype.newReverse = function () { for (let i = 0, j = this.length - 1; j > i; j--, i++) { let temp = this[i]; this[i] = this[j]; this[j] = temp; } return this; };

排序相关

• sort：

  // 数字排序 var arr5 = [5, 4, 5, 2, 1, 6, 8, 3]; arr5.sort((a, b) => a - b); // 升序 console.log(arr5); // 随机排序 arr5.sort(() => Math.random() - 0.5); console.log(arr5);

高阶函数

• filter：过滤元素

  var list = [32, 93, 77, 53, 38, 87]; var pass = list.filter(item => item >= 60); console.log(pass);

• reduce：数组累加

  var arr = [2, 3, 4, 5]; var sum = arr.reduce((prev, item) => prev + item, 0); console.log(sum);