小白学 VUE 系列ES6语法知识汇总

es6

ES6（全称ECMAScript 6 )是于2015年6月正式发布的JavaScript语言的标准，也叫
ECMAScript 2015 (ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。注意:ES6不兼容E浏览器。
VUE、React、node现在都是用ES6语法来写，所以在学习前端框架之前要先学习一下ES6.

let和var的语法区别

1.作用域不一样
var来声明变量，只有函数作用域和全局作用域，没有块级作用域，也就是说可以在代码块 {} 外部使用。而let可以实现块级作用域，只能在代码块 {} 内有效，在之外不能访问。
2.let没有变量提升
ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。
3.let变量不能重复声明
之前用var定义变量，在多人开发一个项目时，比如都定义了一个变量a，但各自用途不同，后面定义的a会把前面定义的覆盖掉，而用let就能解决这个问题。
4.循环作用域
在for循环中，不仅 {} 会生成块级作用域，()也会生成块级作用域，()块级作用域是 {} 块级作用域的父级作用域，var声明的变量是全局的，包括循环体内与循环体外，let声明的变量作用域只在循环体内，循环体外的变量不受影响。

const常量的声明

const声明一个只读变量，声明之后不允许改变 。意味着，一旦声明必须初始化，否则会报错，常量的命名规范:全部大写。对于 引用类型保证 （数组，对象）的不是变量的值不变， 而是保证变量指向的内存地址所保存的数据不允许改变。

模板字面量

模板字面量是增强版的字符串，它用反引号`(按键1左边的按键)标识。
在ES6出现之前，咱们在做开发，字符串里面是不支持换行的，这样咱们在做程序的时候可读性很差。ES5字符串换行的方式:
1.使用反斜杠\
2.使用拼接字符率

 //es5换行
var str="Hello \
world!"";
console.log(str);
var str="Hello \n"+
"world!";
console.log(str);
var str="Hello"+
"world!"
console.log(str);
//es6换行
var str=`Hello
world!`
console.log(str);

模板字面量之变量占位符

//es6
var name=“张三”";
var str=`欢迎${name}同学。学习VUE`;
console.log(str);

let price=10;
let amount=3;
let str=`商品单价${price}元，数量: ${amount}，小计: ${(price*amount).toFixed(2)}`;
console.log(str);

函数默认参数

在ES5中声明函数参数是不能有默认值的，但是在ES6中是可以写默认值的。

function  getName(name="空气"){
    console.log(name);
}
getName();

扩展运算符...

其作用就是用于取出对象中的所有可遍历的属性，拷贝合并到当前对象之中。可以实现拷贝对象、合并对象、拷贝数组、合并数组。

let obj1={a:1b:2};
let obj2=obj1;
obj2.a=3;
console.log(obj1,obj2);

2 个值都一样，他们赋值只是赋值了内存地址，内存地址公用一个，解决问题就是创建多一个内存地址

let obj1={a:1,b:2};
let obj2={};
for(let key in obj1){
    obj2[key]=obj1[key];
}
obj2.a=3;
console.log(obj1,obj2);

这是ES5一种浅拷贝的解决问题. 使用es6解决。

let obj1={a:1,b:2};
let obj2={...obj1};
obj2.a=3;
console.log(obj1,obj2);

数组合并，数组拷贝

let a1=[1,2,3]
let a2=[...a1];
a1[0]=11;
console.log(a1,a2);

let a3=[1,2,3];
let a4=[4,5,6];
let arr=[...a3,...a4];
console.log(arr);

追加数据

let data=[
    {id:1,name:"hello"},
    {id:2,name:"abc"},
]

let newData=[
    {id:4,name:"edd"},
    {id:5,name:"oop"}
];

data.push(...newData);
console.log(data);

Object.assign对象的拷贝与合并

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。和扩展运算符一样可以实现对象的浅拷贝 。Object.assign() 第一个参数是目标对象，后面的参数是源对象。
常见用途:
1.为对象添加属性
2.为对象添加方法

let target={a:1};
let source1={b:2};
let source2={c:3};
Object.assign(target,source1,source2);
console.log(target);

如果目标对象和源对象有相同的属性，后面的属性会覆盖签名的属性。

目标对象不能为 undefined 和null

对象字面量语法扩展

对象字面量语法扩展包括:属性初始值的简写、对象方法的简写、计算属性名。

let name="kongqi";
let age="31";
let info={name,age};
console.log(info)

let obj={
    say(){
        console.log("say");
    }
}
obj.say();

let info={};
info["user-name"]="kongqi";
let age='age';
info[age]=31;
console.log(info);//{user-name: "kongqi", age: 31}

解构赋值

可以查阅此文章 解构赋值

模块化

模块化
在ES6之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库，如:requireus与seaJS ,requireJS是AMD规范，seaJS是CMD规范。
ES6现已支持模块化开发规范ES Module，让Javascript支持原生模块化开发。ES Module把一个文件当作一个模块，每个模块有自己的独立作用域，核心点就是模块的 导入 (import) 与导出(export ) .

模块化的好处:

• 1.避免变量污染，命名冲突
• 2.提高代码复用率
• 3.提高维护性
• 4.可以提升执行效率5.避免引入时的层层依赖

单个

<script type="module">
    import {变量名} from "引入文件JS";

</script>

全部

    import * as config from "引入文件JS";

变量名别名as

    import {变量名 as newName} from "引入文件JS";

default导出单个

let name="空气";
let age=31;

export default name;

import nameInfo from './xx.js';

箭头函数

箭头函数在VUE和React中使用的非常频繁，箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this ,arguments ,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

var fn1 = function() {}
var fn1 = () => {}

// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}

// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}

箭头函数有两种格式，一种只包含一个表达式，省略掉了 { ... } 和return。还有一种可以包含多条语句，这时候就不能省略 { ... } 和return

() => return 'hello'
(a, b) => a + b

(a) => {
  a = a + 1
  return a
}

如果返回一个对象，必须有{}

x => ({key: x}) // 正确

promise

一个Promise有以下几种状态:

• 1、pending:初始状态，既不是成功，也不是失败状态。
• 2、fulfilled:意味着操作成功完成。
• 3、rejected:意味着操作失败。

如果异步操作成功，resolve方法将 Promise的状态，从“未完成”变为“成功”（即从pending变为fufilled ) .如果异步操作失败，reject方法将Promise对象的状态，从“未完成”变为“失败”（即从pending 变为
rejected ) .
如果执行resolve方法，对应的会调用then方法，then方法传入一个函数作为参数，该函数的参数的值就是resolve方法的实参。
如果执行reject方法，对应的会调用catch方法，catch方法传入一个函数作为参数，该函数的参数的值就是reject方法的实参。

    let code=200;
    let p1=new Promise((resolve, reject) => {
        setTimeout(()=>{
            if(code==200){
                resolve('成功');
            }
            return reject('失败');
        })
    });
    p1.then(res=>{
        console.log(res);
    }).catch(res=>{
        console.log(res);
    })

async/await/promise让异步变成“同步”

如果接口是链式关联的，那么promise的then()方法里面其实也是一个小的回调，维护起来还不是很方便。
这时候ES7的async和awati出现了，async表示异步，而await表示等待。所以应该很好理解async用于声明一个是异步函数，而 await用于等待一个异步方法执行完成。

  let code=200;
    function p1(){
       return  new Promise((resolve, reject) => {
            setTimeout(()=>{
                if(code==200){
                    resolve('成功');
                }
                return reject('失败');
            })
        })
    }
    async  function getAsync() {
        let res=await  p1();
        console.log(res);
    }
    getAsync();

Class类

JavaScript语言的传统方法是通过构造函数，定义并生成新对象。function既是对象，对象既是function，没有class的概念。ES6提供了更接近传统语言的写法，比如:JAVA、PHP等后端语言，引入了Class(类)这个概念，作为对象的模板。通过class关键字，可以定义类。可以实现:单例模式、访问器属性、静态方法、extends继承

<script>
    class Person{
                //构造方法
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
        show(){
            console.log(this,name,this.age);
        }
    }
    var person=new Person("王老五" ,"60");
    person.show();
</script>

静态方法，设置属性

class Person{
        constructor(name,age){
            this.name=name;
            this.age2=age;
        }
        show(){
            console.log(this.name,this.age2);
        }
        set age2(val){
            console.log('设置属性');
            if(val>=60){
                this.ageText="老年人";
            }
            return val;
        }
        get age2(){
           console.log(this.ageText);

        }
        static say(){
            console.log("我是静态方法");
        }
    }
    var person=new Person("王老五" ,"60");
    person.age;
    Person.say();

继承

   class Person{
        constructor(name,age){
            this.name=name;
            this.age2=age;
        }
        show(){
            console.log(this.name,this.age2);
        }
    }
    var person=new Person("王老五" ,"60");
    person.show();

    class Superman extends Person{
        constructor(name,age){
            super(name,age);
        }
    }
    let sl=new Superman("超人","70");
    sl.show()