JavaScript数组要领周全的总结

1. 检测对象是不是是数组

instanceof操纵符

Array.isArray()要领

   var color = new Array("red", "green");
   console.log(Array.isArray(color));   //true

2. 转换要领

toString()

该要领会输出每一项,并以’,’衔接,实际上该要领会挪用数组中每一项的toString()要领,然后拼接获得的每一项的字符串。

 var color = new Array("red", "green");
 console.log(color.toString());   // red,green
 alert(color);            // red,green
 console.log(color);            // ["red","green"]

toLocaleString()

该要领会输出每一项,并以’,’衔接,实际上该要领会挪用数组中每一项的toLocaleString()要领,然后拼接获得的每一项的字符串。平常都邑返回与toString()雷同的值

 var color = new Array("red", "green");
 console.log(color.toLocaleString());   // red,green

valueOf()

该要领输出全部数组的字符串情势

var color = new Array("red", "green");
 console.log(color.valueOf());   // ["red","green"]

join()

该要领吸收一个字符串,然后以该字符串为距离,将数组中的每一项拼接起来

var color = new Array("red", "green");
 console.log(color.join('&&'));   // red&&green

3. 栈要领和行列要领

栈要领push()和pop()

栈是一种LIFO(“LAST-In-First-Out”后进先出)的数据结构。
有两个要领,push()和pop().

  • push()接收一个或许多个参数,将它们增添到数组末端处,返回增添后数组的长度

  • pop()则从数组中移除末了一项,并返回该项的值。

行列要领unshift()和shift()

行列是一种FIFO(“First-In-First-Out”先进先出)的数据结构。
有两个要领,unshift()和shift().

  • unshift()与push()相似,只不过是在数组的最前面增添一项或多项

    var color = new Array("red", "green");
    color.unshift("blue","yellow");
    console.log(color);            // ["blue", "yellow", "red", "green"]
  • shift()与pop()相似,是返回数组的最前面一项

4. 排序要领

有两种排序要领,reverse()和sort()。

reverse()

reverse()要领会反转数组项的递次。

sort()

sort()默许依据升序重新分列数组,而递次的决定是由每一项转换为字符串后举行比较的。

var values = [0, 1, 5, 10, 15];
values.sort();
console.log(values)   //   [0, 1, 10, 15, 5], 因为转换为字符串后,10在5前面

sort()还能够接收一个函数作为参数,依据函数的返回值举行排序。这个函数接收两个值作为参数,排序准绳以下:
参数1在参数2前面,返回负数,参数1在参数2背面,返回正数,两个参数相称,则返回0.

// 先建立一个简朴的比较函数,该函数接收两个值做参数,本函数依据升序分列
function compare(value1, value2){
    if(value1 < value2){
      return -1;
  }else if(value1 > value2){
      return 1;
  }else {
      return 0;
  }
}
// 然后将该函数传入sort()要领中举行比较
var values = [0, 5, 1, 15, 10];
values.sort(compare);
console.log(values);          // [0, 1, 5, 10, 15]

sort()内部是依据冒泡法排序的,不停比较两个数的大小。

5. 操纵要领

拼接数组concat()

该要领能够吸收一个或多个参数,并新建一个当前数组的副本,将参数拼接到该副本末端,然后返回该副本数组。
参数主要有两种范例:

  1. 参数是数组,则将数组中的每一项增添到副本数组的末端

  2. 参数不是数组,则直接将其增添到副本数组的末端

裁减数组slice()

该要领基于当前数组建立一个新的数组,吸收一个或许两个参数,用于指定返回项的肇端和完毕位置。

  1. 当值传入一个参数时,返回从参数指定位置最先到数组末端的一切项

  2. 当传入两个参数时,返回肇端和完毕位置之间的的但不包括完毕位置的项。

  3. 两个参数均能够吸收负数,会以数组的长度值加上该负数,然后盘算须要返回的项。

修正数组splice()

该要领能够增添,削减或修正数组中的一项或多项。该要领吸收一个或多个参数,先从指定位置删除项,然后增添恣意数目的项。
该要领始终会返回一个数组,数组中包括被删除的返回项。

  • 参数1指定须要删除的项的肇端位置

  • 参数2指定须要删除的项的数目

  • 参数3-参数n指定须要向数组中增添的项

