ES6编程风格

你有free style吗?
答案是:没有。

JavaScript不需要free style,
当然,除了以下这种

// Author: Ryan Barnet
($=[$=[]][(__=!$+$)[_=-~-~-~$]+({}+$)[_/_]+($$=($_=!''+$)[_/_]+$_[+$])])()[__[_/_]+__[_+~$]+$_[_]+$$](_/_)

继续正题,今天总结并记录了下ES6的编程风格。

最直白的编程风格————代码规范

利用代码规范约束松散随意的键盘输入,并有效避免迷之错误的发生。

善用语法特性

  1. Module
    使用传统的构建方法兼容各种规范,是经验之举。
(function(root, factory) {
    if (typeof define === "function " && define.amd) {
        define(factory)
    } else {
        if (typeof exports === "object") {
            module.exports = factory()
        } else {
            root.mod = factory()
        }
    }
}(this, function() {
  return mod()
}));

现在更好的方法是

// mod.js
const Mod = {}
export default Mod
// app.js
import Mod from './mod'
  1. Class
    周知class是一种语法糖,但也让语法更明了,告别 prototype 操作 , 告别 instanceof 运算。
class Animal {
  constructor() {
    // ...
  }
  speak() {
    // ...
  }
}

class Dog extends Animal {
  bark() {
    // ...
  }
}

  1. Function
// 使用箭头函数书写特性
[1, 2, 3].map((i) => {
  return i + 1;
});

// 使用箭头函数作用域特性
(x) => fun.apply(this, x)

// 函数善用参数特性
function fun(options = {}) {
   /**
      参数默认值替代下面的兼容写法
      options = options || {}
   */
}

  1. 其他语法
    扩展运算符
// 数组的拷贝
const items = [1, 2, 3];
const arr = [...items];

// 函数参数扩展
function fun(...args) {
   return args.join('');
}

解构赋值

// 基础用法
const arr = [1, 2, 3, 4];
const [head, second, ...rest] = arr;

function getPosition(pos) {
  const {x, y} = obj;
}


// 交换对象
[a, b] = [b, a];

字符串拼接

const name = 'Todd';
const greetings = `hello!${name}`;

数组

// 查找成员时使用find,比filter更便利(filter需要判断结果的个数)
const arr = [{id: 1}, {id: 2}, {id: 3}];
const result = arr.find(item => item.id === 1);

// 类数组对象转数组
const nodes = Array.from(document.querySelectorAll('div'));

// 填充数组成员,非常迅捷的方法
const arr = new Array(101).fill(0);

小结

以上一些方法,熟练运用,方可简化思维,让动作行云流水般顺滑。

发表评论

电子邮件地址不会被公开。 必填项已用*标注