1.es6三種變量聲明方式
(var 雄家,let, const)
var a = 0袍患;//不多解釋
for(a=0;a<4;a++){
console.log(a);
}
console.log(a);//可以打印出a的值
——————————————————————————————————————————
for(var i=0;i<4;i++){
console.log(i);//0,1,2,3
}
console.log(i);//打印報(bào)錯(cuò)
const m = 4;
m =5; //報(bào)錯(cuò)
總結(jié):由于es6之前只有var,然而var 在哪里定義都是全局變量董瞻,都會(huì)唄預(yù)解析提前帽借,所以es6,引入let,const.從上面的案例可以看出來妓盲,let,定于的是局部作用域浩嫌,const定義的是常量檐迟,不能修改。
2.前端的福利码耐,數(shù)組與對(duì)象的解構(gòu)賦值
let a = [1,2,3];
//如果我們想拿到 數(shù)組里面的值追迟;
//es5
a[0];
a[1];
a[2];
//es6;
let a = [1,2,3];
let [a1,a2,a3] = a;
a1 // a1 == a[0]
a2 // a1 == a[1]
a3 // a1 == a[2]
let json = {foo:2}
let {foo} = json;
console.log(foo); //2
總結(jié):通過數(shù)組和對(duì)象的結(jié)構(gòu)骚腥,我們可以直接獲取對(duì)象和數(shù)組里面的值了敦间,可以通過先解構(gòu)出來,直接當(dāng)變量使用束铭,非常方便廓块。
3.字符串模板
//es5
let jspang='技術(shù)胖';
let blog = '非常高興你能看到這篇文章,我是你的老朋友'+jspang+'契沫。這節(jié)課我們學(xué)習(xí)字符串模版带猴。';
//es6
let jspang='技術(shù)胖';
let blog = `<b>非常高興你能看到這篇文章</b>,我是你的老朋友${jspang}懈万。<br/>這節(jié)課我們學(xué)習(xí)字符串模版拴清。`;
總結(jié):使用字符串模板可以大大減少我們字符串拼接,大大提高閱讀行会通;
4.箭頭函數(shù)
//es5
function add(a,b=1){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}
console.log(add(1));
//es6
var add =(a,b=1) => {
console.log('jspang')
return a+b;
};
console.log(add(1));
總結(jié):es6的箭頭函數(shù),簡(jiǎn)化了es5的函數(shù)涕侈,使用起來比較簡(jiǎn)單驾凶,但是并不是所有的情況都可以使用箭頭函數(shù)的,這個(gè)需要注意
5.模塊化操作
es6新引入了export窟哺,import 兩個(gè)關(guān)鍵字且轨,主要是為了解決作用域的問題
//a.js
var a = 'jspang'
export a;
============================
//b.js
import {a} from './temp.js';
console.log(a);
總結(jié):由于es6,引入js,經(jīng)常會(huì)導(dǎo)致全局污染的問題旋奢,于是es6新增export,import,我們需要在那個(gè)文件使用import form即可。