JS：数组

1 数组

1.1 对象的分类

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 构造函数创建

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

console.log(arr1);

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

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 数组检测方法

console.log(arr instanceof Array);

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

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

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 添加/删除元素

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);