1, 声明变量const let var
ES6以前var关键字来声明变量,无论声明再何处都存在变量提升这个事情,会提前创建变量
作用域也只有全局作用域以及函数的作用域,所以变量提升再函数顶部或全局作用域顶部
let关键字表示变量,const表示常量,都是块级作用域,比如一个函数内部,代码块{}内部
<script> //全局变量的提升 console.log(global); var global = "global"; console.log(global); //函数内变量的提升 function aa() { if(1) { var test = "test"; } console.log(test) } aa();//打印test因为var变量提升 function bb() { if(1) { let test = "test"; } console.log(test) } bb();//报错,因为let在局部作用域中 // 在for循环中let var arry = []; for(var i = 0; i < 10; i++){ console.log(i); arry[i] = function(){ console.log(i) } } //相当于 // var arry = []; // var i; // for(i = 0; i < 10; i++){ // console.log(i); // arry[i] = function() { // console.log(i) // } // } </script>
2,模板字符串
<body> <div id="app"></div> <script> //模板字符串进行标签字符串的拼接一行搞定 let ele = `<div> <h1>模板字符串</h1> <p>动态添加</p> </div>`; let ele_div = document.getElementById("app"); console.log(ele_div); ele_div.innerHTML = ele; //将表达式嵌入字符串 let a = 10; let b = 5; console.log(`结果是: ${a + b}, ${a * b}`) </script> </body>
3,函数
箭头函数,是函数的快捷写法,类比python的匿名函数lambda
最直观的三个特点
- 不需要function关键字来创建函数
- 省略return关键字
- 继承当前上下文的this关键字
x => x+1;
//等同于
function test(x) {
return x+1
}
<script> console.log(this); function test(){ console.log(this) } let obj = { a: 1, test: test, }; let obj2 = { b: 3, obj: obj, }; obj.test(); test(); obj2.obj.test() </script>
注意: 函数在哪里调用了 才决定this到底引用的是谁~~~,最后一个调用函数的对象才是传到函数里的上下文对象this
4,imort和export
import导入模块, export导出模块
//main.js
//导出多个声明
export var name = "chenrun";
export var age = "18";
export var function aa () {return 1}
//批量导出
export{name, age, aa}
//test.js
import{name, age, aa} from "./main"
console.log(name)
console.log(age)
console.log(aa())
//整个模块导入, 把模块当作一个对象
//该模块下所有导出都会作为对象的属性存在
import * as obj from "./main"
console.log(obj.name)
console.log(obj.age)
console.log(obj.aa())
//一个模块只能有一个默认导出
//对于默认导出 导出的时候名字可以不一样
//main.js
var app = new Vue({
});
export default app
//text.js
//import app from "./main"
import my_app from "./main"
5 数据结构
数据解构类似于我们python里面的**解包
<script> const people = { name: "提莫", age: 2, }; const person = ["陈润", "亚索"] const {name, age} = people console.log(name); console.log(age); const [name1, name2] = person; console.log(name1); console.log(name2); </script>
6,class extends super
ES6引入关键字class来定义一个类,constructor是构造方法,this代表实例对象.
类之间荣国extends继承,继承父类的所有属性和方法.
super关键字,它代指父类的this对象,子类必须在constructor中调用super()方法,否则新建实例会报错,因为子类没有自己的this对象, 调用super()得到this,才能进行修改
<script> class Animal{ constructor(){ this.type = "animal" } says(say){ console.log(this.type + "say" + say) } } let animal = new Animal(); animal.say("hello"); class Dog extends Animal{ constructor(){ super(); this.type = "dog"; } } let dog = new Dog(); dog.says("hello") </script>