1.模板字符串
<script> //模板字符串 `` tab上边的那个键 //1.声明模板字符串 let str = `我是一个 字符串哦` console.log(str,typeof str)//我是一个 字符串哦 string //2.内容可以直接出现换行符 let str1 =`<ul> <li>tom</li> <li>jom</li> <li>sam</li> </ul>` console.log(str1)//原样输出字符串 //3变量拼接 let pre ="bill" let out =`${pre}爱打代码`//${变量名},``为模板字符串 console.log(out)//bill爱打代码 </script>
2.对象简化写法
<script> //ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法 //这样的书写更简洁 let name = 'bill' let age = '28' function fn(){ console.log("打代码") } //ES6之前 let obj = { name: name, age :age, todo :fn, // 方法简化 anhao (){ console.log("打代码") } } // } //简化后 let obj1 = {name,age,fn} </script>
3.箭头函数
<script> //ES6允许使用[箭头](=>)定义函数 //1.声明一个函数 let fn = function () { } let fun =(a,b)=>{ return a+b } //2.调用函数 let result = fn(1,2) console.log(result)//3 //3.箭头函数与与原始函数的区别 //a. this是静态的,this始终指向函数声明时所在作用域下的this的值 function getName() { console.log(this.name) } let getName1=()=>{ console.log(this.name) } //设置window对象的name属性 window.name ='bill'; const pre ={ name :'jack' } //直接 调用 getName() //bill getName1() //bill //call方法调用 getName1.call(pre) //bill getName.call(pre) //jack //2.箭头函数不能作为构造实例化对象 //3.箭头函数不能使用arguments //4.简写 //a.省略小括号,当形参有且只有一个时 let add = n=>{ return n+n } console.log(add(9))//18 //b.省略花括号,当代码体只用一条语句时 let pow =n=> n*n console.log(pow(9))//81 </script>
4.箭头函数的小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div id="dv"></div> <script> let dvObj = document.getElementById("dv") dvObj.addEventListener("click",function(){ setInterval(()=>{ this.style.backgroundColor='red' },2000) })
//箭头函数适合与this无关的 回调,定时器,数组的方法回调
//箭头函数不适合与this有关的回调,事件回调,对象方法
</script> </body> </html>
5.函数参数的默认值 设置
<script> //1.参数默认值 function add (a,b,c){ return a+b+c } console.log(add(1,2))//nan 因为c为undifined,所以是nan console.log(add(1,2,3))//6 function mul (a,b,c=1){ return a*b*c } console.log(mul(1,2))//2 console.log(mul(1,2,2))//4因为给了c默认值了为1 //2.与结构赋值结合 function connect({host="127.0.0.1",usename,password,port}){ console.log(host) console.log(usename) console.log(password) console.log(port) } connect({ host:'lochost', usename :'root', password:'root', port :'8808' }) </script>