js基础回顾

Author Avatar
FanShen 3月 28, 2019

接下来的时间,我会总结几篇js基础知识的文章。可能这些知识点都是老生常谈,网上一搜一大堆。但只有把基础知识打牢,才能在programing这条路上走的更远。一定要理解前端领域的变与不变,不能一味地追逐热门。

数组去重

  //原数组上操作
  //思路:判断数组中每个元素是否与后一个元素相等,如果相等,就使用splice()删除后面的元素
  function dup1(arr) {
    for (var i = 0; i < arr.length; i++) {
      for (var j = i + 1; j < arr.length; j++) {
        if (arr[i] === arr[j]) {
          arr.splice(j,1);
          j--;
        }
      }
    }
    return arr;
  }
  //新数组
  //思路:遍历原数组,使用indexOf判断新数组是否包含原数组的每一项,如果没有就push进新数组
  function dup2(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
      if (newArr.indexOf(arr[i]) == -1) {
        newArr.push(arr[i]);
      }
    }
    return newArr;
  }
  //使用对象
  //思路: 把数组的值存为object的key值,去对象中访问属性
  function dup3(arr) {
    var newArr = [];
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
      if (!obj[arr[i]]) {
        newArr.push(arr[i]);
        obj[arr[i]] = 1;
      }
    }
    return newArr;
    // return arr.filter(function(item, index, arr) {
    //   return obj.hasOwnProperty(item) ? false : (obj[item] = true);
    // })
  }
  //使用filter
  function dup4(arr) {
    var filterArr = arr.filter(function(item, index, arr) {
      return arr.indexOf(item) === index;
    })
    return filterArr;
  }
  //箭头函数写法
  const filterArr = (arr) => {
    return arr.filter((item, index, arr) => arr.indexOf(item) === index)
  }
  //ES6 set
  function dup5(arr) {
    // 也可以使用展开运算符
    return Array.from(new Set(arr)) || [...new Set(arr)]
  }

实现multiply()方法

描述:const a = [1, 2, 3, 4, 5]; a.multiply(); => [1, 2, 3, 4, 5, 1, 4, 9, 16, 25]

// 方法1 => not good,没有按照要求
let multiply = function(arr) {
  let multiplyArr = arr.map(num => num * num);
  return arr.concat(multiplyArr);
};
const a = [1, 2, 3, 4, 5];
multiply(a);
// 方法2 => not bad,直接在数组原型上添加方法
Array.prototype.multiply = function() {
  let multiplyArr = this.map(num => num * num);
  this.push(...multiplyArr);
}
// 方法3 => good,在对象上添加方法
const pushArr = function(arr, num) {
  arr.push(num * num);
  return arr;
}
a.multiply = function() {
  return this.reduce(pushArr, this);
}
// 方法4 => very good,使用ES6,语句更简洁
a.multiply = () => [...a, ...a.map(num => num * num)];