所以依据传入参数的数目,有以下状况:

  1. 不传入参数,则不对数组做任何转变

    var array = [1,2,3,4];
    console.log(array.splice());   // []
    console.log(array);            // [1,2,3,4]
  2. 传入一个数值参数,则从数组中删除指定位置和数组末端之间的一切项

     var array = [1,2,3,4];
     console.log(array.splice(2));   // [3,4]
     console.log(array);        // [1,2]
  3. 传入两个数值参数,则删除数组中从指定位置最先的指定数目的项

     var array = [1,2,3,4];
     console.log(array.splice(2,1));    // [3]
     console.log(array);        // [1,2,4]
  4. 传入三个或三个以上的参数,则先删除指定位置最先的指定数目的项,然后在该位置增添其他参数所指导的项

     var array = [1,2,3,4,5,6];
     console.log(array.splice(2,1,"red","green"));    // [3]
     console.log(array);            // [1, 2, "red", "green", 4, 5, 6]

copyWithin()

copyWithin()要领在数组内部将一部份复制到另一部份,而不转变数组的大小,然后返回修正后的数组。该要领吸收一个至三个参数。参数寄义以下:

  • 第一个参数是一个索引值,被复制的序列将放到以该索引为肇端的位置上。为必需参数。

  • 第二个参数代表将要被复制的部份的肇端位置。非必需参数,默许为0。

  • 第三个参数代表将要被复制的部份的完毕位置,不包括完毕位置。非必需参数,默许为array.length-1

以上三个参数都吸收负值,会自动加上数组的长度值,转换为正值。看一些例子吧。

[11, 22, 33, 44, 55].copyWithin(-2);    //  [11, 22, 33, 11, 22]
上面代码复制到的索引位置是 5-2=3,因为后两个参数没有,所以复制的值是[11,22,33,44,55],然则因为该要领不转变数组的大小,所以仅仅是将11和22复制到44和55的位置。
[11, 22, 33, 44, 55].copyWithin(0, 3); //  [44, 55, 33, 44, 55]

上面的代码复制到的索引位置是 0,复制地区最先的索引位置是3,第三个参数没有,所以会一向复制直到末端,复制的值是[44,55], 覆蓋了11和22

[11, 22, 33, 44, 55].copyWithin(1, 3, 4);// [11, 44, 33, 44, 55]

上面的代码复制到的索引位置是1,复制地区最先的索引位置是3,第三个参数是4,所以只会复制位置3的值44,覆蓋了22

fill()

该要领在指定位置处添补一个牢固的值。要领吸收三个参数:

  • param1,指定添补的值。必需参数。

  • param2, 指定添补最先的位置。非必需参数,默许为0

  • param3, 指定添补完毕的位置,但不包括完毕的位置。默许为数组的长度值。

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]

6. 位置要领

数组有两个位置要领indexOf()lastIndexOf()。两个要领都吸收一个或两个参数,第一个参数指定要查找的项,第二个参数是可选的,示意查找最先的位置。两个要领的区别是indexOf()夙昔今后最先查找,返回指定项第一次涌现的位置,lastIndexOf()从后往前最先查找,返回指定项第一次涌现的位置。若没有查找到指定项,则两个要领均返回-1。

  1. 传入一个参数

    var array = ['H', 'E', 'L', 'L', 'O'];
    console.log(array.indexOf('L'));       //      2
    console.log(array.lastIndexOf('L'));       //  3
  2. 传入两个参数

    var array = ['H', 'E', 'L', 'L', 'O'];
    console.log(array.indexOf('L', 3));   // 3 ,疏忽了array[2]
    console.log(array.lastIndexOf('L', 2));   // 2 疏忽了array[3]

有两个须要注重的事项,

  1. 数组中的项和传入参数作比较时,用的是===全等号,即必需严厉相称

  2. lastIndexOf()返回的索引值是基于正序的索引值,而非基于倒序的索引值

    var array = ['H', 'E', 'L', 'L', 'O'];
    console.log(array.lastIndexOf('O'));     // 返回4,而非0

