js之数组

6、数组

前面我们讨论了简单数据类型，现在开始讨论复杂数据类型，就拿数组先来开刀吧

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素，包括数字、字符串、对象等等。

数组是一种将一组数据存储在单个变量名下的优雅方式，本质上也是一种内置对象

基于数组的特性，其在内存中的存储是连续存储的。就是说在内存中必须是由连续的空间来存储这些数组元素的

6.1 创建数组

js中数组有两种创建方式：

1. 利用new创建数组
2. 利用数组字面量创建数组

**1、new**创建数组

// 创建一个新的空数组
var arr = new Array();
console.log(arr);  // []

// 创建一个包含3个元素的数组
var arr = new Array(3);
console.log(arr);  // [ <3 empty items> ]

// 创建一个只包含一个元素
var arr = new Array('cyf');
console.log(arr);  // ['cyf']

2、数组字面量创建数组

什么是字面量？

字面量：就是一看到这个你就知道它是什么类型，1这个是数字型、1.00这是浮点型、true这是布尔型、‘cyf’这是字符串

[ ] 是数组

// 利用数组字面量创建数组
var arr = [1,2,'cyf', true]
console.log(arr);  // [1,2,'老林', true]

• 数组的字面量是方括号 [ ]
• 声明数组并赋值称之为数组的初始化

6.2 获取、遍历数组

1、获取数组

数组的特征就是可以利用索引来访问，索引就是数组的下标，从0开始

我们可以通过索引来访问、设置、修改对应的数组元素

var arr = [1, 2, '老林', true]
console.log(arr[2]);  // 老林

如果索引超出范围，即没有这个数组元素，输出的结果是 undefined

2、遍数数组

使用 数组名.length 可以访问数组元素的数量（数组的长度），这个也是我们以后都会经常用的

var arr = [1, 2, 3, 4, 5]
console.log(arr.length);  // 5

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

6.3 数组新增元素

1、通过修改 length 长度新增数组元素利用

• 可以通过修改 length 长度来实现数组扩容的目的
• length 属性是可读的

var arr = ['red', 'blue', 'green'];
// 将数组长度修改为5
arr.length = 5;
console.log(arr); // ["red", "blue", "green", empty × 2]

// 由于增加了数组的长度，但是没有赋值，所以默认是undefined
console.log(arr[3]); // undefined

// 这时我们可以通过索引为数组赋值
arr[3] = 'pink';
arr[4] = 'yellow';
console.log(['red', 'blue', 'green', 'pink', 'yellow']);

2、通过修改数组索引

由于数组的索引是从0开始，所以数组最后一个元素的索引是 数组长度 - 1，我们往数组中新增元素可以利用 .length，通过修改数组索引的方式追加元素

arr[arr.length] = 'pink'
console.log(arr);  // ['red', 'blue', 'green', 'pink']

// 通过索引我们也可以修改元素
arr[0] = 'yellow';
console.log(arr);  // ['yellow', 'blue', 'green', 'pink']

注意：不要直接给数组赋值，否则里面的元素都会被覆盖，数组变成单一变量

var arr = ['red', 'blue', 'green'];
arr = '老林';  
console.log(arr);  // 老林

3、通过push()新增数据数组元素

push 方法接收任意数量的参数，并将它们添加到数组的末尾，返回数组的最新长度

var arr = new Array('老二');
var count = arr.push('张三', '李四');
console.log(count);  // 3
console.log(arr);  // ["老二", "张三", "李四"]

push 方法类似于 栈，先进后出，总是在尾部操作

4、通过unshift()新增元素

unshift 方法接收任意数量的参数，并将它们添加到数组的头部，返回数组的最新长度

var arr = new Array('老二');
var count = arr.unshift('张三', '李四');
console.log(count);  // 3
console.log(arr);  // ["张三", "李四", "老二"]

6.4 数组中删除元素

1、利用 length

var arr = ["老二", "张三", "李四"];
arr.length = 2;
console.log(arr);  // ["老二", "张三"]

• length 设置为2，就是将数组的长度设置为2，即删除了最后一个

2、栈的特性：pop方法

pop 方法是删除数组最后一项，同时减少数组的length值，返回被删除的项

var arr = ["老二", "张三", "李四"];
console.log(arr.pop()) // 李四
console.log(arr); // [ '老二', '张三' ]

类似栈操作，对最后进去的值进行操作

3、队列的特性：shift方法

shift方法是删除数组的第一项，并返回它，同时数组的长度减1

var arr = ["老二", "张三", "李四"];
console.log(arr.shift());  // 老二
console.log(arr); // [ '张三', '李四' ]

类似队列，对最先进去的值进行操作

4、splice方法：添加/删除元素

splice 可以在任意位置上删除或者添加元素

arr.splice(index, [num], [value])

• index：指定开始删除/添加的下标（包括该下标）
• num：删除/添加的个数（可选）
• value：要添加的元素，可以添加多个（可选）

var arr = ["老二", "张三", "李四"];
arr.splice(1, 1, '王五', '六六');
console.log(arr);  // [ '老二', '王五', '六六', '李四' ]

• 从索引为1的位置开始，删除一个元素，并在该索引位置上的添加 王五、六六

5、devare 运算符

devare 删除数组元素最大的特点是：元素删除后，数组的length属性并没有变化

赶你走，但是位置给你留着

var arr = ["老二", "张三", "李四"];
devare arr[0]

console.log(arr.length);  // 3
console.log(arr);  // [ <1 empty item>, '张三', '李四' ]

devare在数组上用得少，主要用于对象删除键值对

6.5 数组索引方法

方法名	说明	返回值
indexOf()	数组查找给定元素的第一个索引	如果存在则返回索引号，否则返回-1
lastindexOf()	数组中最后一个元素的索引	如果存在则返回索引号，否则返回-1

var arr = ["老二", "张三", "李四", "张三"];
var firstIndex = arr.indexOf("张三")
var lastIndex = arr.lastIndexOf("张三")

console.log(firstIndex); // 1
console.log(lastIndex);  // 3

• 该属性可以用于判断数组中是否存在元素

---

案例：可用于数组去重

let arr = [1, 2, 3, 2, 3, 4, 5, 4];
let newArr = []
for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
    }
}
console.log(newArr);  // [ 1, 2, 3, 4, 5 ]

---

6.6 数组转换为字符串

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	字符串
join('分隔符')	该方法用于把数组中的所有元素转换为一个字符串	字符串

// toString()
var arr = ["老二", "张三", "李四"];
var str = arr.toString()
console.log(str);  // 老二,张三,李四
console.log(str.length);  // 8

• toString()：转换成字符串，包括逗号，都是字符串

// join()
var arr = ["老二", "张三", "李四"];
var str = arr.join('')
console.log(str);  // 老二张三李四
console.log(str.length);  // 6

6.7 其它操作

方法名	说明	返回值
slice()	数组截取，slice(begin, end)	返回被截取元素的新数组

var arr = ["老二", "张三", "李四"];
var newArr = arr.slice(1, 2)
console.log(newArr); // ['张三']
console.log(arr);  // ["老二", "张三", "李四"]

注意：包含begin，但不包含end