Vue【第一篇】ES6常用语法

最新推荐文章于 2023-06-11 19:23:30 发布

dfu65065

最新推荐文章于 2023-06-11 19:23:30 发布

阅读量187

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hyit/articles/10847042.html

版权

es6和es5可同时存在，均是一种规范，不强制

变量

变量提升

定义:在变量声明前可以使用变量（实际上是一个bug），var关键字

// 变量提升
console.log(username);
var username;

//输出
>undefined

let关键字声明变量不存在变量提升

// 变量提升
console.log(username);
let username;

//输出
>Uncaught ReferenceError: Cannot access 'username' before initialization

变量作用域

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