使用Vue框架之前需要懂ECMAScript 6 那些知识?
1. 常用的es6特性。参数默认值:var link = function(height = 20, color = 'orange', url = 'http://baidu.com') {...}模板对象:在字符串里面输出变量, 使用新的语法 $ {params},并把它放在反引号里 。并且 ` 为多行字符串允许换行使用var first=1;var last=1...
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 (生成器)
更多推荐
所有评论(0)