1. 程式人生 > 其它 >ES6中let,const,模板字面量,預設引數,rest引數,展開運算子,物件,解構賦值

ES6中let,const,模板字面量,預設引數,rest引數,展開運算子,物件,解構賦值

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