JS 数组方法的笔记

数组

重排序

reverse()方法

翻转数组向的顺序

var values = [1, 2, 3, 4, 5];
values.reverse();

alert(values); //5, 4, 3, 2, 1

sort()方法

调用每一项的toString()然后比较得到的字符串,返回值仍是数组

var values = [0, 1, 5, 10, 15];
values.sort();

alert(values);   //0, 1, 10, 15, 5

sort()可以接收一个比较函数作为参数

function compare(value1, value2) {
    if(value1 < value2) {
        return -1;
    } else if(value1 > value2) {
        return 1;
    } else {
    return 0;
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);

alert(values);   //0, 1, 5, 10, 15

操作方法

concat() 方法

该方法先创建当前数组的一个副本,然后将接收到的数组添加到这个副本的末尾,最后返回一个新构建的数组。当传入值不是数组的时候,该方法会将传入的值简单的添加到结果数组末尾。

var color = ["red", "yellow", "blue"];
var color2 = color.concat("green", ["black", "white"]);

alert(color); // red, yellow, blue
alert(color2); //  red, yellow, blue , green , black, white

slice()方法

slice()方法不会影响原数组。
可以不接收参数或者接收一个或者两个参数;
不接收参数的情况:能被用来让一个类数组对象转换成数组
concat()一样可以实现数组数据浅拷贝,注意:如果数组的内容是基础类型,则新数组和老数组互不影响,如果数组的内容是对象等引用类型,则就会只拷贝对象和数组的引用,这样我们无论在新旧数组进行了修改,两者都会发生变化

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 }); // ['a', 'b']

接收参数的情况下:

  • 接收一个参数:数组返回从该参数指定位置开始到当前数组末尾的所有项;
  • 接受两个参数:数组返回从第一个参数指定位置开始到第二个参数指定的位置为止的所有项(但不包括第二个参数所指定的项)。
var color = ["red", "green", "blue", "yellow" ,"purple"];
var color1 = color.slice(1);
var color2 = color.slice(1, 4);

alert(color1)  // green, blue, yellow, purple
alert(color2)  // green, blue, yellow

当第一个参数为0 ,第二个参数大于或等于 Array.length时,会返回原数组

var color = ["red", "green", "blue", "yellow" ,"purple"];
color.slice(0, color.length);

console.log(color.slice(0, color.length)); 
//["red", "green", "blue", "yellow", "purple"]

splice()方法

功能强大,用法较多;主要用途是向数组的中部插入项。
splice()方法始终返回一个数组,该数组包含被删除的项;没有删除项时,则返回一个空数组。
可以接受两个或者三个及以上参数;

  • 接收两个参数:第一个参数表示:要删除的项中第一项的位置,第二个参数表示要删除的项的个数;
var color = ["red", "yellow", "blue"];
var removed = color.splice(2,1); //从数组下标为2的项起,删除1项

alert(removed); //blue
alert(color); //red, yellow
  • 接收三个及以上参数:第一个参数表示:要删除的项中第一项的位置,第二个参数表示要删除的项的个数(不需要删除项时,第二个参数可为0);第三个参数表示要添加的项;如果要添加更多项,还可以有第四个、第五个以及更多的参数;
var color = ["red", "yellow", "blue"];
var removed = color.splice(0,0,"green","white"); //从第一项开始,删除0项,添加两项

alert(removed); // 弹出的窗口什么都不显示,因为没有删除任何项,返回值是一个空数组
alert(color);  // green, white, red, yellow, blue

join() 方法join

join() 方法用于把数组中的所有元素放入一个字符串,返回的是字符串。
可以传入一个参数,也可以省略该参数。传入的参数用于指定字符串的分隔符,省略该参数时,用逗号作为分隔符。

var arr = ["1", "2", "3", "4", "5"];
arr.join();  //"1, 2, 3, 4, 5"
arr.join(''); //"12345";

shift() 方法

shift() 方法从数组中删除第一个元素,并返回被删除元素的值。此方法更改数组的长度。
PS:如果数组为空则返回undefined 。

unshift() 方法

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度

位置方法

indexOf()lastIndexOf()方法

都接收两个参数:要查找的项和查找起点位置的索引(可选);
indexOf()方法从索引为0的位置开始查找(传入第二个参数时,查找起始位置为第二个参数指定的位置)
lastIndexOf()方法从数组末尾开始(传入第二个参数时,查找起始位置为第二个参数指定的位置)
两种方法都返回要查找的项在数组中的位置;若未找到,则返回 -1;(在比较数组中的每一项时,会使用全等符号===进行比较);

