2. JavaScript Array

此文章用于归纳Array的所有方法


在JavaScript中,除了Object,用得最多的可能就是数组Array了。下面我们将一起来总结一下数组Array的所有方法。

首先总结一下Array的属性:

  • Array.length:返回数组的长度。

然后总结一下Array的方法:

  • Array.from(arrayLike ,function):此方法接受2个参数,第一个参数接受一个类数组对象,第二个参数接受一个映射函数。该方法是将arrayLike转换成真正的数组,如果有第二个参数,将会把第一个参数里的每一个元素在function中作用一遍,并返回结果,构成一个新数组,然后返回该数组。具体操作如下:
function arr(){
 return  Array.from(arguments, function(num){return num*2});   
}
arr(1,2,3,4);//[2, 4, 6, 8]
  • Array.isArray(obj):确定输入的值是否是一个数组,如果是,返回true如果不是,返回false
  • Array.of():是创建数组的一种方法,它接受的每一个参数都将作为新构成数组的一个元素。该方法返回构建完成的数组。和Array()创建数组有稍微不同,具体如下:
Array.of(2);       // [2] 
Array.of(1, 2, 3); // [1, 2, 3]
Array(2);          // [ , ]或者[undefined × 2]
Array(1, 2, 3);    // [1, 2, 3]

最后总结Array实例的方法,也就是array.prototype的方法:

  • concat():该方法用于合并2个或多个数组,不会改变原数组,返回一个新数组。
var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr1.concat(arr2);//["a", "b", "c", "d", "e", "f"]
arr1.concat(1,2,3)//["a", "b", "c", 1, 2, 3]
  • copyWithin(target, start = 0, end = this.length):该方法接受3个参数,其中第一个参数为目标位置(必选),第二个是起始位置(可选),第三个是结束位置(可选)。该方法的作用是将指定的一部分元素复制到同一个数组指定的位置替换掉,并返回数组。具体代码如下:
//从第3个位置开始替换倒数第2个到倒数第1个元素,即5
[1,2,3,4,5,6].copyWithin(3,-2,-1)//[1,2,3,5,5,6]
//从第0个位置开始替换第2到第4的元素,即3,4
[1,2,3,4,5,6].copyWithin(0,2,4)//[3,4,3,4,5,6]
  • entries():将输入的数组变为迭代器对象,可使用next()或者for of循环。具体代码如下:
var a = ['a', 'b', 'c'];
var iterator = a.entries();
console.log(iterator.next()); //Object {value: Array(2), done: false}
for (let e of iterator) {
  console.log(e);
}
// [1, 'b']
// [2, 'c']
  • every(function):该方法接受一个函数作为参数,该函数可以有3个参数,第一个参数是当前正在处理的数组的元素,第二个参数为当前元素的索引,第三个参数为该数组本身。该方法主要的作用是遍历每一个元素,看是否每一个元素都能通过function的测试,如果都通过,返回true,只要有一个没通过,返回false。具体代码如下:
[1,2,3,4,5,6].every(function(item,index){
   return item>5
})//false
[1,2,3,4,5,6].every(function(item,index){
   return item>0
})//true
  • some(function):与 every(function)类似。只要有一个元素满足条件,返回true,没有一个元素满足条件,返回false
[1,2,3,4,5,6].some(function(item,index){
   return item>5
})//true
[1,2,3,4,5,6].some(function(item,index){
   return item>9
})//false
  • fill(value, start = 0, end = this.length):该方法接受3个参数,第一个参数为填充的值,第二个参数和第3个参数与copyWithin()类似。具体代码如下:
//用3替换倒数第2个到倒数第1个元素,即5
[1,2,3,4,5,6].fill(3,-2,-1)//[1,2,3,4,3,6]
//用0替换第2到第4的元素,即3,4
[1,2,3,4,5,6].fill(0,2,4)//[1,2,0,0,5,6]
  • filter(function):该方法的function参数与every类似,不同的地方在于,该方法返回一个通过function测试的元素组成的新数组。具体代码如下:
[1,2,3,4,5,6].filter(function(item,index){
   return item>5
})//[6]
[1,2,3,4,5,6].filter(function(item,index){
   return item>2
})//[3,4,5,6]
  • find(function):该方法的function参数与every类似,不同的地方在于,该方法返回第一个通过function测试的元素,如果都没通过,返回undefined。具体代码如下:
[1,2,3,4,5,6].find(function(item,index){
   return item>5
})//6
[1,2,3,4,5,6].find(function(item,index){
   return item>2
})//3
  • findIndex(function):该方法的function参数与every类似,不同的地方在于,该方法返回第一个通过function测试的元素的索引,如果都没通过,返回-1。具体代码如下:
[1,2,3,4,5,6].findIndex(function(item,index){
   return item>5
})//5
[1,2,3,4,5,6].findIndex(function(item,index){
   return item>2
})//2
  • forEach(function):该方法的function参数与every类似,不同的地方在于,该方法没有返回值,只是将数组中每一个元素在函数中作用一遍。具体代码如下:
var arr = [];
[1,2,3,4,5,6].forEach(function(item,index){
  if(item>2){ arr.push(item); }
})
console.log(arr)//[3, 4, 5, 6]
  • includes(element,fromIndex = 0):该方法接受2个参数,第一个参数是需要寻找的元素,第二参数可选,为从什么位置开始寻找。如果找到了,返回true,如果没找到,返回false具体代码如下:
var arr = [1,2,3]
arr.includes(2);//true
arr.includes(5);//false
arr.includes(2,2)//false
  • indexOf(element,fromIndex = 0):该方法接受2个参数,第一个参数是需要寻找的元素,第二参数可选,表示从什么位置开始寻找。找到了返回当前元素的位置,如果没找到,返回-1具体代码如下:
var arr = [1,2,3]
arr.indexOf(2);//1
arr.indexOf(5);//-1
arr.indexOf(2,2)//-1
  • lastIndexOf(element,fromIndex = 0):该方法接受2个参数,第一个参数是需要寻找的元素,第二参数可选,表示从什么位置开始寻找。如果找到了,返回给定的元素最后一次出现的位置,如果没找到,返回-1具体代码如下:
var arr = [1,2,3,1]
arr.lastIndexOf(2);//3
arr.lastIndexOf(5);//-1
arr.lastIndexOf(2,2)//-1
  • join(separator = ','):该方法接受1个参数(可选),将数组的所有元素以separator连接为字符串,并返回该字符串。具体代码如下:
var a = ['a', 'b', 'c'];
a.join();      // 'a,b,c'
a.join(', ');  // 'a, b, c'
a.join(' + '); // 'a + b + c'
a.join('');    // 'abc'
  • keys():该方法作用于entries()类似,将对象变为可迭代的对象,但还是有所不同。具体代码如下:
var a = ['a', 'b', 'c'];
var iterator = a.keys();
console.log(iterator.next()); //Object {value: 0, done: false}
for (let e of iterator) {
console.log(e);
}
//1
//2
  • map(function):该方法的function参数与every类似,不同的地方在于该方法返回一个由function作用之后的新数组,该方法。具体代码如下:
[1,2,3,4,5,6].map(function(item,index){
return item*2
})//[2, 4, 6, 8, 10, 12]
  • pop():该方法会删除最后一个元素并返回该元素,被删除元素的数组长度减少1。具体代码如下:
var arr = [1, 2, 3];
arr.pop();//3
console.log(arr); // [1, 2]
  • push(element):该方法会在最后添加一个元素并返回该数组的length。具体代码如下:
var arr = [1, 2, 3];
arr.push(4);//4
console.log(arr); // [1,2,3,4]
  • reduce(function):该方法接受一个function作为参数,把数组的元素依次放入function中,得到的结果作为也作为参数传入function,一直到所有元素作用完毕,返回最终结果。具体代码如下:
var arr = [1,2,3,4,5,6]
arr.reduce(function(element1,element2){
    return element1+element2
})//21
  • reduceRight(function):该方法与reduce()类似,只不过执行顺序是从右往左。具体代码如下:
var arr = [1,2,3,4,5,6]
arr.reduceRight(function(element1,element2){
    return element1+element2
})//21
  • reverse()该方法是将数组中的元素顺序反转,并返回该数组。具体代码如下:
var arr = [1,2,3,4,5,6]
arr.reverse()
  • shift():该方法和pop()类似,只不过pop删除最后一个元素,shift()删除第一个元素。
var arr = [1, 2, 3];
arr.shift();//1
console.log(arr); // [2, 3]
  • slice(start = 0,end=this.length):该方法接受2个参数,一个开始的位置,一个结束的位置(不包括结束的位置)。选择数组的这一部分浅拷贝到一个新数组对象里面,并返回新数组。原数组不会改变。具体代码如下:
var arr = [1,2,3,4,5,6]
//选择第2和第4,即3,4
arr.slice(2,4)//[3,4]
console.log(arr)// [1,2,3,4,5,6]
  • splice(start = 0, deleteCount, element ...):该方法接受3个参数,第一个参数是修改的开始位置,第二个参数是可选的,表示要移除数组的个数,第3个参数是加入的元素。该方法返回被删除的数组,并且原数组会被修改。具体代码如下:
var arr = [1,2,3,4,5,6,7,8]
//从第2开始,删除4个元素,并添加moonburn字符串
arr.splice(2,4,'moonburn')//[3,4,5,6]
console.log(arr)// [1,2,'moonburn',7,8]
  • sort(compareFunction):该方法接受一个参数(可选)。如果不输入参数,会自发的给数组排序,默认排序顺序是根据字符串Unicode码点。也可以加入compareFunction,自己排序。具体代码如下:
var arr = [1,20,3,40,5,60]
arr.sort(function(element1,element2){
    return element1>element2
})
console.log(arr)// [1, 3, 5, 20, 40, 60]
  • toLocaleString():数组的toLocaleString()会将所有的元素都作用一遍toLocaleString(),并拼接为字符串。具体如下:
var arr = [123,new Date(),'string']
arr.toLocaleString()//"123,2017-6-8 11:04:50,string"
  • toString()toLocaleString()类似,只是不带地域特色。具体如下:
var arr = [123,new Date(),'string']
arr.toString()//"123,Thu Jun 08 2017 11:08:24 GMT+0800 (中国标准时间),string"
  • unshift(element····):将一个或多个元素添加到数组的开头。返回新数组的length具体代码如下:
var arr = [1,2,3,4];
arr.unshift('a','b');//6
console.log(arr);//["a", "b", 1, 2, 3, 4]
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容