JavaScript数组

• 1. 数组的特点
• 2. 创建数组的几种方式：
• 3. 数组的length属性
• 4. 数组中的元素：
• 5. 检测数组
• 6. 对象中的方法
  • 6.1. (toString(),toLocaleString,valueOf()三个内置方法)，所有对象都具备的方法
  • 6.2. push和pop方法（栈方法，先进后出）
  • 6.3. shift()和unshift()方法（队列方法，先进先出）
  • 6.4. 结合shift和push可以向队列一样使用数组
  • 6.5. 两种排序方法：reverse(), sort()都返回排序之后的数组
  • 6.6. 操作方法
    • 6.6.1. concat创建一个新数组，并且在原来数组的基础上在末尾再追加N个元素
    • 6.6.2. slice()基于当前数组中的一或者多个项创建一个新的数组，原来的数组不变。它接收一个或两个参数，表示从开始位置到结束位置，但不包含结束位置的项
    • 6.6.3. splice的删除功能，可以删除任意数量的项。两个参数，开始位置和项数
    • 6.6.4. splice的插入功能。三个参数，起始位置，要删除的项数，要插入的项（可以为1-n项）
    • 6.6.5. splice的替换功能，就是将原来的元素删除，并新添加一个元素作为替换元素
  • 6.7. 位置方法：indexOf(), lastIndexOf()。接受两个参数，要查找的项和查找的起点。indexOf()表示从头开始查找，lastIndexOf()表示从数组末尾开始向前查找。返回要查找的项在数组中的位置，没找到返回-1，而且查找的项必须严格相等
  • 6.8. 迭代方法 ： every(),some(),fliter(),map(),forEach()，都不会改变原来的数组
  • 6.9. 归并方法reduce()和reduceRight()，迭代数组的所有项，然后构建一个最终的返回值

1. 数组的特点

1. 数组本身也是对象
2. 数组的每一项可以保存任何类型的值
3. 数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据

2. 创建数组的几种方式：

1. 声明一个空数组，属于object类型，这是构造函数方法创建
var box = new Array();
在使用构造函数时也可以省略new关键字
var box = Array();

// 2. 创建一个数组并给他分配好元素
var box = new Array('hello','world',123);

// 3. 创建数组，包含10个元素
var box = new Array(10);
console.log(box);   // [undefined × 10]

// 4. 使用字面量创建数组，并且分配元素
var box = [1,2,3,4,5];

// 5. 在ES6中，用Array.of()来创建
var box = Array.of(10);
console.log(box);   // [10]

注意 ： Array.of()不能使用new关键字

3. 数组的length属性

length属性不是只读的，还可以设置这个属性，从数组的末尾移除项或者向数组中添加新项

var box = [1,2];
alert(box.length);  //2

var box = [,,,,];       // 4
alert(box.length);

var box = [1,2,3,4,5];      
box.length = 10;
console.log(box);   // [1, 2, 3, 4, 5, undefined*5]

在数组的尾部添加新项
var box = [1,2];
box[box.length] = 3;
console.log(box);   // [1,2,3]
box[box.length] = 4;
console.log(box);   // [1,2,3,4]

4. 数组中的元素：

数组中可以添加任意类型的参数（对象，数组，一般的字符串，运算式，新建的数组等）

var box = [
    {
        name:'jewel',
        age:23
    },
    [3,4,5,'jewel',new Object()],
    '前端开发',
    1+2+3,
    new Array(1,2,3)
];
alert(box); //[object Object],3,4,5,jewel,[object Object],前端开发,6,1,2,3
alert(box[0].name); // jewel
alert(box[0]['age']);   // 23

5. 检测数组

`typeof`不能准确的判断到底是不是数组，返回object
`instanceof`操作符的问题是 ： 它假定只有一个全局执行环境。如果网页中包含多个框架，实际上就存在两个以上不同的全局执行环境，从而存在两个不同版本的Array构造函数。如果你从一个框架向另一个框架传入一个数组，传入的数组与第二个框架中原生创建的数组分别具有不同的构造函数。
`Array.isArray()`最终确定某个值到底是不是数组，而不管他是从哪个全局环境中创建的

var box = [1,2];
console.log(typeof box);    // object
console.log(box instanceof Array);  // true
console.log(Array.isArray(box));    // true
`Array.prtotype.constructor`是系统默认加上的

var arr = [1,2,3];
console.log(arr.constructor === Array); // true

6. 对象中的方法

6.1. (toString(),toLocaleString,valueOf()三个内置方法)，所有对象都具备的方法

var box = ['hello',23,'山东',new Date()];
console.log(box);   // ["hello", 23, "山东", Tue May 16 2017 20:11:47 GMT+0800 (中国标准时间)]
console.log(box.toString());    // hello,23,山东,Tue May 16 2017 20:11:47 GMT+0800 (中国标准时间)
console.log(box.toLocaleString());  // hello,23,山东,2017/5/16 下午8:11:47
console.log(box.valueOf()); // ["hello", 23, "山东", Tue May 16 2017 20:11:47 GMT+0800 (中国标准时间)]

