扩展运算符
概念:将数组或对象转换成参数序列,使用逗号分隔的序列。
作用:1、数组、对象的合并;2、函数剩余参数;3、代替argument;
//数组合并
var arr1=[10,20,30];
var arr2=[40,50,60];
var newArr=[...arr1,...arr2];
//展开数组
console.log(Math.max(...arr));
//对象合并
var obj1={width:100,height:100};
var obj2={left:100,top:100};
var newObj={...obj1,...obj2};
Object.assign
//合并对象
var obj1={name:"张三",age:20};
var obj2={sex:"男"};
var newObj=Object.assign(obj1,obj2);
console.log(newObj)//{name: "张三", age: 20, sex: "男"}
解构赋值
概念:允许按照一定的格式,从对象和数组中提取值。
//数组解构
let [a,b,c]=[1,2,3];
//对象解构:对象解构时,key值必须要一一对应
let {name,age}={name:"张三",age:20};
//对象解构+别名
let {name:_name,age:_age}={name:"张三",age:20};
//多重解构
let {obj:{name},arr:[a,b]}={obj:{name:"张三",arr:[10,20]}};
//案例
let {left:l,top:t}=document.getElementById("box");
字符串模板
ES6写法——使用 `` 代替 "" 或 '' ,使用${num}实现变量拼接。
var num=0707;
//常规写法
var a="<div>"+
"<span>"+num+"</span>"+
"</div>";
//ES6写法
var b=`
<div><span>${num}</span></div>
`
字符串搜索
//includes方法:str.includes(内容),找到了返回true,找不到放回false
//startWith:判断是否位于头部
//endWith:判断是否位于尾部
var str="good day!";
str.includes("day");
str.startsWith("g");//true
str.endsWidth("!");//true
Array.find()
通过条件查找数据,返回第一个符合条件的数据
var arr=[1,2,3,4];
var n=arr.find(function(item,index,array){
return item>3
})
console.log(n);
函数参数默认值
//ES6之前函数设置默认值
function fn(x){
var x=x||10
}
//ES6函数默认值,等价于上面的写法,如果没有传递参数,就用默认值10
function fn(x=10){
}
剩余参数
//fn函数中a接受实参1,...rest接受剩余参数为一个数组
function fn(a,...rest){
console.log(rest)//[2,3,4,5]
}
fn(1,2,3,4,5)