js 取得数组下标_JavaScript 数组 详解

前言

在开发中，数组的使用非常多，会涉及很多的 api 的使用，但是除了几个最常用的 api 之外，其他的 api 用完之后经常就会忘掉了，再用的时候还要查一下。所以就希望系统的总结梳理一下这块内容，写下这篇文章，如果喜欢的话，可以 点赞/收藏，支持一下，希望看完会对大家有帮助。

---

本文篇幅较长，建议点赞保存再看，也便于日后翻阅。

---

创建数组

语法

[element1, element2, element3, ... , elementN]
new Array(element1, element2, element3, ... , elementN)
new Array(arrayLength)

例子：

let a = [1,2,3]
let b = new Array(4,5,6)
let c = new Array(3)

参数：

• elementN
  Array 构造器会根据给定的元素创建一个 JS 数组，但是当且仅当只有一个参数且是数字时除外（详见下面的 arrayLength 参数）。注意，后面这种情况，仅适用于 Array 构造器创建 数组， 不适用于用方括号创建的数组字面量。
• arrayLength
  给定一个范围在 0 - 2^32 - 1 的整数，此时将会返回一个 长度（length 的值）为 arrayLength 的数组对象。注意，此时该数组并没有包含任何 实际的元素，不能不能理所当然地认为它包含 arrayLength 个值为 undefined 的元素，如：上面例子的 c 值是：
  let c = new Array(3) // (3) [empty × 3]
  Object.keys(c) // []
  let d=[undefined, undefined, undefined]
  Object.keys(d) // (3) ["0", "1", "2"]
  // c 和 d 比较证明了上面的说法
  但是，如果对这个数组取值，值为 undefined, 这点需要注意：
  c[0] // undefined

数组的深度理解

数组是一种 类列表对象（JS 万物皆对象，数组也是一种特殊的对象，这一点要特别注意），它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型不是固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。

只能用整数作为数组元素的索引，而不能用字符串。使用非整数并通过方括号或点号来访问或设置数组元素时，所操作的并不是数组列表中的元素，而是数组对象的属性集合上的变量。数组对象的属性和数组元素列表是分开存储的，并且数组的遍历和修改操作也不能作用于这些命名属性。

访问数组元素

JavaScript 数组的索引是从0开始的，第一个元素的索引为0，最后一个元素的索引等于该数组的长度减1。如果指定的索引是一个无效值，JavaScript 数组并不会报错，而是会返回 undefined。

虽然数组元素可以看做是数组对象的属性，就像 toString 一样，但是下面的中间一行写法是错误的，运行时会抛出 SyntaxError 异常，而原因则是使用了非法的属性名；并不是 JavaScript 数组有什么特殊之处，而是因为在 JavaScript 中，以数字开头的属性不能用点号引用，必须用方括号。

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0);   // 语法错误 Uncaught SyntaxError: Unexpected number
console.log(years[0]);  // √

也可以将数组的索引用引号引起来，比如 years[2] 可以写成 years['2']。 years[2] 中的 2 会被 JavaScript 解释器通过调用 toString 隐式转换成字符串。正因为这样，'2' 和 '02' 在 years 中所引用的可能是不同位置上的元素。而下面这个例子也可能会打印 true：

console.log(years['2'] != years['02']);  // true
Object.keys(years)  // (7) ["0", "1", "2", "3", "4", "5", "6"] 说明了 JavaScript 解释器通过调用 `toString` 隐式转换成字符串

length 和数字下标之间的关系

JavaScript 数组的 length属性和其数字下标之间有着紧密的联系。数组内置的几个方法（例如 join、slice、indexOf等）都会考虑 length的值。另外还有一些方法（例如 push、splice等）还会改变 length的值。

var fruits = [];
fruits.push('banana', 'apple', 'peach');
​
console.log(fruits.length); // 3

使用一个合法的下标为数组元素赋值，并且该下标超出了当前数组的大小的时候，解释器会同时修改 length的值：

