Javascript 数组系列一

/**
* Array 数组学习
* 在程序语言中数组的重要性不言而喻，JavaScript中数组也是最常使用的对象之一，
* 数组是值的有序集合，由于弱类型的原因，JavaScript中数组十分灵活、强大，
* 不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素，
* JavaScript在同一个数组中可以存放多种类型的元素，而且是长度也是可以动态调整的，
* 可以随着数据增加或减少自动对数组长度做更改。
*/

/**
* 创建数组
*/

构造函数
1. 无参数构造函数，创建一空数组

var arr1 = new Array();

1. 一个数字参数构造函数，指定数组长度(由于数组长度可以动态调整，作用并不大)，创建指定长度的数组

var arr2 = new Array(2); // arr2.length = 0;

1. 带有初始化数据的构造函数，创建数组并初始化参数数据

var arr3 = new Array(3, 'hello', new Date()); // arr3.length = 3;

字面量
1. 使用方括号，创建空数组，等同于调用无参数构造函数

var arr4 = []; // arr4.length = 0;

1. 使用方括号，并传入初始化数据，等同于调用带有初始化数据的构造函数

var arr5 = [10]; // arr5.length = 1;

注意点
1. 在使用构造函数创建数组时如果传入了一个数字参数，则会创建一个长度为参数的数组，
如果传入多个，则创建一个数组，参数作为初始数据加到数组中。

var arr1 = new Array(5); 
console.log(arr1.length); // 5;
console.log(arr1); // [] 空数组

var arr2 = new Array(5,6);
console.log(arr2.length); //2;
console.log(arr2); // [5,6];

使用字面量方式，无论传入几个参数，都会把参数当作初始化内容

var arr2 = [5];
console.log(arr2.length); // 1;
console.log(arr2); // [5];

var arr3 = [5,6];
console.log(arr3.length); //2;
console.log(arr3); // [5,6];

1. 使用带初始化参数的方式创建数组的时候,最好最后不要多余的’,’，在不同的浏览器下对此处理方式不一样

var arr4 = [1,2,3,];
console.log(arr4.length);
console.log(arr4);

这段脚本在现代浏览器上运行结果和我们设想的一样，长度为3，但在低版本的ie下面是长度为4的数组，最后一条数据为undefined

数组的索引与长度

数组的值可以通过自然数索引访问进行读写操作，下标也可以是一个得出非负整数的变量或表达式

var arr1 = [1,2,3,4];
console.log(arr1[1]); // 1;
var i = 2;
console.log(arr1[i]); // 3;
console.log(arr1[++i]); // 4;

数组也是对象，我们可以使用索引的奥秘在于，数组会把索引值转换为对应字符串（1=>”1”）作为对象属性名

console.log(1 in arr1); // true

索引特殊性在于数组会自动更新length属性，当然因为JavaScript语法规定数字不能作为变量名，
所以我们不能显示使用array.1这样的格式。由此可见其实负数，
甚至非数字”索引“都是允许的，只不过这些会变成数组的属性，而不是索引

var arr = new Array(1,2,3);
arr[-10] = 'arr[-10]'; // [1, 2, 3, -10: "arr[-10]"]

这样我们可以看出所有的索引都是属性名，但只有自然数（有最大值）才是索引，
一般我们在使用数组的时候不会出现数组越界错误也正是因为此，数组的索引可以不是连续的，
访问index不存在的元素的时候返回undefined

var arr = new Array(1,2,3);
arr[100] = 100;
console.log(arr.length); // 101
console.log(arr[3]); // undefined;
console.log(arr[99]); // undefined;
console.log(a[100]); // 100; [1, 2, 3, empty × 97, 100]

上面的例子中，虽然直接对a[100]赋值不会影响a[4]或a[99],但数组的长度却受到影响，数组length属性等于数组中最大的index+1，
我们知道数组的length属性同样是个可写的属性，当强制把数组的length属性值设置为小于等于最大index值时，
数组会自动删除indexd大于等于length的数据，在刚才代码中追加几句

