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

简介: ES6使用规则和常见使用方法

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


let命令

let命令与var的区别

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

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

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

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


const命令

定义常用


数组的解构赋值


// 传统赋值
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=(形参列表)=>{ 函数体 }

// 箭头函数的书写方式
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导出

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


import导入

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

// 在main.js中
import {firstName, lastName, year} from './profile.js';
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}


uexport default 命令

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

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


相关文章
|
前端开发 API
ES 高级实战(四)查询 ES 数据
ES 高级实战(四)查询 ES 数据
1393 0
ES 高级实战(四)查询 ES 数据
|
4月前
|
存储 API
ES6新增语法 扩展运算符
ES6新增语法 扩展运算符
27 0
|
7月前
|
JSON 前端开发 JavaScript
ES6(2015)-ES13(2022)新增特性大总结
ES6(2015)-ES13(2022)新增特性大总结
101 0
ES6系列笔记-参数
ES6系列笔记-参数
42 1
|
7月前
|
网络架构
ES6函数新增了哪些扩展?
ES6函数新增了哪些扩展?
61 0
|
JavaScript 前端开发
ES6学习(四)—字符串的新增方法
ES6学习(四)—字符串的新增方法
|
JavaScript
ES6的基础用法
对js es6的用法进行简单介绍
|
网络架构
ES6中函数新增了哪些扩展?
ES6允许为函数的参数设置默认值
|
网络架构
es6 语法简单使用1
es6 语法简单使用
74 0
|
前端开发
es6 语法简单使用2
es6 语法简单使用
64 0

相关实验场景

更多