ES6經常使用語法

ES6的經常使用語法

1.let和const的使用

在使用var生命變量,會存在變量提高的問題。html

例1:es6

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.不存在變量提高post

// var 的狀況
console.log(foo); // undefined
var foo = 2;

// let的狀況
console.log(bar); //  報錯 Uncaught ReferenceError 
let bar = 2;

2.不容許重複聲明this

//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.塊級做用域es5

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

 

const聲明的變量跟let相似,可是const聲明的是常量。spa

const一旦聲明,常量的值就不能改變code

例:htm

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指向了定義函數時的上下文(父類)

相關文章
相關標籤/搜索