ES6笔记
来源:互联网 发布:电子名片制作软件 编辑:程序博客网 时间:2024/06/05 01:06
这里列出在项目中常用的ES6相关特性,以便更快的理解和应用ES6。
常用特性
- 作用域控制 let、const
- 模板字符串
- 语法糖 - 箭头函数
- 解构
- 类与模块
- Promise
let & const
const
不可重新赋值的值 (常量、配置项以及引用的组件)let
使用let声明的变量只在语句块内有效
let
的使用场景相对较少的,我们只会在 loop(for,while 循环)及少量必须重定义的变量上用到他
let 的使用场景
// 函数体内的变量function f1() {let n = 5;if (true) {let n = 10;}console.log(n); // 5}// for循环的初始量for (let i = 0; i < buttons.length; i++) {// …}
const
由于不可以重新赋值的特性,所以可以做更多语法静态分析方面的优化,从而有更高的执行效率。
const 的使用场景
// 定义常量const REG_GET_INPUT = /^\d{1,3}$/;// 定义配置项const config = {isDev : false,pubDir: './admin/'}// 引入 gulpconst gulp = require('gulp');
模板字符串 Template Strings
增强版的字符串,用反引号(`)标识,支持变量注入与多行文本
//1. 注入变量与方法const start = 'hi all';const getName = () => {return 'jelly';};const conf = {fav: 'Coding'};const msg = `${start}, my name is ${getName()}, ${conf.fav} is my favourite`;// 2. 与引号混用const wantToSay = `I'm a "tbfed"`;// 3. 支持多行文本const slogan =`I have a dream today!`;// 4. 比较适合写HTMLconst resultTpl =`<section><div>...</div></section>`;
箭头函数 Arrow Function
使用箭头(=>)进行定义的函数,属于匿名函数(Lambda)一类
箭头函数没有独立执行上下文( this ),所以其内部引用 this 对象会直接访问父级。
// 完整写法const getOptions = (name, key) => {...}// 省略参数括号const getOptions = key => {...}// 省略参数和方法体括号const getOptions = key => console.log(key);// 无参数或方法体,括号不能省略const noop = () => {};// 应用示例let names = [ 'Will', 'Jack', 'Peter', 'Steve', 'John', 'Hugo', 'Mike' ]let newSet = names.map((name, index) => {return {id: index,name: name}}).filter(man => man.id % 2 == 0).map(man => [man.name]).reduce((a, b) => a.concat(b))console.log(newSet) //=> [ 'Will', 'Peter', 'John', 'Mike' ]
解构 Destructuring
用于分解方法的参数、数组、对象中的变量
const bookSet = ['UED', 'TB fed', 'Not find'];const bookCollection = () => {return {book1: 'UED', book2: 'TB fed'};};// 1. 解构也可以设置默认值const {book1, book3 = 'Not find'} = bookCollection();// 2. 解构数组时候是可以跳过其中某几项的const [book1,,book3] = bookSet; // book1 = 'UED', book3 = 'Not find'// 3. 解构可以取到指定对象的任何属性,包括它包含的方法const {length: setLength} = bookSet; // setLength = 3
Rest运算符(解构赋值)/ Spread扩展运算符(…)
// 1. rest 得到的是一个真正的数组而不是一个伪数组const getOptions = function(...args){console.log(args.join); // function};// 2. rest 可以配合箭头函数使用,达到取得所有参数的目的const getOptions = (...args) => {console.log(args); // array};// 3. spread 可以用于解构时,聚合所得的值const [opt1, ...opts] = ['one', 'two', 'three', 'four'];// 4. spread 可以用于数组定义const opts = ['one', 'two', 'three', 'four'];const config = ['other', ...opts];
类与模块 Class & Modules
class
定义一个类
//定义类class Point {//构造函数constructor(x, y) {//实例属性this.x = x;this.y = y;}//get和set用于对实例属性自定义存取行为get prop() {return 'getter';}set prop(value) {console.log('setter: '+value);}//实例方法toString() {return '(' + this.x + ', ' + this.y + ')';}//静态方法static classMethod() {return 'hello';}//静态属性static get HuaChen(){return 'jelly';}}
使用 extend
关键字实现类的继承
class ColorPoint extends Point {constructor(x, y, color) {super(x, y); // 调用父类的constructor(x, y)this.color = color;}toString() {return this.color + ' ' + super.toString(); // 调用父类的toString()}}
import
模块引入的方式
import name from "module-name"import * as name from "module-name"import { member } from "module-name"import { member as alias } from "module-name"import { member1 , member2 } from "module-name"import { member1 , member2 as alias2 , [...] } from "module-name"import defaultMember, { member [ , [...] ] } from "module-name"import defaultMember, * as alias from "module-name"import defaultMember from "module-name"import "module-name"
export
模块导出或对外提供接口的方式
export var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;// 等同于var firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};// 有defautl 与 无default// 输出export default function crc32() {// ...}// 输入import crc32 from 'crc32';// 输出export function crc32() {// ...};// 输入import {crc32} from 'crc32';// 设置别名function add(x, y) {return x * y;}export {add as default};
export default
命令其实只是输出一个叫做 default
的变量,所以它后面不能跟变量声明语句。
// 正确export var a = 1;// 正确var a = 1;export default a;// 错误export default var a = 1;
Promise
Promise 为异步编程提供统一的解决方案,比传统的回调和事件更加合理有效。
// 1. 多个异步任务同时执行用 Promise.all,顺序执行使用链式调用// Promise.allPromise.all([jsBuildPromise, cssBuildPromise]).then(() => {...});// 2. Promise 的链式调用需要每一个过程返回一个 Promise 对象才能保证顺序执行gitPromise.then(() => git.add()) // 正确,箭头函数简写.then(() => {git.commit(); // 错误,函数返回 undefined,会立即执行下一过程}).then(() => {return git.log(); // 正确});// 3. Promise 需要调用 catch 方法来捕获错误,而且过程内的错误不会阻塞后续代码执行new Promise(() => {f; // not define error !}).catch((err) => {console.log(err) // show 'f is not define'});console.log('error test'); // 此行可以被正常执行现在ES6有着广泛的应用,ES6对ES5有着大量的语法更新和改动,掌握ES6相关特性是前端的必要技能,有利于学习掌握新的知识,提升编码效率和质量。
阅读全文
0 0
- ES6笔记
- ES6笔记
- ES6笔记
- ES6笔记
- ES6笔记
- ES6笔记
- ES6笔记
- es6 笔记
- Es6笔记
- Es6笔记
- ES6笔记
- es6开发:ES6学习笔记
- ES6学习笔记
- ES6 笔记 0
- ES6学习笔记
- ES6笔记(一)
- ES6学习笔记
- ES6学习笔记
- 深入理解 Promise (中)
- angular中CheckBox二维数组传值问题
- 深入理解 Promise (下)
- UIDevice 获取设备相关信息备忘
- 解决WAP端用Dreamweaver画热点偏移现象
- ES6笔记
- VC调用Matlab生成的c
- ES6笔记
- wxpython实现简单图书管理系统
- ZJCOJ 朋友Z与方程(二分求解模板题)
- java创建对象:new和newInstance的不同
- 离屏渲染优化详解:实例示范+性能测试
- 使用MyBatis Generator自动创建代码
- 深入掌握 ECMAScript 6 异步编程(四):async函数的含义与用法