JavaScript -常用 API

在项目开发中会经常使用到这些js的基础API,在这里总结一些常用的API

1. 数组去重

 // 简单的数组去重
    const array = [1, 2, 3, 4, 5, 6, 2, 3, 6, 9];
    array.filter((item, key, arr) => arr.indexOf(item) === key);
    // or
    const newarr = [...new Set(array)];
    // console.log(newarr);

2.但是在项目中有时候我们经常遇到的是对象数组去重，直接封装一个方法来调用

    let objectArr = [
      { first_name: '1号', id: '1' },
      { first_name: '2号', id: '2' },
      { first_name: '3号', id: '3' },
      { first_name: '相同2号', id: '2' }
    ];
    let list = [
      { first_name: '4号', id: '4' },
      { first_name: '5号', id: '5' },
      { first_name: '6号', id: '6' },
      { first_name: '7号', id: '3' }
    ]
   function arrayUnique(arr, key) {
      // 1. 原生方法，原生方法需要传递key（id）值,或者写死为id,但有些需求是根据名字name来去重的也有，具体看个人需求传啥吧
      let newobj = {}, newArr = [];
      // for (let i = 0; i < arr.length; i++) {
      //   let item = arr[i];
      //   if (!newobj[item[key]]) {
      //     newobj[item[key]] = newArr.push(item);
      //   }
      // }

      // 2.  数组的reduce()方法(ie9以下不支持此方法)
      newArr = arr.reduce((preVal, curVal) => {
        newobj[curVal.id] ? '' : newobj[curVal.id] = preVal.push(curVal);
        return preVal
      }, [])
      return newArr
      // 实现去重的方法很多，看个人用法
    }

3. 对比两个数组是否存在相同的id，存在相同则返回 true，不存在相同则返回 false

 /**
   *  判断两个数组里的对象id是否存在相同，存在相同则返回 true，不存在相同则返回 false
   *  需求是勾选，筛选数据的时候不能和另外一组存在相同的选项，来做一个提示，项目中很多地方用到，封装函数方便全局调用
   * 
   */
    // console.log(contrastArr(objectArr, list));
    function contrastArr(arr1, arr2) {
      let flag = false
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
          if (arr1[j].id == arr2[i].id) {
            // console.log(arr1[j],arr2[i]); 找出相对应的对象做逻辑处理
            flag = true
            break
          }
        }
      }
      return flag
    }

4.//数组排序 大小排序

    var sortarr = [99, 33, 77, 66, 11, 22, 101];
    function sortNumber(a, b) {
      return a - b
    }
    // console.log(sortarr.sort(sortNumber));

5./数组拼接 concat

   var arrconcat = [{ George: '1' }, { John: '2' }, { Thomas: '3' }];
    var arr2 = [{ James: '4' }, { Adrew: '5' }, { Martin: '6' }];
    console.log(arrconcat.concat(arr2));

6.数组，对象属性删除

   // delete 数组
    let arrd = [0, 1, 2];
    delete arrd[1];
    // console.log(arrd); // [0, empty, 2]
    //对象
    let objd = { name: '刘亦菲', age: '18', sex: '女' };
    delete objd.sex;
    // console.log(objd); // {name: "刘亦菲", age: "18"}
    const arr3 = [3, 4, 4, 5, 4, 6, 5, 7];
    // const a = arr3.shift(); // 把数组的第一个元素从其中删除，并返回第一个元素的值（改变原数组）
    // const a = arr3.unshift(8); // （改变原数组）
    // const a = arr3.push(8,9) //在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度 (改变原数组）
    // console.log(arr3.join('-')); // 3-4-4-5-4-6-5-7 以参数作为分隔符，将所有参数组成一个字符串返回（默认逗号分隔）
    // console.log(arr3.toString()); // 3,4,4,5,4,6,5,7 数组转字符串 join 也可以
    // console.log(arr3.join());
    let str = "abc,abcd,abcde";   //字符串转数组
    let s = str.split(",");// 在每个逗号(,)处进行分解。 [abc,abcd,abcde]


    // slice（start, end） 用于提取原来数组的一部分，会返回一个提取的新数组，原数组不变
    //数组 , 对象都可以
    let arr_start = [3, 4, 4, 5, 4, 6, 5, 7];
    let a = arr_start.slice(2, 5); // [4, 5, 4]
    let obj_start = [
      { first_name: '1号', id: '0' },
      { first_name: '2号', id: '1' },
      { first_name: '3号', id: '2' },
      { first_name: '4号', id: '3' },
      { first_name: '5号', id: '4' },
      { first_name: '6号', id: '5' },
      { first_name: '7号', id: '6' },
      { first_name: '8号', id: '7' },
    ]
    // let newa = obj_start.slice(2, 5)  // 从第2个开始提取，索引从0开始算，到第5个为止不包括第5个
    // let newa = obj_start.splice(2, 5)  // 会改变原数组，从索引第2个开始截取，截取5个
    // splice（t, v, s）t: 被删除元素的起始位置；v：被删除元素个数；s:s 以及后面的元素为被插入的新元素
    let newa = obj_start.splice(2, 5, { first_name: '插入进来的元素', id: '9' })//在原数组删除后，往原数组插入一个对象
    // console.log(newa)  // newa提取后的新数组， obj_start已经被改变

