数组常用方法的总结

首先介绍的常用方法有:Array.join()、Array.reverse() 、Array.sort() 、Array.concat() 、Array.slice() 、Array.splice()、Array.push()和Array.pop();
以及ES5和ES6新增加的方法

1、Array.join()

将数组中的元素以字符串的形式拼接起来,接收一个字符串参数为连接符号,默认为逗号

var a = [1,2,3];
var b = a.join();
console.log(b);//1,2,3

2、Array.reverse()

将数组元素反向排列并返回

var a = [1,2,3];
var b = a.reverse();
console.log(b);//[3,2,1]

3、Array.sort()

将数组排序,默认从小到大;可接受一个函数作为条件实现从大到小。

        var a = [2,1,3];
        var b = a.sort();
        console.log(b);//1,2,3
        var c = [2,1,3];
        var d = c.sort(function (num1,num2) {
            return num2-num1;
        });
        console.log(d);//3,2,1

4、Array.concat()

连接两个数组,并不对原数组造成影响

        var a = [1,2,3];
        var b = [4,5];
        var c = a.concat(b);
        console.log(c);//1,2,3,4,5

5、Array.slice()和Array.splice()

前者:数组截取,一个参数表示从这个位置截取到末尾,两个参数表示截取的开始位置的结束位置,复数表示从倒数第几个开始截取(数字指的是下标,从0开始)。不对原数组造成影响
后者: 数组删除或替换,会对元数组造成影响,接收参数为删除元素的位置,三个参数或以上参数时,第一个为要插入的位置,第二个为从这个位置开始删除几个元素,之后为插入到这个位置之后的元素。对原数组造成影响

//      var 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]
        
        //var a = [1, 2 , 3, 4, 5, 6, 7, 8];
        //a.splice(4);//删除5,6,7,8  a=[1,2,3,4]
        //a.splice(1,3);//删除2~4
        //a.splice(1,1);
        
//      var a = [1, 2 , 3, 4, 5];
//      a.splice(2, 2, 'a', 'b'); //从第二个数开始删两个,再讲a,b插入后边  a=[1, 2, 'a', 'b' , 5]
//      console.log(a);

6、Array.push()和Array.pop()

从尾部开始添加或删除元素

var stack = []; //stack:[]
stack.push(1,2); //statck:[1,2];返回2
stack.pop(); //stack:[1];返回2

7、toString()和toLocaleString()

toString()将数组所有元素转化为字符串并且输出用逗号分隔的字符串列表,和不使用任何参数调用join()方法返回的字符串一致
[1, 2, 3].toString() //生成'1,2,3'
[1,[2, 'c']].toString() //生成'1,2,c'
toLocaleString()返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.toLocaleString(); 
console.log(str); 
// 输出 "1337,2015/2/27 下午8:29:04,foo" 
// 假定运行在中文(zh-CN)环境,北京时区

ES5数组方法

1、forEach()

该方法用来遍历数组,并给每一个数组添加指定的函数。传入参数为三个:分别为数组元素、下标和这个数组本身。

var keys = [1,2,3];
keys.forEach(function(value, index, array){
  console.log(value);
})

该方法的缺点是:你能使用break终端遍历,也不能使用return返回到外部函数

2、map()

该方法会将数组中的每一个元素去执行map()里的函数,最终返回一个数组。数组中的元素为每一个元素执行这个函数之后的结果。

返回的为一个数组,我们需要返回一个新的值来添加到这个数组里

a = [1, 2, 3];
b= a.map(function(value){
  return value*value;
})
console.log(b); //b是[1, 4, 9]

3、filter()

过滤效果。需要返回一个布尔类型的值进行判断。返回符合这个参数函数里的判断的元素组成的新数组:

a = [1, 2, 3, 4, 5];
b = a.filter(function(value){
  return value > 3;
})
//b:[4, 5]

也可以fun(val,index)两个参数,也可以对下标来就行判断

4、every()和some()

判断是否都符合以及存在符合参数函数里的条件。返回的结果为一个布尔类型的值。
every()方法

var a = [1, 2, 3, 4, 5]
a.every(function(x) {return x<10;})  // =>true:所有值小于10
a.every(function(x) {return x%2 === 0;}) // =>false:不是所有值都为偶数

some()方法

var a = [1, 2, 3, 4, 5]
a.some(function(x) {return x%2 === 0;}) // =>true:存在偶数
a.some(isNaN) // =>false:不包含非数值元素

5、reduce()和reduceRight()

reduce()一个参数或两个。第一个为函数,对数组元素进行计算。返回计算之后的值。第二个可选参数相对于数组中添加了这个元素去进行计算。

        var a = [1, 2, 3, 4, 5]
        var sum = a.reduce(function(x, y) {return x+y}); //数组求和
        console.log(sum);

reduceRight() 是从右边开始进行计算

6、indexOf() 和 lastIndexOf()

用来索引数组中是否存在该元素。如果存在返回第一个位置的下标,不存在则返回 -1 。

a = [0, 1, 2, 1, 0]
a.indexOf(1); // => 1:a[1]是1
a.lastIndexOf(1); // =>3:a[3]是1

lastIndexOf()方法为从最后一个开始索引


ES6数组方法

1、Array.from()

用来将类数组以及可遍历的对象(如ES6新增的数据结构Set和Map)转化为真正的数组。

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

2、Array.of()

将一组值转为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

数组实例的方法

1、find()和findIndex()

前者用来验证是否存在符合条件的元素,存在即返回该元素。不存在返回undefined;

[1, 4, -5, 10].find((n) => n < 0)// -5

后者和前者一样,不过存在时返回的是下标。不存在时返回的为-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9;}) // 2

2、fill()

用参数来替换数组中的元素。

['a', 'b', 'c'].fill(7)// [7, 7, 7]new Array(3).fill(7)// [7, 7, 7]

3、entries()、keys()以及values()

这三个方法WieES6新增的三个用来遍历数组的方法。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

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

推荐阅读更多精彩内容

  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 3,992评论 0 6
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,152评论 0 4
  • 说到车,世界上有千千万。有人说不要去在意自己开的是什么车,但他必须得拉风! 比如说车轮必须要大,最好是打过车身。这...
    城堡里的人阅读 181评论 0 1
  • 有点无法理解,为什么会有人,把另一个人的文章抄过来,然后当做自己的人生经历? 别人来评论的时候,他也能说的头头是道...
    沙加之伦阅读 840评论 5 8
  • 为什么会那么期待七月的来临?想不出什么词藻来形容我所期待的七月。 有人说你受了委屈,你的家人会为你在心...
    黒白橙阅读 226评论 0 5