ES6

Posted 2020-11-01 YangBin

参考网上其他帖子，整理如下

 

ES6 就是ECMAScript 6是新版本javascript语言的标准。

增加了如下

 

Promises

Promises是处理异步操作的对象，使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观（类似jQuery的deferred 对象）。

function fakeAjax(url) { return new Promise(function (resolve, reject) { // setTimeouts are for effect, typically we would handle XHR if (!url) { return setTimeout(reject, 1000); } return setTimeout(resolve, 1000); }); } // no url, promise rejected fakeAjax().then(function () { console.log(\'success\'); },function () { console.log(\'fail\'); });

 

 

异步操作

async/await 配合Promise实现异步操作，注意需要引入babel-polyfill和stage-3以上，下面是个小例子

import \'babel-polyfill\'; let sleep = (time) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(`sleep ${time} ms`); }, time); }); }; let start = async () => { console.log(\'start\'); let result = await sleep(2000); console.log(result); console.log(\'end\'); }; start();

转自：https://blog.csdn.net/d780793370/article/details/53455263

 

 

es6快速入门

上次分享了es6开发环境的搭建，本次接着分享es6常用的特性。

1.变量声明let和const

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

function aa() { if(bool) { var test = \'hello man\' } else { console.log(test) } }

以上的代码实际上是：

function aa() { var test // 变量提升 if(bool) { test = \'hello man\' } else { //此处访问test 值为undefined console.log(test) } //此处访问test 值为undefined }

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。

接下来ES6主角登场：

我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？

• 在一个函数内部
• 在一个代码块内部

说白了 {}大括号内的代码块即为let 和 const的作用域。

看以下代码：

function aa() { if(bool) { let test = \'hello man\' } else { //test 在此处访问不到 console.log(test) } }

let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

再来说说const。

const name = \'lux\' name = \'joe\' //再次赋值此时会报错

说一道面试题

var funcs = [] for (var i = 0; i < 10; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(function(func) { func() })

这样的面试题是大家常见，很多同学一看就知道输出 10 十次

但是如果我们想依次输出0到9呢？两种解决方法。直接上代码。

// ES5告诉我们可以利用闭包解决这个问题 var funcs = [] for (var i = 0; i < 10; i++) { func.push((function(value) { return function() { console.log(value) } }(i))) } // es6 for (let i = 0; i < 10; i++) { func.push(function() { console.log(i) }) }

达到相同的效果，es6简洁的解决方案是不是更让你心动！！！

2.模板字符串

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

//es5 var name = \'lux\' console.log(\'hello\' + name) //es6 const name = \'lux\' console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠(\\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

// es5 var msg = "Hi \\ man! " // es6 const template = `<div> <span>hello world</span> </div>`

对于字符串es6当然也提供了很多厉害的方法。说几个常用的。

// 1.includes：判断是否包含然后直接返回布尔值 let str = \'hahay\' console.log(str.includes(\'y\')) // true // 2.repeat: 获取字符串重复n次 let s = \'he\' console.log(s.repeat(3)) // \'hehehe\' //如果你带入小数, Math.floor(num) 来处理

 

3 函数

函数默认参数

在ES5我们给函数定义参数默认值是怎么样？

function action(num) { num = num || 200 //当传入num时，num为传入的值 //当没传入参数时，num即有了默认值200 return num }

但细心观察的同学们肯定会发现，num传入为0的时候就是false， 此时num = 200 与我们的实际要的效果明显不一样

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

function action(num = 200) { console.log(num) } action() //200 action(300) //300

箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

• 不需要function关键字来创建函数
• 省略return关键字
• 继承当前上下文的 this 关键字

//例如： [1,2,3].map( x => x + 1 ) //等同于： [1,2,3].map((function(x){ return x + 1 }).bind(this))

说个小细节。

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；例如:

var people = name => \'hello\' + name //参数name就没有括号

作为参考

var people = (name, age) => { const fullName = \'h\' + name return fullName } //如果缺少()或者{}就会报错

 

Express

是目前最流行的基于Node.js的Web开发框架，可以快速地搭建一个完整功能的网站。

 

 

Fetch 是典型的异步场景

Fetch 是浏览器提供的原生 AJAX 接口。

Fetch API 提供了能够用于操作一部分 HTTP 的 JavaScript 接口，比如 requests 和 responses。它同时也提供了一个全局的 fetch() 方法——能够简单的异步的获取资源。

使用 window.fetch 函数可以代替以前的 $. ajax、$.get 和 $.post。

转自：

https://blog.csdn.net/crystal6918/article/details/53318194

 

什么是 Sass？

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

到目前为止，在众多优秀的 CSS 预处理器语言中就属 Sass、LESS和 Stylus 最优秀。

CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

 

SVG

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。

 

stylus

stylus是一款 CSS 的预处理器，使用它可以创建健壮的、动态的、富有表现力的CSS。

 

ECMAScript 6 入门

《ECMAScript 6入门》 源码

https://github.com/ruanyf/es6tutorial/

 

export命令规定的是对外的接口

一般放在脚本尾部

 

import命令用于输入其他模块提供的功能

 

用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

 

Promise 是异步编程的一种解决方案