JS中常用的API-Array篇

数组中的迭代方法
  • forEach()
    • 方法对数组的每个元素执行一次给定的函数（按升序）。
    • 该方法传入一个callback函数，这个函数有三个参数：①当前元素的值 ②当前元素的下标（可选） ③ 数组本身（可选）
    • 该方法不修改原数组，返回值为undefined
    • 该方法适合用于遍历数组（取代for），拿到数组的每一项进行一些操作
    • 在MDN中看到值得注意的一点：注意在promise或者async await中的使用，当浏览器对异步函数进行回调的时候，已经打印sum = 0了，如果每次循环都对sum进行打印的话，会发现其分别是5， 4， 5
let ratings = [5, 4, 5];

let sum = 0;

let sumFunction = async function (a, b) {
    return a + b;
}

ratings.forEach(async function(rating) {
    sum = await sumFunction(sum, rating);
})

console.log(sum);
// Expected output: 14
// Actual output: 0
  • map()
    • 对数组进行迭代，并且返回新数组。
    • 参数：callback函数，callback函数中同样有三个参数：当前元素值、当前元素下标（可选）、数组本身（可选）
    • callback函数的返回值组成新数组。(原数组不变)
let arr = [10,20,30]
let mapResult = arr.map((item,index)=>{return item*2})
console.log(mapResult)   -> [20, 40, 60]
  • filter()
    • 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
    • 参数：callback函数，callback函数中同样有三个参数：当前元素值、当前元素下标（可选）、数组本身（可选）
    • 原数组不变
let arr = [10,20,1,3,500]
let filterResult =  arr.filter((item,index)=>{
    return item > 10
})
consolo.log(filterResult) -> [20, 500]
  • reduce()
    • 参数有两个：
      • callback函数 : callback(accumulator,item,index)：
        • accumulator：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
        • item：当前元素的值
        • index（可选）：当前元素的下标
      • initialValue（可选）：作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
reduce api用法

let arr = [10, 20, 30, 40]; 
result = arr.reduce((N, item) => {
    // 第一次：10 20
    // 第二次：30 30
    // 第三次: 60 40
    // ...
    // reduce只传递一个回调函数，那么N第一次默认是第一项，后续的N是上一次函数执行的处理结果
    console.log(N, item);
    return N + item;
});
console.log(result); 


result = arr.reduce((N, item) => {
    console.log(N, item);
    return N + item;
}, 0); //=>REDUCE的第二个参数就是给N赋值的初始值 ITEM从数组第一项开始遍历
console.log(result);
  • some()
    • 遍历数组中的每一项
    • 参数：回调函数 回调函数有两个参数(item,index) item是数组中当前要操作 的这一项，index是当前项的索引
    • 返回值：指定函数判断后 有一个为true 则返回true
    • 不改变原数组
const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true
  • every()
    • 与some类似，不同的是，every要求每一项都符合函数判断才能返回true
数组的排序或者排列
  • reverse()
    • 把数组倒过来排列
    • 返回值：排列后的新数组
    • 原来数组改变
let ary = [12, 15, 9, 28, 10, 22];
ary.reverse(); console.log(ary); //=>[22, 10, 28, 9, 15, 12]
  • sort(compareFunction)
    • 对数组进行排序
    • 参数：可以没有，也可以是个函数
    • 返回值：排序后的新数组
    • 原来数组改变
    • SORT方法中如果不传递参数，是无法处理10以上 数字排序的(它默认按照每一项第一个字符来排)
ary = [12, 15, 9, 28, 10, 22];
ary.sort();
console.log(ary); //=> [10, 12, 15, 22, 28, 9]
  • 想要实现多位数正常排序，需要给SORT传递一个函 数，函数中返回 a-b 实现升序，返回 b-a 实现降
  • MDN中还有许多细节，在这不一一赘述
ary = [12, 15, 9, 28, 10, 22];
ary.sort(function(a,b){ return a-b; });
//ary.sort((a, b) => a - b); 
console.log(ary);  => [9, 10, 12, 15, 22, 28]
把数组转换为字符串
  • toString()
    • 返回值：转换后的字符串，每一项用逗号分隔（原来数组不变）
