JavaScript笔记 03：数组

数组

数组的创建、读取、长度操作

// 创建数组对象
var arr = new Array();
console.log(typeof arr); // object
// 向数组中添加元素
arr[0] = 123;
arr[1] = "hello";
arr[2] = true;
// 尽量不要创建不连续的数组
// arr[6] = 31;
console.log(arr); // [123, "hello", true]
// 读取数组中的元素
console.log(arr[0]); // 123
console.log(arr[10]); // undefined
//获取数组的长度：可以获取到数组的最大索引+1，如果arr[6] = 31;那么此时长度应该是7
console.log(arr.length); // 3
// 修改数组的长度
// 如果修改的长度大于原长度，会将多余的部分空出来
arr.length = 10;
console.log(arr); // [123, "hello", true, empty × 7]
// 如果修改的长度小于原长度，会将多出来的元素删掉
arr.length = 2;
console.log(arr); // [123, "hello"]

数组的两种创建方式

// 使用字面量创建数组
var a1 = [123, "hello", true];
console.log(a1); // [ 123, "hello", true ]
// 使用构造函数创建数组
var a2 = new Array(123, "hello", true);
console.log(a2); // [ 123, "hello", true ]
// 当两种方式都传递一个参数时，字面量10是一个元素，构造函数10代表数组元素个数
var a3 = [10];
console.log(a3.length); // 1
var a4 = new Array(10);
console.log(a4.length); // 10

数组的常用方法

var a1 = ["简隋英", "顾青裴", "黎朔"];

// 向数组的末尾添加一个或多个元素，并返回新的长度
var l1 = a1.push("祁醉", "丁汉白");
console.log(a1); // [ "简隋英", "顾青裴", "黎朔", "祁醉", "丁汉白" ]
console.log(l1); //5

// 删除并返回数组的最后一个元素
var p1 = a1.pop();
console.log(a1); // [ "简隋英", "顾青裴", "黎朔", "祁醉" ]
console.log(p1); // 丁汉白

// 向数组的开头添加一个或多个元素，并返回新的长度
var l2 = a1.unshift("李玉", "原炀");
console.log(a1); // [ "李玉", "原炀", "简隋英", "顾青裴", "黎朔", "祁醉" ]
console.log(l2); // 6

// 删除并返回数组的第一个元素
var p2 = a1.shift();
console.log(a1); // [ "原炀", "简隋英", "顾青裴", "黎朔", "祁醉" ]
console.log(p2); // 李玉

数组的遍历

var a1 = ["简隋英", "顾青裴", "黎朔"];
// for 循环的方式遍历
for (let i = 0; i < a1.length; i++) {
  const element = a1[i];
  console.log(element);
}
/* 
forEach 
IE8以上的浏览器支持
需要一个函数作为参数，这种由我们创建但是不由我们调用的函数称为回调函数
浏览器会将遍历到的元素以实参的形式传递进来，我们可以定义形参来读取这些内容
*/
a1.forEach(function (value, index, arr) {
  console.log(value); // 第一个参数是当前正在遍历的元素
  console.log(index); // 第二个参数是当前正在遍历的元素的索引
  console.log(arr); // 第三个参数是当前正在遍历的数组
});

slice()方法

var a1 = ["简隋英", "顾青裴", "黎朔", "言逸", "沈兰舟"];
// 从某个已有的数组返回选定的元素，不改变原数组，返回一个新数组
var r1 = a1.slice(1, 3); // 左闭右开
console.log(r1); // [ "顾青裴", "黎朔" ]
var r2 = a1.slice(3); // 截取到最后
console.log(r2); // [ "言逸", "沈兰舟" ]
var r3 = a1.slice(1, -2); // 从后面开始计数，最后一个元素索引为-1
console.log(r3); // [ "顾青裴", "黎朔" ]

splice()方法

语法格式：splice(index, len, item1, ...)
  - index：数组开始下标
  - len：需要操作的长度
  - item：新的值

var a1 = ["简隋英", "顾青裴", "黎朔", "言逸", "沈兰舟"];
// 删除数组中的元素，会改变原数组，并将被删除的元素返回
var r1 = a1.splice(2, 3);
console.log(a1); // [ "简隋英", "顾青裴" ]
console.log(r1); // [ "黎朔", "言逸", "沈兰舟" ]

var a1 = ["简隋英", "顾青裴", "黎朔", "言逸", "沈兰舟"];
// 替换数组中的元素
var r1 = a1.splice(2, 3, "顾昀", "盛望");
console.log(a1); // [ "简隋英", "顾青裴", "顾昀", "盛望" ]
console.log(r1); // [ "黎朔", "言逸", "沈兰舟" ]

var a1 = ["简隋英", "顾青裴", "黎朔", "言逸", "沈兰舟"];
// 从指定位置开始新增元素
var r1 = a1.splice(2, 0, "顾昀", "盛望");
console.log(a1); // [ "简隋英", "顾青裴", "顾昀", "盛望", "黎朔", "言逸", "沈兰舟" ]
console.log(r1); // []

map方法

var arr = [1, 2, 3, 4, 5];
// 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，
// 不会改变原始数组
// 不会对空数组进行检测
var newArr = arr.map(function (currentValue, index, arr) {
  // 按照原始数组元素顺序依次处理元素
  return currentValue * 2;
});
newArr.forEach(function (value, index) {
  console.log(index, value);
});

数组去重

var a1 = [1, 2, 3, 2, 2, 1, 3, 4, 2, 5];
for (var i = 0; i < a1.length; i++) {
  for (j = i + 1; j < a1.length; j++) {
    if (a1[i] === a1[j]) {
      a1.splice(j, 1);
      j--; // 解决两个重复元素相邻的问题
    }
  }
}
console.log(a1); // [ 1, 2, 3, 4, 5 ]

数组的其他方法

var a1 = ["简隋英", "顾青裴", "黎朔"];
var a2 = ["洛羿", "李玉"];
var a3 = ["晏明修", "宋居寒"];
// 连接两个或多个数组，并将新的数组返回，不改变原数组
var r1 = a1.concat(a2, a3, "祁醉", "贺朝");
console.log(r1); // [ "简隋英", "顾青裴", "黎朔", "洛羿", "李玉", "晏明修", "宋居寒", "祁醉", "贺朝" ]
// 将数组转换为字符串，不改变原数组
var r2 = a1.join();
console.log(r2); // 简隋英,顾青裴,黎朔
var r3 = a1.join("***");
console.log(r3); // 简隋英***顾青裴***黎朔
// 反转数组，改变原数组
a1.reverse();
console.log(a1); // [ "黎朔", "顾青裴", "简隋英" ]
// 使用

数组的排序方法

var a2 = ["洛羿", "李玉"];
// 排序数组，按照unicode编码从小到大
a2.sort(); // 洛 \u6d1b 李 \u674e
// 对于纯数字的数组也会按照unicode编码来排序
console.log(a2); // [ "李玉", "洛羿" ]
var a4 = [1, 9, 5, 12];
a4.sort();
console.log(a4); // [ 1, 12, 5, 9 ]
/*
可以自行制定排序的规则
浏览器会根据回调函数的返回值来决定元素的顺序
  如果返回一个大于0的值，则元素会交换顺序
  如果返回一个小于0的值，则元素位置不变
  如果返回一个0，则认为两个元素相等，元素位置不变
*/
a4.sort(function (a, b) {
  // console.log(a + " " + b); // 1 12, 12 5, 5 9
  return a - b;
});
console.log(a4); // [ 1, 5, 9, 12 ]