es6学习笔记(一)
2019-08-14 10:26:04来源:博客园 阅读 ()
babel : 一个js编译器
一、let const
js作用域:全局作用域 、 函数作用域 、块级作用域(新增)
let/const:
- 无变量提升
- 不能重复定义
- const的值如果是基本数据类型,则定义后不能改变;如果是引用数据类型,则可以改变其中的项
- 存在暂时性死区(TDZ)
1 var arr=[] 2 for(var i=0;i<5;i++){ 3 arr[i]=function(){ 4 console.log(i); 5 } 6 } 7 arr[3](); //6
for(let i=0;i<5;i++){ arr[i]=function(){ console.log(i); } } arr[3](); //3
Object.freeze() 冻结对象,冻结后无法改变
1 const arr = Object.freeze(['apple','banana']) 2 3 arr.push('x'); //报错 4 5 const arr1 = [1,2] 6 7 arr1.push(3); //正确操作
二、解构赋值
let a=12,b=5,c=6; let arr=[12,5,6] //解构赋值将以上两者结合 let [a,b,c] = [12,5,6] console.log(a); //12 console.log(b); //5 console.log(c); //6 //解构赋值左右两边格式要保持一致 let json={ name:'x', age:18, job:'y' } let {name,age,job} = json; console.log(name) //x console.log(age) //18 console.log(job) //y //别名 let {name,age,job:a}=json //a为job的别名 console.log(a) //y //默认值 let [a,b,c=0] = [1,2] console.log(a,b,c); //1,2,0
三、字符串模板 ``
优点:可以随意换行
1 let x=1,y=2; 2 console.log(`abcd${x}efdh${y}`); //'abcd1efdh2'
四、字符串新增
- str.indexOf(item); 返回item在str的位置,没有则返回-1
- str.includes(item) 查找str中是否存在item,返回true/false
- str.startWidth(item) str是否以item开头,返回true/false
- str.endWidth(item) str是否以item结尾,返回true/false
- str.repeat(count) 将str重复count次
- str.padStart(len,'xx'),填充字符串,len为填充后字符串的长度,XX为填充元素,在字符串开头填充
- str.padEnd(len,'xx'),填充字符串,同上,在字符串末尾填充
1 //字符串查找 2 let str="apple pear pitch"; 3 4 str.indexOf('apple'); //0 5 6 str.includes('apple'); //true 7 8 //判断浏览器是否为Chrome 9 if(navigator.userAgent.includes('chrome')){ 10 //…… 11 } 12 13 str.startsWith('apple'); //true 14 15 sre.endWidth('apple'); //false 16 17 let a='x'; 18 a.repeat(3); //'xxx' 19 20 a='09'; 21 a.padStart(5,'0'); //00009 22 a.padEnd(5,'0'); //09000
五、函数
1 //默认参数 2 function show(a,b){//es5 3 a = a || 1 4 b = b || 2 5 //.... 6 } 7 function show(a=1,b=2){//es6 8 //... 9 } 10 function test({x=0,y=0}){ 11 console.log(x,y) 12 } 13 test({}) //0 0 14 function test1({x=0,y=0}={}){ 15 16 }
1 //默认参数已定义的情况 2 function show(a=5){ 3 let a=10 //报错 4 console.log(a); 5 }
//扩展运算符 ... 作用:[展开数组,剩余参数] let arr = ['x','y','z'] console.log(...arr) //展开x,y,z //优化arguments转数组 function show(...a){ console.log(a); //[1,2,3,4,5] } show(1,2,3,4,5) //es5伪数组转数组 Array.prototype.slice.all(null,arguments)
//箭头函数 ()=>{ //... } let json = { id:1, show:function(){ setTimeout(function(){ console.log(this.id);//this指向window },2000); } } let json1 = { id:1, show:()=>{ setTimeout(function(){ console.log(this.id);//this指向定义时对象,window }) } }
箭头函数与普通函数的区别:
- this指向调用函数对象
- 无arguments。可用...args作为生于参数代替
- 不能用作构造函数
六、数组
数组的循环方式:
- arr.forEach()
- arr.map()
- arr.filter()
- arr.some()
- arr.every()
- arr.reduce()
- arr.reduceRight()
- for
forEach map filter some every的参数(handler,this指向)----handler(item,index,array)
reduce和reduceRight的参数:((prev,cur,index,arr)=>{})
prev为上一次的返回值,cur为当前值
新增:
- 幂运算 **
- for...of循环
- arr.keys() 索引
- arr.values() 值
- arr.entries() 实体
补充:剩余参数
//复制数组 let arr = [1,2,3] let arr1 = [...arr] //伪数组转数组 let arr2 = Array.from(fake) let arr3 = [...fake] //es5 [].slcie.call(fake)
Array上新增方法:
- Array.from() 定义数组
- Array.of() 将一组值转为数组
- arr.find() 查找数组中第一个符合条件的成员,找不到返回undefined
- arr.findIndex((val,index,arr)=>{...}) 查找数组中第一个符合条件的索引,找不到返回-1
- arr.fill(填充的东西,开始位置,结束位置) 填充数组
- arr.includes(item) 数组书否包含item,返回true/false
let obj = { 0:8, 1:9, 2:10, length:3 } let a1 = Array.from(obj); console.log(a1) //[8,9,10] let a2 = Array.of(1,2,3,4,5); //[1,2,3,4,5] a1.find((val,index,arr)=>{ return val>8; });//9
七、对象
1 //对象的简洁语法 2 let name = 'name'; 3 let age=18 4 let obj = { 5 name, 6 age, 7 showA(){//注意这里千万不要用箭头函数 8 return this.name 9 } 10 } 11 12 //Object.is() 用于比较两个值是否相等 13 NaN == NaN //false 14 Object.is(NaN,NaN) //true 15 +0 == -0 //true 16 Object.is(+0,-0) //false 17 18 //Object.assign()用于合并对象 19 Object.assign(target,source1,source2,...)
对于Object.assign(): 当属性重复时,后面的覆盖前面的
循环:Object.keys() Object.values() Object.entries()
解构赋值应用:let {keys,entries,values} = obj;
原文链接:https://www.cnblogs.com/qiyangliu/p/11299059.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Jquery插件写法笔记整理 2020-03-29
- 如何用javascript连接access数据库 2020-03-20
- 在JavaScript中尽可能使用局部变量的原因 2020-03-08
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- JsEasy的介绍 2019-10-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash