码迷,mamicode.com
首页 > 其他好文 > 详细

ES6 快速入门

时间:2018-07-01 15:20:16      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:.com   code   情况   es6   命令   声明   提取   快速   turn   

快速了解ES6部分新特性。。。

 

let

ES6新增了let命令,用于声明变量。其用法类似var,但是声明的变量只在let命令所在的代码块内有效。
{
    let x = 10;
    var y = 20;
}

x  // ReferenceError: x is not defined
y  // 20

var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。

console.log(x)  // undefined,var声明变量之前可以使用该变量
var x = 10;

而let不会这样,let声明的变量不能在声明之前使用。

console.log(x)  // ReferenceError: x is not defined,let声明变量之前不可以使用该变量
let x = 10;

注意:
let不允许在相同的作用域内重复声明同一个变量。 
比如:
function foo(){
    let x = 10;
    var x = 20;
}  // 报错

再比如:

function foo(){
    let y = 10;
    let y = 20;
}  // 报错

ES5中只有全局作用域和函数作用域,并没有块级作用域。
请看下面的示例: 
var name = ‘Q1mi‘

function foo(){
    console.log(name)
    if (false){
        var name = ‘Bob‘
    }
}
foo()  // undefined

出现上述现象的原因就是在函数内部,由于变量提升导致内存的name变量覆盖了外层的name变量。
类似的情况还出现在 for循环的计数变量最后会泄露为全局变量。 
for (var i=0;i<5;i++){
    console.log(‘哈哈‘);
}
console.log(i);  // 5

ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。

var name = ‘Q1mi‘

function foo(){
    console.log(name)
    if (false){
        let name = ‘Bob‘
    }
}
foo()  // Q1mi

此时,在foo函数内容,外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。

 

const

const用来声明常量。const声明变量必须立即初始化,并且其值不能再改变。
const声明常量的作用域与let相同,只在声明所在的块级作用域内有效。 
例如:
const PI = 3.14;

全局对象的属性:

ES6规定:var命令和function命令声明的全局变量依旧是全局对象的属性;let命令、const命令和class命令声明的全局变量不属于全局对象的属性。

查看下面的示例代码:

var x = 10;
let y = 20;
window.x  // 10
window.y  // undefined

 

变量的解构赋值

ES6允许按照一定的模式,从数组或对象中提取值,对变量进行赋值,这种方式被称为解构赋值。

var [x, y, z] = [10, 20, 30]
x  // 10
y  // 20
z  // 30

对象的解构赋值:

var {x, y} = {x: 10, y: 20}
x  // 10
y  // 20

 

模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。在模板字符串中嵌入变量,需要将变量名写入${}中。

var name = ‘Q1mi‘, age = 18;
`My name is ${name}, I’m ${age} years old.`

 

箭头函数

箭头函数中this指向会被固定化。这不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。
 
可以查看下面两段代码输出的区别:
var person = {
    name: ‘Q1mi‘,
    age:18,
    func:function(){
        console.log(this);
    }
}
person.func()  // person对象

var person = {
    name: ‘Q1mi‘,
    age:18,
    func:()=>{
        console.log(this);
    }
}
person.func()  // window对象

 

属性简洁表示法

ES6允许直接写入变量和函数作为对象的属性和方法。
function (x, y){
    return {x, y}
}

上面的写法等同于:

function(x, y){
    return {x: x, y: y}
}

对象的方法也可以使用简洁表示法:

var o = {
    method(){
        return “Hello!”;
    }
}

等同于:

var o = {
    method: function(){
        return “Hello!”;
    }
}

 

面向对象

ES5的构造对象的方式 使用构造函数来创造。构造函数唯一的不同是函数名首字母要大写。
function Person(name, age){
    // 点方法 set方法和get方法
    this.name = name;
    this.age = age;
    this.func = function(){
        ...
    }
}

// 给父级绑定方法
Person.prototype.showName = function(){
    console.log(this.name);
}

var p = new Person(‘q1mi’, 18);
console.log(p.name)
p.showName();

ES6 构造对象的方式:

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }  // 不要加逗号!!!
    showName(){
        console.log(this.name);
    }
}

var p = new Person()

 

附:

有关ES6的其他新特性,推荐阅读:阮一峰的ECMAScript 6 入门

 

ES6 快速入门

标签:.com   code   情况   es6   命令   声明   提取   快速   turn   

原文地址:https://www.cnblogs.com/liwenzhou/p/9249932.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!