您的位置：首页 > 其它

ES6学习总结之解构赋值及字符串模板

2018-03-11 23:34 791 查看

解构赋值 （*非常有用，特别在做数据交互时ajax）

1.将右边数据导入左边，相当于给左边数据起的别名例1：let [a,b,c] = [12,5,6]console.log(a,b,c); //12,5,6注意:左右两边，解构格式保持一致let [a,[b,c]] = [12,[5,6]];2.解构json例2：let json={name:'abc',age:18,job:'aa'}let {name,age,job:j} = json; console.log(name,age,job) //'abc' 18 'aa'
let {name,age,job:j} = json; //j是job的别名console.log(name,age,j) //'abc' 18 'aa'3.在解构时可以给默认值例3：let [a,b,c]=['1',‘2’]; console.log(a,b,c) //1 2 undefinedlet [a,b,c=“暂无数据”]=['1',‘2’] console.log(a,b,c) //1 2 暂无数据let [a,b,c]=['1',‘2’,null]; console.log(a,b,c) //1 2 nulllet [a,b,c='暂无数据']=['1',‘2’,null]; console.log(a,b,c) //1 2 null null表示有值4.交换两个数的位置例4：let a=14;let b=4;[a,b]=[b,a];console.log(a,b); //4 145.小应用：函数的返回值可以直接解构例5 ：function getPos(){return {right:10,left:20}}let {right,left} = getPos();console.log(right,left) //10 206.小应用：函数传参也可以解构例6：function fn({a,b}){console.log(a,b); //1 2}fn({a:1,b:2})字符串模板以及新增方法let name = 'abc'';let age = 18;let str = `我叫${name},年龄${age}`;console.log(str);1.ajax动态生成时实例：无字符串模板时<script>let data=[{'title':'年末好几次','read':56},{'title':'年末几次','read':57},{'title':'年末年末年末好几次','read':58},{'title':'年末年末年末年末年末年末好几次','read':59}]window.onload = function(){var oUl=document.getElementById('ul1');for(let i=0;i<data.length;i++){var oLi = document.creatElement('li');oLi.innerHtml ='<sapn>'+data[i].title+'</span>'+'<span>阅读人数'+data[i].read+'<span>';oUl.qppendChild(0Li);}}</script><body><ul id="ul1"></ul></body>字符串模板（重点）var oUl=document.getElementByid('ul1');for(let i=0;i<data.length;i++){var oLi = document.creatElement('li');oLi.innerHtml =`<sapn>${data[i].title}</span><span>阅读人数${data[i].read}<span>;oUl.qppendChild(0Li)`;}}优点：可以自动换行可以用${}将本地变量嵌入到字符串中2.字符串查找方法：(1)str.indexof('串1'):返回串1的位置，反之返回-1str.includes('串1'):是否包含串1，有就返回true,反之false例1：let str ="apple banana orange";console.log(str.includes('apple')); //true例2：判断浏览器if(nacigator.userAgent.includes('chrome')){console.log('是chrome');}else{console.log('不是chrome');}(2)字符串是否以什么开头str.startsWith('串2') ：检测str是否以串2开头,是则返回true,反之返回false例如：检测协议(3)字符串是否以什么结尾str.startsWith('串3') ：检测str是否以串3结尾,是则返回true,反之返回false例如：检测文件后缀名（4）重复字符串：str.repeat(次数) ：返回重复后的str 注：次数不能为负数，否则会报错（5）填充字符串：str.padStart(整个字符串的长度，填充的东西) ：往前填充例1：console.log('a'.padStart(4,'XXX')) //XXXa例2：let str="a";let padstr='XXX';console.log(str.length+padstr.length,padstr); //XXXastr.padEnd(整个字符串的长度，填充的东西) ：往后填充

（前端小白，如有错误，欢迎指正，在此感激不尽）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ES6 模板字符串 解构
相关文章推荐
新的分享
章节导航