数组内建方法大全(二)

数组内建方法大全(一)中,介绍了7种不太常见(我很多没见过)的数组内建方法。如果说有点华而不实,那在这一篇我将再展示几种实用的方法,当然,也是面试踩雷区

同样,翻译原文中文文档都在此,随便戳.

增删改查:splice、shift(unshift)、pop(push)

1.Array.protoType.splice(begin,end):分割数组,提取想要的范围,不改变原数组
  • 返回值:新的数组
  • 参数:
  1. begin(可选):起始位置
  2. end (可选):结束位置,没有指定结束位置,默认返回begin后所有值
  • 注意事项:
  1. 若begin > end ,返回空数组
  2. 返回的新数组内容从begin开始,到end的前一个值,即包含begin位,不包含end位
  3. 若参数为负数,则看做加上数组的length,如[0,1,2].splice(-2,-1)相当于[0,1,2].splice(1,2),结果都为[1]
  • 例子
var animals = ['1', '2', '3', '4', '5'];

console.log(animals.slice(2));
//  ["3", "4", "5"]
console.log(animals.slice(2, 4));
// ["3", "4"]
console.log(animals.slice(1, 5));
// ["2", "3", "4", "5"]

3.Array.protoType.shift():从数组中移除第一个元素,改变数组长度
  • 无参数

  • 返回值:被移除的元素

  • 对应相反方法: Array.unshift(element1,...),往数组前位添加元素

  1. 改变数组长度

  2. 返回值: 注意,unshift返回的是新数组的长度!

  • 例子:
var a = [1, 2, 3];

console.log(a.shift());  //   移除第一个元素,返回被移除的元素
//1 
console.log(a); 
// [2,3]

console.log(a.unshift(4,5));   //向数组中添加元素,返回新数组长度
// 4,
console.log(a); 
// [4 , 5 , 2 , 3]
4. Array.protoType.pop():从数组中移除最后一个元素,改变数组长度
  • 无参数

  • 返回值:被移除的元素

  • 对应相反方法:Array.push(element1,...),在数组最后添加元素

  1. 改变数组长度

  2. 返回值: 注意,push返回的是新数组的长度!

  • 例子:
var plants = ['1', '2', '3', '4', '5'];

console.log(plants.pop());   //移除最后一个元素,返回被移除的元素
// "5"
console.log(plants);
// ["1", "2", "3", "4"]

console.log(plants.push(“0”)); //6

遍历迭代:reduce、map、forEach

5.Array.protoType.reduce(callback(accumulator,currentValue,currentIndex),initialValue):对数组的值按索引顺序进行迭代操作,如累加
  • 返回值:最后一次调用得出的累积结果

  • 参数:

  1. callback:数组中每个值都会经过的回调操作
    a. accumulator:当前的累积操作结果
    b. currentValue(可选):当前正在操作的值
    c. currentIndex(可选):当前操作值的索引
  2. initialValue(可选):第一次操作前的初始值,若没有设置该参数,默
6.Array.protoType.map(callback(currentValue,index,array),thisArg):操作数组中的每个值
  • 返回值:一个每个值都已经过回调操作的新的数组

  • 参数:

  1. callback:
    a. currntValue:遍历的当前值
    b. index(可选) :索引
    c.array(可选):当前数组
  2. thisArg(可选):callback函数中的 this 关键字可引用的对象。如果省略 thisArg,则 undefined 将用作 this 值。
  • 例子:
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

认为数组中的第一个值,并从第二个值开始迭代

  • 例子:
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));   //10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));  //15

7.Array.protoType.forEach(callback(currentValue,index,array),thisArg):遍历数组
  • 返回值: undefined

  • 参数:

  1. callback():对数组每一个元素的操作函数
    a. currentValue:当前遍历的值
    b. index(可选):索引值
    c. array(可选):正在操作的数组
  2. thisArg(可选):callback函数中的 this 关键字可引用的对象。如果省略 thisArg,则 undefined 将用作 this 值。
  • 例子:

其他:indexOf(lastIndexOf)、sort、keys、join、some(every)

8.Array.protoType.indexOf(searchElement,fromIndex):匹配指定位置起出现的第一个指定元素
  • 返回值:匹配元素的索引值,若匹配不成功,返回-1

  • 参数:

  1. searchElement:待匹配的元素
  2. fromIndex(可选):开始匹配的位置,默认从0开始
  • 对应相反方法:Array.lastIndexOf(searchElement,fromIndex),匹配指定位置起出现的最后一个指定元素
    ** 返回值: 匹配元素的索引值,若匹配不成功,返回-1

  • 例子:

var a = [2, 9, 9]; 
a.indexOf(2); // 0 
a.indexOf(7); // -1

a.lastIndexOf(9); //2
9.Array.protoType.sort(compareFunction()):为数组排序
  • 返回值:排序后的新数组

  • 参数:
    compareFunction(a,b)(可选):自定义排序方法,默认为字Unicode码

    • 函数需要传递两个参数a,b
    • 若a < b ,即a排在b之前,则返回一个小于0的数
    • 若a = b ,则返回0
    • 若a < b ,则返回一个大于0的数
  • 例子:

var a = new Array(4, 11, 2, 10, 3, 1);
var b = a.sort();   //  b= [1,10,11,2,3,4].按照标准字符排序

function compareNum(first ,second{
    if (first == second)
        return 0;
    if (first < second)
        return -1;
    else
        return 1; 
}

var c = a.sort(compareNum)  //c = [1,2,3,4,10,11];
10.Array.protoType.keys():
  • 返回值:一个迭代器,它可返回数组的索引

  • 参数:无参数

  • 例子:

var arr = ['a', 'b', 'c'];
var k= arr.keys();
// k.next().value == 0
// k.next().value == 1
// k.next().value == 2 

11.Array.protoType.join(separator):在数组值之间插入分隔符,并将整个数组转化为字符串
  • 返回值:转化后的字符串

  • 参数:
    separator(可选):分隔符,可以为空。

  • 注:如果数组的任一元素为 undefined 或 null,则该元素将被视为空字符串。

  • 例子:

var elements = ['Fire', 'Wind', 'Rain'];

console.log(elements.join());  //Fire,Wind,Rain
console.log(elements.join('"'));// FireWindRain
console.log(elements.join('-'));  // Fire-Wind-Rain

12.Array.protoType.some(callback(currentValue,index,array),thisArg):判断数组中是否有满足回调方法中的值
  • 返回值:布尔值

  • 参数:

  1. callback():对数组每一个元素的操作函数
    a. currentValue:当前遍历的值
    b. index(可选):索引值
    c. array(可选):正在操作的数组
  2. thisArg(可选):callback函数中的 this 关键字可引用的对象。

*相关方法:array.every(callback())是判断数组中的所有值是否满足回调方法,参数一致

  • 例子:
function isBiggerThan10(element, index, array) {
  return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

[11,10,9,1,4].every(isBiggerThan10); // false

推荐阅读更多精彩内容