06-JS基础-数组

数组（Array）

数组是一个用来存储数据的对象，数组中的元素可以是任意数据类型。

• 创建数组

var arr = new Array(); // 创建空数组
var arr = new Array(5); // 创建长度为5的数组
var arr = new Array(元素1,元素2....元素N); // 创建指定元素数组
var arr = []; // 创建空数组
var arr = [元素1,元素2....元素N]; // 创建指定元素数组
console.log(typeof arr); // object

• 向数组中添加元素

语法: 数组对象[索引] = 值;

arr[0] = 123;
arr[1] = "hello";
console.log(arr); // [123, "hello"]

• 读取数组中的元素

var arr = [123, "hello"];
console.log(arr[1]); // hello
console.log(arr[2]); // undefined

如果读取不存在的索引，不会报错，返回undefined。

• 获取和修改数组的长度
  使用length属性来操作数组的长度。

语法：数组.length

var arr = [123, "hello"];
console.log(arr.length); // 2

var arr2 = new Array();
arr2[0] = 12;
arr2[3] = 9;
console.log(arr2.length); // 4
console.log(arr2[1]); // undefined

对于连续的数组，length获取到的就是数组中元素的个数；
对于非连续的数组，length获取到的就是数组的最大索引+1；

• 修改数组的长度

语法：数组.length = 新长度

如果修改后的length大于原长度，则多出的部分会空出来;
如果修改后的length小于原长度，则原数组中多出的元素会被删除;

• 向数组的最后添加元素

语法：数组[数组.length] = 值;

• 二维数组

var arr = [[1,2,3], [4,5,6], [7,8,9]];
console.log(arr);       // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
console.log(arr[0]);    // [1, 2, 3]
console.log(arr[0][1]); // 2

• 数组的方法

1. push()
   用来向数组的末尾添加一个或多个元素，并返回数组新的长度。

语法：数组.push(元素1,元素2,元素N)

var arr = ['a', 'b', 'c'];
arr.push('d');
console.log(arr); // ["a", "b", "c", "d"]
var lenght = arr.push('e', 'f');
console.log(arr); // ["a", "b", "c", "d", "e", "f"]
console.log(lenght); // 6

2. pop()
   用来删除数组的最后一个元素，并返回被删除的元素。

语法：数组.pop()

var arr = ['a', 'b', 'c'];
var last = arr.pop();
console.log(arr); // ["a", "b"] 
console.log(last); // c

3. unshift()
   向数组的前边添加一个或多个元素，并返回数组的新的长度。

语法：数组. unshift(元素1,元素2,元素N)

var arr = ['a', 'b', 'c'];
arr.unshift('r');
console.log(arr); // ["r", "a", "b", "c"]
var lenght = arr.unshift('q', 'w');
console.log(arr); // ["q", "w", "r", "a", "b", "c"]
console.log(lenght); // 6

4. shift()
   删除数组的前边的一个元素，并返回被删除的元素。

语法：数组. shift()

var arr = ['a', 'b', 'c'];
var first  = arr.shift();
console.log(arr); //  ["b", "c"]
console.log(first); // a

5. slice()
   可以从一个数组中截取指定的元素。
   该方法不会影响原数组，而是将截取到的内容封装为一个新的数组并返回。
   参数：
   1）截取开始位置的索引（包括开始位置）
   2）截取结束位置的索引（不包括结束位置）
   第二个参数可以省略不写，如果不写则一直截取到最后；
   参数可以传递一个负值，如果是负值，则从后往前数；

var arr = ['a', 'b', 'c', 'd'];
console.log(arr.slice(0,3)); // ["a", "b", "c"]
console.log(arr.slice(1)); // ["b", "c", "d"]
console.log(arr.slice(-2)); // ["c", "d"]
console.log(arr.slice(-3, 2)); // ["b"]
// 'd'对应负值下标-1，'c'对应负值下标-2，截取时往后面截取

6. splice()
   可以用来删除数组中指定元素，并使用新的元素替换。
   该方法会将删除的元素封装到新数组中返回。
   参数：
   1）删除开始位置的索引
   2）删除的个数
   3）第三个参数开始，都是替换的元素，这些元素将会插入到开始位置索引的前边

var arr = ['a', 'b', 'c', 'd'];
console.log(arr.splice(1, 2, 'e', 'f')); // ["b", "c"] 被删除的元素数组
console.log(arr); // ["e", "f", "c", "d"]
console.log(arr.splice(0, 2, 's')); // ["e", "f"]
console.log(arr); // ["s", "c", "d"]

7. concat()
   合并多个数组，该方法不会影响原数组，返回合并后新的数组。

var arr1 = ['唐僧', '孙悟空'];
var arr2 = ['猪八戒', '沙和尚', '白龙马'];
var arr3 = arr1.concat(arr2);
console.log(arr3); // ["唐僧", "孙悟空", "猪八戒", "沙和尚", "白龙马"]
var arr4 = ['白骨精'];
var arr6 = arr1.concat(arr2, arr4, '蜘蛛精');
console.log(arr6); // ["唐僧", "孙悟空", "猪八戒", "沙和尚", "白龙马", "白骨精", "蜘蛛精"]

8. join()
   将数组的所有元素组成一个字符串，该方法不会影响原数组，返回转换后的字符串。
   默认元素间的连接符为"," 可以在参数中指定连接符。

var arr = [1, 2, 'a'];
console.log(arr.join()); // 1,2,a
console.log(typeof arr.join()); // string
console.log(arr.join('-')); // 1-2-a

9. reverse()
   反转数组中元素的顺序，会直接修改原数组。

var arr = [1, 2, 'a'];
arr.reverse();
console.log(arr); // ["a", 2, 1]

10. sort()
    对数组中的元素进行排序，会影响原数组。
    默认按照Unicode编码排序，对纯数字数组排序会存在问题。

var arr = ['a', 'b', 'c'];
arr.sort();
console.log(arr); // ["a", "b", "c"]
var arr = [1,3,2,10];
arr.sort();
console.log(arr); // [1, 10, 2, 3]

数字数组排序：可以再sort()中添加回调函数，
浏览器会根据回调函数的返回值来决定元素的顺序，如果返回一个大于0的值，则元素会交换位置。

var arr = [1,3,2,10];
arr.sort(function (a, b) {
// 升序排列
    return a - b;
// 降序排列
//    return b - a;  
});

console.log(arr); // [1, 2, 3, 10]

11. call()

• 遍历数组

1. 使用for循环来遍历数组：

var arr = ['火之国', '风之国', '水之国', '雷之国', '土之国'];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

2. 使用forEach()方法来遍历数组（不兼容IE8及以下浏览器）
   forEach()方法需要一个回调函数作为参数，数组中有几个元素，回调函数就会被调用几次，每次调用时，都会将遍历到的信息以实参的形式传递进来，可以定义形参来获取这些信息。
   第一个参数: 正在遍历的元素
   第二个参数: 正在遍历元素的索引
   第三个参数: 被遍历对象

var arr = ['火之国', '风之国', '水之国', '雷之国', '土之国'];
arr.forEach(function (value, index, obj) {
    console.log('index = ' + index + ', value = ' + value);
});

• 数组去重

// 方法一
function unique(array) {
    var res = [];
    var json = {};
    for(var i = 0; i < array.length; i++){
        if(!json[array[i]]){
            res.push(array[i]);
            json[array[i]] = 1;
        }
    }
    return res;
}
console.log(this.unique(arr));

// 方法二
var arr = [1,2,3,2,2,4,1,5];
for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
        if (arr[i] == arr[j]){
            arr.splice(j,1);
            j--;
        }
    }
}
console.log(arr); // [1, 2, 3, 4, 5]