ES6使用规则和常见使用方法

ES6使用规则和常见使用方法

let命令

let命令与var的区别

let命令作用域只局限于当前代码块

使用let声明的变量作用域不会被提前

在相同的作用域下不能声明相同的变量

for循环体中let的父子作用域 //for循环用let来定义变量

const命令

定义常用

数组的解构赋值

js">// 传统赋值
let a = 1;
let b = 2;
let c = 3;
// 在ES6 的语法中允许这样
let [a, b, c] = [1, 2, 3];

let [x, y] = [1, 2, 3];
    console.log(x) // 1
    console.log(y) // 2
let [a, [b], d] = [1, [2, 3], 4];
    console.log(a) // 1
    console.log(b) // 2
    console.log(d) // 4

箭头函数

箭头函数格式

格式1：(形参列表)=>{函数体}

格式2：var st=(形参列表)=>{ 函数体 }

js">// 箭头函数的书写方式
let fun = () => { console.log('hello'); }
fun()        //调用箭头函数


// 箭头函数的书写方式
let fun = (a,b) => { 
    return a+b;
}
fun(2,3)        //调用箭头函数



// 普通函数的书写方式
function fun() {
    console.log('hello')
}
fun()     //调用普通方法


// 普通函数的书写方式
function fun(a,b) {
    return a+b;
}
fun(2,3)     //调用普通方法

export 、import 命令

export导出

js">// 导出单个函数
export function multiply(x, y) {
    return x * y;
};
// 导出多个函数
function v1() { }
function v2() { }
export {
    v1, v2
};

import导入

u使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

js">// 在main.js中
import {firstName, lastName, year} from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

uexport default 命令

为了给用户提供方便，不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

js">// export-default.js文件
export default function () {
    console.log('foo');
}
// import-default.js文件
import customName from './export-default';
customName();  // 'foo'