JavaScript 数组常用方法

数组

  • 所谓数组,就是一堆数据的集合(容器),里面存放各种各样的数据。

    var arr = ['a','b','c'];
    
  • length属性
    可以用length属性取得数组(集合)的长度

    var arr = ['a','b','c'];
    arr.length; // 3  返回3,说明数组有三个元素
    
  • 数组下标

    数组中每个元素都有对应的标号指向它,这个标号我们可以称之为下标

    下标从0开始,数组中的第1个元素下标为0,第2个元素下标为1,依次类推。

    var arr = ['a','b','c'];
    arr[0]; // 'a'
    arr[1]; // 'b'
    arr[2]; // 'c'
    

    当通过不存在的下标获取值则得到一个undefined值。

    var arr = ['a','b','c'];
    arr[4]; // undefined
    

join()

arr.join(separator)

作用:把数组中的每个元素用分隔符separator进行连接起来,返回一个字符串。如果省略了这个参数,默认使用逗号作为分隔符

var arr = ['a','b','c'];
console.log( arr.join('-') );  // 'a-b-c'
console.log( arr.join('') );  // 'abc'
console.log( arr.join() );  // 'a,b,c'

pop()

arr.pop()

作用: 将删除arr的最后一个元素,把数组长度减1,并且返回它删除的元素的值。如果数组已经为空,则pop()不改变数组,返回undefined。

var arr = ['a','b','c'];

console.log( arr.pop() ); // c
console.log( arr.pop() ); // b
console.log( arr.pop() ); // a
console.log( arr.pop() ); // undefined

push()

arr.push(value,...)

作用:向数组尾部添加一个或多个元素 ,成功返回数组的新长度

var arr = ['a','b','c'];
console.log( arr.push('d') ); // 4
console.log( arr.push('e','f') ); // 6
console.log(arr); //["a", "b", "c", "d", "e", "f"]

unshift()

arr.unshift(value,...)

作用:向数组头部添加一个或多个元素 ,成功返回数组的新长度。

var arr = ['a','b','c'];
console.log( arr.unshift('d') ); // 4
console.log( arr.unshift('e','f') ); // 6
console.log(arr); // ["e", "f", "d", "a", "b", "c"]

shift()

arr.shift()

作用:方法shift()将把arr的第—个元素移出数组,b并返回那个元素的值,并且将余下的所有元素前移一位,以填补数组头部的空缺 。

var arr = ['a','b','c'];
console.log( arr.shift('d') ); // 'a'
console.log(arr); // ["b", "c"]

sort()

arr.sort(callback)

作用:对数组进行排序,指定d回调函数callback进行排序。

返回值:对数组的引用。注意,数组在原数组上进行排序,不制作副本。

var arr = [14,8,24];
arr.sort( function(a,b){ 
    return a-b; // 或return  a>b   
}) ;  
console.log(arr);  // [8, 14, 24]  升序

var arr = [14,8,24];
arr.sort(function(a,b){ 
        return b-a; //  或return b>a  
}) ;  
console.log(arr); //[24, 14, 8] 降序

slice()

arr.slice(start,[,end])

作用:截取数组长度。从下标start开始,到end(不包括该元素)下标结束,

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

若没有写end结束下标,则截取到数组末尾。

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

若end为负数,则从数组尾部开始截取,即-1指最后一个元素,-2指倒数第二个元素,以此类推 。

注:不包括最后一个元素。

var arr = [1,2,3,4,5];
console.log( arr.slice(2,-1)); // [3,4]
console.log( arr.slice(2,-2)); // [3]

toString()

arr.toString()

作用: 把数组转为用逗号连接的字符串表示。类似arr.join()效果一样

var arr = [1,2,3,4,5];
console.log( arr.toString() ); // '1,2,3,4,5'
console.log( arr.join() ); // '1,2,3,4,5'

splice()

作用:用来删除数组元素或者给数组添加元素。

arr.splice(start, deleteCount, value, ...)

参数

  • start

    开始插入和(或)删除的数组元素的下标

  • deleteCount

    从start开始,包括start所指的元素在内要删除的元素个数。这个参数是可选的,如果没有指定它,splice()将删除从start开始到原数组结尾的所有元素。

  • value

    要插入数组的零个或多个值,从start所指的下标处开始插入

