ES6基础知识

一、es6字符串扩展：模板字符串

在变量和常量拼接的时候使用，整个字符串使用${变量}：

var tag = document.createElement('li');
tag.innerHTML = `
	<img src="" alt="">
	<p>${
     变量}</p>
`;
father.appendChild(tag);

标签模板，模板字符串不仅可以按照上面这种方式使用，还可以跟在一个函数后面，则表示该函数将被调用来处理找个模板字符串

alert(123);
等价于=
alert`123`;
/
function add(x,y){
   
	console.log(x,y);
}
add(1,2);
//此时如果使用的是模板字符串，如果参数是常量，会把参数解析成一个数组，合并成一个参数，例如：
add`1 2`;
add`1,2`;
//如果参数有常量有变量，会把常量拼接成一个数组，每一个变量依次拼接到最后面
let a=10;
let b=2;
add`hello${
     a}welcome${
     b}`;
第一个参数：['hello','welcome','']
第二个参数：10
第三个参数：2

二、es6解构

es6中允许按照一定的模式，从数组和对象中提取值，按照一定的规则对变量进行赋值：

//es5中只能这样赋值
let a=1;
let b=2;

//es6中数组的解构赋值，按照顺序依次赋值
let [a,b,c]=[1,2,3];

es6中通过解构可以直接交换值

let m=12;
let n='hi';
[m,n]=[n,m];

es6中对象的解构赋值

对象的解构赋值和数组的解构赋值不同，数组的解构是有顺序的，但是对象的解构没有顺序，由属性来决定

let stu={
   
	name:'xx',
	age:12
}
let {
   name,age}=stu;
//如果是这样
let {
   name,age,address}=stu;
//address就相对于声明，但是没有赋值

es6中字符串的解构赋值

字符串中的字符会依次赋值，如果多余也不会报错

let [x,y,z] = 'hello';
console.log(x,y,z);//h,e,l

//字符串都会有一个长度属性，可以使用属性解构赋值
let {
   length:len} = 'hello';
console.log(len);	//5

es6中函数参数的解构赋值

类似于数组的解构赋值

function add([a,b]){
   
	console.log(a,b);
}
add([2