Array ES6及之前支持的方法总结

仅学习、强化记忆使用

原生支持

转换方法：toLocaleString()、toString()、valueof()、join()
栈方法：push()、pop()
队列方法：shift()、unshift()
重排序方法：sort()、reverse()
操作方法：concat()、slice()、splice()
其他：toSource()

一、转换方法：toLocaleString()、toString()、valueof()、join()

1. toLocaleString()：把数组转换为本地数组，并返回结果。(首先调用每个数组元素的toLocaleString()方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。)

var arr = [1, 2, 3]

console.log(arr.toLocaleString())

> 输出：
> 1,2,3

2. toString()：把数组转换为字符串，并返回结果。

var arr = [1, 2, 3]

console.log(arr.toString())

> 输出：
> 1,2,3

3. valueOf()：返回数组对象的原始值(valueOf()方法返回Array对象的原始值。该原始值由Array对象派生的所有对象继承。valueOf()方法通常由JavaScript在后台自动调用，并不显式地出现在代码中。)

var arr = [1, 2, 3]

console.log(arr.valueOf())

> 输出：
> [1, 2, 3]

4. Array.join()：把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分隔。

//([s])：分隔符
var arr = [1, 2, 3];

console.log(arr.join("."))

> 输出：
> 1.2.3

二、栈方法：push()、pop()

5. push()：向数组的末尾添加一个或更多元素，返回新数组的长度。

//(...ele)：添加的元素
var arr = [1, 2, 3];

console.log(arr.push(4, 5, 6))
console.log(arr)

> 输出：
> 6
> [1, 2, 3, 4, 5, 6]

6. pop()：删除并返回数组的最后一个元素

var arr = [1, 2, 3];

console.log(arr.pop())
console.log(arr)

> 输出：
> 3
> [1, 2]

三、队列方法：shift()、unshift()

7. shift()：删除并返回数组的第一个元素

var arr = [1, 2, 3];

console.log(arr.shift())
console.log(arr)

> 输出：
> 1
> [2, 3]

8. unshift()：向数组的开头添加一个或更多元素，并返回新的长度。

//(...ele)：添加的元素
var arr = [1, 2, 3];

console.log(arr.unshift(0, -1, -2))
console.log(arr)

> 输出：
> 6
> [0, -1, -2, 1, 2, 3]

四、重排序方法：sort()、reverse()

9. sort()：对数组的元素进行排序，返回结果数组

var arr = [4, 2, 3];

console.log(arr.sort())

> 输出：
> [2, 3, 4]

10. reverse()：颠倒数组中元素的顺序，返回结果数组。(该方法会改变原来的数组，而不会创建新的数组。)

var arr = [1, 2, 3];

console.log(arr.reverse())

> 输出：
> [3, 2, 1]

五、操作方法：concat()、slice()、splice()

11. Array.concat()：连接两个或更多的数组，返回一个数组。

//(arr)：数组
var a = [1, 2, 3];
var b = [4, 5]

console.log(a.concat(b));

> 输出：
> [1, 2, 3, 4, 5]

12. slice()：从某个已有的数组返回选定的元素组成的数组。

//(start[, end])：起始位置，结束位置
var arr = [1, 2, 3];

console.log(arr.slice(1))
console.log(arr.slice(1, 2))
console.log(arr)

> 输出：
> [2, 3]
> [2]
> [1, 2, 3]

13. splice()：删除元素，并向数组添加新元素(可选),返回被删除的元素组成的数组。

//(start[, num, ...ele])：起始位置，删除元素的个数, 要添加的元素（ps:第二个参数也有说是结束位置的，此处是本人chrome控制台测试结果）
var arr = [1, 2, 3]

console.log(arr.splice(1, 1))
console.log(arr)
console.log(arr.splice(1, 1, 4, 5, 6))
console.log(arr)

> 输出：
> [2]
> [1, 3]
> [3]
> [1, 4, 5, 6]

六、其他：toSource()

14. toSource()：返回该对象的源代码。（只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法）（来自w3school）

function employee(name, job, born) {
    this.name = name;
    this.job = job;
    this.born = born;
}

var bill = new employee("Bill Gates","Engineer",1985);
document.write(bill.toSource());

> 输出：
> ({name:"Bill Gates", job:"Engineer", born:1985})

ES5新增

索引方法：indexOf() 和 lastIndexOf()；
迭代方法：forEach()、map()、filter()、some()、every()；
归并方法：reduce()、reduceRight()；

一、索引方法：indexOf()、lastIndexOf()

1. Array.indexOf()：匹配数组中有无元素，不做类型转换，返回下标，默认-1，该方法从数组的开头开始向后查找

//(ele)：要查找的元素
var arr = [1, 2, 3, 1]

console.log(arr.indexOf(1))

> 输出：
> 0

2. Array.lastIndexOf(): 匹配数组中有无元素，不做类型转换，返回下标，默认-1，该方法从数组的末尾开始向前查找

//(ele)：要查找的元素
var arr = [1, 2, 3, 1]

