【笔记】JS的数组

前言

JS的数组（Array）学习笔记

通过字面量定义值

var arr = [值, 值];

通过包装类定义值

通过初始值定义数组

var arr = new Array(值, 值);

通过数组长度定义数组

var arr = new Array(1);

稀疏数组和密集数组

• 稀疏数组：指定了数组长度但值为空
• 密集数组：指定了数组长度且值设置为默认值

稀疏数组

1：定义的数组长度

var arr = new Array(1);

密集数组

1：定义的数组长度
0：填充的默认值

var arr = new Array(1).fill(0);

获取指定下标的数组元素

通过索引访问运算符（下标运算符）

var result = arr[0];

通过实例方法

• 如果传递负数，则从末尾向前获取元素

var result = arr.at(0);

修改数组的元素

arr[0] = 值;

新增数组的元素

通过索引访问运算符（下标运算符）

• 如果下标超出，则会自动进行新增元素操作
  • 如果下标远远超出，则中间超出部分元素会赋值为undefined

arr[arr.length] = 值;

删除数组的元素

• 为指定下标的元素赋值为undefined

delete arr[0];

从数组尾部新增和删除元素

新增元素

arr.push(值);

新增多个值

arr.push(值, 值);

删除元素

• 返回被删除的元素

var result = arr.pop();

从数组头部新增和删除元素

新增元素

arr.unshift(值);

新增多个值

arr.unshift(值, 值);

删除元素

• 返回被删除的元素

var result = arr.shift();

在任意位置新增删除替换元素

• splice()方法会修改原数组

1：开始操作的下标位置
2：删除元素的个数
值：新增的元素

arr.splice(1, 2, 值, 值);

新增元素

1：新增元素的位置
值：新增的元素

arr.splice(1, 0, 值, 值);

删除元素

1：删除元素的位置
2：删除元素的个数

arr.splice(1, 2);

替换元素

1：替换元素的位置
2：替换元素的个数
值：新增的元素

arr.splice(1, 2, 值, 值);

数组的扩容缩容

• 通过修改数组的长度，实现数组的扩容和缩容

arr.length = 0;

遍历数组的元素

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

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

展开数组中所有元素（ES6）

console.log(...arr);

遍历数组元素

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

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

• forEach()方法只能遍历密集数组

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

forEach定义this指向

var obj = {};

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

类方法

可迭代对象转数组（ES6）

var result = Array.from(可迭代对象);

判断对象是否是数组

var result = Array.isArray(对象);

实例方法

数组截取（切片）

从指定位置截取到指定位置

0：开始位置
1：结束位置（不包含）

var result = arr.slice(0, 1);

从指定位置截取到末尾

var result = arr.slice(0);

从开头截取到末尾

var result = arr.slice();

数组拼接

arr2 = []
arr3 = []

var result = arr.concat(arr2, arr3);

数组拼接为字符串

var result = arr.join("分隔符");

判断是否包含元素

var result = arr.includes(元素);

查找元素所在位置

从开始位置查找

• 返回第一次找到的下标，如果不存在返回-1

arr.indexOf(元素);

自定义查找元素位置（ES6）

• 回调函数返回true时，返回元素索引

var result = arr.findIndex(function (item, index, arr) {
  if (item === 元素) {
    return true
  }
});

自定义查找元素（ES6）

• 回调函数返回true时，返回元素本身

var result = arr.find(function (item, index, arr) {
  if (item === 元素) {
    return true
  }
});

自定义排序元素

• sort()方法会修改原数组

• 返回值<=0时，a和b的顺序不变；返回值>0时，a和b交换位置

正序

arr.sort(function (a, b) {
  return a - b;
});

倒序

arr.sort(function (a, b) {
  return b - a;
});

反转元素顺序

• reverse()方法会修改原数组

arr.reverse();

自定义过滤元素

• 遍历数组元素，把回调函数返回true的结果加入到新数组中，最终返回新数组

var result = arr.filter(function (item, index, arr) {
  return true;
});

自定义映射元素

• 遍历数组元素，将每一次遍历后调用回调函数得到的返回值加入到新数组中，最终返回新数组

var result = arr.map(function (item, index, arr) {
  return item;
})

自定义归并

• 遍历数组元素，将每一次遍历后调用回调函数返回的值求和，最终结果返回新数组
• 如果提供了初始值0，则从数组中第一个元素开始遍历
• 如果没有提供初始值0，则初始值为数组中第一个元素，从数组中第二个元素开始遍历

var result = arr.reduce(function (preValue, item) {
  return preValue;
}, 0);

完成