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]

你可能感兴趣的:(Array ES6及之前支持的方法总结)