console.log(arr.lastIndexOf(1))

> 输出：
> 3

二、迭代方法：forEach()、map()、filter()、some()、every()

3. Array.forEach()：对数组中的每一项运行给定函数，没有返回值，和for循环没有太大差别

//(item[, index, array])：每一项元素[, 索引, 数组]
var arr = [1, 2, 3]

arr.forEach(function(item, index, array) {
    console.log(item)
    console.log(index)
    console.log(array)
})

> 输出：
> 1 0 [1, 2, 3]
> 2 1 [1, 2, 3]
> 3 2 [1, 2, 3]

4. Array.map()：遍历数组中每一个元素，执行相应的操作，返回一个数组

//(item[, index, array])：每一项元素[, 索引, 数组]
var arr = [1, 2, 3]

console.log(arr.map(function(item, index, array) {
    return item*2
}))

> 输出：
> [2, 4, 6]

5. Array.filter()：对数组中的每一项运行给定函数，返回由true的项组成的数组。利用这个方法可对数组元素进行过滤筛选。

//(item[, index, array])：每一项元素[, 索引, 数组]
var arr = [1, 2, 3]

console.log(arr.filter(function(item, index, array) {
    return item > 2
}))

> 输出：
> [3]

6. Array.some()：对数组中的每一项运行给定函数，若任何一项返回true，则返回true

//(item[, index, array])：每一项元素[, 索引, 数组]
var arr = [1, 2, 3]

console.log(arr.some(function(item, index, array) {
    return item > 2
}))

> 输出：
> true

7. Array.every()：对数组中的每一项运行给定函数，若每一项都返回true，则返回true

//(item[, index, array])：每一项元素[, 索引, 数组]
var arr = [1, 2, 3]

console.log(arr.every(function(item, index, array) {
    return item > 2
}))

> 输出：
> false

三、归并方法：reduce()、reduceRight()

8. Array.reduce()：从数组的第一项开始，逐个遍历到最后一项

//(pre, cur, index, array])：上一次return的结果, 当前元素, 索引, 数组
var arr = [1, 2, 3, 4, 5]

console.log(arr.reduce(function(pre, cur, index, array) {
    console.log(pre);
    console.log(cur);
    console.log(index);
    console.log(array);
    return pre + cur
}))

> 输出：
> 1  2 1  [1, 2, 3, 4, 5]
> 3  3 2  [1, 2, 3, 4, 5]
> 6  4 3  [1, 2, 3, 4, 5]
> 10 5 4 [1, 2, 3, 4, 5]
> 15

9. Array.reduceRight()：从数组的最后一项开始，逐个遍历到第一项

//(pre, cur, index, array])：上一次return的结果, 当前元素, 索引, 数组
var arr = [1, 2, 3, 4, 5]

console.log(arr.reduceRight(function(pre, cur, index, array) {
    console.log(pre);
    console.log(cur);
    console.log(index);
    console.log(array);
    return pre + cur
}))

> 输出：
> 5  4 3 [1, 2, 3, 4, 5]
> 9  3 2 [1, 2, 3, 4, 5]
> 12 2 1 [1, 2, 3, 4, 5]
> 14 1 0 [1, 2, 3, 4, 5]
> 15

ES6新增

1. Array.find()：查找目标元素，找到就返回该元素，找不到返回undefined

var arr = [1, 2, 3]
//(item[, index, array])：每一项元素[, 索引, 数组]
console.log(arr.find(function(item, index, arr) {
    return item > 0;
}))

> 输出：
> 1

2. Array.findIndex()：查找目标元素，找到就返回元素的位置，找不到就返回-1。

//(item[, index, array])：每一项元素[, 索引, 数组]
var arr = [1, 2, 3]

console.log(arr.findIndex(function(item, index, arr) {
    return item > 0;
}))

> 输出：
> 0

3. Array.includes()：查找目标元素，返回Boolean

//(ele[, start])：目标元素[, 起始位置]
var arr = [1, 2, 3]

console.log(arr.includes(2, 2))

> 输出：
> false

4. Array.keys()：对键名的遍历，返回一个遍历器对象

var arr = [1, 2, 3]

for(let index of arr.keys()){
    console.log(index)
}

> 输出：
> 0
> 1
> 2

5. Array.values()：对键值的遍历，返回一个遍历器对象

var arr = [1, 2, 3]

for(let value of arr.values()){
    console.log(value)
}

> 输出：
> 1
> 2
> 3

6. Array.entries()：对键值对的遍历，返回一个遍历器对象

var arr = [1, 2, 3]

for(let obj of arr.entries()){
    console.log(obj)
}

> 输出：
> [0, 1]
> [1, 2]
> [2, 3]

7. Array.fill()：使用指定元素填充数组，返回填充后的数组(起始位置到(结束位置-1))

//(ele[, start, end])：(填充的元素， 起始位置， 结束位置)
var arr = [1, 2, 3]

console.log(arr.fill(5, 1, 2))

