数组

数组是值的有序鸠合，数组中每一个值称为元素，元素在数组中的位置称为索引。JavaScript中的数组是一种特别的对象：

• 类属性class attribute为Array

• 新元素增加到数组后，自动更新自身的length属性

• 从Array.prototype对象中继承要领

• 设置length属性值小于元素个数时，会截断数组

数组的特征

• JavaScript中，数组的元素可所以恣意JavaScript值，而且统一个数组中差别元素值的范例能够差别

• 数组的索引是基于0的32位数值，最大的索引为(2^32 - 1) - 1

• 数组是动态的，能够根据须要增进或收缩

• 数组的操纵要领大部份定义在Array.prototype原型对象上，使一切的数组对象都能够运用

• 数组的完成经过了优化，用索引接见元素的效力高于直接接见通例对象的属性

• 数组多是希罕或许浓密的。

1 数组的建立与接见

1.1 建立数组

有两种要领能够建立数组：数组字面量[1, 2, 3]和new Array(1, 2, 3)。引荐运用数组字面量建立数组，简约易懂。

对象字面量建立的数组，其元素可所以表达式、对象或其他数组。假如省略数组中字面量的值，数组会变成希罕数组。

var empty = [];   //  <==> var  empty = new Array();数组字面量的写法更简约
var primes = [2, 3, 5, 7, 11];
var misc = [1.1, true, 'a'];    //数组中元素可所以恣意范例值

var base = 1024;
var table = [base, base + 1, base + 2, base + 3];  // ==> [ 1024, 1025, 1026, 1027 ]

var b = [[1, {a: "1", b: 2}], [true, {x: 2, y:3}]];

经由历程Array()组织函数也能够建立数组，然则运用比较烦琐，根据传入参数个数的差别，分为三种状况：

• 不传入参数：var a = new Array()；a数组与[]雷同

• 传入一个非负整数：var a = new Array(10)；建立一个寄存10个数组元素的空间，然则此时没有定义索引属性和存储值，此时的数组是希罕的

• 传入2个或多个数组元素或许一个非数值元素：var c = new Array('1', 2, true, "text");，建立的数组['1', 2, true, "text"]

希罕数组与浓密数组

根据数组是不是有不一连的数组，将其分为希罕数组和浓密数组

希罕数组的length属性大于元素的个数，在完成上比浓密数组更慢，斲丧内存空间更大，查找元素的效力与通例对象相似。

要防止运用希罕数组，其查找效力很低。希罕数组空白的部份没有值和索引，因为不能用for-in轮回遍历出空白的部份，for-in轮回能够遍历对象的可罗列属性（自身和继承）

var undefs = [, , ];   //数组字面量许可逗号末端，是希罕数组，没有元素，运用for-in轮回不会输出任何内容
var count = [1, , 3];   //希罕数组，运用for-in轮回只输出[1, 3]
var arr = new Array(10);   //希罕数组，没有赋值和索引

a = new Array(5);   //数组没有元素，a.length为5，希罕
a[1000] = 0;        //a.length为1001，索引大于元素个数，希罕

a = [, , , ];  //是希罕数组，0 in a;  => false
a = [1, , 3];   //希罕数组，长度为3
a = [,];        //数组没有元素，长度是1

总结：数组建立只管运用字面量要领，假如数组的索引不一连，则数组是希罕数组，查询效力低，内存斲丧高

1.2 数组的接见

数组是特别的对象，能够运用对象属性的接见体式格局.和[]，因为数组元素的索引黑白负数的字符串，所以须要运用[]接见，而数组的属性（如length则能够用.接见）。

运用[]能够读写数组的元素：

var a = ["Hello"];
var value = a[0];        //读取第一个元素
a[1] = 3.14;         //写入第二个元素

数组是特别的对象：

• 一切的数组都是对象，但对象不一定是数组；

• 数组对象的属性名在0~2^32-2之间的是索引，能够为数组建立恣意属性，只要当属性是索引时，才更新其length属性

• 运用负整数、与整数等的浮点数作为属性时，会将其转化为索引

    a[-1.23] = true;   //建立一个名为"-1.23"的属性
    a[-3] = false;   //建立一个名为"-3"的属性
    a["1000"] = 0;     //数组的第1001个元素为值为0
    a[2.000];  //与a[2]雷同

注：JS中没有越界的观点，因为是将数组作为对象来处置惩罚，关于不存在的下标，将其当作一般属性增加到数组对象上。

总结：运用[]接见数组元素，运用.接见数组属性，如.length。

1.3 数组的长度

关于浓密数组，其length属性代表元素的个数，索引从0最先，最大值是length - 1。假如是希罕数组，其length属性大于元素的个数。数组的长度保证大于每一个元素的索引值

