ES6笔记 - 常用特性

// 函数体内的变量function f1() {  let n = 5;  if (true) {    let n = 10;  }  console.log(n); // 5}// for循环的初始量for (let i = 0; i < buttons.length; i++) {  // …}

// 定义常量const REG_GET_INPUT = /^\d{1,3}$/;// 定义配置项const config = {  isDev : false,  pubDir: './admin/'}// 引入 gulpconst gulp    = require('gulp');

//1. 注入变量与方法const start = 'hi all';const getName = () => {  return 'jelly';};const conf = {  fav: 'Coding'};const msg = `${start}, my name is ${getName()}, ${conf.fav} is my favourite`;// 2. 与引号混用const wantToSay = `I'm a "tbfed"`;// 3. 支持多行文本const slogan = `I have a dream today!`;// 4. 比较适合写HTMLconst resultTpl = `  <section>    <div>...</div>  </section>`;

// 完整写法const getOptions = (name, key) => {  ...}// 省略参数括号const getOptions = key => {  ... }// 省略参数和方法体括号const getOptions = key => console.log(key);// 无参数或方法体，括号不能省略const noop = () => {};// 应用示例let names = [ 'Will', 'Jack', 'Peter', 'Steve', 'John', 'Hugo', 'Mike' ]let newSet = names  .map((name, index) => {    return {      id: index,      name: name    }  })  .filter(man => man.id % 2 == 0)  .map(man => [man.name])  .reduce((a, b) => a.concat(b))console.log(newSet) //=> [ 'Will', 'Peter', 'John', 'Mike' ]

const bookSet = ['UED', 'TB fed', 'Not find'];const bookCollection = () => {  return {book1: 'UED', book2: 'TB fed'};};// 1. 解构也可以设置默认值const {book1, book3 = 'Not find'} = bookCollection();// 2. 解构数组时候是可以跳过其中某几项的const [book1,,book3] = bookSet;  // book1 = 'UED', book3 = 'Not find'// 3. 解构可以取到指定对象的任何属性，包括它包含的方法const {length: setLength} = bookSet;  // setLength = 3

// 1. rest 得到的是一个真正的数组而不是一个伪数组const getOptions = function(...args){  console.log(args.join); // function};// 2. rest 可以配合箭头函数使用，达到取得所有参数的目的const getOptions = (...args) => {  console.log(args); // array};// 3. spread 可以用于解构时，聚合所得的值const [opt1, ...opts] = ['one', 'two', 'three', 'four'];// 4. spread 可以用于数组定义const opts = ['one', 'two', 'three', 'four'];const config = ['other', ...opts];

//定义类class Point {  //构造函数  constructor(x, y) {   //实例属性    this.x = x;    this.y = y;  }  //get和set用于对实例属性自定义存取行为  get prop() {    return 'getter';  }  set prop(value) {    console.log('setter: '+value);  }  //实例方法  toString() {    return '(' + this.x + ', ' + this.y + ')';  }  //静态方法  static classMethod() {    return 'hello';  }  //静态属性  static get HuaChen(){    return 'jelly';  }}

class ColorPoint extends Point {  constructor(x, y, color) {    super(x, y); // 调用父类的constructor(x, y)    this.color = color;  }  toString() {    return this.color + ' ' + super.toString(); // 调用父类的toString()  }}

import name from "module-name"import * as name from "module-name"import { member } from "module-name"import { member as alias } from "module-name"import { member1 , member2 } from "module-name"import { member1 , member2 as alias2 , [...] } from "module-name"import defaultMember, { member [ , [...] ] } from "module-name"import defaultMember, * as alias from "module-name"import defaultMember from "module-name"import "module-name"

export var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;// 等同于var firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};// 有defautl 与 无default// 输出export default function crc32() {  // ...}// 输入import crc32 from 'crc32';// 输出export function crc32() {  // ...};// 输入import {crc32} from 'crc32';// 设置别名function add(x, y) {  return x * y;}export {add as default};

// 正确export var a = 1;// 正确var a = 1;export default a;// 错误export default var a = 1;

// 1. 多个异步任务同时执行用 Promise.all，顺序执行使用链式调用// Promise.allPromise  .all([jsBuildPromise, cssBuildPromise])  .then(() => {    ...  });// 2. Promise 的链式调用需要每一个过程返回一个 Promise 对象才能保证顺序执行gitPromise  .then(() => git.add())  // 正确，箭头函数简写  .then(() => {    git.commit(); // 错误，函数返回 undefined，会立即执行下一过程  })  .then(() => {    return git.log(); // 正确  });// 3. Promise 需要调用 catch 方法来捕获错误，而且过程内的错误不会阻塞后续代码执行new Promise(() => {  f;  // not define error !}).catch((err) => {  console.log(err)  // show 'f is not define'});console.log('error test');  // 此行可以被正常执行
现在ES6有着广泛的应用，ES6对ES5有着大量的语法更新和改动，掌握ES6相关特性是前端的必要技能，有利于学习掌握新的知识，提升编码效率和质量。