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语法基本使用的主要内容,如果未能解决你的问题,请参考以下文章