[].length;   //==>0，数组没有元素
[1, 2, 3].length;   //==>3，最大索引为2，length为3

• 为数组元素赋值，假如其索引i大于即是现有数组长度，length的属性值将设置为i+1

• 假如设置的length值n小于数组长度时，会将索引大于n的元素悉数删除。

• 在ES5中，能够经由历程Object.defineProperty()设置数组的length属性的描述符descripter为{writable: false}，使其变成只读属性，设置今后不能增加或许删除数组元素

  a = [1, 2, 3, 4, 5];
  a.length = 3;             //数组变成[1, 2, 3]
  a.length = 0;            //删除一切数组元素
  
  a = [1, 2, 3];
  //注重设置为只读后，不能在为数组增加元素，除非修正writable为true
  Object.defineProperty(a, 'length', {writable: false});
  a.length = 2;    //a.length不会转变
  a.length;      //==>3

2 数组的操纵

在Array.prototype对象中定义很多关于数组操纵的要领。

2.1 数组元素的增加与删除

push()和unshift()要领

• push()要领：在数组末端插进去一个或多个元素，与pop()要领相对应，返回插进去元素后数组的新长度

• unshift()要领：在数组的首部插进去一个或多个元素，与shift()要领相对应，返回插进去元素后的数组新长度。注重一次插进去多个元素和屡次插进去一个元素的效果是差别的

pop()和shift()要领

• pop()要领：在数组末端删除一个元素，返回删除的元素；

• shift()要领：在数组首部删除一个元素，返回删除的元素；

  var a = [];
  a.push('one');  // ==> ['one']，在末端增加一个元素
  a.push('two', 'zero');  // ==> ['one', 'two', 'zero']，在末端增加两个个元素
  
  a.pop();      // ==>"zero"，a变成['one', 'two']
  a.unshift('four'); // ==> a变成['four', 'one', 'two']
  a.shift();   // ==> 删除"four"

注：会修正挪用该要领的数组

splice()要领

• splice(start, num, insert1, insert2,...)要领是插进去、删除和替换数组元素的通用要领。

• 参数start：插进去或删除的肇端位置

• 参数num：须要删除元素的个数，假如不指定会将肇端位置后的一切元素删除

• insert、insert2…：须要插进去的元素

  var a = [1, 2, 3, 4, 5, 6, 7];
  a.splice(5);   //==>[6, 7]，a变成[1, 2, 3, 4, 5]
  a.splice(2, 2);   //==>[3, 4]，a变成[1, 2, 5]
  a.splice(-1, 1);   //==>[5]，a变成[1, 2]
  
  a.splice(1, 0, 'a', false, 0);   // ==>[]，没有删除元素，a变成[1, "a", false, 0, 2]
  a.splice(2, 2, ['x', 'y']);     // ==>[false, 0]，a变成[1, "a", ['x', 'y'], 2]

注：会修正挪用该要领的数组

2.2 数组的遍历

运用for轮回是遍历数组的罕见要领，能够合营部份if语句过滤部份元素。

for(var i=0, len=arr.length; i<len; i++) {
  if(!a[i]) {continue;}    //过滤掉null、undefined和不存在的元素
  if(a[i] === undefined) {continue;}     //过滤掉undefined和不存在的元素
  if(!(i in arr)) {continue;}      //in操纵符能够检测对象是不是含有某个属性，数组没有索引时，返回false，能够过滤掉不存在的元素
}

关于希罕数组，能够运用for-in轮回向来过滤掉不存在的索引。for-in轮回会接见继承的可罗列属性，运用hasOwnProperty()要领过滤掉非自身属性。

for(var i in p) {
  if(!p.hasOwnProperty(i)) {continue;}  //跳过继承的属性
}

forEach()要领

因为for-in轮回自身是未遍历对象而设想，假如数组有其他可罗列属性，须要特地过滤。ES5定义forEach()要领来遍历数组。

forEach(fn)要领吸收一个函数作为参数，将每一个元素离别挪用该函数。forEach()能够给fn通报三个参数，fn(value, index, array)。

• value：数组元素

• index：数组元素对应的索引

• array：数组自身

  var a = [1, 2, 3, 4, 5];
  //盘算数组元素的和
  var sum = 0;
  a.forEach(function(value) {   //只通报数组元素一个参数
    sum += value;
  });
  console.log(sum);   //  ==> 15
  //将数组每一个元素加2
  a.forEach(function (value, index, array) {
    array[index] = value + 2;
  });
  console.log(a);   // ==>[3, 4, 5, 6, 7]

