JavaScript第十二弹——ES6(上)

原创
2019/03/13 22:44
阅读数 0

Hello大家好,最近我们也讲了不少JavaScript的知识了,今天再来点实用的吧,不管是在工作中还是面试中,ES6都是我们会遇到的一个东西,ES6呢,全称是ECMAScript2015,那么ECMAScript与JavaScript又是啥关系呢?ECMAScript是JavaScript的规格,JavaScript是ECMAScript的实现,ES6呢则是JavaScript的下一代标准。

Babel转换器


因为ES6提供了很多新特性,造成了很多浏览器不能够完美的支持所有新特性的问题,然而鉴于新特性的好用,很多公司会选择使用ES6进行开发,针对兼容问题,我们可以选择一个转码器对ES6进行转码,转码器有很多,比如Babel、Traceur等,今天我们主要介绍一下Babel转码器。

先举个🌰!

ES6: input.map(item=>item+1);

ES5: input.map(function(item){

              return item+1;

         })

是不是很神奇呢~那么要怎样配置babel呢?

1)我们首先要先安装node.js,运行npm init,然后会生成package.json文件
2)npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
3)创建并配置.babelrc文件
4)npm install -global babel-cli
5)babel-version,出现版本号,即配置成功

现在我们就可以创建一个基于ES6的文件,并通过Babel转译啦

假设我们的文件叫rabbit.js

运行:babel./src/rabbit.js即可完成转译

ES6新特性


现在既然ES6能够无所畏惧的运行了,再也不怕兼容性问题了,我们就来看看ES6到底有哪些新特性吧~

1

let vs const vs var

任何一种语言,最开始必然要介绍的就是声明变量,我们知道在传统JavaScript中,我们都是采用var来声明变量,但是在ES6中却变得不同了,我们采用let和const来声明。不同于var声明的变量,

1)let或const所声明的变量只在其所在的代码块中有效

2)let或const不存在变量提升,因此必须在声明之后使用变量

3)会形成暂时性死区,当let或const在块级作用域中声明后,所声明的变量不再受外界影响

4)let和const不允许重复声明

5)const用来声明常量

6)const命令保证变量名指向的地址不变,并不保证该地址的数据不变(就是这个对象指向的地址不能变,但是对象自己可以变,比如加个属性~~)

2

块级作用域

上面我们谈到了块级作用域,事实上ES5中是不存在块级作用域的,这也是《JavaScript高级程序设计》中重点提到的,但是这其实在很多场景中是不合理的。如:

1)内层变量覆盖外层变量

var tmp = new Date();
function f() {
  console.log(tmp); //undefined
  if (false) {
    var tmp = "hello world";
  }
}

因为变量提升,内层变量认为tmp在内层被声明了,覆盖了外层的,所以打印出了undefined


2)用来计数的循环变量泄漏为全局变量

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5


let就可以阻止这些事情的发生,因为它为JS新增了块级作用域。

1)保证了外部作用域无法读取内部作用域的变量

2)保证了全局作用域不被污染,因此不再需要立即执行函数表达式的使用

3)也防止了变量的重复声明

3

箭头函数

箭头函数也是ES6中非常重要的一个变化点。我们来看看箭头函数有哪些特性吧~

1)如果箭头函数不需要或需要多个参数就采用圆括号代表参数部分

var f = () => S

var sum = (num1, num2) => num1+num2;


2)如果箭头函数的代码块多于一行,则需要大括号括起。

var sum = (num1, num2) => {return num1+num2};


3)如果返回一个对象,必须在对象外面加上括号

const full = ({first, last}) => first+' '+last;



PS注意

1)函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象

2)不可以当作构造函数,不可以new哦

3)没有argument对象,但是有rest参数作为代替

4)不可以使用yield,因此箭头函数不能用作generator


不同于argument

  • rest参数只包括那些没有给出名称的参数,arguments包含所有参数

  • arguments 对象不是真正的数组,而rest 参数是数组实例,可以直接应用sort, map, forEach, pop等方法

  • arguments 对象拥有一些自己额外的功能

4

解构赋值

解构赋值指的是,按照一定模式从数组、对象中提取值,对变量进行赋值。

1)数组的解构赋值:

最基本的用法:var [a,b,c] = [1,2,3]

我们可以为数组设置一点模式:let [foo, [[bar], baz]] = [1,[[2],3]]

事实上,只要两边模式相同,即可解构成功,如果解构不成功,变量值就变成undefined咯


2)对象的解构赋值:

对象解构赋值类似数组解构赋值,又不同于数组的解构赋值。数组元素是按照顺序排列的,变量取值由元素次序决定,而对象的属性的值则是取决于属性名称。因此对象的解构赋值是先找到同名的属性,再给对应的变量赋值,赋值给变量而非属性名。

先来一个简单版的例子:

var {foo, bar} = {foo:'aaa', bar:'bbb'}

foo // "aaa"

bar // "bbb"

再来个嵌套版的:

var obj = {

p: [

"Hello",

{ y: "World"}

]

};


var {p:[x,{y}]} = obj

x//"Hello"

y//"World"



好啦,今天的内容就到这啦~ES6的这几个新特性有没有记住呢,这才仅仅是ES6的冰山一角,后续会为大家奉上更多ES6相关知识哟~喜欢兔妞的文章就请关注+好看吧,越点好看越好看哦~~么么哒!!!

本文分享自微信公众号 - 萌兔it(mengtu_it)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部