五、数组

数组是JS中的一个数据容器。它是引用类型之一。
它的作用非常简单，就是用来装多个数据。

5.1 定义数组

1. 字面量
2. 构造函数

字面量语法：

var arr = [成员1, 成员2, 成员3, ...];

构造函数语法：

var arr = new Array(成员1, 成员2, 成员3, ...)

小bug:当参数只有一个且参数的类型是数字时 会被当做数组的长度(也是定义一个数组长度)

5.2 数组的使用

数组是由 成员+下标组成的

假设已有数组: [‘张三’, ‘李四’, ‘王五’, ‘赵六’]

获取成员’张三’

var arr = ['张三', '李四', '王五', '赵六']
console.log(arr[0])

添加成员/修改成员

// 构造函数定义一个数组
var arr = new Array('张三', '李四', '王五', '赵六')
// 添加成员
arr[4] = '龚七'
console.log(arr)
// 修改成员
arr[2] = '王老五'
console.log(arr)

5.3 数组的属性length

数组有一个属性 length 表示数组有多少个成员

这个属性可读可写

var arr = [];
console.log(arr.length) // 读取length属性 
arr.length = 10; // 设置length属性
console.log(arr.length)

PS: length属性虽然可读可写但是我们一般只读

5.4 数组的方法

5.4.1 unshift

作用：头部增加

返回值：数组的新长度

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

5.4.2 shift

作用：删除数组的头部第一项

返回值：被删除的那一项

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.shift()
console.log(result); // 张三
console.log(arr) //  ['李四', '王五', '赵六'];

5.4.3 push

作用：尾部增加

返回值：数组的新长度

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.push('王二')
console.log(result); // 5
console.log(arr); // ["张三", "李四", "王五", "赵六", "王二"]

5.4.4 pop

作用：尾部删除

返回值：被删除的那一项

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.pop();
console.log(result); // 赵六
console.log(arr) // ["张三", "李四", "王五"

5.4.5 concat

作用：合并

参数：任意个、任意类型

返回值：一个新的合并后的数组

特点：不改变原来的数组

var arr = ['张三', '李四', '王五', '赵六'];
var arr1 = arr.concat(1, '你好', true, undefined, null, ["a", "b", "c"])
console.log(arr)
console.log(arr1)

5.4.6 slice

作用：截取

参数：

1. 没有参数 截取全部
2. 一个参数 从指定位置截取到最后
3. 两个参数 从指定开始位置截取到指定的结束位置
   1. 这两个参数都是下标
   2. 开始位置(包含)
   3. 结束位置(不包含)

特点：不改变原数组

没有参数
var arr = ['张三', '李四', '王五', '赵六'];
var arr1 = arr.slice();
console.log(arr1)  //  ["张三", "李四", "王五", "赵六"]
一个参数
var arr = ['张三', '李四', '王五', '赵六'];
var arr2 = arr.slice(1);
console.log(arr2) // ["李四", "王五", "赵六"]
两个参数
var arr = ['张三', '李四', '王五', '赵六'];
var arr3 = arr.slice(1, 3);
console.log(arr3) // ["李四", "王五"]

PS: 如果参数是负数 那么表示从后往前数 最后一个值是-1

5.4.7 splice

作用：用于操作数组成员

参数：

1. 操作位置
2. 删除个数
3. 从第三个参数开始是添加的成员

返回值：被删除的那些成员组成的数组

特点：会改变原数组

var arr = ['张三', '李四', '王五', '赵六'];
// 删除
var result = arr.splice(1, 2)
console.log(result); // ["李四", "王五"]
console.log(arr); // ["张三", "赵六"]   
// 插入
var arr = ['张三', '李四', '王五', '赵六'];
var  result = arr.splice(2, 0, '小绵羊');
console.log(result); // []
console.log(arr) // ["张三", "李四", "小绵羊", "王五", "赵六"]
// 替换
var arr =['张三', '李四', '王五', '赵六'];
var result = arr.splice(2, 2, '小绵羊', '大绵羊');
console.log(result); // ["王五", "赵六"]
console.log(arr) // ["张三", "李四", "小绵羊", "大绵羊"]

5.4.8 indexOf

作用： 查找

返回值：下标

参数：

1. 被查找的成员
2. 查找的开始位置(可选)

var arr =['张三', '李四', '王五', '赵六'];
var result = arr.indexOf('李四'， 2);
console.log(result); // -1
console.log(arr); // ['张三', '李四', '王五', '赵六']

5.4.9 join

作用：转字符串

返回值：字符串

参数： 拼接符号(可选)

var arr =['张三', '李四', '王五', '赵六'];
var str = arr.join();
console.log(str); // 张三,李四,王五,赵六
var str1 = arr.join('+');
console.log(str1); // 张三+李四+王五+赵六 
var str2 = arr.join('❤');
console.log(str2); // 张三❤李四❤王五❤赵六

5.4.10 reverse

作用：将数组的成员倒序

返回值：原数组

参数：无

特点：会改变原数组

var arr =['张三', '李四', '王五', '赵六'];
var arr1 = arr.reverse();
console.log(arr) // ["赵六", "王五", "李四", "张三"]
console.log(arr1) // ["赵六", "王五", "李四", "张三"]
console.log(arr === arr1) // true

5.4.11 sort

作用：将数组成员按照指定规则排序

返回值：原数组

参数：规则函数

特点：会改变原数组

//例一
var arr = [1, 44, 6, -7, 99, 145, 5555, 0]
var arr1 = arr.sort(function (a, b) {
  return a - b
})
console.log(arr) // [-7, 0, 1, 6, 44, 99, 145, 5555]
console.log(arr1) // [-7, 0, 1, 6, 44, 99, 145, 5555]
//例二
var arr = [15, 8, 25, 3];
arr.sort();
console.log(arr);//[15, 25, 3, 8]

5.5 交换两个变量的值

var a = 4;
var b = 5;
// 交换两个变量的值要借助第三个变量
var c = b;
b = a;
a = c;
console.log(a); // 5
console.log(b); // 4