什么是ECMAScript震捣？
ECMAScript是瀏覽器腳本語(yǔ)言的規(guī)范蒲稳，而我們熟知的js語(yǔ)言氮趋，如JavaScript則是規(guī)范的具體實(shí)現(xiàn)。es6就好比Java的jdk江耀。
一剩胁、es6語(yǔ)法詳解：let聲明變量
1、var聲明的變量往往會(huì)越域祥国；let聲明的變量有嚴(yán)格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a) // 1
console.log(b) // Uncaught ReferenceError: b is not defined
2昵观、var 可以聲明多次；let只能聲明一次
var m = 1;
var m = 2;
let n = 1;
let n = 2;
console.log(m) //2
console.log(n) //Uncaught SyntaxError: Identifier 'n' has already been declared
3舌稀、var會(huì)變量提升啊犬；let不存在變量提升
console.log(x);
var x = 10; // undefined
console.log(y);
let y = 12; // Uncaught ReferenceError: Cannot access 'y' before initialization
注意：以后要習(xí)慣使用let聲明變量
二、es6語(yǔ)法詳解：const聲明變量 相當(dāng)于聲明了一個(gè)常量
1壁查、聲明之后不允許改變
const a = 1;
console.log(a) //1
a = 2;
console.log(a) // Uncaught TypeError: Assignment to constant variable.
2觉至、一旦聲明必須初始化，否則會(huì)報(bào)錯(cuò)
const a;
a = 1;
console.log(a) //Uncaught SyntaxError: Missing initializer in const declaration
三睡腿、es6語(yǔ)法詳解：解構(gòu)表達(dá)式
1语御、數(shù)組解構(gòu)
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c) //1,2,3
2、對(duì)象解構(gòu)
const person = {
name: "qiyue",
age: 23,
language: ['java', 'js', 'css']
}
const { name, age, language } = person
console.log(name, age, language) //qiyue 23 (3) ["java", "js", "css"]
const person = {
name: "qiyue",
age: 23,
language: ['java', 'js', 'css']
}
//從person里解析出name的值在賦值給abc
const { name:abc, age, language } = person
console.log(abc, age, language) //qiyue 23 (3) ["java", "js", "css"]
四席怪、es6語(yǔ)法詳解: 字符串?dāng)U展
let str = "hello.vue";
console.log(str.startsWith("hello")) //true
console.log(str.endsWith("vue")) //true
console.log(str.includes("e")) //true
console.log(str.includes("hello")) //true
五应闯、es6語(yǔ)法詳解: 字符串模板
let str = `<span>hello world</span>`
console.log(str) // <span>hello world</span>
六、es6語(yǔ)法詳解: 字符串插入變量和表達(dá)式挂捻。變量寫在<math><semantics><annotation encoding="application/x-tex">{}中碉纺，</annotation></semantics></math>中，{}中可以放入js表達(dá)式
let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23
let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23
let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23
function fun() {
return "這是一個(gè)函數(shù)";
}
let info = `我是${abc},今年${age + 10},我想說：${fun()}`
console.log(info) //我是qiyue,今年33,我想說：這是一個(gè)函數(shù)
七刻撒、es6語(yǔ)法詳解: 函數(shù)優(yōu)化
1骨田、函數(shù)默認(rèn)值：直接給參數(shù)寫上默認(rèn)值，沒傳就會(huì)自動(dòng)使用默認(rèn)值
function add(a, b = 1) {
return a + b;
}
console.log(add(10)) //11
2声怔、不定參數(shù)：不定參數(shù)用了表示不確定的參數(shù)個(gè)數(shù)态贤，形如…變量名，由…加上要給具名參數(shù)標(biāo)識(shí)符組成捧搞。具名參數(shù)只能放在參數(shù)列表的最后抵卫，并且有且只有一個(gè)不定參數(shù)
function fun(...params) {
console.log(params.length)
}
fun(1, 2) // 2
fun(1, 2, 3, 4) //4
3、箭頭函數(shù)
//以前
var sum = function (a, b) {
c = a + b
return c
}
console.log(sum(2, 3)) // 5
//箭頭函數(shù)
var sum2 = (a, b) => a + b;
console.log(sum2(2, 4)) // 6
4胎撇、箭頭函數(shù)結(jié)合解構(gòu)表達(dá)式
//以前
function hello(person) {
console.log("hello" + person.name)
}
hello(person); //helloqiyue
//箭頭函數(shù)
let hello2 = params => console.log("hello" + person.name)
hello2(person) //helloqiyue
//箭頭函數(shù)加解構(gòu)表達(dá)式
var hello3 = ({ name }) => console.log("hello" + name)
hello3(person) //helloqiyue
八介粘、es6語(yǔ)法詳解: 對(duì)象優(yōu)化
1、es6給Object擴(kuò)展了許多新的方法晚树，如
- key(obj)：獲取對(duì)象的所有key形成的數(shù)組
- value(obj):獲取對(duì)象的所有value形成的數(shù)組
- entries(obj):獲取對(duì)象所有的key和value形成的二維數(shù)組
const person = {
name: "qiyue",
age: 23,
language: ["java", "js", "css"]
}
console.log(Object.keys(person)) //["name","age","language"]
console.log(Object.values(person)) // ["qiyue",23,Array(3)]
console.log(Object.entries(person)) //[Array(2),Array(2),Array(2)]
2姻采、Object.assign方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象爵憎；將源對(duì)象的屬性賦值到目標(biāo)對(duì)象中
onst target = { a: 1 }
const source1 = { b: 2 }
const source2 = { c: 3 }
Object.assign(target, source1, source2);
console.log(target) //{a: 1, b: 2, c: 3}
3慨亲、 聲明對(duì)象簡(jiǎn)寫
//以前
const name = 'sanyue'
const age = 21
//將屬性值name婚瓜，age分別賦給person1對(duì)象的name，age,后面是屬性值
const person1 = { name: name, age: age }
console.log(person1) //{name: "sanyue", age: 21}
//es6:屬性名和屬性值變量名一樣刑棵，可以省略
const person2 = {name,age}
console.log(person2) //{name: "sanyue", age: 21}
4巴刻、對(duì)象的函數(shù)屬性簡(jiǎn)寫
let person3 = {
name: "qiyue",
//以前
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭頭函數(shù)中this不能使用，用對(duì)象.屬性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food)
}
}
person3.eat("蘋果") //qiyue在吃蘋果
person3.eat2("香蕉") // qiyue在吃香蕉
person3.eat3("西瓜") //qiyue在吃西瓜
5蛉签、對(duì)象的擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符（…)用于取出參數(shù)對(duì)象所有可遍歷屬性然后拷貝到當(dāng)前對(duì)象
//拷貝對(duì)象（深拷貝）
let p1 = { name: "qiyue", age: 23 }
let obj = { ...p1 }
console.log(obj)//{name: "qiyue", age: 23}
//合并對(duì)象
let age1 = { age: 24 }
let name1 = { name: "qiyue" }
let p2 = {}
p2 = { ...age1, ...name1 }
console.log(p2) //{age: 24, name: "qiyue"}
//如果p2中原本有name,age屬性會(huì)被覆蓋
九胡陪、es6語(yǔ)法詳解:map和reduce方法
1、map():接收一個(gè)函數(shù)碍舍，將原數(shù)組中的所有元素用這個(gè)函數(shù)處理后放入新數(shù)組返回
let arr = ["1", "3", "4", "23"]
arr = arr.map(item => item * 2)
console.log(arr) //[2, 6, 8, 46]
2柠座、reduce():為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或未被賦值的元素
語(yǔ)法：arr.reduce(callbace,[initialValue])
callback(執(zhí)行數(shù)組中每個(gè)值的函數(shù)片橡，包含四個(gè)參數(shù))
- previousValue（上一次調(diào)用回調(diào)返回的值妈经，或者是提供的初始值（initialValue))
- currentValue(數(shù)組中當(dāng)前被處理的元素)、
- index(當(dāng)前元素在數(shù)組中的索引)
- array(調(diào)用reduce的數(shù)組)
initialValue(作為第一次調(diào)用callback的第一個(gè)參數(shù))
let arr1 = [2, 40, -10, 6]
let result = arr1.reduce((a, b) => {
return a + b
}, 10)
console.log(result)//48
十捧书、es6語(yǔ)法詳解:模塊化
什么是模塊化：模塊化就是把代碼進(jìn)行拆分吹泡，方便重復(fù)利用。類似Java中的導(dǎo)包鳄厌，要使用一個(gè)包荞胡，必須先導(dǎo)包妈踊。二Js中沒有包的概念了嚎，換來的就是模塊
模塊的功能主要有兩個(gè)命令構(gòu)成：export和import
- export命令用于規(guī)定模塊的對(duì)外接口，export不僅可以導(dǎo)出對(duì)象廊营，一切js變量都可以導(dǎo)出歪泳。比如：基本類型變量、函數(shù)露筒、數(shù)組呐伞、對(duì)象
- import命令用于導(dǎo)入其他模塊提供的功能
