ES6常用语法

ES6的常用语法

1.let和const的使用

在使用var生命变量，会存在变量提升的问题。

例1：

console.log(a); // undefined
{
    var a = 2;
}
console.log(a) // 2
// 在js中一个{},称为作用域，但是第一个打印结果会存在变量提升问题。
//当解析脚本时，在脚本中遇到var声明的变量， 会将var a 提到最上面去声明。从而导致a成为一个全局变量

例2：

var a = []
for (var i = 0; i<10; i++){
    a[i] = function(){
        console.log(i);
    };
}
a[6](); // 10

使用let声明变量的特点：

• 不存在变量提升
• 不允许重复声明
• 块级作用域

1.不存在变量提升

// var 的情况
console.log(foo); // undefined
var foo = 2;

// let的情况
console.log(bar); //  报错 Uncaught ReferenceError 
let bar = 2;

2.不允许重复声明

//new_file.html:11 Uncaught SyntaxError: Identifier 'a' has already been declared
function func(){
    let a= 10;
    var a = 1; 
    
}

// 报错
function func(){
    let a= 10;
    let a = 2;
}

//Uncaught SyntaxError: Identifier 'arg' has already been declared
//不能在函数内重复声明变量
function func(arg){
    let arg;// 报错
}

function func(arg){
    {
        let arg;// 不报错
    }
}

3.块级作用域

var a = [];
for (let i = 0; i < 10; i++){
    a[i] = function(){
        console.log(i);
    };
}
a[6](); // 6

const声明的变量跟let类似，但是const声明的是常量。

const一旦声明，常量的值就不能改变

例：

const PI = 3.14159;
console.log(PI); //3.14159
PI = 3 // 报错
// 修改常量的值会报错

const声明的变量不得改变值， 意味着，一旦声明变量，就必须初始化，不能留到以后赋值

const foo;
//Uncaught SyntaxError: Missing initializer in const declaration
// 对于const来说， 只声明，不赋值就会报错

const的作用域与let的作用域相同，只在声明所在的块级作用域内有效

if(true){
    const MAX = 5; 
    console.log(MAX);  // 5
}
MAX // 报错
// new_file.html:13 Uncaught ReferenceError: MAX is not defined

模板字符串

let name = '七月';
let hobby = 'play';
let str = `我是${name}, 爱好:${hobby}`,

箭头函数

es5的普通函数中使用function关键字来声明函数

var f = function(v){
    return v;
};
// 等价于
var f = v => v;

// function(v){return v} 等价于(v)=>{return v},
//如果有传参， 函数有返回值，可以简写成：v=>v

如果箭头函数不需要参数或者需要多个参数，就使用一个圆括号代表参数部分

var f = () =>5;
console.log(f()) // 5
//等同于
var f = function(){return 5};
console.log(f()); // 5

var sum = (num1, num2) => num1 + num2;
console.log(sum(1,2)); // 3
// 等同于
var sum = function(num1, num2){
    return num1 + num2;
};
console.log(sum(1,2)); // 3

 es6中对象的声明

//方式一  字面量方式创建对象
var person = {
    name: '七月',
    age: 20,
    fav:function(){
        console.log('喜欢玩'); // 喜欢玩
        console.log(this.age); // 20
    }
};
person.fav();


//方式二， es6对象的单体模式
var person2 = {
    name: '七月',
    age: 20,
    fav(){
                // this指的是person2对象
        console.log(this); // {name: "七月", age: 20, fav: ƒ}
    }
};
person2.fav();

//方式三 
var person3 = {
    name: '七月',
    age: 20,
    fav:()=>{
        console.log(this); 
        // this 指的是windo
        // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }
};
person3.fav();
    

this的指向

　　this的指向问题：要看此时在当前对象内部使用的是普通函数和对象的单体模式写法， 还是箭头函数。

　　1.如果是普通函数或对象的单体模式写法， 那么该this的指向执行函数式的对象。

　　2.如果是箭头函数，this指向了定义函数时的上下文（父类）