forEach()要领不能在一切元素都通报给fn函数挪用前住手遍历（不能运用break跳出轮回），假如要提早住手轮回，须要将forEach()要领放在try块中，假如forEach()挪用的函数fn能抛出foreach.break非常，遍历提早住手。

function foreach(value, index, array) {
  try {
    a.forEach(index, array);
  } catch(e) {
    if(e === foreach.break) {
      return;
    } else {
      throw e;
    }
  }
}

2.3 多维数组

JS并不支撑真正的多维数组，能够运用数组的数组来举行模仿，运用[][]接见即可。

var table = new Array(10);   //表格10行
var len=table.length;
for(let i=0; i<len; i++) {
  table[i] = new Array(10);   //10列
}
//初始化表格
for(let row=0; row<len; row++) {
  for(let col=0; col<table[row].length; col++) {
    table[row][col] = row * col;
  }
}
var product = table[5][7];     //  ==> 35

3 数组的要领

在Array.prototype中定义了与数组操纵相干的要领，重要分为ES3和ES5两个部份

3.1 ES3中的数组操纵要领

Array.prototype.join()：不修正原字符串

Array.prototype.join(seperator)要领将数组中一切元素先转化为字符串，再运用参数seperator传入的分开符将元素转换成的字符串拼接起来，末了返回该字符串。默许运用,分开。是String.prototype.split()要领的逆向操纵

var a = [1, 2, 3];
a.join();   // ==> "1,2,3"
a.join(" ");   // ==> "1 2 3"
a.join("");   // ==> "123"
"1,2,3".split(",").join();  //==> "1,2,3"

Array.prototype.reverse()：会修正原数组

将数组中的元素递次倒置，返回逆序后的数组

var a = [1, 2, 3];
a.reverse.join();   //"3,2,1"，而且a变成[3, 2, 1]，所以注重运用副原本操纵

Array.prototype.sort()：会修正原数组

将数组中元素根据指定的递次后返回，默许根据字母表的递次怕排序。undefined值被排到末了，要运用其他体式格局排序，须要传入一个比较函数fn(a, b)，根据两个参数在排序好的数组中的先后递次：

• 假如第一个参数在第二个参数之前，函数返回值小于0

• 假如第一个参数在第二个参数值后，函数返回值大于0

• 假如两个参数相称，函数返回值即是0

  var arr = ['banana', 'cherry', 'apple'];
  arr.sort();
  arr.join(",");   //==> "apple,banana,cherry"，默许根据字母表递次
  
  var a = [1, 2, 3, 4];
  a.sort(function(a, b) {
    return a - b;    //假如目的是升序，a在b的前面，函数返回值小于0即可
  });
  a.sort(function(a, b) {
    return b - a ;   //假如目的是降序，a在b的背面，函数返回值大于0即可
  });
  
  //不辨别大小写升序分列
  var arr = ['ant', 'Dog', 'Bug', 'cat'];
  
  arr.sort(function(first, second) {
    first = first.toLowerCase();    //将字符串悉数转化为小写
    second = second.toLowerCase();
    if(first < second) {       //假如准确递次是first在second前，则返回-1
      return -1;
    } else if (first > second) {
      return 1;
    } else {
      return 0;
    }
  });

Array.prototype.concat()：不修正原数组

用于拼接原始数组与传入的参数，构成一个新的数组并返回。假如传入的参数是数组，会衔接最外层的数组元素

var a = [1, 2, 3];
a.concat(4, 5);   // ==> [1, 2, 3, 4, 5]
a.concat([4, 5]);  //  ==> [1, 2, 3, 4, 5]
a.concat(4, [5, [6, 7]]);  //==> [1, 2, 3, 4, 5, [6, 7]]  
// 将数组[5, [6, 7]]最外层拆开，然则保存内部

Array.prototype.slice()：不转变原数组

返回指定数组的一个片断或数组：

• 经由历程两个参数指定切割的肇端位置与完毕位置（不包括第二个位置的元素）

• 假如只要一个参数，返回从最先位置到数组完毕的一切元素

• 参数吸收负数，-1示意末了一个元素，-2示意倒数第二个元素

  a = [1, 2, 3, 4, 5];
  a.slice(0, 3);   // ==> [1, 2, 3]
  a.slice(3);   // ==> [4, 5]
  a.slice(1, -1);   // ==> [2, 3, 4]

toString()和toLocalString()

先将数组的每一个元素转化为字符串，再运用逗号将其拼接为一个字符串，个中toLocaleString()要领区分在于转换Date和Number范例的数字、日期和时候时，根据时区、数字来转化。

• 转换效果与不传入参数的join()要领相似

