良好习惯

函数式编程

5 个提升 js 编码水平的实例

:top::top:良好习惯

判断数据类型

typeof 是否能正确判断类型

因为由于历史原因，在判断原始类型时，typeof null会等于object。而且对于对象来说，除了函数，都会转换成 object。

typeof 1; // 'number'
typeof "1"; // 'string'
typeof null; //"object"

typeof []; // 'object'
typeof {}; // 'object'
typeof window.alert; // 'function'

instanceof 是否能正确判断类型

虽然 instanceof 是通过原型链来判断的，但是对于对象来说，Array也会被转换成Object，而且也不能区分基本类型string和boolean。

function Func() {}
const func = new Func();
console.log(func instanceof Func); // true

const obj = {};
const arr = [];
obj instanceof Object; // true
arr instanceof Object; // true
arr instanceof Array; // true

const str = "abc";
const str2 = new String("abc");
str instanceof String; // false
str2 instanceof String; // true

Object.prototype.toString.call();

因为每个对象都有一个 toString()方法，当要将对象表示为文本值或以预期字符串的方式引用对象时，会自动调用该方法。默认情况下，从 Object 派生的每个对象都会继承 toString()方法。如果此方法未在自定义对象中被覆盖，则toString()返回[Object type]，其中 type 是对象类型。所以就有以下例子：

Object.prototype.toString.call(new Date()); // [object Date]
Object.prototype.toString.call("1"); // [object String]
Object.prototype.toString.call(1); // [object Numer]
Object.prototype.toString.call(undefined); // [object Undefined]
Object.prototype.toString.call(null); // [object Null]

var type = function(data) {
  var toString = Object.prototype.toString;
  var dataType =
    data instanceof Element
      ? "element" // 为了统一DOM节点类型输出
      : toString
          .call(data)
          .replace(/\[object\s(.+)\]/, "$1")
          .toLowerCase();
  return dataType;
};

type("a"); // string
type(1); // number
type(window); // window
type(document.querySelector("h1")); // element

通用的数组/类数组对象封装

但是如果我们要循环一个类数组对象呢？
例如 NodeList。直接循环是会报错的：

document.querySelectorAll("div").map(e => e) // Uncaught TypeError: document.querySelectorAll(...).map is not a function

[...document.querySelectorAll("div")].map(e => e)


var listMap = function(array, type, fn) {
    return !fn ? array : Array.prototype[type]["call"](array, fn)
};
var divs = document.querySelectorAll("div");
listMap(divs, "forEach", function(e) {
    console.log(e)
});

获取 dom 元素节点的偏移量

牛逼的 reduce

数据去重

const data = [
  {
    name: "Kris",
    age: "24"
  },
  {
    name: "Andy",
    age: "25"
  },
  {
    name: "Kitty",
    age: "25"
  },
  {
    name: "Andy",
    age: "25"
  },
  {
    name: "Kitty",
    age: "25"
  },
  {
    name: "Andy",
    age: "25"
  },
  {
    name: "Kitty",
    age: "25"
  }
];

现在我们要去重里面 name 重复的对象，这时候我们可以利用 reduce

const dataReducer = (prev, cur, idx) => {
  let obj = {};
  const { name } = cur;
  obj[name] = cur; //obj:Kris: {name: "Kris", age: "24"}
  return {
    ...prev,
    ...obj
  };
};
const reducedData = data.reduce(dataReducer, {});
let newData = Object.values(reducedData);
// 0: {name: "Kris", age: "24"}
// 1: {name: "Andy", age: "25"}
// 2: {name: "Kitty", age: "25"}

批量生成对象元素

const createList = (item, idx) => {
  let obj = {};
  obj[`a{idx}`] = "data";
  return obj;
};
const listReducer = (acc, cur) => (!acc ? { ...cur } : { ...cur, ...acc });
const obj = Array.from(new Array(20), createList).reduce(listReducer);

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search

良好习惯

5 个提升 js 编码水平的实例

判断数据类型

typeof 是否能正确判断类型

instanceof 是否能正确判断类型

通用的数组/类数组对象封装

获取 dom 元素节点的偏移量

牛逼的 reduce

数据去重

批量生成对象元素

强类型检查

变量

函数

条件

类

JavaScript 设计模式

设计原则

设计模式

工厂模式

工厂模式概念

工厂模式前端中实例

单例模式

单例模式前端中的实例

适配器模式

适配器模式前端中的实例

装饰器模式

代理模式

代理模式前端中的实例

观察者模式

观察者模式前端中的实例

状态模式