码迷,mamicode.com
首页 > 其他好文 > 详细

ES6

时间:2018-04-29 17:43:45      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:观察   mil   on()   orm   sig   FQ   嵌入   post   开发   

参考网上其他帖子,整理如下
 
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();
 
 
上次分享了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。
转自:
 
什么是 Sass?
Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。
到目前为止,在众多优秀的 CSS 预处理器语言中就属 Sass、LESS和 Stylus 最优秀。
CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
 
SVG
可缩放矢量图形是基于可扩展标记语言标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式
 
stylus
stylus是一款 CSS 的预处理器,使用它可以创建健壮的、动态的、富有表现力的CSS。
 
《ECMAScript 6入门》 源码
 
export命令规定的是对外的接口
一般放在脚本尾部
 
import命令用于输入其他模块提供的功能
 
用星号(*)指定一个对象,所有输出值都加载在这个对象上面。
 
Promise 是异步编程的一种解决方案
 
 

ES6

标签:观察   mil   on()   orm   sig   FQ   嵌入   post   开发   

原文地址:https://www.cnblogs.com/SharkBin/p/8971389.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!