JavaScript内置对象 - Array数组（一）- 基础部分

        JavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高级对象；Array 对象中还提供了各种有关数组的属性和方法，该篇将列举了 Array 对象中提供的属性和方法。

        此次除了一些官方给的解释外，还将自我理解的部分、可延申拓展部分，以及示例方式给大家解说。

一、常用属性和方法

1.1 创建数组

// 中括号方式定义数组
const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
// 通过new实例对象方式创建数组
const countrys = new Array('中国', '俄国', '美国', '英国');
// 创建数组，并指定数组长度
const schools = new Array(5);
const peoples = [];			//创建空数组
// 通过属性指定数组长度
peoples.length = 3;
 
//输出结果
console.log(fruits.length);
console.log(countrys.length);
console.log(schools);
console.log(peoples);

输出结果如下：

> 5

> 4

> Array [undefined, undefined, undefined, undefined, undefined]

> Array [undefined, undefined, undefined]

1.2 通过索引获取元素

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
// 获取首位元素
console.log(fruits[0]);
// 获取末尾元素
console.log(fruits[fruits.length - 1]);

输出结果如下：

> Apple
> Plum

1.3 遍历元素

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
 
// 遍历数组
fruits.forEach(function (item, index, array) {
    console.log(item, index, array);
});

输出结果如下：

  元素   索引  原数组

> Apple 0 [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]
> Pear 1 [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]
> Orange 2 [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]
> Banana 3 [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]
> Plum 4 [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]

1.4 添加元素

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
 
// 添加元素，默认都是往末位追加元素
fruits.push('Chestnut');
 
console.log(fruits);

输出结果如下：

> [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum', 'Chestnut' ]

1.5 删除数组末位元素

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
 
// 删除数组末位元素
fruits.pop();
 
console.log(fruits);

输出结果如下：

> [ 'Apple', 'Pear', 'Orange', 'Banana' ]

1.6 删除数组首位元素

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
 
// 删除数组首位元素
fruits.shift();
 
console.log(fruits);

输出结果如下：

> [ 'Pear', 'Orange', 'Banana', 'Plum' ]

1.7 添加元素到首位

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
 
// 删除数组首位元素
fruits.unshift("Chestnut");
 
console.log(fruits);

输出结果如下：

> [ 'Chestnut', 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]

1.8 获取元素的索引

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
 
// 获取Orange的索引值
console.log(fruits.indexOf("Orange"));

输出结果如下：

> 2

1.9 通过索引删除某个元素

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
const countrys = new Array('中国', '俄国', '美国', '英国');
 
// 通过索引删除元素，这里删除 索引为1位置元素
fruits.splice(1, 1);        //第1个参数为索引值，第2个参数为删除元素数量
 
// 从指定索引位置删除2条
countrys.splice(1, 2); 
 
console.log(fruits);
console.log(countrys);

输出结果如下：

> [ 'Apple', 'Orange', 'Banana', 'Plum' ]
> [ '中国', '英国' ]

1.10 复制一个新数组

const fruits = ['Apple', 'Pear', 'Orange', 'Banana', 'Plum'];
// 复制一个新数组
const newFruits = fruits.slice();
 
console.log(fruits);
console.log(newFruits);

输出结果如下：

> [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]
> [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ]

二、Array对象中的属性

2.1 length属性

        length 是Array的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数，并且总是大于数组最高项的下标。

const fruits =  [ 'Apple', 'Pear', 'Orange', 'Banana', 'Plum' ];
 
// 获取数组长度
console.log(fruits.length);
 
//设置数组长度为2
fruits.length = 2;
// 修改数组长度后输出数组
console.log(fruits);

输出结果：

// 原数组长度

> 5

 

// 修改数组长度为2后，数组其他多余部分被截取，只保留前两位元素。
> [ 'Apple', 'Pear' ]