Vue【第一篇】ES6常用语法
es6和es5可同时存在，均是一种规范，不强制
变量
变量提升
var: 定义:在变量声明前可以使用变量（实际上是一个bug），var关键字会让变量在程序的开始处全局声明
// 变量提升 console.log(username); var username; //输出 >undefined
console.log(a);//undefined
{
var a = 1;
}
a = 2
console.log(a); //2
a = 2
console.log(a);//2
{
var a = 1; //此处相当于把代码`var a`提升到最前面
}
console.log(a); //2
var a = 10;
function foo() {
console.log(a);
if (1===2){
var a = 'ecithy' // undefined 相当于把`var a`提升到函数最前面
}
}
foo()
let: 1.let声明的变量不存在变量提升 2.属于块级作用域 3.不允许重复声明
// 变量提升 console.log(username); let username; //输出 >Uncaught ReferenceError: Cannot access 'username' before initialization
console.log(a);//2
{
let a = 1; //此处相当于把代码`var a`提升到最前面
}
console.log(a); // Uncaught ReferenceError: a is not defined
变量作用域
var定义的变量：
只有全局作用域和函数作用域
let定义的变量：
有全局作用域和函数作用域，块级作用域 {};
let定义的变量不能重复定义
const定义的变量：
没有变量提升
带来了块级作用域
不能重复定义
定义之后不能修改
定义的时候必须赋值
if (true) {
var username = "ecithy";
let age = 24;
}
console.log(username);
console.log(age);
//输出
ecithy
Uncaught ReferenceError: age is not defined
变量定义
var username = "zhaozhenyu"; var username = "zhouxiang"; console.log(username); //错误写法 // let username = "xiedalei"; // let username = "ok"; // console.log(username);
变量解构
//数组解构
let ary = [1, 2, 3];
let [a, b, c] = ary;
console.log(a, b, c);
let [a,,c] = ary;
//对象解构
let obj = {
username: "liyasong",
age: 23
};
let { username: user, age: age } = obj;
console.log(user, age);
//变量交换
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);
模板字符串
字符串拼接升级了。
反引号进行字符串的拼接
用${}来存储变量
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById("app");
// oDiv.innerHTML = "<h1>Hello Vue" +
// "<h2>Hello Vue</h2>" +
// "</h1>";
let username1 = "ecithy";
let username2 = "gini";
oDiv.innerHTML = `
<h1>Hello ${username1}</h1>
<h2>Hello ${username2}</h2>
`
</script>
</body>
函数扩展
默认值参数
function foo(x, y=10) {
let number = y;
return number;
}
ret = foo(1, 2);
ret1 = foo(1);
ret2 = foo(1, 0);
console.log(ret);
console.log(ret1);
console.log(ret2);
//输出
2
10
0
箭头函数
注意
箭头函数的this指向定义时的作用域
普通函数的this指向调用者的作用域
语法
let foo = v => v;
ret1 = foo(10);
console.log(ret1);
//输出
10
// 0个或者多个参数
let bar = (x, y) => {return x+y;};
ret2 = bar(1, 2);
console.log(ret2);
//输出
10
3
function foo() {
console.log(this);
}
let bar = () => console.log(this);
let obj = {
foo: foo,
bar: bar,
};
foo();
bar();
obj.foo();
obj.bar();
//输出
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
{foo: ƒ, bar: ƒ}
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
对象的单体模式
解决了箭头函数的this指向问题
let obj = {
name: "ecithy",
foo() {
console.log(this.name);
}
};
obj.foo();
类
ES5语法
// ES5中实例化对象的方式
function Person() {
this.username = "ecithy";
// this.age = 18;
}
Person.prototype.showInfo = function () {
console.log(this.username);
};
let ecithy = new Person();
ecithy.showInfo()
//输出
ecithy
ES6语法
class Person {
constructor(username, age) {
this.username = username;
this.age = age;
}
showInfo() {
console.log(this.username, this.age);
}
}
let ecithy2 = new Person("eithy", 24);
ecithy2.showInfo();
//输出
eithy 24
继承
显式定义子类构造函数，必须在子类的constructor方法里面写super方法
class Person {
constructor(username, age, account = 10000) {
this.username = username;
this.age = age;
this.account = account;
}
showInfo() {
console.log(this.username, this.age, this.account);
}
}
class Ecithy extends Person {
}
let ecithy = new Ecithy("ecithy", 24);
ecithy.showInfo();
//输出
ecithy 24 10000
class Person {
constructor(username, age, account = 10000) {
this.username = username;
this.age = age;
this.account = account;
}
showInfo() {
console.log(this.username, this.age, this.account);
}
}
class Ecithy extends Person {
constructor(username, age) {
super(); //显式定义子类构造函数，必须写super()
this.username = username;
this.age = age;
}
}
let ecithy = new Ecithy("ecithy", 24);
ecithy.showInfo();
//输出
ecithy 24 10000
模块
export const a = 10;
export const name = 'ecithy';
// 一个js文件就是一个模块
// 一个模块 如果有默认值 必须只有一个
export default {
b:10
}
<script type="module">
// es6 import导入 export 抛出
import obj,{a,name} from './module.js';
console.log(obj,a,name);
// import * as ooo from './module.js';
// console.log(ooo.default);
</script>
谢谢