6.2. push和pop方法（栈方法，先进后出）

push接受任意数量的参数，并把他们逐个添加到数组尾部，返回修改后数组的长度
pop()从数组末尾移除最后一项，减少数组的length值，然后返回移除的项

var box = ['jewel',23,'计算机'];
console.log(box);   // ["jewel", 23, "计算机"]
console.log(box.push('编程'));    //push返回添加元素之后的数组的长度，这里返回4
console.log(box);   // ["jewel", 23, "计算机", "编程"]
console.log(box.pop()); //移除最后一个元素并将他显示出来，这里返回编程
console.log(box);   // ["jewel", 23, "计算机"]

6.3. shift()和unshift()方法（队列方法，先进先出）

unshift()在数组的前端添加任意项并返回新数组的长度
shift()移除数组的第一个项并返回该项，同时将数组长度-1

var box = ['jewel',23,'计算机'];
console.log(box.shift());   // jewel
console.log(box);           // [23, "计算机"]，编程(在数组的开头去掉一个元素，并将这个元素返回出来)
console.log(box.unshift('hello'));  // 3, 将元素添加到数组中，并返回新数组的长度
console.log(box);   // ["hello", 23, "计算机"]

6.4. 结合shift和push可以向队列一样使用数组

var box = ['jewel',23,'计算机'];
console.log(box.push('编程'));    // 4
console.log(box);   // ["jewel", 23, "计算机", "编程"]
console.log(box.shift());   // jewel
console.log(box);   // [23, "计算机", "编程"]

6.5. 两种排序方法：reverse(), sort()都返回排序之后的数组

reverse()反转数组项的顺序
sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，即使每一项都是数值，比较的也是字符串

var box = [1,2,3,4,5,60];
box.reverse();
console.log(box);   // [60, 5, 4, 3, 2, 1]

用这个函数判断一下是很有必要的，他可以将数字也按照正确的方式进行运算

function compare(value1,value2){
    if(value1>value2){
        return 1;
    }else if(value1 == value2){
        return 0;
    }else{
        return -1;
    }
}

var box = [5,2,16,1,7,4];
console.log(box.sort());    // [1, 16, 2, 4, 5, 7]，这个是按照字符串来比较的
console.log(box.sort(compare)); // [1, 2, 4, 5, 7, 16]
console.log(box);       // [1, 2, 4, 5, 7, 16]

var box1 = ['h','e','l','o'];
console.log(box1.sort());   // ["e", "h", "l", "o"]
console.log(box1.sort(compare));    // ["e", "h", "l", "o"]

对于数值或者其valueOf()方法能返回数值类型的数据对象，可以用一个简单的函数

// 这个是降序
function compare(value1, value2){
    return value2-value1;
}
var box = [5,2,16,1,7,4];
console.log(box.sort());    // [1, 16, 2, 4, 5, 7]，这个是按照字符串来比较的
console.log(box.sort(compare)); // [16, 7, 5, 4, 2, 1]
console.log(box);       // [16, 7, 5, 4, 2, 1]

var box1 = ['h','e','l','o'];
console.log(box1.sort());   // ["e", "h", "l", "o"]
console.log(box1.sort(compare));    // ["e", "h", "l", "o"]

6.6. 操作方法

6.6.1. concat创建一个新数组，并且在原来数组的基础上在末尾再追加N个元素

var box = ['jewel',23,'计算机'];
var box2 = box.concat('编程',1);
console.log(box);   // ["jewel", 23, "计算机"]
console.log(box2);  // ["jewel", 23, "计算机", "编程", 1]

6.6.2. slice()基于当前数组中的一或者多个项创建一个新的数组，原来的数组不变。它接收一个或两个参数，表示从开始位置到结束位置，但不包含结束位置的项

var box = ['jewel',23,'计算机'];
var box2 = box.slice(1);    //至少传递一个参数，表示从第二个位置取到最后一个位置的新数组，原来的数组不变
console.log(box2);  // [23, "计算机"]

var box = ['jewel',23,'计算机',1,3,5,2];
var box2 = box.slice(2,4);      //返回原来数组从下标2到4的新数组
console.log(box2);  // ["计算机", 1]
console.log(box);   // ["jewel", 23, "计算机", 1, 3, 5, 2]

如果slice()中有负值，就用数组的长度+这个值再计算
var box3 = box.slice(-2,-1);
console.log(box3);  // 5

如果结束位置<起始位置，返回空数组
var box4 = box.slice(3,2);
console.log(box4);  // []

6.6.3. splice的删除功能，可以删除任意数量的项。两个参数，开始位置和项数

