一. JavaScript数组常用方法

Posted hy-space

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一. JavaScript数组常用方法相关的知识,希望对你有一定的参考价值。

1.基础方法:
push:向数组的末尾增加一项 返回值是数组的新长度
unshift:向数组开头增加一项 返回值是数组的新长度
pop:删除数组的末尾项 返回值是删除的数组项
shift:删除数组开头项 返回被删除的开头项目
splice:增删改,功能强大
slice:复制数组 返回值是复制到的新数组 写上数值之后 不包含被复制的最后一项

2.拼接:
concat:把一个数组和另一个数组拼接在一起 返回拼接好的数组 
join:把数组中的每一项 按照指定的分隔符拼接成字符串

3.排序:
reverse:倒序数组 返回值倒序数组 原有数组改变
sort:根据匿名函数进行冒泡排序 b-a倒序 a-b升序

4.兼容性不好:
indexOf:返回获取项在数组中的索引
lastIndexOf:返回获取项在数组中出现的最后一次索引
forEach: 循环遍历数组 参数是一个匿名函数 默认返回为undefined
map:循环遍历数组 参数是一个匿名函数
filter:创建一个新的匹配过滤条件的数组
reduce:数组中的每个值(从左到右)开始合并,最终为一个值。

1.基础方法:

push:向数组的末尾增加一项 返回值是数组的新长度
unshift:向数组开头增加一项 返回值是数组的新长度

var array = ["a","b","c","d","e","f"];
var last = array.unshift("begin");
console.log(array)     // ["begin", "a", "b", "c", "d", "e", "f"]

 

pop:删除数组的末尾项 返回值是删除的数组项

var array = ["a","b","c","d","e","f"];
var last = array.pop();
console.log(array)    //["a", "b", "c", "d", "e"]

 

shift:删除数组开头项 返回被删除的开头项目

var array = ["a","b","c","d","e","f"];
var last = array.shift();
console.log(array)      // ["b", "c", "d", "e", "f"]

 

splice:增删改,功能强大

(1)删除:只需要提供两个参数,要删除的第一项的位置和要删除的个数,并返回删除的元素数组:
var num = [1,2,3,4,5];
var newNum = num.splice(1,2);
console.log(num);    //[1,4,5]
console.log(newNum); //[2,3]
2)插入:提供多个参数,第一个参数是要插入的位置,第二个是0表示删除0个,后面是要插入的元素,可以是多个,因为删除0个,所以返回空数组;
*  四个参数,第二个为0代表插入
var
num = [1,2,3,4,5]; var newNum = num.splice(1,0,"Tom","Jerry"); console.log(num); //[1, "Tom", "Jerry", 2, 3, 4, 5] console.log(newNum); //[] 3)替换:提供多个参数,第一个参数是要插入的位置,第二个是删除的个数,后面是要插入的元素,可以是多个,返回删除的数组;
* 四个参数,第二个大于0代表替换,是多少表示替换掉多少,第一个参数代表从下标为几处开始替换
var num = [1,2,3,4,5]; var newNum = num.splice(1,2,"Tom","Jerry"); console.log(num); //[1, "Tom", "Jerry", 4, 5] console.log(newNum); //[2,3]

 

slice:复制数组 返回值是复制到的新数组,该方法并不会修改原数组

    *  返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

    *  如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。

var array = ["a","b","c","d","e","f"];
console.log(array.slice(-1))     //["f"]
console.log(array.slice(-2))     //["e","f"]
console.log(array.slice(1))      //["b", "c", "d", "e", "f"]
arrays.slice(1,4)                // ["b", "c", "d"]

 

2.拼接:

concat:把一个数组和另一个数组拼接在一起 返回拼接好的数组 

var array = ["a","b","c"];
var array1 = ["a","b","c"];
var array2 = array.concat(array1);
console.log(array2)    // ["a", "b", "c", "a", "b", "c"]

 

join:把数组中的每一项 按照指定的分隔符拼接成字符串

var array = ["a","b","c","d","e","f"];
var array1 = array.join("");   //"abcdef"
var array2 = array.join("_");  //"a_b_c_d_e_f"

 

