ES6 模板字符串與解構賦值

ES6 模板字符串與解構賦值

解構賦值
展開運算符

• 模板字符串
• 特點
  模板字符串可以換行
• 模板字符串中變量表達方式
  ${變量/表達式}

<script>
    //模板字符串  
    //特點：模板字符串可以換行
    //模板字符串裏變量的表達方式
    //${變量}
    //定義 用反引號``標識
    let a='${}'
    let b=`我是模板字符串
    我可以換行
    這是我的變量表示方式
    ${a}
    `
    console.log(b); 
    </script>

例題

//有個數組，有三個路徑，根據路徑生成上面的li，將li放在ul上
let arry=[`
         <li>這是第一個li</li>
         <li>這是第二個li</li>
         <li>這是第三個li</li>
`]
     let ul=document.createElement('ul');
     ul.innerHTML=arry.join('');
     document.body.appendChild(ul);

• 解構賦值
• 特點：
• 可以定義默認值
• 可以嵌套
• 可以不完全解構
• 好處：
  不通過遍歷，方便快捷的將元素取出來

<script>
  //解構賦值
  //可以定義默認值
  //可以嵌套
  //可以不完全解構

  //數組用法
  let a=[1,2,3]
  let [b,c,d]=a;
  console.log(b,c,d)//1,2,3
  //數組解構賦值時可以嵌套
  let s=[[1,2],[3,4]]
  let [[s1,s2],[s3,s4]]=s;
  console.log(s1,s2,s3,s4)//1,2,3,4
  //數組解構賦值可以定義默認值
  let b1=[1,2,3]
  let [b2,b3,b4=0]=b1;
  console.log(b2,b3,b4)//1,2,3
  //如果右面的值不爲undefined的話，默認值會被覆蓋
  //兩數交換
   let num=3;
   let num1=5;
   [num,num1]=[num1,num]
   console.log(num,num1)//5,3
   
   //字符串用法
  let str='哈，真的好'
  let [a1,a2,a3]=str;
  console.log(a1,a2,a3)// 哈 ，真

   //對象寫法
   let p={
       name:'xiaoxiao',
       age:15
   }
   let {name,age}=p  //這兩個變量不是隨便起的，一定要與對象的屬性名一致，如果想不一致的話，要在變量的前面加屬性名:
   console.log(name,age);//xiaoxiao 15
   
   //錯誤寫法
   //    let {fg,de}=p
   //    console.log(fg,de)
   //    雖然不報錯，但是值爲undefined

   //改正
   let {name:fg,age:de}=p
   console.log(fg,de) //xiaoxiao 15 

   //函數寫法
   function fn2({a,b,c}){//默認，可選參數
		console.log(a)//1
		console.log(b)//2
		console.log(c)//3
	}
	fn2({
        b:2,
		a:1,		
		c:3

	})

  </script>

• 展開運算符
• 功能：
• 將展開運算符後面的數組展開，也可以遍歷
• 用法：

…

   //展開運算符
   //功能：將展開運算符後面的數組展開，也可以遍歷
        let num4=[1,2,3,4,5,6]
        let num5=[...num4]
        console.log(num5)//[1,2,3,4,5,6]
        //例
        let [num6,num7,...num8]=num4
        console.log(num6);//1
        console.log(num7)//2
        console.log(num8)//[3,4,5,6]
        
        var max=Math.max(...num4);
        console.log(max)

例題

例：求數組的最大值

  //例：求數組的最大值
         let num4=[1,2,3,4,5,6]
         var max=Math.max(...num4);
         console.log(max)//6