es6基本用法

let 命令

let 基本用法：ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

var 的“语法提升”示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(a)
        {
            var a = 1;
        }
        console.log(a)
        // 运行结果：
        // undefined
        // 1

        // 运行结果分析： 一个{}就是一个语法块，但 var 具有“语法提升”的作用：即 在{}中运行到 var 处，会把该变量先提到外面去声明，让该变量
        // 成为全局变量。（而且 var 能够重复声明变量）所以上述代码等价于以下代码：
        /*
        var a
        console.log(a)
        {
            a = 1
        }
        console.log(a)
        */
    </script>
</body>
</html>

同理， 下面的代码如果使用var，最后输出的是10。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

 

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
    console.log(i);
    };
}
a[6](); // 6

let 变量的特点：

{
    // let a： 1. 局部作用域； 2. 不会存在变量提升； 3. let 的变量不能重复声明
    let a = 3;
}

所以如果在上述示例的代码块的外部调用变量a,如 console.log(a)， 则会报错

 

const 命令

基本用法：const声明一个只读的常量。一旦声明，常量的值就不能改变。 

而且 const 也跟 let 一样：

  • 局部作用域；
  • 不会存在变量提升；
  • 不能重复声明

参考链接：https://es6.ruanyifeng.com/#docs/let

 

模板字符串

反引号（``）中可以通过 ${变量名} 来插入值

let name = '未来';
let s = `${name}已来`
console.log(s)    // 未来已来

 

箭头函数：

let add = (x)=>{
    return x + 1
}
console.log(add(7))    // 8

 

对象：

ES5 中的对象：

var person = {
    name: "NEO",
    fav: function(){
        console.log(this);  // this 指向了当前对象
        console.log(this.name)  
    }
}
person.fav()

/*
{name: "NEO", fav: ƒ}
NEO
*/

ES6对象中的剪头函数：

let person = {
    name: "NEO",
    fav: () => {
        console.log(this);  // 对象的剪头函数中， this 的指向发生了改变；this 指向定义person的父级对象（上下文），此例中即 windows
        console.log(this.name)  // 空
    }
}
person.fav()

/*
Window {window: Window, self: Window, document: document, name: "", location: Location, …}

*/

ES6对象中的单体模式：

let person = {
    name: "NEO",
    fav(){  // 这种写法完全等价于下面的示例
        console.log(this);  // this 指向当前对象
        console.log(this.name);
    }

    /*
    fav: function(){
        ...
    }
    */
}
person.fav()

/*
{name: "NEO", fav: ƒ}
NEO
*/

 

类：

ES5中的类：

function Person(name, age) {
    this.name = name
    this.age = age
}

// 基于 原型(prototype)给对象声明方法
Person.prototype.showName = function(){   // 基于 prototype 给类Person声明的方法，那么 Person 类所有的子类都会有这个方法
    console.log(this.name)  // this 指向当前对象
}

var p = new Person('neo', 30);
p.showName()

/*
neo
*/

ES6中的类：

class Vue{
    constructor(name, age=30){  // 类的构造函数
        this.name = name;
        this.age = age;
    }

    // 写法类似于 单体模式
    showName(){
        console.log(this.name)
    }
}

let V = new Vue('Neo');
V.showName()    // Neo

 

ES6 链接： 

https://es6.ruanyifeng.com/

 

posted @ 2021-01-10 01:11  neozheng  阅读(102)  评论(0)  编辑  收藏  举报