7. 合并要领

有两个合并数组的要领reduce()reduceRight()。这两个要领都邑迭代数组中的一切项,然后构建一个返回值,个中reduce()从数组的第一项最先,遍历到末了,reduceRight()从末了一项最先,遍历到第一项。
这两个要领都吸收两个参数: 第一个参数是在每一项上挪用的函数,第二个参数是可选的,作为合并基本的初始值。
作为第一个参数的函数吸收4个参数: 前一个值,当前值,当前项的索引和该数组对象。这个函数返回的值,将作为下一次迭代操纵中函数的第一个参数。函数的第二个参数是数组的下一项。
第一次迭代发作在数组的第二项上,函数的第一个值是数组的第一项,第二个参数是数组的第二项。

  • 传入一个参数

    function add(prev, curv, index, array){
        return prev + curv;
    }
    var values = [1, 2, 3, 4, 5];
    var sum = values.reduce(add);
    console.log(sum);         //15

    上面的代码中,第一次迭代中,传入add()中的参数以下:prev = 1, curv = 2,index = 1,array = values,第一次迭代后,add()函数返回值是1+2=3。
    第二次迭代中,传入add()中的参数以下:prev = 3,curv = 3,index = 1,array = values,第二次迭代后,add()函数返回值是3+3=6。顺次向后迭代…
    reduceRight()则是从末了一项最先往前迭代。

  • 传入两个参数
    传入两个参数时,第二个参数将作为合并基本的初始值。也就是说,传入该参数后,用该参数加上背面终究迭代获得的值。

    function add(prev, curv, index, array){
       return prev + curv;
    }
    var values = [1, 2, 3, 4, 5];
    var sum = values.reduce(add, 10);
    console.log(sum);         // 25,  在迭代获得的值上面加上了10

8. 建立数组的新要领

Array.from()

该要领基于一个类数组的对象或可迭代的对象,建立一个新的数组实例。该要领吸收一至三个参数,各个参数以下:

  1. 参数1是一个类数组对象或可迭代对象,要领基于该对象建立数组。函数的返回值将作为新数组中的每一项的值。必需的参数。

  2. 参数2是一个函数,数组的每一项都邑挪用该函数。非必需参数。

  3. 参数3指定在参数2中,this所代表的对象。非必需参数。

类数组对象是具有length属性并含有被编上索引的元素的对象,如NodeList对象。
可迭代对象是能够获得个中的元素的对象,如MapSet

var str = "hello";
Array.from(str, x => x + x);      // ["hh", "ee", "ll", "ll", "oo"]

上面的代码中吸收一个字符串为第一个参数,吸收箭头函数作为第二个参数。在箭头函数中,对每一项做了复制操纵,然后返回获得的值,作为数组的每一项。

Array.of()

该要领吸收一系列参数,并以这些参数为项,建立一个数组,并返回该数组。

var arra = Array.of("red", "green", "blue");
console.log(arra);         //  ["red", "green", "blue"]

该要领与组织函数Array()相似,但有一点差别。当吸收到只需一个数值范例的参数时,Array()会建立一个数值参数指定的长度的数组,而Array.of()会将该数值作为数组中的项增添进数组。

var arra1 = new Array(7);
console.log(arra1);     //  [undefined × 7]
var arra2 = Array.of(7);
console.log(arra2);     //  [7]

9. 迭代要领

every()

该要领吸收一个函数作为参数,对数组中的每一项运转该函数,若对每一项,指定函数都返回true,则终究every()要领返回true。该要领还吸收一个可选的第二个参数,指定在运转函数时,函数中this所代表的对象。

var num = [1,2,3];
console.log(num.every( value => {
    if(value > 0){return true;}
    return false;
}));  // true,因为每一项都大于0
console.log(num.every( value => {
    if(value > 1){return true;}
    return false;
})); //false,因为1-1=0,转换为布尔值是false

some()

该要领与every()对应,every()是一切项均返回true,终究才返回true,some()是只需有最少一个返回true,该要领就会返回true.

var num = [1,2,3];
console.log(num.some( value => {
    if(value > 1){return true;}
    return false;
}));  // true,因为最少有一项大于1
console.log(num.some( value => {
    if(value > 3){return true;}
    return false;
})); //false,都不大于3