let ary = [10, 20, 30];
let res = ary.toString();
console.log(res); //=>"10,20,30"
console.log([].toString()); //=>""
console.log([12].toString()); //=>"12"
  • join()
    • 把数组转换为字符串 参数为指定的分隔符（字符串格式） 返回值是转换后的字符串（原来数组不变）
let ary = [10, 20, 30];
let res = ary.join('');
console.log(res); //=>"102030"
res = ary.join();
console.log(res); //=>"10,20,30"
res = ary.join('|');
console.log(res); //=>"10|20|30"
res = ary.join('+'); 
console.log(res); //=>"10+20+30"
console.log(eval(res)); //=>60  eval把字 符串变为JS表达式执行
检测数组中的含某一项
  • indexOf()
    • 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
    • 参数：第一个为要查找的给定元素 ，第二个是从数组中的哪个位置开始查找（可选）
    • lastIndexOf()则是找到给定元素最后出现的索引
let ary = [10, 20, 30, 10, 20, 30];
console.log(ary.indexOf(20)); //=>1
console.log(ary.lastIndexOf(20)); //=>4
  • includes()
    • 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
数组中的增删改查
  • push()
    • 向数组末尾增加内容，参数可以是任意类型
    • 返回值是新增后数组的长度
let ary = [10, 20];
let res = ary.push(30, 'AA');  
ary[ary.length] = 40; // 基于原生JS操作键值对的方法，也可以向末尾追加 一项新的内容
console.log(res, ary); //=>4 [10,20,30,'AA',40]
  • pop()
    • 删除数组中的最后一项
    • 返回值是删除的那一项
let ary = [10, 20, 30, 40];
let res = ary.pop();
console.log(res, ary); //=>40  [10,20,30]
  • shift()
    • 删除数组第一项
    • 返回值是删除的那一项
let ary = [10, 20, 30, 40];
let res = ary.shift();
console.log(res, ary); //=>10  [20, 30, 40]
  • unshift()
    • 向数组开始位置增加内容，参数多个可以是多个，任意类型
    • 返回值是新增后数组长度
let ary = [10, 20];
let res = ary.unshift(30, 'AA');
console.log(res, ary); //=>4  [30,'AA',10,20]
slice与splice
  • arr.slice(begin, end) ->数组浅拷贝
    • 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
      • begin（可选）
        如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
        如果省略 begin，则 slice 从索引 0 开始。
        如果begin 超出原数组的索引范围，则会返回空数组。
      • end (可选)
        如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
        如果 end 被省略，则 slice 会一直提取到原数组末尾。
        如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。 
let ary = [10, 20, 30, 40, 50];
let res = ary.slice(1, 3);
console.log(res); //=>[20,30]

// m不写是找到末尾
res = ary.slice(1);
console.log(res); //=>[20, 30, 40, 50]
// 数组的克隆
res = ary.slice();
console.log(res); //=>[10, 20, 30, 40, 50]
  • splice(n,m,x)
    • 实现数组的增删改、参数(n,m)都是数字->从索引n删m个元素，m不写就删到末尾、删除的内容用新数组返回。
    • splice(n,m,x)->从索引n开始删除m个元素，用x占用删除的部分，删除的内容用新数组返回
    • splice(n,0,x)->从索引n开始，一个都不删，把x放到 索引n的前面

数组的克隆

//基于这种方法可以清空一个数组，把原始数组中的内容以新数组存储起来
let ary = [10, 20, 70, 80, 90];
res = ary.splice(0);
console.log(res, ary);//=>[10, 20, 70, 80, 90] []

数组的增加

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除
其他数组方法
  • contact()
    • 实现数组拼接
    • 多个任意类型值
    • 返回拼接后的新数组（原来数组不变）
 let ary1 = [10, 20, 30];
 let ary2 = [40, 50, 60];
 let res = ary1.concat('前端新人', ary2); 
 console.log(res);  =>(7)[10, 20, 30, "前端新人", 40, 50, 60]
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容