1. 常用的es6特性。

参数默认值:

var link = function(height = 20, color = 'orange', url = 'http://baidu.com') {  
  ...  
}

模板对象:
在字符串里面输出变量, 使用新的语法 $ {params},并把它放在反引号里 。并且 ` 为多行字符串允许换行使用

var first=1;
var last=1;
var id=
var name = `Your name is ${first} ${last}.`;
var url = `我的序号是:${id},
我使用的是es6中新的字符串引号
可以换行使用
`;

解构赋值:

//变量声明并赋值时的解构
let [a,b]=[1,2];
console.log(a,b);  // 1 2

//变量先声明后赋值时的解构
let a,b;
[a,b]=[1,2];
console.log(a,b);  // 1 2

//有默认值时的解构
let a,b;
[a=7,b=1]=[1];
console.log(a,b);  // 1 1

//json对象
var data = $('body').data(),
house = data.house,  
mouse = data.mouse;
//结构出前面两个值  house 、 mouse
var {house,mouse} = $('body').data(); 
var {jsonMiddleware} = require('body-parser');
var {username,password} = req.body;

扩展运算符:
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
//上述方法实际上等价于:
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }
2. let,const,var的区别。

var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。
let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。
const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。

3. 箭头函数this的指向。

所谓的定义时候绑定,就是this是继承自父执行上下文!!中的this,比如这里的箭头函数中的this.x,箭头函数本身与say平级以key:value的形式,也就是箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.x实际上表示的是window.x,因此输出的是11。

var x=11;
var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say();//输出的值为11

var a=11;
function test2(){
  this.a=22;
  let b=()=>{console.log(this.a)}
  b();
}
var x=new test2();
//输出22

很奇怪对不对,我是这样理解的,ES6中定义的时候绑定this的具体含义,应该继承的是父执行上下文里面的this,切忌是父执行上下文!!!这样就很多箭头函数中的指向不明确就迎刃而解了。

注意:简单对象(非函数)是没有执行上下文的!

4. 手写es6 class继承。

class 可以 extends 自另一个 class。这是一个不错的语法,技术上基于原型继承。

要继承一个对象,需要在 {…} 前指定 extends 和父对象。

这个 Rabbit 继承自 Animal:

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed += speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stopped.`);
  }

}

// Inherit from Animal
class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}


let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!
5. promise的状态,链式调用,同步异步流程,唯一性。

深入理解 promise:promise的三种状态与链式调用

6. set去重。
let arr = [4, 1, 3, 3, 2, '2'];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [4, 1, 3, 2, "2"]
7. 模块
//导出
export var port = 3000;
export function getAccounts(url) { ...}
//导入
import * as service from 'module';
console.log(service.port); // 3000

这里还有许多ES6的其它特性你可能会使用到,排名不分先后:

  • 全新的Math, Number, String, Array 和 Object 方法
  • 二进制和八进制数据类型
  • 默认参数不定参数扩展运算符
  • Symbols符号
  • tail调用
  • Generators (生成器)
Logo

前往低代码交流专区

更多推荐