ES6知识点总结(一)

扩展运算符

概念:将数组或对象转换成参数序列,使用逗号分隔的序列。
作用: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="
"+ ""+num+""+ "
"; //ES6写法 var b=`
${num}
`

字符串搜索

//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)

你可能感兴趣的:(ES6知识点总结(一))