ES6语法基本使用

Posted 沦陷

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6语法基本使用相关的知识,希望对你有一定的参考价值。

什么是ES6?

  • ECMAScript 6(以下简称ES6)是javascript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
  • ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。
  • ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。

ES6官方中文网(http://es6.ruanyifeng.com/


变量定义(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

Rest+ Spread

详解(https://segmentfault.com/a/1190000009992594

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

 

 

谢谢观看!

以上是关于ES6语法基本使用的主要内容,如果未能解决你的问题,请参考以下文章

es6基本语法

ES6 class的基本语法-学习笔记

ES6 基本语法

vue2.0 代码功能片段

ES6语法基本使用

ES6---Class基本语法