vue之ES6简单语法

es6语法

es6语法：let和const:

{
var a=123;
let b=234;
}
console.log(a);
console.log(b);

浏览器里会只看到123;
而且还会抱一个b is not define的错误

为什么?在{ }局部作用域里面可以找到a变量值?

这是js var的一个坑,一旦定义了就是全局的变量.

var示例:

{
var a=123;
let b=234;
}
var a=234;
console.log(a);
console.log(b);

输出的是234,因为var a=123被覆盖了.

如果还是用var的话,就会有各种各样想不到的坑,不符合我们编程的逻辑

所以es6里面,用let在声明变量有以下特点:

• let声明变量块级作用域
• 不能够重复声明

而且还添加了const声明变量

**一旦声明,立即初始化,不能重复声明.**

var示例二:

1 var a = [];
2 for (var i = 0; i < 10; i++) {
3   a[i] = function () {
4     console.log(i);
5   };
6 }
7 a[6]();

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10

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

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

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算

回到顶部

模板字符串:

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

// 普通字符串
`In JavaScript '
' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义

let greeting = `\`Yo\` World!`;
输入结果：`Yo` World!

回到顶部

箭头函数:

var f = (a) = > {a}

//等同于
var f = function(a){
   return a;  
}

使用箭头函数注意点：

箭头函数有几个使用注意点。

首先看事例:

this指向的是使用它的对象，也就是person对象
var person={
    name:'张三',
    age:18,
    fav:function(){
    consolo.log(this)
    }
}

//箭头函数this的指向发生改变,指向了定义对象时的对象 Window
var person={
    name:'张三',
    age:18,
    fav:()=>{
    consolo.log(this)
    }
}
person.fav()

不可以使用arguments对象

该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

         var person3 = {
             name:'小马哥',
             age:18,
             fav: ()=>{
                 console.log(argument);
             }
         }

         person3.fav('把妹','把爷');

回到顶部

 对象的单体模式

解决this指向了定义对象时的对象的问题
var person={
    name:'张三',
    age:18,
    fav(){
    }
}
等同于
var person={
    name:'张三',
    age:18,
    fav:function(){
    consolo.log(this)
    }
}

回到顶部

ES6的面向对象

ES5:
//构造函数的方式创建一个对象
var Animal(name,age){
    this.name=name;
    this.age=age;
    
}
Animal.prototype.showName=function(){
    console.log(this.name)
}

var dog=new Animal('日天',18)

ES6:
 class Animal{
    construtor(name,age){
        this.name=name;
        this.age=age;
    }#什么都不用加直接写
    showName(){
        console.log(this.name)
    }
 }
var dog=new Animal('张三',14)
dog.showName()