7.map 和forEach ，filter ，find

   // map 依次遍历数组成员，根据遍历结果返回一个新数组。（不会改变原始数组）
    // forEach 跟 map 方法类似，遍历数组，区别是无返回值。 会改变原始数组

    let esArr = [1, 2, 3, 4]
    let newEs = esArr.map((item) => {
      return item * 2
    })
    // console.log(newEs); //返回新的数组，不会改变原始数组
    let isA = [
      { name: 'lilei', age: '25', sex: 'men' },
      { name: 'nike', age: '23', sex: 'men' },
      { name: 'alisa', age: '23', sex: 'men' }
    ]
    isA.forEach((value, index) => {
      // value['age'] = '18'
      value.age = '18'
    })
    // console.log(isA);

    // 过滤函数，返回符合条件的元素的数组
    const arrFilter = [3, 4, 4, 5, 4, 6, 5, 7];
    const af = arrFilter.filter(item => {
      return item >= 4 && item <= 6
    });

    // 数组实例的`find`方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为`true`的成员，然后返回该成员。如果没有符合条件的成员，则返回`undefined`。
    const afin = arrFilter.find((item, index) => {
      return item >= 10
    });

8.reduce
pre: 必填，累计变量；cur：必填，当前变量；curIndex: 可选，当前位置；arr: 可选，原数组；

    // 计算数组中每个元素出现的次数
    let names = ['小明', '小红', '张三', '李四', '王五', '小红'];
    let nameNum = names.reduce((pre, cur, curIndex, arr) => {
      if (cur in pre) {
        pre[cur]++
      } else {
        pre[cur] = 1
      }
      return pre
    }, {})
    // console.log(nameNum); 

    let arrRe = [1, 2, 3, 4]; // 
    let sum = arrRe.reduce((x, y) => {
      return x + y
    })
    let mul = arrRe.reduce((x, y) => x * y)
    // console.log(sum); //求和，10
    // console.log(mul); //求乘积，24

9…trim（） 去掉字符串两端的空格

    const str_s = '    hello world    ';
    console.log(str_s.trim()) // hello world(不会改变原数组)

10.Array.isArray（）用来判断是不是数据是不是一个数组，返回值为 true 或 false。

const arr = [{name:'张三',id:'123'}];
    console.log(Array.isArray(arr)) // true

11.replace（）替换匹配的字符串

  const reArr = 'hello world';
    console.log(reArr.replace('world', '世界'))  // hello 世界

12. 合并对象

   // 合并对象
    let a1 = { v: 'Vue' }
    let a2 = { r: 'React' }
    let a3 = { A: 'Angular' }
    let oas = {...a1,...a2,...a3}
    // 象合并也可以使用 Object.assign({},{})

13. 将数组中字符串转换成整型，
    有时候后端传给前端的是 [“1”, “2”, “3”]这样的的数据，但前端需要的是[1,2,3] 这样整数类型的

var arrmap = ["1", "2", "3"];
    integer= arrmap.map(function (data) {
      return +data;
    });//此时arr变成[1,2,3]

虽然这是一些简单处理数据的API，项目中也经常用到，方便下次用到记录一下，
面试中也经常被面试官问到，有些面试官就喜欢问一些基础的东西，在一些场景下用什么方法去处理，在项目中用多了也就牢记于心了，还有一些ES6基础也是必问的