ES6（二）之变量解构与模版字符串

解构特点：

解构赋值:声明和赋值都放到一起了

解构 表示等号左边和右边结构类似

例：

// 数组的解构必须位置相同

let[,age] = ['zzz',9];

// 对象解构名字必须相同

let{length} = ['zzz',9];

console.log(length);//2

// 如果有关键字可以采用:的形式进行更改名字

let{name,age,default:d} = {name:'zzz',age:9,default:'xxx'};

console.log(d);//xxx

// 如果想设置某个属性的默认值 必须采用=号的方式

let[, {address: [,a] },hobby='游泳'] = [

{name:'zzz'},

{age:9,address:[1,2,3] },

]

console.log(hobby);//游泳

解构的应用：

functiontest() {

return[1,2,3];

}

let[a,b,c] =test();

functionajax({url=newError('url without'),type="get",data=xxx}) {

console.log(url,type,data);

}

ajax({

url:'/test',

data:{}

});

es6 模板字符串 特殊的字符串

// 模板字符串取代了原有的字符串拼接功能

letname='zzz';

letage=9;

// hello~'zzz'今年9岁了

// let str = 'hello~\'' + name + '\'今年' + age+'岁了';

letstr=`hello~'${name}'今年${age}岁了`

// 如何自己实现一个类模板字符串的功能

letname='zzz';

letage=9;

letstr='hello~$今年$岁了';

str=str.replace(/\$\{([^}]*)\}/g,function() {

console.log(arguments[1])//name age

returneval(arguments[1]);// with

});

console.log(str);

字符串新增其他方法：

// includes 是否包含

console.log(url.includes('baidu'));//true

// startsWith 以xxx开头

console.log(url.startsWith('http://'));//true

// endsWith 以xxx结尾

console.log(url.endsWith('.png'));//true

// padStart padEnd 补全

setInterval(function() {

letdate=newDate();

lethour=date.getHours();

letminutes=date.getMinutes();

letseconds=date.getSeconds();

letstr=`${hour.toString().padStart(2,)}:`;//前部以0补全2位

str+=`${minutes.toString().padStart(2,)}:`;

str+=`${seconds.toString().padStart(2,)}`;

console.log(str)//01:05:11

},1000)