[1, 2, 3].toString();   // ==> "1,2,3"
['a', [1, 'b']].toString();  // ==> "a,1,b"

3.2 ES5中操纵数组的要领

ES5中定义了9个要领来遍历forEache()、映照map()、过滤filter()、检测every() some()、简化reduce() reduceRight()和搜刮indexOf() lastIndexOf()数组。九种要领不会修正挪用它的数组，然则传入的函数会。

• 九种要领基础都属于历程笼统，第一个参数基础都是一个函数，对数组的每一个元素挪用该函数

Array.prototype.map()

map(fn)只要一个参数，map()要领通报三个参数给fn(value, index, array)，根据须要挑选。其挪用体式格局与forEach()相似，然则通报给map(fn)的函数fn有返回值。

• map()返回的是新数组，不修正原数组

• 假如是希罕数组，返回希罕素组；具有雷同的长度与缺失元素

  var a = [1, 2, 3];
  a.map(function(value) {
    return value * value;     //map()传入的函数必需要有返回值，将返回值作为返回数组的元素的值
  });          //==> [1, 4, 9]，原数组a照样[1, 2, 3]稳定

Array.prototype.filter()

filter()要领返回的数组是挪用数组的一个子集。经由历程通报的函数举行逻辑推断，假如返回值是true，当前元素被增加到返回的子集合；假如返回false，则过滤掉该元素；

• filter()会跳过希罕数组中缺失的元素，返回的老是浓密数组。

• arr.filter(function() {return true;}); 会过滤掉一切缺失的元素；

• arr.filter(funtion(x) {return (x !== undefined && x !=null)})：过滤掉undefined和null

  var a = [5, 4, 3, 2, 1];
  a.filter(function(value) {
    return value < 3;
  });        // ==> [2, 1]
  a.filter(function(value, index) {
    return index % 2 === 0;  //过滤掉索引为奇数的元素
  });     // ==> [5, 3, 1]，不会转变原数组

Array.prototype.every()和Array.prototype.some()

