ES6中let,const,模板字面量,預設引數,rest引數,展開運算子,物件,解構賦值
一.塊級作用域Let和Const
1.let
var 宣告的變數,無論在哪裡宣告,都會當成在當前作用域頂部宣告的變數,這個就是變數的提升機制
let宣告的變數,不會提升,可以將變數的作用域宣告在當前的程式碼塊中
let宣告的變數,防止變數的重複宣告
var a = 10 ; let a = 20 ; 報錯a已經宣告過了
同一作用域下,不能使用let重複宣告已經存在的變數,但如果在不同的作用域下,則是可以的
let a = 10 ; { let a = 20 } 沒問題,在不同作用域下
2.const宣告
const宣告的是常量,必須在宣告的同時初始化
const a = 10 ; //沒問題,有初始化也就是有賦值 const a; a=10 //報錯
同一作用域下,不能使用const重複宣告已經存在的變數(不論是let,還是var宣告過的變數)
如果使用const宣告物件,物件本身的繫結不能修改,但是物件的屬性和值是可以修改的
const person = { name : '海賊王', age : 15 } person = { name : '魯夫', age : 15 } //報錯了,物件本身的繫結不能修改 person.name = '魯夫' //可以,物件的值是可以修改的 person.sex = '男' //可以,物件的屬性可以修改
3.全域性塊作用域繫結
使用var宣告的變數或物件,將作為瀏覽器環境中的window物件的屬性,這就意味著var宣告的很有可能會覆蓋掉一個已經存在的全域性屬性
var get = 20 ; console.log(window.get) // 20
使用let或const,則會在全域性作用域下建立一個新的繫結,該繫結不會成功window物件的屬性
總結 : 如果你不想覆蓋window物件的屬性,那麼你就使用let 和 const 宣告變數和常量
二.模板字面量
` `
1.如果需要再字串中新增新的一行,只需要在程式碼中直接換行即可
let title = `你好, 中國歡迎您` 你好中國歡迎您
2.字串佔位符:合法嵌入 ${ }
let age = 10 let allName = `海賊王:${age}` //海賊王:10
三.預設引數
使用預設引數 undefined
不使用預設引數 null
functionurlName(url='/home',name='abc',callback){}
//使用url和那麼的預設引數 urlName(); //使用name的預設引數 urlName('/index'); //使用某一個的預設引數,傳入undefined //使用url和name的預設引數 urlName(undefined,undefined,function(){}); //不使用某一個的預設引數,傳入null
//不使用name的預設引數,使用url的預設引數 urlName(undefined,null,function(){});
四.rest引數
函式有一個特別的地方,就是無論函式定義了多少個形參,都可以傳入任意數量的實參;
函式內部還可以通過arguments物件得到傳入的引數
在函式命名前新增三點,那麼就是一個rest引數 ...opt , 用於獲取多餘的引數
注意:每個函式只能有一個rest引數,並且只能是最後的一個引數
function ( a, ...opt){} // opt可以做迴圈,表示除了a,之後得到的所以引數 //argument,表示包括 a 和 opt的所以引數
五.展開運算子
展開執行符和rest引數相似,都是三個點. 展開運算子可以將 一個數組轉換為各個獨立的引數, 也可用於 取出物件的所有可遍歷屬性,而rest引數是指多個獨立的引數,並通過整合後的陣列來訪問
function sum(a,b,c){ return a+b+c } let arr = [1,2,3] sum(...arr); //便是的是arr中的每個值分別傳入sum函式中
展開運算子可以用來複制陣列,得到的是深克隆(互不影響,互補干擾)
let arr1 = [1,2,3]; let arr2 = arr1; //arr2 和 arr1 是同一個陣列 (淺克隆) let arr3 = [...arr1]; //arr3 和 arr1 是不同陣列 (深克隆) arr1[0] = 4; //arr2[0] , 得到4 (淺克隆) //arr3[0] , 得到1 (深克隆)
展開運算子可用來合併陣列
let arr1 = ['a'] ; let arr2 = ['b','c'] ; let arr3 = ['d','e'] ; console.log([...arr1,...arr2,arr3]) //['a','b','c','d','e']
展開運算子還可以取出物件的所有可遍歷屬性,複製到當前物件中
let person = { name : '魯夫', age : 13 } let persons = { ...person , sex:'男'} // let person = { // name : '魯夫', // age : 13 // sex : '男' // }
六.物件字面量語法擴充套件
1.物件中有同名的引數,只寫屬性名即可 ; 有相同的本地變數,只寫屬性名即可
2.定義物件方法時,可以省略冒號和function關鍵字
function first(firtst){ let section = '第二' return{ firtst : first, section : section, three:function(){ console.log(first) } } } function first(firtst){ let section = '第二' return{ firtst, //相同引數,只寫屬性名 section, //相同本地引數,只寫屬性名 three(){ //省略冒號和function console.log(first) } } }
3.ES6新增了,可以再物件中使用可計算的屬性名稱 ; 如果屬性名包括特殊字元或中文,或可計算的屬性名,則只能使用[ ]
let syf = name let person = {} person["last name"] = '魯夫' //屬性名有空格 person["first" + syf] = '蒙奇D' // 屬性名通過計算得到 person.age = 13 //常規,用.訪問 //得到 : //{ // 'last name' : '魯夫', // 'first name' : '蒙奇D', // 'age' : 13 //}
七.解構賦值
1.物件解構 { }
let person = { name:'魯夫', age:13, sex:'男', } let {name,age,sex} = person console.log(name,age,sex) // 魯夫,13,男
let person = { name : ' 魯夫' age : 13, sex : '男', message:{ id:1, firstName : '蒙奇D' } } let {name,age,sex,message:{firstName:message}} = person //console.log(name)魯夫 //console.log(age)13 //console.log(sex)男 //console.log(message)蒙奇D
2.陣列解構 [ ] 逗號是佔位符
let arr = [1,2,3] ler [,,c] = arr // c = 3
本文來自部落格園,作者:楊建鑫,轉載請註明原文連結:https://www.cnblogs.com/qd-lbxx/p/15968190.html