大型美容网站建设,动态图表制作方法,网站影响seo的标签,微信公众号怎么创建需要花钱吗?ES6是JavaScript语言的新一代标准#xff0c;是ECMAScript的第六个版本#xff0c;加入了很多新的功能和语法#xff0c;在很多框架#xff0c;如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的#xff0c;下面对经常用到的ES6语法做简要的介绍。 1.let,const l…　　ES6是JavaScript语言的新一代标准是ECMAScript的第六个版本加入了很多新的功能和语法在很多框架如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的下面对经常用到的ES6语法做简要的介绍。 1.let,const let和const是ES6中新增的两个关键字用来生命变量let和const都是块级作用域。let声明的变量只在let命令所在的代码块内有效。const声明一个只读变量一旦声明常量的值就不可更改。与var声明的变量不同var声明的是函数作用域且存在变量提升。例如　 1 // let示例2 {3 var a1;4 5 let b2;6 }7 a; // 18 b; // ReferenceError:b is not undefined.9 10 // const示例 11 const c3; 12 c4; // Assignment to constant variable. 13 14 // var 示例 15 console.log(d); // undefined 16 var d3; 17 console.log(d); //3 18 声明提前后浏览器执行顺序为 19 var d; 20 console.log(d); // undefined 21 d3; 22 console.log(d); // 3 2.箭头函数 ES6允许使用“箭头”定义函数。这种函数创建的函数不需要函数关键字并且还可以省略return关键字。与此同时箭头函数内的this指向函数定义时所在的上下文对象。例如 1 var foo1(a,b)a 1;2 // 等价于 3 var foo1function(a,b){4 return a b;5 }6 // 在return只有一个表达式时使用箭头函数可以省略return和{}7 8 var namejhon;9 var obj{ 10 name:tom, 11 sayName1:function(){ 12 setTimeout(function(){ 13 console.log(this.name) 14 },500) 15 }, 16 sayName2:function(){ 17 setTimeout((){ 18 console.log(this.name) 19 },500) 20 }, 21 } 22 obj.sayName1(); // jhon 23 obj.sayName2(); // tom 24 // 第一个this值window对象第二个方法里面指向当前的obj对象 小结1.使用箭头函数可以简写代码量2.可以改变this的指向可以替代apply,call,bind一些方法。 3.模板字符串 相信许多小伙伴在js里面用‘’ 拼接字符串很让人头疼了如果字符串量比较少还好一旦比较多最后拼的自己都不认识了而且严重影响代码的整洁优雅度。ES6的反引号标识字符串除了可以当做普通字符串使用外还可以用来定义多行字符串以及在字符串内嵌入变零功能很强大。例如 1 // 普通字符串2 Hello World3 4 // 多行字符串5 Hello World6 Hello JavaScript!7 8 // 字符串内嵌入变量9 let namePeer; 10 Hello,${name} 4.解构赋值 ES6允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构。例如 1 // 数组解构2 var [a,b,c][1,2,3];3 a //14 b //25 c //36 7 // 对象解构8 let namePeer;9 let age23; 10 let person{name,age}; 11 person //{name:Peer,age:23} 12 13 // 函数的参数也可以使用解构赋值例如 14 // 数组的参数解构 15 function sum([x,y]){ 16 return x y; 17 } 18 sum([1,2]); // 3 19 // 对象的参数解构 20 function sum2({x,y}){ 21 return x y; 22 } 23 sum2({x:5,y:6}); // 11 24 25 // 解构同样适用于嵌套的数组与对象 26 // 嵌套数组解构 27 let [a,[b],c][1,[2],3] 28 a; //1 29 b; //2 30 c: //3 31 // 嵌套对象解构 32 let {person:{name,age},foo}{person:{name:Peer,age:23},foo:foo} 33 name; // Peer 34 age; // 23 35 foo; // foo 小结对象和数组的解构只需和声明好的对象数组形式保持一致即可在获取对象里面的属性值还是很方便的在VueReact等框架的开发中也用的比较多如:import { a , b , c } from component,所以不难理解这段代码就是把component这个模块里面的啊a,b,c属性对应的值取出来再分别赋值给a,b,c变量确实大大简化了代码提高了开发效率。 5.rest参数 rest打开软件翻译为休息; 剩余部分; 支持物; 宁静安宁。ES6引入rest参数形式为...变零名用于获取多数的多余参数以替代arguments对象的使用。rest参数是一个数组数组中的元素是多余的参数。例如 1 function printName(a,...names){ 2 console.log(a); 3 console.log(names) 4 } 5 printName(Peer,jhon,toom) 6 // Peer 7 //[jhon, toom] 6.扩展运算符 扩展运算符是三个点...,它将一个数组转为用逗号分隔的参数序列类似于rest参数的逆运算。例如 1 function sum(a,b,c){ 2 return a b c; 3 } 4 sum(...[1,2,3]) 5 // 6 7.import ,export ES6实现了自己的模块化表标准在语言层面上实现了模块化它逐渐取代了CommonJS和AMD规范。ES6的模块功能主要有两个关键字构成export和import。export用于规定模块对外暴露的接口import用于引入其他模块提供的接口。例如 // a.js const afunction(){return this is a.js } export default a; // b.js const bfunction(){return this is b.js } export {b} // c.js import a from ./a; import {b} from ./b; console.log(a,b); // this is a.js, this is b.js 小结ES6的模块化解决了JavaScript没有模块化系统的缺陷同时也使得各个模块相互独立有独立的作用域。 8.Class 1 // 定义一个类2 class Person{3 constructor(name,age){4 this.namename;5 this.ageage;6 }7 getName(){8 return this.name;9 } 10 } 11 var personnew Person(Peer,23); 12 13 // 通过extends 关键字实现继承 14 class Man extends Person{ 15 constructor(anme,age){ 16 super(name,age) 17 } 18 getGender(){ 19 return male 20 } 21 } 22 var mannew Man(Peer,23)23 man.getName(); //Peer23 console.dir(man); 从打印man对象的结构来看getGender是Man原型的方法getName是Man继承Person的构造方法man.getName()方法首先再man.__proto__的原型上查找如果没有就在man.__proto__.proto__上查找于是一级一级就构成了作用域链。 话说好记性不如烂笔头书写文章也是自我反思与总结的过程。以上就是个人在项目开发中用的比较多的地方分享给大家不足之处多多指正。 参考书籍《React进阶之路》《深入浅出Webpack》 更多专业前端知识请上 【猿2048】www.mk2048.com