JavaScript语法引用数据类型之Array(数组)

一、数组

1、基本介绍
数组对象是一个有序的数据（数据可以是 原始类型 或 对象类型）集合。相对于变量，数组可用于在一个变量中存储多个变量值。
数组中的每一项都有一个数字附于其上，被称为索引。在JavaScript中，数组索引从0开始.

2、JavaScript中的数组形式如下：

var myArray = [1, 2, 3, 4];
var catNamesArray = ["Jacqueline", "Sophia", "Autumn"]; 
//Javascript中的数据可以处理不用类型的数据，如上。

3、语法：

        var arr = [element0, element1, ..., elementN];
        var arr = new Array(element0, element1[, ...[, elementN]])
        var arr = new Array(arrayLength)

参数说明：
elementN：
Array 构造器会根据给定的元素创建一个 JavaScript 数组，但是当仅有一个参数且为数字时除外（详见下面的 arrayLength 参数）。注意，后面这种情况仅适用于用 Array 构造器创建数组，而不适用于用方括号创建的数组字面量。
arrayLength：
一个范围在 0 到 232-1 之间的整数，此时将返回一个 length 的值等于 arrayLength 的数组对象（言外之意就是该数组此时并没有包含任何实际的元素，不能理所当然地认为它包含 arrayLength 个值为 undefined 的元素）。如果传入的参数不是有效值，则会抛出 RangeError 异常。

二、数组操作：

1、数组创建
数组有两种创建方式，构造函数和语法糖。

1）构造函数

    var arr3 = new Array(1,2,3);
        console.log(arr3);

        var arr4 = Array(1,2,3);
        console.log(arr4);

2）语法糖

        var arr=[1,2,3,"abc"];
        console.log(arr);

        var c = "damu";
        var arr2=[1,2,3,["a","b",c]];
        console.log(arr2);

2、访问数组元素

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

var arr = ['this is the first element', 'this is the second element', 'this is the last element'];
console.log(arr[0]);              // 打印 'this is the first element'
console.log(arr[1]);              // 打印 'this is the second element'
console.log(arr[arr.length - 1]); // 打印 'this is the last element'

3、遍历数组

var fruits = ['Apple', 'Banana'];
fruits.forEach(function (item, index, array) {
    console.log(item, index);
});
// Apple 0
// Banana 1

4、添加元素到数组的末尾

var newLength = fruits.push('Orange');
// newLength:3; fruits: ["Apple", "Banana", "Orange"]

5、删除数组末尾的元素

var last = fruits.pop(); // remove Orange (from the end)
// last: "Orange"; fruits: ["Apple", "Banana"];

6、删除数组最前面（头部）的元素

var first = fruits.shift(); // remove Apple from the front
// ["Banana"];

7、添加元素到数组的头部

var newLength = fruits.unshift('Strawberry') // add to the front
// ["Strawberry", "Banana"];

8、找出某个元素在数组中的索引

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]

var index = fruits.indexOf('Banana');
// 1

9、通过索引删除某个元素

var removedItem = fruits.splice(pos, 1); // this is how to remove an item

// ["Strawberry", "Mango"]

10、从一个索引位置删除多个元素

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
console.log(vegetables); 
// ["Cabbage", "Turnip", "Radish", "Carrot"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n);
// this is how to remove items, n defines the number of items to be removed,
// from that position(pos) onward to the end of array.

console.log(vegetables); 
// ["Cabbage", "Carrot"] (the original array is changed)

console.log(removedItems); 
// ["Turnip", "Radish"]

11、复制一个数组

var shallowCopy = fruits.slice(); // this is how to make a copy 
// ["Strawberry", "Mango"]

三、数组属性

length：length 是Array的实例属性。返回或设置一个数组中的元素个数。

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

    <script type="text/javascript">
        //length 是Array的实例属性。返回或设置一个数组中的元素个数
        var arr =["a","b","c"];
        console.log(arr.length,arr);

        arr.length = 4;
        console.log(arr.length,arr);
    </script>

四、数组方法

数组中方法有两类：静态方法和实例方法。
1、静态方法
Array.from()
从类数组对象或者可迭代对象中创建一个新的数组实例。
Array.isArray()
用来判断某个变量是否是一个数组对象。
Array.of()
根据一组参数来创建新的数组实例，支持任意的参数数量和类型。
2、实例方法
所有数组实例都会从 Array.prototype 继承属性和方法。修改 Array 的原型会影响到所有的数组实例.
实例方法详解见JavaScript语法引用数据类型之Array(数组)实例方法详解
3、 区别
主要区别是定义的位置不同。
Array.方法名：静态方法。
Array.prototype.方法名：实例方法.

五、数组去重（面试题）

1、sort+map
2、sort+reduce
3、代码实现：

<script type="text/javascript">
        //sort + map
        var arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
        function qucong(arr){
            var result = [];
            arr.sort().map(function(item){
                if(result.length===0 || result[result.length-1]!==item ){
                    result.push(item);
                }
            })
            return result;
        }
        console.log(qucong(arr));


        //sort + reduce
        var arr = ["展示","展示",2,1,2,3,5,4,5,3,4,4,4,4];
        var result = arr.sort().reduce(function(init, current){
            if(init.length===0 || init[init.length-1]!==current){
                init.push(current);
            }
            return init;
        }, []);
        console.log(result); //[1,2,3,4,5]

    </script>

六、使用细节和注意事项

1、数组中逗号问题：
从 ES5 规范开始就允许在列表（数组值、属性列表等）末尾多加一个逗号（在实际处理中会被忽略不计）。
所以如果你在代码或者调试控制台中输入 [ , , , ] ，实际得到的是 [ , , ] （包含三个空单元的数组）

<script type="text/javascript">
        /*
            从 ES5  规范开始就允许在列表（数组值、属性列表等）末尾多加一个逗号（在实际处理中会被忽略不计）。
            所以如果你在代码或者调试控制台中输入 [ , , , ] ，实际得到的是 [ , , ] （包含三个空单元的数组
        */
        console.log([ , , , ])
    </script>

测试结果：