3.排序:

reverse:倒序数组 返回值倒序数组 原有数组改变

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

 

sort:根据匿名函数进行冒泡排序 b-a倒序 a-b升序,但需要注意的是这个方法是按Ascii码排序(实用性不大)

var arr = [1,3,7,5,14,24];
arr.sort();
console.log(arr);  ==>[1,14,24,3,5,7]

 

4.常用方法:

indexOf:返回获取项在数组中的索引(第一次出现的索引)

var arr = [‘apple‘,‘orange‘,‘pear‘];
 
console.log("found:", arr.indexOf("orange")); // 返回索引  1

 

lastIndexOf:返回获取项在数组中出现的最后一次索引

var arr = [‘apple‘,‘orange‘,‘orange‘,‘pear‘];
 
console.log("found:", arr.lastIndexOf("orange"));// 返回索引2

 

forEach: 循环遍历数组 参数是一个匿名函数 默认返回为undefined

var array1 = [1,2,3,4,5,6];
var x = array1.forEach(function(value,index,array){
     array[index] = value+1;
     return array;
});
console.log("新数组"+x); //不管以上返回什么,x都为undefined
console.log("原数组"+array1); //[2,3,4,5,6,7]

 

map:循环遍历数组 参数是一个匿名函数

var array1 = [1,2,3,4,5,6];
var x = array1.map(function(value,index,array){
    return value+1;
});
console.log("新数组"+x);         //[2,3,4,5,6,7];
console.log("原数组"+array1);    //[1,2,3,4,5,6];

 

filter:创建一个新的匹配过滤条件的数组

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 16},
];
   
var newArr = arr.filter(function(item){
  return item.name === "orange";
});
 
console.log("Filter results:",newArr); // [
                          {"name":"orange", "count": 5},
                          {"name":"orange", "count": 16}
                          ]

 

reduce:数组中的每个值(从左到右)开始合并,最终为一个值。

var arr = [1,2,3,4];
var newarr = arr.reduce(function(x, y) {
        return x * 10 + y;
    });
console.log(newarr)   // 1234

/**
*   reduce(callback, initialValue)会传入两个变量
*  回调函数(callback),初始值(initialValue)
*  一般来讲prev是从数组中第一个元素开始的,next是第二个元素。
*  但是当你传入初始值(initialValue)后,第一个prev将是initivalValue,next将是数组中的第一个元素。
*/

var arr = ["apple","orange"];
function noPassValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);    //prev: apple
    console.log("next:",next);    //prev: orange
     
    return prev + " " +next;    //"apple orange"
  });
}
noPassValue();


var arr = ["apple","orange"];
function passValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);    //  {}       {"apple"}
    console.log("next:",next);    //"apple"    "orange"
     
    prev[next] = 1;               //在此赋值{}["apple"]=1  -->{apple: 1}
    return prev;                  //{apple: 1, orange: 1}
  },{});
}
passValue();

//由此,可以实现:统计一个数组中有多少个不重复的单词
var arr = ["apple","orange","apple","orange","pear","orange"];
function getWordCnt(){
  return arr.reduce(function(prev,next){
    prev[next] = (prev[next] + 1) || 1;
    return prev;
  },{});
}
console.log(getWordCnt());   //{apple: 2, orange: 3, pear: 1}
某同学的期末成绩如下表示

var result = [{
        subject: ‘math‘,
        score: 88
    },
    {
        subject: ‘chinese‘,
        score: 95
    },
    {
        subject: ‘english‘,
        score: 80
    }];
如何求该同学的总成绩?
很显然,利用for循环可以很简单得出结论
var sum = 0;
for(var i=0; i<result.length; i++) {
    sum += result[i].score;
}
但是我们的宗旨就是抛弃for循环,因此使用reduce来搞定这个问题,以下相当于设置初始分为0,
var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);

 























以上是关于一. JavaScript数组常用方法的主要内容,如果未能解决你的问题,请参考以下文章

18个常用的JavaScript片段分享

常用Javascript代码片段集锦

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

javascript JS-常用代码片段

几个关于js数组方法reduce的经典片段