返回值

​ 如果从arr中删除了元素,返回的是含有被删除的元素的数组。

例1:从下标2开始删除后面所有的元素

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

例2:从下标2开始删除后面的2个元素

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

例3:从下标2开始删除后面的2个元素,同时在start指定的下标2后面加一个元素new

var arr = [1,2,3,4,5];
console.log( arr.splice(2,2,'new') ); // [3,4]
console.log(arr);// [1,2,'new',5]

reverse()

arr.reverse()

作用:颠倒数组中元素的顺序,返回新的电刀后的数组元素

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

isArray()

作用:检测一个变量是否是数组。(typeof不行,返回的是object)

function isArray(value){
    return Object.prototype.toString.call(value) == '[object Array]';
}

var arr = [1,2,3,4,5];
console.log(isArray(arr)); // true
console.log(isArray({})); // false

同理:

​ 判断是否是对象使用[object object]

​ 是否是字符串 [object string]

​ 以此类推

concat()

作用:连接多个数组,返回新的数组

var arr1 = [1,2,3,4,5];
var arr2 = [6,7,8];
console.log( arr1.concat(arr2) ); // [1, 2, 3, 4, 5, 6, 7, 8]

foreach()

作用:遍历数组元素

var arr = ['a','b','c'];
arr.forEach(function(v,key){
    //v当前循环的元素 key当前元素的下标
    console.log(key,v)
});

结果:

0 "a"
1 "b"
2 "c"

filter()

作用:过滤数组中的某些元素,在回调函数中设置条件,不满足的都会被过滤掉,返回一个新数组。

var age = [18,23,28,30];
var newArr = age.filter(function(v){
    //v当前循环的元素
    //返回年龄大于25的元素
    return v>25;
});

console.log(newArr);// [28, 30]

map()

作用:遍历数组,数组里的元素经过指定回调函数进行加工处理。 返回一个新的数组

var age = [18,23,28,30];
var newArr = age.map(function(v){
    //给每个元素加10岁
    return v+10;
});
console.log(newArr); // [28, 33, 38, 40]

reduce()

reduce方法有两个参数,第一个参数是一个callback,用于针对数组项的操作;第二个参数则是传入的初始值,这个初始值用于单个数组项的操作。需要注意的是,reduce方法返回值并不是数组,而是返回经过叠加处理后的结果。

reduce方法最常见的场景就是叠加

var items = [5,6,7];
var callback = function(sum,item){
    //item数组值的每个元素
    //sum每次累加的和
    return sum+item;
}

var total = items.reduce(callback,0); //把循环完后的累加结果加0
console.log(total); // 18

数组去重

方式有很多种。

  • 用es6的Set对象
var arr = [1,2,3,3,4,5,5];
var set = new Set(arr);
var newArr = Array.from(set);
console.log(newArr); // [1, 2, 3, 4, 5]

更骚气的用法:

var newArr = [...new Set([1,2,3,3,4,5,5])]
console.log(newArr); // [1, 2, 3, 4, 5]
  • 另indexOf方法来判断,存在返回元素下标,不存在返回-1

建立一个存放结果的数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组

var unique = function(arr) {
    var n = []; // 存放已遍历的满足条件的元素
    for (var i = 0; i < arr.length; i++) {
        // indexOf()判断当前元素是否已存在
        if (n.indexOf(arr[i]) == -1) n.push(arr[i]);
    }
    return n;
}

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

如果想arr.unique()这样调用,则需要把此方法加上Array的原型对象上。

Array.prototype.unique = function() {
    var n = []; // 存放已遍历的满足条件的元素
    for (var i = 0; i < this.length; i++) {
        // indexOf()判断当前元素是否已存在
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
}
var arr = [1,2,3,3,6,6];
console.log( arr.unique() );  // [1, 2, 3, 6]

数组中是否存在于某个值

可以用indexOf方法来判断,存在返回元素下标,不存在返回-1

function inArray(value,arr){
    return arr.indexOf(value)!== -1 ? true : false;
}
var arr = [1,2,3];
console.log( inArray(2,arr) ); // true
console.log( inArray(4,arr) ); // false

由于笔者才学疏浅,文章有错误的地方望大家批评指正,一起学习进步。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容