关于javascript:ES6语法基本使用

24次阅读

共计 1824 个字符,预计需要花费 5 分钟才能阅读完成。

什么是 ES6?

  • ECMAScript 6(以下简称 ES6)是 JavaScript 语言的下一代规范,曾经在 2015 年 6 月正式公布了。Mozilla 公司将在这个规范的根底上,推出 JavaScript 2.0。
  • ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现。
  • ES6 的指标,是使得 JavaScript 语言能够用来编写大型的简单的应用程序,成为企业级开发语言。
    ES6 官网中文网

    变量定义(var,let,const)

  • 个别函数中都是用 var 去定义变量,因为它是关键字能够预解析。
  • ES6 中举荐应用 let 去定义变量,let 定义的是个别变量。
  • const 定义的是常量,是不可批改的。
<script type="text/javascript">
        <!-- 定义 var 值 -->
        var ht=20;
        <!-- 定义 let 值 -->
        let nn=30;
        <!-- 定义 const 值 -->
        const pcl=183;
        alert(ht);  //20
        alert(nn);    //30
        alert(pcl);    //183
        
         ht=21;
         nn=31;
       //pcl=184;// 报错,const 定义的常量是不可批改的
        alert(ht);  //21
        alert(nn);  //31
        alert(pcl); //183
    </script>

箭头函数

// 通过箭头函数的写法定义
var fnRs = (a,b)=>{
    var rs = a + b;
    alert(rs);
}        
// fnRs(1,2);
// 一个参数能够省略小括号
var fnRs2 = a =>{alert(a);
}
fnRs2('本是青灯不归客');
 
// 箭头函数的作用,能够绑定对象中的 this(这里的 this 不是 window 而是对象)
var person = {
    name:'tom',
    age:18,
    showName:function(){setTimeout(()=>{alert(this.name);
        },1000)            
    }
}
person.showName();

class

ES6 中也提出了类用法,类用法 es5 中就能够实现了,不过既然是新规定那就更加清晰明了啦

class Poetry {constructor(){console.log('山有木兮木有之');
  }
}
class Person extends Poetry{constructor(){super();
    console.log('本是青灯不归客');
  }
}
let ht = new Person();

解构

var ht1 = someArray[0];
var ht2 = someArray[1];
var ht3 = someArray[2];
// 解构赋值
let [ht1, ht2, ht3] = someArray; 
// 还有上面例子
let [,,ht3] = [1,2,3];
console.log(ht3); //3

let [ht1,...last] = [1,2,3];
console.log(last); //[2,3]

// 对象解构
let {name,age} = {name: "ht", age: "17"};
console.log(name); //ht
console.log(age); //17
// 留神
let {ept1} = {};
console.log(ept1); //undefined
let {ept2} = {undefined};
console.log(ept2); //undefined
let {ept3} = {null};
console.log(ept3); //null

import 和 export

  • 通过向大括号中增加 sex,echo 变量并且 export 输入,就能够将对应变量值以 sex、echo 变量标识符模式裸露给其余文件而被读取到
  • 不能写成 export sex 这样的形式,如果这样就相当于 export “boy”, 内部文件就获取不到该文件的外部变量 sex 的值,因为没有对外输入变量接口, 只是输入的字符串。
<script type="text/javascript">
        // 简写成上面的模式
    var sex="boy";
    var echo=function(value){console.log(value)
    }
    export {sex,echo} 
    </script>
  • 通过 import 获取 a.js 文件的外部变量,{} 括号内的变量来自于 a.js 文件 export 出的变量标识符。
import {sex,echo} from "a.js" 
    console.log(sex)   // boy
    echo(sex) // boy

正文完
 0