var box = ['jewel',23,'计算机',1,3,2];
var box2 = box.splice(1,3);         //从下标1的位置取3个组成一个新数组，slice()是取从开始到结束位置的元素组成新数组，原数组不变
console.log(box2);  // [23, "计算机", 1]
console.log(box);   // ["jewel", 3, 2] 原来的数组是删除刚取到的元素之后的元素组成的新数组

6.6.4. splice的插入功能。三个参数，起始位置，要删除的项数，要插入的项（可以为1-n项）

var box = ['jewel',23,'计算机',1,3,2];
var box2 = box.splice(2,0,'编程','技术');   //这里的1表示从下标2开始插入，0表示截取并删除的位数，后边的元素表示新添加的元素
console.log(box2);  //返回空数组[]
console.log(box);   //返回添加新元素之后的数组,["jewel", 23, "编程", "技术", "计算机", 1, 3, 2]

6.6.5. splice的替换功能，就是将原来的元素删除，并新添加一个元素作为替换元素

var box = [0,1,2,3,4,5,6];
var box2 = box.splice(1,2,'hello');
console.log(box2);  // [1, 2]，表示删除的元素组成的数组
console.log(box);   // [0, "hello", 3, 4, 5, 6]，返回删除，插入之后的新数组
var box = [];
box[1] = 'hello';           //如果是索引下标，会体现在数组中
box['name'] = 'jewel';      //如果是字符串下标，不会体现在数组中，而是用对象的属性的方法打印出来
box['age'] = 23;

console.log(box);   // [undefined × 1, "hello", name: "jewel", age: 23]
console.log(box.length);    // 2
console.log(box.name);  // jewel

6.7. 位置方法：indexOf(), lastIndexOf()。接受两个参数，要查找的项和查找的起点。indexOf()表示从头开始查找，lastIndexOf()表示从数组末尾开始向前查找。返回要查找的项在数组中的位置，没找到返回-1，而且查找的项必须严格相等

var box = [0,1,2,3,4,5,6,5,2,3,4,1];
console.log(box.indexOf(4));    // 4
console.log(box.lastIndexOf(4));// 10
console.log(box.indexOf(3));    // 3
console.log(box.lastIndexOf(3));// 9
console.log(box.indexOf(8));    // -1
console.log(box.indexOf('0'));  // -1

6.8. 迭代方法 ： every(),some(),fliter(),map(),forEach()，都不会改变原来的数组

var box = [0,1,2,3,4,5,6,5,2,3,4,1];
var everyResults = box.every(function(item, index, array){
    return item>2;
});
console.log(everyResults);  // false，数组每个元素执行后全部为真返回true

var someResults = box.some(function(item, index, array){
    return item>2;
})
console.log(someResults);   // true，数组中有一个及以上元素执行后为真就返回true

var filterResult = box.filter(function(item, index, array){
    return item>2;
});
console.log(filterResult);  // [3, 4, 5, 6, 5, 3, 4]，返回满足条件的元素组成的数组。对于查询符合某些条件的所有数组项非常有用

var mapResults = box.map(function(item, index, array){
    return item*2;
});
console.log(mapResults);    // [0, 2, 4, 6, 8, 10, 12, 10, 4, 6, 8, 2]，返回计算之后每一项组成的数组。map适合创建包含的项与另一个数组一一对应的数组

var forEachResults = box.forEach(function(item, index, array){
    // 一些操作。只对数组中的每一项运行传入的函数，没有返回值。本质上与使用for循环迭代数组一样，只是对for语法的简化。用来遍历数组，对象，字符串和类数组。这一功能的实现主要由于数组索引可以是字符串
});
console.log(forEachResults);

var a = ['a','b','c'];
a.forEach(function(element){
    console.log(element);   // a b c
})  

function logArrayElements(element, index, array){
    console.log('a[' + index + '] = ' + element);
}
[2,4,3,,9].forEach(logArrayElements);
a[0] = 2
a[1] = 4
a[2] = 3
a[4] = 9

function Counter(){ // 构造函数
    this.sum = 0;
    this.count = 0;
}
Counter.prototype.add = function(array){
    array.forEach(function(entry){
        this.sum += entry;
        ++this.count;
    }, this);
};
var obj = new Counter();
obj.add([2,3,5]);
console.log(obj.sum);   // 10
console.log(obj.count); // 3

6.9. 归并方法reduce()和reduceRight()，迭代数组的所有项，然后构建一个最终的返回值

reduce从前往后遍历
reduceRight从最后一项向前遍历

var box = [0,1,2,3,4,5,6,5,2,3,4,1];
var sum = box.reduce(function(pre, curr, index, array){
    return pre + curr;
});
console.log(sum);   // 36，第一次迭代发生在数组的第二项，pre是0，curr是1

var sum1 = box.reduceRight(function(pre, curr, index, array){
    return pre + curr;
});
console.log(sum1);  // 36，第一次迭代发生在数组的倒数第二项，pre是1，curr是4

区别 ： 除了从哪头开始遍历数组之外，完全一样