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)];

实现extname()描述

描述:对于给定的文件名返回它的拓展名,如emoji.png => .png

// 找到文件名的最后一个『.』,然后返回后面的字符串内容
function extname(filename) {
  return filename.lastIndexOf('.') > 0 ? filename.slice(filename.lastIndexOf('.')) : '';
}

实现flattened()方法

描述:对多维数组进行降维操作,如[[1, 2],[3, 4]] => [1, 2, 3, 4]

// 方法1 => 递归
function flattened1(arr) {
  let flattenedArr = [];
  // 循环传入的数组元素
  arr.map(function(item) {
    // 如果还是一个数组,就递归调用该方法
    if (Array.isArray(item)) {
      flattenedArr = flattenedArr.concat(flattened(item));
    } else {
      flattenedArr.push(item);
    }
  })
  return flattenedArr;
}
// 方法2 => toString()
// 限制:数组元素只能为数字
function flattened2(arr) {
  arr.toString().split(',').map(function(item) {
    // 类型转换
    return +item;
  })
}
// 方法3 => reduce
// 限制:只能降二维的数组
function flattened3(arr) {
  arr.reduce((acc, cur) => acc.concat(cur),[]);
}
// 方法3改进版
function flattened3(arr) {
  arr.reduce((acc, cur) => {
    return acc.concat(Array.isArray(cur) ? flattened3(cur) : cur);
  }, [])
}
// 方法4 => 扩展运算符
// 限制:与方法三一样
function flattened4(arr) {
  return [].concat(...arr);
}
// 方法4改进版
function flattened4(arr) {
  while(arr.some(item => Array.isArray(item))) {
    arr = [].concat(..arr);
  }
  return arr;
}
// 思考 => 结合数组去重和降维的方法,实现数组的并集操作
function union(...args) {
  return [...new Set([].concat(...args))];
}