ES6 常用语法
Posted wdbgqq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6 常用语法相关的知识，希望对你有一定的参考价值。
一 什么是ES6?
ECMAScript 6 简称ES6, 在2015年6月正式发布!!!
二 常用语法
1.声明变量 const/let/var
ES6以前用var来声明变量，存在变量提升现象---会提前创建变量
作用域也只有全局作用域和函数作用域---所以变量提升会在函数顶部或者全局作用域顶部
**********************************************************************************************************************
let 关键字表示变量，const 表示常量，都是块级作用域，比如一个函数内部，或一个{}内部。
var
var定义的变量可以修改，如果不初始化会输出undefined，不会报错
1 var a = 1;
2 // var a;//不会报错
3 console.log(‘函数外var定义a:‘ + a);//可以输出a=1
4 function change(){
5 a = 4;
6 console.log(‘函数内var定义a:‘ + a);//可以输出a=4
7 }
8 change();
9 console.log(‘函数调用后var定义a为函数内部修改值：‘ + a);//可以输出a=4
const
const定义的变量不可以修改，而且必须初始化
1 const b = 1; //正确
2 const b; //错误，必须初始化
3 console.log(‘函数外const定义b：‘ + ｂ);/有输出值
4 //b = 5;
5 //console.log(‘函数外修改const定义b:‘ + b);//无法输出
let
let是块级作用域，函数内部使用let定义后，对函数外部无影响
1 let c = 3;
2 console.log(‘函数外let定义c：‘ + c);//输出c=3
3 funcion change(){
4 let c = 6;
5 console.log(‘函数内let定义c：‘ + c);//输出c=6
6 }
7 change();
8 console.log(‘函数调用后let定义c不受函数内部定义影响：‘ + c);//输出c=3
let、const 和var的区别
let和var的一个明显的区别就是没有变量提升：
1 function fun1(){
2 for(var i = 0; i <= 10;i++){
3
4 }
5 console.log(i);//11;--------var变量提升
6 };
7 fun1();
8 function fun2(){
9 for(let i = 0; i <= 10;i++){
10
11 }
12 console.log(i);//i is not defined;--------let没有变量提升
13 };
14 fun2();
const和var的明显区别是，const声明的是常量，不可被后面的代码赋值改变：
1 var x = 1;
2 x = 2;
3 console.log(x);//2;-----var声明的是变量，可被赋值替换
4
5 const y = 1;
6 y = 2;
7 console.log(y);//Assignment to constant variable.;------const声明的是常量，不可改变
2.模板字符串
1 <body> 2 <div id="head"> 3 </div> 4 <script> 5 let ele=` 6 <div id="head"> 7 <h1>模板字符串</h1> 8 <p>动态添加</p> 9 </div> 10 `; 11 let ele_div=document.getElementById(‘head‘); 12 ele_div.innerhtml=ele 13 </script>
14 </body>
3.函数
箭头函数，是函数的快捷写法，类比Python的匿名函数 lambda。
最直观的三个特点
-- 不需要function关键字来创建函数
-- 省略return关键字
-- 继承当前上下文的this关键字（因为箭头函数的调用者是当前上下文，跟普通函数区别开
1 // 函数在哪里调用了 才决定this到底引用的是谁~~~
2 // 最后一个调用函数的对象才是传到函数里的上下文对象this~~~
3
4 console.log(this)
5
6 function test() {
7 console.log(this)
8 };
9
10 let obj = {
11 a: 1,
12 test: test,
13 };
14
15 let obj2 = {
16 b: 3,
17 obj: obj,
18 };
19
20 obj.test();
21 test();
22 obj2.obj.test();
4.import 和 export
略
5.数据解构
1 const people = {
2 name: "提莫",
3 age: 2,
4 };
5 const {name, age} = people;
6 console.log(name);
7 console.log(age);
8
9 const person = ["瑞文", "刀妹"];
10 const [name1, name2] = person;
11 console.log(name1);
12 console.log(name2)
6.class / extends / super
ES6 引入了关键字class来定义一个类，constructor是构造方法，this代表实例对象。
类之间通过extends继承，继承父类的所有属性和方法。
super关键字，它代指父类的this对象，子类必须在constructor中调用super()方法，
否则新建实例时会报错，因为子类没有自己的this对象。调用super()得到this，才能进行修改。
1 class Animal{
2 constructor(){
3 this.type = "animal"
4 }
5 says(say){
6 console.log(this.type + "says" + say )
7 }
8 }
9
10 let animal = new Animal()
11
12 animal.says("hello")
13
14 class Dog extends Animal{
15 constructor(){
16 super();
17 this.type = "dog";
18 }
19 }
20
21 let dog = new Dog()
22 dog.says("hello")
以上是关于ES6 常用语法的主要内容，如果未能解决你的问题，请参考以下文章