var number = [1, 2, 3, 4, 5, 4, 3, 2, 1];

alert(number.indexOf(3)); // 2
alert(number.lastIndexOf(3)); // 6

alert(number.indexOf(4,4)); // 5
alert(number.lastIndexOf(4,4)); //3

var people = [{name:"cheri"}];
var person =  {name:"cheri"};
var morePeople = [person];

alert(people.indexOf(person)); // -1 未找到
alert(more.indexOf(person)); // 0 在第一个位置找到

迭代方法

ES5为数组定义了五种迭代方法,每个方法都接收两个参数:要在每一项上运行的函数 和 该函数运行的作用域对象。传入的函数接收三个参数:数组项的值,该项在数组中的位置,数组对象本身。

every()方法

对数组中的每一项都运行给定的函数,如果每次都返回 true,则该方法返回 true

some()方法

every()方法非常类似,对数组中的每一项都运行给定的函数;区别为:如果任何一次返回 true,则该方法返回 true

var numbers = [1, 2, 3, 4 ,5];
var everyResult = numbers.every(function(item, index, array){
    return(item > 2);
});
var someResult = number.some(function(item, index, array){
    return(item > 2);
});

alert(everyResult);  // false
alert(someResult);   // true

filter()方法

对数组中的每一项运行指定函数,返回值为一个数组,该数组的项由指定函数返回 true 的项组成;
该方法利用指定的函数来筛选掉不符合要求的项;

var numbers = [1, 2, 3, 4 ,5];
var filterResult = numbers.filter(function(item, index, array){
    return(item > 2);
});

alert(filterResult); // 3,4,5

filter()方法 不会应用到缺少的元素上

var arr = [0,1,2];
    arr[10] = 10;
var r = arr.filter(function(x) { return x === undefined;});

console.log(r);   //[]

map()方法

map()方法返回一个数组,该数组的项由原数组每一项经过传入的函数运算后的结果组成。
传入的函数可以接受三个参数:当前值,项的索引,当前数组对象。
map()只能被初始化过的数组成员调用

var numbers = [1, 2, 3, 4 ,5];
var mapResult = numbers.map(function(item, index, array){
    return(item + 1);
});

alert(mapResult);  // 2, 3, 4, 5, 6

forEach()方法

对数组中的每一项运行给定方法,该方法无返回值。

var letters = ["a", "b", "c"];
var forEachResult = letters.forEach(function(item, index, array){
      console.log("value:" + item + " index:" + index);
});
//value:a index:0
//value:b index:1
//value:c index:2
alert(forEachResult)   // undefined

entries()方法

ES2015新增,方法返回一个新的Array Iterator对象

var arr = ["a", "b", "c"];
var iterator = arr.entries();
// undefined
console.log(iterator);
// Array Iterator {}
console.log(iterator.next().value); 
// [0, "a"]
console.log(iterator.next().value); 
// [1, "b"]
console.log(iterator.next().value); 
// [2, "c"]

归并方法

reduce()方法和reduceRight()方法都会迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从数组的第一项开始,逐一遍历到最后一项,reduceRight()方法则从数组最后一项开始,向前遍历。
两种方法都接收两个参数:一个在每一项上都调用的函数,作为归并基础的初始值(可选)。
传入的函数接受四个参数:前一个值,当前值,项的索引,当前数组对象。函数返回的值会作为第一个参数,自动传递给下一项
在一个空数组上应用reduce会抛初始化错误的异常 TypeError

reduce()方法

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur; 
});

alert(sum);   // 15

第一次执行回调函数,prev 是1,cur 是2;第二次 prev 是3(2+1的结果),cur是3(数组第三项)。

reduceRight()方法

reduce()方法从数组的第一项开始,逐一遍历到最后一项,reduceRight()方法则从数组最后一项开始,向前遍历,除此之外没什么不同

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur; 
});

alert(sum);   // 15

第一次执行回调函数,prev 是5,cur 是4;第二次 prev 是9(5+4的结果),cur是3(数组倒数第三项)。

其他技巧

把一个数组拼接到另一个数组后面

apply()第二个参数只能是数组,这个数组将作为参数传给原函数的参数列表arguments。
push()方法的参数只能是一个或者多个参数,而不能是一个数组。

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
[].push.apply(arr1, arr2);

console.log(arr1); //[0, 1, 2, 3, 4, 5]

同样的,Math对象下的max()和min()等方法都只支持参数列表而不是数组,都可以使用这种方法:

var myArray = [5, 10, 50];
Math.max(myArray);    // Error: NaN
Math.max.apply(Math, myArray);    // 50
Comments
Write a Comment