fruits[5] = 'mango';
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits));  // ['0', '1', '2', '5']  注意中间的 3，4 没有，说明是两个空值
console.log(fruits.length); // 6

也可以显式地给 length赋一个更大的值：

fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10

而为 length 赋一个更小的值则会删掉一部分元素：

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

属性

Array.length

Array 构造函数的 length 属性，其值为1（注意该属性为静态属性，不是数组实例的 length 属性）。

get Array[@@species]

返回 Array 构造函数。

Array[Symbol.species]
// ƒ Array() { [native code] }

Array.prototype

通过数组的原型对象可以为所有数组对象添加属性。

years[Symbol.unscopables]
// {copyWithin: true, entries: true,fill: true, find: true, findIndex: true, flat: true, flatMap: true, includes: true, keys: true, values: true}

方法

Array.isArray()

用来判断某个变量是否是一个数组对象。

Array.of()

根据一组参数来创建新的数组实例，支持任意的参数数量和类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]
​
Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

原生实现：

if (!Array.of) {
    
  Array.of = function() {
    
    return Array.prototype.slice.call(arguments);
  };
}

Array.from()

从类数组对象或者可迭代对象中创建一个新的数组实例

Array.from(arrayLike[, mapFn[, thisArg]])
// arrayLike: 想要转换成数组的伪数组对象或可迭代对象。
// mapFn 可选: 如果指定了该参数，新数组中的每个元素会执行该回调函数。
// thisArg 可选: 可选参数，执行回调函数 mapFn 时 this 对象。

Array.from() 可以通过以下方式来创建数组对象：

• 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）
• 可迭代对象（可以获取对象中的元素,如 Map和 Set 等）

Array.from() 方法有一个可选参数 mapFn，让你可以在最后生成的数组上再执行一次 map 方法后再返回。也就是说Array.from(obj, mapFn, thisArg)就相当于Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。

从 String 生成数组:

Array.from('foo');    // [ "f", "o", "o" ]

从 Set 生成数组:

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);   // [ "foo", "bar", "baz" ]

从 Map 生成数组:

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);   // [[1, 2], [2, 4], [4, 8]]
​
const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());   // ['a', 'b'];
​
Array.from(mapper.keys());   // ['1', '2'];

从类数组对象（arguments）生成数组:

function f() {
    
  return Array.from(arguments);
}
f(1, 2, 3);   // [ 1, 2, 3 ]

在 Array.from 中使用箭头函数:

Array.from([1, 2, 3], x => x + x);   // [2, 4, 6]
​
Array.from({
    length: 5}, (v, i) => i);   // [0, 1, 2, 3, 4]

生成器 (range):

const range = (start, stop, step) => Array.from({
     length: (stop - start) / step + 1}, (_, i) => start + (i * step));
​
range(0, 4, 1);   // [0, 1, 2, 3, 4] 
​
range(1, 10, 2);    // [1, 3, 5, 7, 9]
​
range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

数组去重合并：

function combine(){
     
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
    return Array.from(new Set(arr));
} 
​
var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n));                     // [1, 2, 3]

实例方法

---

一、改变原数组的方法（9个）

let a = [1,2,3]
ES5: a.push() / a.pop() / a.unshift() / a.shift() / a.splice() / a.reverse() / a.sort()
ES6: a.fill() / a.copyWithin()  // 这两个为实验性API

push() 向数组的末尾添加元素

定义：push() 方法可以向数组的末尾添加一个或多个元素，返回 添加元素后 数组的长度

参数：item1, item2, ... , itemX, 要添加到数组末尾的元素

let a = [1, 2, 3]
let item = a.push('末尾1', '末尾2')
console.log(a, item)   // [1, 2, 3, "末尾1", "末尾2"]  5

pop() 删除数组的最后一个元素

定义：pop() 方法 删除数组的最后一个元素，并返回这个元素

参数：无

let a = [1, 2, 3]
let item = a.pop()
console.log(a, item)   // [1, 2]  3

unsifrt() 向数组的开头添加元素

定义：unshift() 方法 向数组的开头添加一个 或 多个元素，返回 添加元素后 数组