ECMAScript6

ECMAScript6

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会)，英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。

let变量声明

特性：

1. 变量不能重复声明：

let a = 1;
let a = 2; // 报错

2. 块级作用域：

{
    let a = 1;
}
console.log(a);  // 获取不到a

3. 不存在变量提升：

console.log(a); // 报错，若a为var声明的会输出undefined
let a = 1;

const常量声明

特性：

1. 一定要赋初始值

const A; // 报错，Missing initializer in const declaration

2. 一般常量使用大写

const a; // 不推荐

3. 常量值不能修改

const A =100 ;
A = 200;       // 报错，Assignment to constant variable.

4. 块级作用域

{
    const A =100 ;
}
console.log(A); // 报错，A is not defined

5. 可以对数组元素和对象属性的值修改，因为引用地址不变

const A=[100,200,300];
A.push(400);
console.log(A); // Array(4)

解构赋值：[]、{}

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。

1. 解构数组

const A = [100,200,300];
let [a,b,c] = A ;
console.log(a); // 100
console.log(b); // 200
console.log(c); // 300

2. 解构对象

const A = {
    name : 'xiaoming',
    age : 10,
    sayHi : function () {
        console.log('sayHi')
    }
};
let {name,age,sayHi} = A ;
console.log(name);
console.log(age);
console.log(sayHi);

let {sayHi} = A ;
sayHi() ;

模板字符串： ``

ES6 引入了新的声明字符串的方式 ` `

特性：

1. 内容中可以直接出现换行符

let str = `<ul>
            <li>1</li>
            <li>2</li>
           </ul>`

2. 变量拼接 ，使用${}引入

let str1 = 'str1';
let str2 = `${str1}str2`;

简化对象写法

let name = 'xiaoming';
let age = 10;
const person = {
    name,      // 等同于 name:name
    age，      // 等同于 age:age
    sayHi(){  // 等同于 sayHi : function(){}
        console.log('sayHi');
    }
};
console.log(person);

箭头函数：()=>{}

let fn = (a,b)=>{
    return a+b;
}
console.log(fn(1,2))

特性：

1. this始终指向函数声明时所在作用域下的this的值。

Window.name = 'xiaoming';
const person = {
    name : 'xiaohong'
}
let fn1 = function(){
    console.log(this.name);
}
let fn2 = ()=>{
    console.log(this.name);
}

fn1();            // xiaoming
fn2();            // xiaoming
fn1.call(person); // xiaohong
fn2.call(person); // xiaoming

2. 不能作为构造函数实例化对象

let Person = (name, age) => {
    this.name = name,
        this.age = age
}
let me = new Person(); // Person is not a constructor

3. 不能使用 arguments 变量

let fn = () => {
    console.log(arguments); // arguments is not defined
};
fn(1, 2, 3);

4. 箭头函数的简写

   1）省略小括号，当新参有且只有一个的时候

   let fn = a => {
       console.log(a);
   };
   fn(1); // 1
   

   2)省略大括号，当方法体只有一条语句的时候，return也要省略，执行结果就是返回值

   let fn = a => a+1;
   fn(1); // 2
   

箭头函数适合与this无关的回调，如：定时器，数组的方法回调。

不适合与this有关的回调，如：事件回调，对象的方法。

函数形参赋初始值

let add = function (a,b,c=10) {
    return a+b+c;
}
console.log( add(1,2) );  // 13

赋初始值形参的位置一般要靠后。

可以和解构赋值结合：

let add = function ({a = 10, b = 20, c = 30}) {
    return a + b + c;
}
let result = add({
    a: 1,
    c: 3
});
console.log(result); //24

rest参数：...args

ES6引入rest参数用来获取函数的实参，用来代替arguments

let add = function (...args) {
    console.log(args);  // 数组 [1, 2, 3]
}
add(1,2,3);

rest参数一定要放在所有参数的后面：

let add = function (a,b,...args) {
    console.log(args); // [3, 4, 5, 6]
}
add(1,2,3,4,5,6); 

扩展运算符: ...

...扩展运算符能将数组转化为逗号分隔的参数序列。

const a = [1,2,3];
let b = function () {
    console.log(arguments)
};
b(a);    // Arguments(1)
b(...a); // Arguments(3) 相当于 b(1,2,3)

模块暴露：export

1. 分别暴露

export let name = "张三";
export let age = 18;

2. 统一暴露

let name = "张三";
let age = 18;
export {name, age};

3. 默认暴露

expore default {
	name: 'zhangsan',
    age: 18
}

模块导入：import

1. 通用导入

import * as test from "./test.js"

2. 结构赋值导入

import {name,age} from "./test.js"
import {name as n,age} from "./test.js"
import {default as test2} from "./test2.js" // 默认暴露

3. 简便形式，只针对默认暴露

import test2 from "./test2.js"

async和await结合axios

async function getduanzi(){
    try {
        let result = await this.axios.get('../duanzi.json');
        console.log(result.data[0].msg);
        console.log(result.data[0].time);
    } catch (e) {
        console.log(e);
    }
}