涉猎ECMAScript6(ES6/ES2015)语法

javascript的遵循的官方规范就是ECMAScript(ECMA欧洲计算机制造商协会),ES(简写)的版本基本上可以从2009年ES5开始,基本上web前端兴起时,我们的浏览器支持的标准就是ES5了。到2015年ES6发布,或者ES2015,也许后续的版本可能以年为单位(ES2016,ES2017等)目前来说,ES6在各个浏览器的支持不是很统一,所以如果我们使用ES6编写代码,为了兼容广泛的浏览器,可以使用工具把ES6的代码转换为ES5的版本。

声明块级作用域

在ES5里面,作用域通常是以function为基础,如果需要模拟一个块级的作用域,需要使用立即调用函数表达式(immediately invoked function expression (IIFE))例如:

ES6里面提供了let关键字声明块级变量,首先需要使用{}

上面这种单独使用{}声明的方式不是很常见,但是如果是需要声明多个块级变量,最好放在一起,使用一个let

{ let a = 2, b, c;
 // ..
}
{
  console.log(a);//undefined
  console.log(b);//ReferenceError: b is not defined
  var a;
  let b;
}

let + for

 var funcs = [];

 for (var i = 0; i < 5; i++) {
      funcs.push(function() {
         console.log(i);//5
      });
 }
 funcs[3]();//5

上面是一个需要应用闭包的(或者说生命块级变量的例子)

 var funcs = [];

 for (var i = 0; i < 5; i++) {
    (function(j){
      funcs.push(function() {
        console.log(j);
      });
    })(i); 
 }
 funcs[3]();//3
//使用let可以更加简单写法
 var funcs = [];

 for (let i = 0; i < 5; i++) {
     funcs.push(function() {
        console.log(i);
     });
 }
 funcs[3](); //3

const

声明一个常量,这个常量在初始化时就要初始化赋值,以后不允许进行二次赋值,否则抛出错误:TypeError: Assignment to constant variable.如果声明一个数组,是可以对数组进行修改的。只是不能对这个变量再赋值。

 

…扩展运算符

…运算符取决于使用的地方:

 //展开参数
 function foo(x, y, z) {
 console.log(x, y, z);
 }
 foo(...[1, 2, 3]); // 1 2 3

 //展开数组
 var a = [2, 3, 4];
 var b = [1, ...a, 5];
 console.log(b); //[1, 2, 3, 4, 5]

 //收敛为数组
 function foo(x, y, ...z) {
 console.log( x, y, z );
 }
 foo( 1, 2, 3, 4, 5 ); // 1 2 [3,4,5]

 function foo(...args) {
 console.log( args );
 }
 foo( 1, 2, 3, 4, 5); // [1,2,3,4,5]

参数的默认值或表达式

这个特性其实C#里面已经早就有了:

 //默认值
 function foo(x=1,y=2){
    console.log(x+y);
 }
 foo();//3
 foo(4,5);//9

 function bar(x){
    return x*2;
 }
 
 //使用表达式
 function foo(x=bar(2),y=1){
    console.log(x+y);
 }
 foo();//5

解构

对这个我不太建议去使用,可读性不是很好。主要作用是赋值。

 var aa = 10,
 bb = 20;

 var o = {
 x: aa,
 y: bb
 };
 var {
 x: AA,
 y: BB
 } = o;

 console.log(AA, BB); // 10 20

对象属性扩展写法

 var x=1,y=2;
 var o={
 x,
 y,
 foo(){
 console.log(123);
 }
 }

 //等同于
 var x=1,y=2;
 var o={
 x:x,
 y:y,
 foo:function(){
 console.log(123);
 }
 }

super关键字

用来调用父对象的函数,其实原型上的方法

 var o1 = {
  foo() {
    console.log(1);
  }
 }
 var o2={
  foo(){
   super.foo();
   console.log(2);
  }
 }

 Object.setPrototypeOf(o2, o1);
 o2.foo();// 1
          // 2

模板(注意使用“和${})

 var name="Gabriel"
 var age="28"
 var tmp=`I am ${name},and I am ${age}`;
 console.log(tmp);//I am Gabriel,and I am 28

Arrow Function(箭头函数)

其实这个C#里面也有,匿名函数的简写(语法糖),以=>分割,左边参数,右边函数体。

 var foo=(x,y)=>{x+y};
 //等效
 function foo(x,y){
   return x+y;
 }

另一个用箭头函数的好处是可以简化this的传递:

 

for…of遍历

对比for…in和for…of的代码

 var arr=["A","B","C","D"];
 for(var val of arr){
   console.log(val);
 }
 //等效
 for(var idx in arr){
   console.log(arr[idx]);
 }

正则表达式

javascript里面使用2个Byte(字节)表示一个字符,也就是16位。但是有的字符超出了这个范围,例如𝄞.需要两个字符编码为:0xD834和0xDD1E,如果需要匹配𝄞。使用/\u{1D11E}/匹配𝄞需要加上一个标识符u(即/\u{1D11E}/u)。”𝄞”.length==2,另外增加了y等标识。

 

本文参考原文:https://github.com/getify/You-Dont-Know-JS

javascript
作者:张雪飞
出处:https://zhangxuefei.site/p/1575
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注