> 输出：
> [1, 5, 3]

8. Array.of()：将一组值，转换为数组，返回转换后的数组

//(...ele)：(元素)
console.log(Array.of(1, 2, 3))

> 输出：
> [1, 2, 3]

9. Array.copyWithin()：在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组

//(target, start, end)：(开始替换数据位置, 开始读取数据位置， 结束读取数据位置)
var arr = [1, 2, 3]

console.log(arr.copyWithin(0, 2, 3))

> 输出：
> [3, 2, 3]

10. Array.from()：将一个类数组对象或者可遍历对象转换成一个真正的数组

//(ele, function)：(类数组对象, 方法)
let arrayLike = {//必须是有length属性的对象，没有则返回空数组
    0: 1, 
    1: 2,
    2: 3,
    3: [0, 1, 2],
    'length': 4
}

console.log(Array.from("arrayLike"))
console.log(Array.from(arrayLike))
console.log(Array.from(arrayLike, x => x*x)) //等价于Array.from(arrayLike).map(x => x*x)

> 输出：
> ["a", "r", "r", "a", "y", "L", "i", "k", "e"]
> [1, 2, 3, [0, 1, 2]]
> [1, 4, 9, NaN]

最后编辑于：2019.07.15 15:18:06

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,036评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,046评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,411评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,622评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,661评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,521评论 1赞 304
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,288评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,200评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,644评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,837评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,953评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,673评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,281评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,889评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,011评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,119评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,901评论 2赞 355

Array ES6及之前支持的方法总结

原生支持

一、转换方法：toLocaleString()、toString()、valueof()、join()

1. toLocaleString()：把数组转换为本地数组，并返回结果。(首先调用每个数组元素的toLocaleString()方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。)

2. toString()：把数组转换为字符串，并返回结果。

3. valueOf()：返回数组对象的原始值(valueOf()方法返回Array对象的原始值。该原始值由Array对象派生的所有对象继承。valueOf()方法通常由JavaScript在后台自动调用，并不显式地出现在代码中。)

4. Array.join()：把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分隔。

二、栈方法：push()、pop()

5. push()：向数组的末尾添加一个或更多元素，返回新数组的长度。

6. pop()：删除并返回数组的最后一个元素

三、队列方法：shift()、unshift()

7. shift()：删除并返回数组的第一个元素

8. unshift()：向数组的开头添加一个或更多元素，并返回新的长度。

四、重排序方法：sort()、reverse()

9. sort()：对数组的元素进行排序，返回结果数组

10. reverse()：颠倒数组中元素的顺序，返回结果数组。(该方法会改变原来的数组，而不会创建新的数组。)

五、操作方法：concat()、slice()、splice()

11. Array.concat()：连接两个或更多的数组，返回一个数组。

12. slice()：从某个已有的数组返回选定的元素组成的数组。

13. splice()：删除元素，并向数组添加新元素(可选),返回被删除的元素组成的数组。

六、其他：toSource()

14. toSource()：返回该对象的源代码。（只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法）（来自w3school）

ES5新增

一、索引方法：indexOf()、lastIndexOf()

1. Array.indexOf()：匹配数组中有无元素，不做类型转换，返回下标，默认-1，该方法从数组的开头开始向后查找

2. Array.lastIndexOf(): 匹配数组中有无元素，不做类型转换，返回下标，默认-1，该方法从数组的末尾开始向前查找

二、迭代方法：forEach()、map()、filter()、some()、every()

3. Array.forEach()：对数组中的每一项运行给定函数，没有返回值，和for循环没有太大差别

4. Array.map()：遍历数组中每一个元素，执行相应的操作，返回一个数组

5. Array.filter()：对数组中的每一项运行给定函数，返回由true的项组成的数组。利用这个方法可对数组元素进行过滤筛选。

6. Array.some()：对数组中的每一项运行给定函数，若任何一项返回true，则返回true

7. Array.every()：对数组中的每一项运行给定函数，若每一项都返回true，则返回true

三、归并方法：reduce()、reduceRight()

8. Array.reduce()：从数组的第一项开始，逐个遍历到最后一项

9. Array.reduceRight()：从数组的最后一项开始，逐个遍历到第一项

ES6新增

1. Array.find()：查找目标元素，找到就返回该元素，找不到返回undefined

2. Array.findIndex()：查找目标元素，找到就返回元素的位置，找不到就返回-1。

3. Array.includes()：查找目标元素，返回Boolean

4. Array.keys()：对键名的遍历，返回一个遍历器对象

5. Array.values()：对键值的遍历，返回一个遍历器对象

6. Array.entries()：对键值对的遍历，返回一个遍历器对象

7. Array.fill()：使用指定元素填充数组，返回填充后的数组(起始位置到(结束位置-1))

8. Array.of()：将一组值，转换为数组，返回转换后的数组

9. Array.copyWithin()：在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组

10. Array.from()：将一个类数组对象或者可遍历对象转换成一个真正的数组

推荐阅读更多精彩内容