ES6 模板字符串与解构赋值

mac2026-03-19  2

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
最新回复(0)