every()和some()用于对数组举行逻辑推断，返回true或`false；每一个元素运用传入的函数举行推断：

• every()要领：当且仅当数组中一切元素挪用函数的推断效果为true时，才返回true

• some()要领：至少有一个元素挪用函数的推断效果为true时，返回true

• every()和some()在肯定返回true或false后会住手遍历数组。相似&&和||的短路特征

• 在空数组上挪用，根据通例，every()返回true，some()返回false

  var a = [5, 4, 3, 2, 1];
  a.every(function(value) {
    return value < 10;
  });      //  ==>true，一切的值都小于10
  a.every(function(value) {
    return value % 2 === 0;
  });    // ==> false，不是一切元素都是偶数
  
  a.some(function(value) {
    return value % 2 === 0;
  });    // ==> true，数组a中有偶数
  a.some(isNaN);   //  ==> false，a中一切元素都不黑白数值元素

Array.prototype.reduce()和Array.prototype.reduceRight()

reduce()和reduceRight()：运用指定函数将数组中的元素举行组合，天生单个值。在函数式编程中经常使用，称为注入和摺叠。ruduceRight()的事情道理与reduce()雷同，只是从右边最先索引

reduce(fn, init)有两个参数：

• fn是实行简化操纵的函数；

• init是通报给简化函数的初始值，假如不指定，默许为数组的第一个元素

reduce()通报给化简函数fn(init, value, index array)四个参数：

• init：第一次挪用函数时，init是reduce()传入的初始值，假如reduce()没有指定第二个参数，默许运用数组的第一个元素；今后的挪用中，其值即是化简函数的返回值

• value、index、array：离别是数组元素、元素索引和数组自身。

  var a = [1, 2, 3, 4, 5];
  a.reduce(function(init, value) {
    return init + value;
  }, 0);    //初始值init是0，返回累加的效果==> 15
  //初始值为1，假如不指定，默许为数组的第一个元素
  a.reduce(function(init, value) {return init * value;}, 1);  //  ==>120
  a.reduce(function(init, value) {return (init > value)? init: value;});
  
  var a = [2, 3, 4];
  //盘算2^(3^4)，乘方操纵的优先递次是从右到左。
  a.reduceRight(function(init, value) {return Math.pow(value, init);});

a.reduce(function(init, value) {return init + value;}, 0); 的实行历程：

1. 化简函数第一次挪用时，reduce()要领将0通报给函数的init参数，将数组的第一个元素通报给value

2. 实行化简函数，将返回值给予init，再次继承下次挪用

Array.prototype.indexOf()和Array.prototype.lastIndexOf()

搜刮全部数组中指定值，返回第一个婚配值的索引，假如没有找到返回-1。indexOf()从头至尾查找、lastIndexOf()从尾到头查找。

indexOf()与lastIndexOf()的参数没有函数，第一个参数是查找的值；第二个参数可选，指定最先查找的索引位置

//查找数组中一切涌现的value，返回一个包括婚配值索引的数组
function findall(arr, value) {
  var results = [];
  var len = a.length;
  var index = 0;         //最先查找的索引

  while(index < len) {   //arr.indexOf(arr, index)中第二个参数是为了过滤掉之前已查找过的数组元素
    index = arr.indexOf(value, index);    //防止反复的同时，加快了搜刮效力
    if(index === -1) {break;}      //假如未找到，便退出；因为forEach()退出轮回不方便，所以运用while
    results.push(index);
    index += 1;
  }
}

4 类数组对象

4.1 数组范例

推断一个未知的对象是不是为数组，能够运用ES5供应的Array.isArray()要领，定义在Array()组织器函数上，没有定义在Array.prototype原型上。

Array.isArray([]);    //  ==>true
Array.isArray({});    //  ==>false

因为typeof和instanceof在推断Array范例时比较繁复，所以运用统一的Array.isArray()来推断。isArray()要领的能够完成：

//Function.isArray || function(o)用来推断顺序中是不是有同名的isArray函数，确保不会重写原有函数。
var isArray = Function.isArray || function(o) {
  return (typeof o === 'object') && (Object.prototype.toString.call(o) === '[object Array]');
};

4.2 类数组对象

JS中数组的部份特征是其他对象没有的：

1. 新元素增加到数组后，自动更新length属性

2. 设置length为较小值时，截断数组

3. 从Array.prototype中继承属性

4. 类属性为Array

这4点并非数组的实质。然则能够将一个用于length属性（值为数值），其他属性为非负整数（索引）的对象看作类数组。因为数组的要领通用性很强，能够运用数组的要领来操纵类数组对象，只是类数组对象并未继承Array.prototype对象，所以须要Function.call()来间接挪用。

var a = {'0': 'a', '1': 'b', '2': 'c', 'length': 3};   //类数组对象
Array.prototype.join.call(a, ',');      // ==> 'a,b,c'
Array.prototype.slice.call(a, 0);     //  ==> ['a', 'b', 'c']真正数组的副本
Array.prototype.map.call(a, function(value) {
  return value.toUpperCase();
});      //  ==> ['A', 'B', 'C']

函数的参数arguments对象和document.getElementsByTagName()猎取的对象都是类数组对象。检测一个对象是不是是类数组对象：

//推断o是不是为类数组对象
//字符串和函数有length属性，运用typeof将其消除
//在DOM中，文本节点有length属性，要分外挪用o.nodeType !== 3消除
function isArrayLike(o) {
  if(o && typeof o === 'object' &&    //非null和undefined，而且是对象
      isFinite(o.length) &&
      o.length >= 0 &&
      o.length == Math.floor(o.length) &&   //o.length是整数
      o.length < Math.pow(2, 32)) {   //数组索引的上限是2^32-1
    retun true;
  } else {
    return false;
  }
}

4.3 作为数组的字符串

在ES5中，字符串的行动相似于只读的数组，能够运用charAt()接见单个字符，也能够经由历程[]接见单个字符。

var s = 'test';
s.charAt(0);   // ==> 't'
s[1];   // ==> 'e'

运用[]的索引情势接见字符串，能够简化charAt()的挪用。因为字符串用于非负的整数length属性，每一个字符的索引黑白负整数，能够将字符串看作类数组对象，运用数组的要领来操纵字符串。

• 挪用的要领不能转变原字符串，splice()、sort()、reverse()、pop()、push()、shift()与unshift()要领不能运用，运用数组要领修正字符串会致使毛病，然则没有毛病提醒

var s = "javascript";
Array.prototype.join.call(s, " ");  // ==>"j a v a s c r i p t"

总结

• 运用对象字面量体式格局建立数组

• 数组元素的读写都能够经由历程[]

• 关于希罕数组，其length属性大于元素的个数

• ES5今后，纯真的数组遍历能够运用forEach()，关于须要推断跳出轮回遍历的，能够运用for轮回替换、或运用try-catch

• 数组的操纵要领都定义在Array.prototype原型对象上，能够对数组举行：forEach()、map()、every()和some()、filter()、reduce()和reduceRinght()、indexOf()和lastIndexOf()、splice()、sort()、reverse()

• 类数组对象指有非负整数的length值，而且索引为非负整数的对象，类数组对象能够运用数组的要领来操纵，运用Function.call()来间接挪用即可