filter()

该要领吸收一个函数作为参数,对数组中的每一项运转该函数,若对某一项,指定函数返回true,则将该项增添到一个新建的数组中,末了返回该数组。该要领还吸收一个可选的第二个参数,指定在运转函数时,函数中this所代表的对象。

    var num = [1,2,3];
    console.log(num.filter( value => {
   if(value > 0){return true;}
   return false;
    }));  // [1,2,3]
    console.log(num.filter( value => {
   if(value > 1){return true;}
   return false;
    })); // [2, 3]

forEach()

该要领吸收一个函数作为参数,对数组中的每一项运转该函数,该要领没有返回值。作用于for轮回相似。
该要领还吸收一个可选的第二个参数,指定在运转函数时,函数中this所代表的对象。

map()

该要领吸收一个函数作为参数,对数组中的每一项运转该函数,返回由该函数的返回值构成的数组。该要领还吸收一个可选的第二个参数,指定在运转函数时,函数中this所代表的对象。

var num = [1,2,3];
console.log(num.map( value => { return value * value; }));     // [1, 4, 9]

find()

该要领接收一个函数作为参数,对数组中的每一项运转该函数,直到某一次运转后返回true,此时,该要领将返回该项的值。若一切项的运转效果都是fase,终究将返回undefined。所以该要领并不一定遍历数组中一切项。该要领还吸收一个可选的第二个参数,指定在运转函数时,函数中this所代表的对象。

 var num = [1,2,3];
console.log(num.find( value => {
    if(value === 2){return true;}
    return false;
}));  // 2

看以下代码

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) {
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries));
// { name: 'cherries', quantity: 5 }

findIndex()

该要领与find()相似,只不过当找到相符前提的项时,会返回该项的索引值。

var num = [1,2,3];
  console.log(num.findIndex( value => {
    if(value === 2){return true;}
    return false;
}));  // 1

注重:以上要领中,吸收的作为参数的函数,都能够接收三个参数,分别是数组每一项的当前值当前索引值,以及挪用要领的数组自身.

var num = [1,2,3];
num.forEach( (value, index, array) => {
    console.log("数组为->"+array + ":");
    console.log(index + "->" + value);
});
// 数组为->1,2,3: 0->1
// 数组为->1,2,3: 1->2
// 数组为->1,2,3: 2->3

10. 其他要领

entries()

entries()要领返回一个新建的数组迭代对象,对象中包括了每一项的key/value构成的数组。看代码

  var a = ['a', 'b', 'c'];
  var iterator = a.entries();
  for(let e of iterator){
     console.log(e);
  }
  // [0, 'a']
  // [1, 'b']
  // [2, 'c']

keys()

该要领返回一个可迭代对象,个中包括了数组中每一项的索引值

 var arr = ['a', 'b', 'c'];
 var iterator = arr.keys();

 console.log(iterator.next()); // { value: 0, done: false }
 console.log(iterator.next()); // { value: 1, done: false }
 console.log(iterator.next()); // { value: 2, done: false }
 console.log(iterator.next()); // { value: undefined, done: true }

values()

该要领于keys()要领对应,也是返回一个可迭代对象,个中包括数组中每一项的值

    var a = ['w', 'y', 'k', 'o', 'p'];
    var iterator = a.values();

    console.log(iterator.next().value); // w
    console.log(iterator.next().value); // y
    console.log(iterator.next().value); // k
    console.log(iterator.next().value); // o
    console.log(iterator.next().value); // p

includes()

该要领用于查找数组中是不是包括即是指定值的项。吸收两个参数:

  • param1,指定被查找是不是存在于数组中的值,必需。

  • param2,指定查找最先的索引值,默许为0,非必需。当传入负值时,将加上数组的长度值。

    [1, 2, 3].includes(4);     // false
    [1, 2, 3].includes(3, 3);  // false
    [1, 2, 3].includes(3, -1); // true
    [1, 2, NaN].includes(NaN); // true
    原文作者:胡不归
    原文地址: https://segmentfault.com/a/1190000009681222
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