ECMAScript 6 简称ES6, 在2015年6月正式发布~ ECMAScript 是JavaScript语言的国际标准。
一, 变量声明 const let var
ES6以前 var关键字来声明变量,无论声明在何处都存在变量提升这个事情,会提前创建变量;
作用域也只有全局作用域以及函数作用域~ 所以变量会提升在函数顶部或全局作用域顶部;
let 关键字表示变量,const 表示常量。都是块级作用域,比如一个函数内部,代码块{}内部;
// var 变量提升 console.log(age); var age = 18; console.log(age); // 声明变量 // const let console.log(age); // age is not defined let age = 18; console.log(age); const a = 1; const a = 2; // Identifier ‘a‘ has already been declared let a = 1; let a = 2; // Identifier ‘a‘ has already been declared function test() { console.log(age); // age is not defined let age = 18; console.log(age); } test()
var let const
二,模板字符串
ES6引入了反引号``,使用 ${} 的方式
// 模板字符串, 可进行简单的运算 let name = "glh"; let age = 18; let hobby = ["妹子1", "妹子2"]; let html = ` <ul> <li>${name}</li> <li>${age + 2}</li> <li>${hobby}</li> </ul>`; let ele1 = document.getElementById("app"); let ele = document.getElementsByClassName("app")[0]; console.log(ele); console.log(ele1); ele.innerHTML = html; ele.innerText = ‘sdfsfss‘
三,箭头函数
箭头函数,是函数的快捷写法,类比Python的匿名函数 lambda。
最直观的三个特点
-- 不需要function关键字来创建函数
-- 省略return关键字
-- 继承当前上下文的this关键字
// 箭头函数和this function f(x) { return x+1 } let aa = x => x+1; console.log(aa(2)); // 关于this function f1() { console.log(this) } f1(); //this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} let obj1 = { f1:f1 }; obj1.f1(); //this: {f1: ƒ} let obj2 = { obj: obj1 }; obj2.obj.f1(); // this: {f1: ƒ} // this取决去函数的最近调用着
箭头函数和this
四,数据解构
数据的解构类似于我们python里面的**解包
// 数据的解构 let arry = [1, 2, 3]; let obj = {name: ‘glh‘, age: 18}; let objArry = [ {name: ‘glh‘, age: 18}, {name1: ‘hudapao‘, age1: 28} ]; let [a, b, c] = arry; console.log(a); console.log(b); console.log(c); let {name, age} = obj; // 解构取对象的键对应的值 console.log(name); console.log(age); let [{name, age}, {name1, age1}] = objArry; console.log(name); console.log(name1); console.log(age); console.log(age1);
数据的解构
五,类
// 类 类的继承 class Foo{ // 类的构造方法 constructor(){ this.name = "glh"; this.gender = " man " } says(say){ console.log(this.name + this.gender + "说" + say) } } foo = new Foo(); foo.says(6666)
类的继承
// 类的继承 class Son extends Foo{ constructor(name, gender){ super(); this.name = name; this.gender = gender; } } son = new Son("儿子", "man man"); son.says(7777)
六, import 和 export
import 导入模块、export导出模块
// main.js // 导出多个声明 export var name = "ggg" export var age = "18" export 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 // test.js // import app from "./main" import my_app from "./main"
默认导出
原文地址:https://www.cnblogs.com/glh-ty/p/9616117.html
时间: 2024-10-08 12:09:47