一、模板字符串
模板字符串就是一种字符串的新的表现形式
- 模板字符串的基本用法
var s1 = `abc`
- 模板字符串的优势
1、字符串和变量拼接
var s3 =" a " + s1 + " b " + s2;
var s4 = ` a ${s1} b ${s2}`;
2、字符串换行
var s5 =`<div>
<p>
<span>123</span>
</p>
<p>${s2}</p>
<p>${s3}</p>
<p>${s1}</p>
</div>`;
console.log(s5);
二、解构赋值
-
对象的解构赋值
var obj={name:"张三",age:18}
var {name,age}=obj;
//生成2个变量,
// name值来自于obj.name、
// age值来自于obj.age
var {name:title}=obj;
//生成一个变量:title,值来自于obj.name
-
函数参数的解构赋值
function f1(obj){
console.log(obj.age);
console.log(obj.height)
}
//等价于
function f1({ age,height }){
console.log(age);
console.log(height)
}
f1({age:5,height:180})
-
补充:属性的简写
var a = 3 ;
var c = 10;
var b = { a,c } ;
//b对象有一个a属性,a属性的值,来自于a变量 ,
//还有一个c属性,c属性的值来自于c变量
console.log(b)
三、rest参数
-
使用背景:es6
-
优点:arguments是伪数组,而rest参数是真数组
function fn(){
//arguments是函数内部的一个局部变量,
//arguments.length表示函数的实参的个数
console.log(arguments.length);
for(var i =0 ; i<arguments.length; i++){
console.log(arguments[i]);
}
}
fn(1,3,5) //3
// fn("a","b","c","d","e") //5
//es6箭头函数内部不能使用arguments
//为了弥补这个问题,rest参数应孕而生
//...args就是rest参数
//-->产生了一个变量,这个变量是一个数组,数组里面包含了这个函数调用时传递的所有实参
function q(...args){
//验证args是不是数组?
console.log(args instanceof Array);//true
console.log(Object.prototype.toString.call(args));//"[object Array]"
console.log(Array.isArray(args)); //true es5中的新方法
console.log(args);
}
q(1,3,5);
q(2,3,4,5,6,7,8);
四、箭头函数
- 箭头函数和普通匿名函数有哪些不同?
1、函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
2、不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
3、不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
4、(不常用)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
--> generator函数现在经常用async替代
- 场景:用于替代匿名函数
- 基本用法
//匿名函数
div.οnclick=function(){
console.log("你好")
}
//箭头函数
div.οnclick=()=>{
console.log("你好")
}
- 有一个参数的箭头函数
var fn=(a)=>{
console.log("abc");
}
//等价于:
var fn=a=>{
console.log("abc");
}
- 有2个及更多参数的箭头函数
var f=(a,b,c)=>{
console.log("abc")
}
- 箭头函数的特点
var p={
age:18,
//es6中对象方法的箭头函数表示形式
run:()=>{
setTimeout(()=>{
//this:window
console.log(this);//this是window
},100)
},
travel:function(){
//this:p
setTimeout(()=>{
console.log(this);//this是p
},100)
},
//推荐使用的方式☆☆☆:es6中对象方法的简写形式
say(){
console.log("say方法中的this:",this);
setTimeout(()=>{
console.log("say内部的延迟函数:",this);//this是p
},100)
},
}
p.run();
p.travel();
p.say();