美文网首页
ES6 常用方法

ES6 常用方法

作者: 程序员大春 | 来源:发表于2019-10-30 17:27 被阅读0次

    引用自:https://www.yunliantaida.com

    数组转数据对象

    const arr = [
      { key: "id", name: "编号" },
      { key: "name", name: "名称" },
    ];
    const obj = Object.fromEntries(arr.map(item => [item.key, item]));
    console.log(obj);
    
    // 输出
    // {
    //    id: { key: "id", name: "编号" },
    //    name: { key: "name", name: "名称" }
    // }
    

    快速查找数据对象

    var objArr = [{id:1, name:'jiankian'}, {id:188, name:'superme'}, {id:233, name:'jobs'}, {id:288, name:'bill', age:89}] ;
    var ret2 = objArr.find((v) => {
        return v.id == 233;
    });
    // return {id:233, name:'jobs'}
    // 当返回undefined时,则说明objArr中没有,可以添加
    

    去重

    let arr = [1, 2, 2, 3, 4, 5, 5, 6];
    let newArr =Array.from(new Set(arr)) 
    console.log(newArr)
    

    去掉空字符串、undefined、null

    let arr = ['','1','2',undefined,'3.jpg',undefined]
    let newArr = arr.filter(item => item)
    console.log(newArr)
    

    filter() 筛选数组对象

    let arr = [
            {a:'苹果',b:'面包',c:'吃'},
            {a:'香蕉',b:'面包',c:'不吃'},
            {a:'香蕉',b:'苹果',c:'吃'},
            {a:'苹果',b:'香蕉',c:'不吃'},
          ]
    console.log(arr.filter(item => item.a=== '苹果' ))
    //[{a:'苹果',b:'面包',c:'吃'},{a:'苹果',b:'香蕉',c:'不吃'}]
    

    合并多个数组

    array.concat(array1, array2,...arrayN);
    合并多个数组,返回合并后的新数组,原数组没有变化。

    const array = [1,2].concat(['a', 'b'], ['name']);
    // [1, 2, "a", "b", "name"]
    

    检测数组中的每一个元素是否都通过了callback测试

    array.every(callback[, thisArg]);
    检测数组中的每一个元素是否都通过了callback测试,全部通过返回true,否则返回false。

    // callback定义如下: element:当前元素值;index:当前元素下标; array:当前数组
    function callback(element, index, array) {
      // callback函数必须返回true或者false告知every是否通过测试
      return true || false;
    }
    

    查找符合条件的数据

    array.filter(callback[, thisArg]);
    返回一个新数组,包含通过callback函数测试的所有元素。

    // callback定义如下,三个参数: element:当前元素值;index:当前元素下标; array:当前数组
    function callback(element, index, array) {
      // callback函数必须返回true或者false,返回true保留该元素,false则不保留。
      return true || false;
    }
    const filtered = [1, 2, 3].filter(element => element > 1);
    // filtered: [2, 3];
    

    查找符合条件的第一个数据

    array.find(callback[, thisArg]);
    返回通过callback函数测试的第一个元素,否则返回undefined,callback函数定义同上。

    const finded = [1, 2, 3].find(element => element > 1);
    // finded: 2
    

    如果你需要找到一个元素的位置或者一个元素是否存在于数组中,使用Array.prototype.indexOf() 或 Array.prototype.includes()。

    查找符合条件的索引值

    array.findIndex(callback[, thisArg]);
    返回通过callback函数测试的第一个元素的索引,否则返回-1,
    callback函数定义同上。

    const findIndex = [1, 2, 3].findIndex(element => element > 1);
    // findIndex: 1
    

    判断一个数组是否包含一个指定的值

    array.includes(searchElement, fromIndex);
    includes() 方法用来判断一个数组是否包含一个指定的值,返回 true或 false。
    searchElement:要查找的元素;
    fromIndex:开始查找的索引位置。

    [1, 2, 3].includes(2, 2);
    // false
    

    找到一个给定元素的第一个索引

    array.indexOf(searchElement[, fromIndex = 0]);
    返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
    searchElement:要查找的元素;
    fromIndex:开始查找的索引位置。

    [2, 9, 7, 8, 9].indexOf(9);
    // 1
    

    将数组中的元素通过separator连接成字符串

    array.join(separator=',');
    将数组中的元素通过separator连接成字符串,并返回该字符串,separator默认为","。

    [1, 2, 3].join(';');
    // "1;2;3"
    

    返回一个新数组,新数组中的每个元素都是调用callback函数后返回的结果

    array.map(callback[, thisArg]);
    返回一个新数组,新数组中的每个元素都是调用callback函数后返回的结果。注意:如果没有return值,则新数组会插入一个undefined值。
    array.map由于不具有过滤的功能,因此array调用map函数时,如果array中的数据并不是每一个都会return,则必须先filter,然后再map,即map调用时必须是对数组中的每一个元素都有效。

    const maped = [{name: 'aa', age: 18}, {name: 'bb', age: 20}].map(item => item.name + 'c');
    // maped: ['aac', 'bbc'];
    

    数组中删除最后一个元素

    array.pop() 与 array.shift();
    pop为从数组中删除最后一个元素,并返回最后一个元素的值,原数组的最后一个元素被删除。数组为空时返回undefined。

    [1, 2, 3].pop();
    // 3
    

    数组中删除第一个元素

    shift删除数组的第一个元素,并返回第一个元素,原数组的第一个元素被删除。数组为空返回undefined。

    const shifted = ['one', 'two', 'three'].shift();
    // shifted: 'one'
    

    将一个或多个元素添加到数组的末尾

    array.push(element1, element2, ....elementN) 与 array.unshift(element1, element2, ...elementN);
    push是将一个或多个元素添加到数组的末尾,并返回新数组的长度; unshift将一个或多个元素添加到数组的开头,并返回新数组的长度。唯一的区别就是插入的位置不同。

    const arr = [1, 2, 3];
    const length = arr.push(4, 5);
    // arr: [1, 2, 3, 4, 5]; length: 5
    

    push和unshift方法具有通用性,通过call()或者apply()方法调用可以完成合并两个数组的操作。

    const vegetables = ['parsnip', 'potato'];
    const moreVegs = ['celery', 'beetroot'];
    // 将第二个数组融合进第一个数组
    // 相当于 vegetables.push('celery', 'beetroot');
    Array.prototype.push.apply(vegetables, moreVegs);
    

    或者

    [].push.apply(vegetables, moreVegs);
    // vegetables: ['parsnip', 'potato', 'celery', 'beetroot']
    

    数组中的每个元素(从左到右)执行callback函数累加

    array.reduce(callback[, initialValue]);
    对数组中的每个元素(从左到右)执行callback函数累加,将其减少为单个值。

    const total = [0, 1, 2, 3].reduce((sum, value) => {
      return sum + value;
    }, 0);
    // total is 6
     
    const flattened = [[0, 1], [2, 3], [4, 5]].reduce((a, b) => {
      return a.concat(b);
    }, []);
    // flattened is [0, 1, 2, 3, 4, 5]
     
    // initialValue累加器初始值, callback函数定义:
    function callback(accumulator, currentValue, currentIndex, array) {
    }
    

    accumulator代表累加器的值,初始化时,如果initialValue有值,则accumulator初始化的值为initialValue,整个循环从第一个元素开始;initialValue无值,则accumulator初始化的
    值为数组第一个元素的值,currentValue为数组第二个元素的值,整个循环从第二个元素开始。initialValue的数据类型可以是任意类型,不需要跟原数组内的元素值类型一致。

    const newArray = [{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].reduce((arr, element) => {
      if (element.age >= 2) {
        arr.push(element.name);
      }
      return arr; // 必须有return,因为return的返回值会被赋给新的累加器,否则累加器的值会为undefined。
    }, []);
     
    // newArray is ["bb", "cc"];
    

    上面代码的同等写法:

    const newArray = [{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].filter(element => element.age >= 2).map(item => item.name);
    // newArray is ["bb", "cc"];
    

    对于reduce的特殊用法,其实类似于省略了一个变量初始化步骤,然后通过每次的callback的返回修改该变量,最后返回最终变量值的过程,类似于一个变量声明 + 一个forEach执行过程。

    const newArray = [];
    [{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].forEach(item => {
     if (item.age >=2) {
      newArray.push(item.name);
     }
    });
    

    将数组中元素的位置颠倒

    array.reverse();
    将数组中元素的位置颠倒。

    ['one', 'two', 'three'].reverse();
    // ['three', 'two', 'one'],原数组被翻转
    

    返回一个新数组,包含原数组从begin 到 end(不包含end)索引位置的所有元素

    1. array.slice(begin, end)

    返回一个新数组,包含原数组从begin 到 end(不包含end)索引位置的所有元素。

    const newArray = ['zero', 'one', 'two', 'three'].slice(1, 3);
    // newArray: ['one', 'two'];
    

    判数组中是否有满足条件的数据

    array.some(callback[, thisArg]);
    判断数组中是否包含可以通过callback测试的元素,与every不同的是,这里只要某一个元素通过测试,即返回true。callback定义同上。

    [2, 5, 8, 1, 4].some(item => item > 6);
    // true
    

    对数组中的元素进行排序

    array.sort([compareFunction]);
    对数组中的元素进行排序,compareFunction不存在时,元素按照转换为的字符串的诸个字符的Unicode位点进行排序,慎用!请使用时一定要加compareFunction函数,而且该排序是不稳定的。

    [1, 8, 5].sort((a, b) => {
      return a-b; // 从小到大排序
    });
    // [1, 5, 8]
    

    通过删除现有元素和/或添加新元素来更改一个数组的内容

    array.splice(start[, deleteCount, item1, item2, ...]);
    通过删除现有元素和/或添加新元素来更改一个数组的内容。start:指定修改的开始位置;deleteCount:从 start位置开始要删除的元素个数;item...:要添加进数组的元素,从start 位置开始。
    返回值是由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
    如果 deleteCount 大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

    const myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
     
    const deleted = myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'
    // myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"],deleted为[]
    

    相关文章

      网友评论

          本文标题:ES6 常用方法

          本文链接:https://www.haomeiwen.com/subject/lucavctx.html