模板字符串
在es6中引入了新的对字符串表示方法,那就是模板字符串,在es6之前,我们通常使用双引号""
或单引号''
来表示字符串,模板字符串用反引号``
来表示,下面我们一起看看模板字符串与普通字符串有何区别
声明
与普通字符串一样,声明模板字符串用反引号``
表示即可。
let str = `苏凉`; console.log(str,typeof str); //苏凉 string
在内容中可出现换行符
使用反引号可以自动添加换行:在html中添加列表只能用字符串来拼接,如:
window.onload = function(){ var p = document.getElementById('p1'); p.innerHTML='<ul>'+ '<li>'+'1' +'</li>'+ '<li>'+ '2'+'</li>' + '<li>'+'3'+'</li>' + '<li>'+'4'+'</li>'+ '</ul>' }
使用模板字符串就省事很多。
window.onload = function(){ var p2 = document.getElementById('p2'); p2.innerHTML = `<ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> </ul>` }
两种方法,哪一个更简洁好用不言而喻。
变量拼接
普通字符串拼接使用+
号来进行拼接,而使用模板字符串则可以直接拼接,如:
//语法:在反引号内使用${}拼接 `${str1}str2`
let name = '苏凉'; let age = 21; let info = `姓名:${name},年龄:${age}`; console.log(info);//姓名:苏凉,年龄:21
简化对象写法
在es6中,在对象的大括号内,可以直接写入变量和函数,作为对象的属性和方法,这种写法相较于es6之前的版本来说书写更简洁。如:
let name = '苏凉'; let sayName = function(){ console.log('su') } const info = { //直接写入变量,取代:name:name name, sayName, //直接写入函数,取代:fun2:function(){} fun2(){ console.log('liang') } } console.log(info.name); //苏凉 info.sayName(); +//su info.fun2() //liang
箭头函数
在es6中可以使用箭头(=>
)来定义函数。
语法:let 函数名 = (参数)=>{函数体}
如:
let fun1 = () =>{ console.log('苏凉') } fun1(); //苏凉
函数体内与之前一样,调用函数也是,函数名()
下面我们一起看看箭头函数与普通函数有何区别:
this指向
箭头函数的this指向时静态的,它始终指向声明函数时所在的作用域下this的值。
而普通函数的this值则是谁调用函数,this就指向谁,默认指向window。
箭头函数的this指向不会被call,bind,apply所改变。
//定义全局变量 var name = '苏凉' //普通函数 let fun1 = function(){ console.log(this.name); } //箭头函数 let fun2 = () =>{ console.log(this.name); } const info ={ name:'xiaoming' } fun1(); //苏凉 fun2(); //苏凉 //改变this指向, //通函数的this指向会被改变 //箭头函数的this不会被改变 fun1.call(info); //xiaoming fun2.call(info); //苏凉
不能作为构造实例化对象
箭头函数不能作为构造实例化对象使用。否则会报错:TypeError: Person is not a constructor
如:
//使用普通函数构造实例化对象 let Dog = function(name,age){ this.name = name ; this.age = age ; } let dog1 = new Dog('xiaohua',2); console.log(dog1); //Dog {name: 'xiaohua', age: 2} //是用箭头函数构造实例化对象 let Person = (name,age)=>{ this.name = name ; this.age = age; } let per1 = new Person('suliang',21); console.log(per1); //TypeError: Person is not a constructor
不能使用arguments隐含参数
在普通函数中,arguments
隐含参数会返回我们所传递的实参,而在箭头函数中并不存在这一隐含参数。
//普通函数 let fun1 = function(){ console.log(arguments); } fun1(1,2,3); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] //箭头函数 let fun2 =()=>{ console.log(arguments); } fun2(4,5,6); // arguments is not defined at fun2
箭头函数的简写
1.省略小括号
当形参有且只有一个的时候,箭头函数中的小括号可以省略。如:
//小括号省略 let fun1 = n =>{ return n+n; } let result1 = fun1(5) console.log(result1); //10
2.省略花括号
当函数体内的代码有且只有一条语句时,可以省略花括号,并且语句的执行结果就是函数的返回值。
//省略花括号 //eg1 let fun2 = n => n*n; console.log(fun2(9)); //81 //eg2 let fun3 = n =>console.log(n); fun3(9); //9
箭头函数的案例
定时器的箭头函数,若定时器不适用箭头函数,则定时器内部的this则指向window。
window.onload = function(){ //找到box let box = document.getElementById('box'); box.addEventListener('click',function(){ setTimeout(() => { this.style.backgroundColor = 'blue' }, 2000); }) }
返回数组中偶数:
let list = [1,5,3,6,8,45,68,96,99]; const arr = list.filter(item => item%2==0); console.log(arr); //(4) [6, 8, 68, 96]
箭头函数适合与 this 无关的回调,如定时器,数组的方法回调等
箭头函数不适合与 this有关的回调.事件回调,对象的方法等。
var name = 'ming' let arr = { name:'su', age:21, sayName:()=>{ console.log(this.name); //指向window }, sayName1:function(){ console.log(this.name); //指向arr数组对象 } } arr.sayName(); //ming arr.sayName1(); //su