arr.length = 2;
console.log(arr); // [1,2];

这时候会发现a[2]和a[100]被自动删除了，同理，如果把length设置为大于最大index+1的值的时候，
这里写代码片 数组也会自动扩张，但是不会为数组添加新元素，只是在尾部追加空空间

arr.length = 5;
console.log(arr); // [1,2] // 后面没有3个undefined，只展示[1,2] 但长度却为5

元素添加/删除

push() 方法将一个或多个元素添加到数组的末尾，并返回新的长度并改变数组

var num = [1,2,3];
num.push(4);
console.log(num); // [1,2,3,4];
num.push(5,6,7); // [1,2,3,4,5,6,7];

合并两个数组

var arr1 = ['a', 'b'];
var arr2 = ['c', 'd'];

[].push.apply(arr1, arr2); // 4 
也可以Array.prototype.push.apply
console.log(arr1);// ['a', 'b', 'c', 'd'];

像数组一样使用对象

push 是特意设计为通用的，我们可以使用它来获得便利。正如下面的例子所示，Array.prototype.push 可以在一个对象上工作。
注意，我们没有创建一个数组来存储对象的集合。 相反，我们将该集合存储在对象本身上， 并使用在 Array.prototype.push 上使用的 call 来调用该方法，使其认为我们正在处理数组，
而它只是像平常一样运作，这要感谢 JavaScript 允许我们建立任意的执行上下文。

var obj = {
  length: 0,
  addElem: function (elem) {
    [].push.call(this, elem);
  }
};

obj.addElem({});
obj.addElem({});

console.log(obj.length); // 2;

注意，尽管 obj 不是数组，但是 push 方法成功地使 obj 的 length 属性增长了，就像我们处理一个实际的数组一样。

// push polyfill

if (!Array.prototype.push) {
  Array.prototype.push = function () {
    for (var i = 0, len = arguments.length; i < len; i++) {
      this[this.length] = arguments[i];
      if (Object.prototype.toString.call(this).slice(8, -1).toLowerCase() === 'object') {
        this.length += 1;
      }
    }
    return this.length;
  };
}

pop()方法从数组中删除最后一个元素，并返回该元素的值(当数组为空时返回undefined)。此方法更改数组的长度。

let a = [1,2,3];
a.length; // 3;
a.pop(); // 3;
console.log(a); // [1,2];
a.length; // 2;

unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

let a = [1,2,3];
a.unshift(4,5);
console.log(a); // [1,2,3,4,5];

shift() 方法从数组中删除第一个元素，并返回该元素的值(当数组为空时返回undefined)。此方法更改数组的长度。

let a = [1,2,3];
let b = a.shift();
console.log(a); // [2,3];
console.log(b); // 1

splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

array.splice(start);
array.splice(start, deleteCount);
array.splice(start, deleteCount, item1, item2, ...);

start​
指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；
如果是负值，则表示从数组末位开始的第几位（从1计数）；若只使用start参数而不使用
deleteCount、item，如：array.splice(start) ，表示删除[start，end]的元素。

deleteCount 可选
整数，表示要移除的数组元素的个数。如果 deleteCount 是 0，则不移除元素。这种情况下，
至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数，
则从 start 后面的元素都将被删除（含第 start 位）。
如果deleteCount被省略，则其相当于(arr.length - start)。

item1, item2, … 可选
要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

splice方法使用deleteCount参数来控制是删除还是添加：
start参数是必须的，表示开始的位置（从0计数），如：start=0从第一个开始；start>= array.length-1表示从最后一个开始。
①、从start位置开始删除[start，end]的元素。
array.splice(start)
②、从start位置开始删除[start，Count]的元素。
array.splice(start, deleteCount)
③、从start位置开始添加item1, item2, …元素。

array.splice(start, 0, item1, item2, ...) 

水平一般，如果错误麻烦留言指正，谢谢

参考
1. javascript详解
2. MDN Array系列