文章目录
前言
本文会简要介绍 babel 的概念、ES6 声明变量、ES6 数组和 ES6 函数。`
一、babel 简介
Babel 是一个转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行,保证了我们可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。
Babel 默认使用一组 ES2015 语法转换器,允许你使用新的语法,无需等待浏览器支持。Babel 内置支持 JSX,与 babel-sublime 包一起结合,将语法高亮功能带到一个新的高度。Babel 支持用户插件,允许你插入强大的 Babel 转换层。
二、ES6 声明变量
let
let
声明的变量只在
let
命令所在的代码块内有效。
let
声明不存在变量提升,在声明变量之前,变量不存在会报错。
示例:新建一个名为 index1.js 的文件,在其中写入以下代码。
for(let i =0; i <10; i++){setTimeout(function(){
console.log(i);});}
在终端使用以下命令运行:
node index1.js
可以看到,以下结果:
const
const
声明一个只读的常量,声明时必须进行初始化,常量的值不能改变。
示例:新建一个名为 index2.js 的文件,在其中写入以下代码。
constPI="3.1415926";
console.log(PI);
在终端使用以下命令运行:
node index2.js
可以看到,以下结果:
import
在 ES6 之前,使用 require 来导入需要使用的外部的文件,ES6 之后,引入外部的文件或者模块,使用 import,它与 export 配合使用。
案例:
步骤一:新建一个名为 demo1.js 的文件,在其中输入以下代码:
letshow=function(){
console.log("hello world...");};export{ show };
步骤二:新建一个名为 demo2.js 的文件,在其中输入以下代码:
import{ show }from"./demo1.js";let app =newshow();
console.log(app);
步骤三:全局安装 babel-cli,在终端输入以下命令:
npminstall babel-cli -g
步骤四:安装 babel-preset-env,在终端输入以下命令:
npminstall babel-preset-env -D
步骤五:在终端输入以下命令运行 demo2.js 文件:
babel-node --presets env demo2.js
我们会看到如下图所示的效果:
三、ES6 数组
ES6 apply 方法
apply() 应用某一个对象的一个方法,用另一个对象替换当前对象。
apply([thisObj, argArray]);
示例:
<html><head></head><body><script>// 使用 apply 实现继承functionAnimal(name){this.name = name;this.showName=function(){alert(this.name);};}functionCat(name){Animal.apply(this,[name]);}var cat =newCat("miaomiao");
cat.showName();</script></body></html>
四、ES6 扩展运算符
扩展运算符( spread )是三个点(…),主要用于函数调用,它能够将一个数组转为用逗号分隔的参数序列,也可以用于数组的合并,与解构赋值配合使用等等。
示例:
<html><head></head><body><script>const color =["red","yellow"];const colors =[...color,"green","pink"];
console.log(colors);
document.write(colors);</script></body></html>
效果如下:
五、ES6 函数
函数参数默认值与解构赋值结合
ES6 新增了解构,将一个数据结构分解为更小部分的过程。使用 ES5 提取对象中的信息形式如下:
<html><head></head><body><script>var person ={name:"zhangsan",age:23};var name = person.name;var age = person.age;
document.write(name +"---"+ age);</script></body></html>
使用解构可以从对象里取出数据存为变量。
<html><head></head><body><script>var person ={name:"zhangsan",age:23};var{ name, age }= person;
document.write(name +"---"+ age);</script></body></html>
效果如下:
六、rest 参数
ES6 新增了 Rest 参数用来接收函数的多余参数,组成一个数组,放在形参的最后。
示例:
<html><head></head><body><script>functionnums(a, b,...rest){//console.log(a);//console.log(b);//console.log(rest);
document.write(a +"</br>");
document.write(b +"</br>");
document.write(rest);}nums(1,2,3,4,5);//nums(19);</script></body></html>
当 nums(1,2,3,4,5) 时,效果如下:
当 nums(19) 时,效果如下:
七、箭头函数
使用箭头函数不需要 function 关键字来创建函数,省略 return 关键字 ,继承当前上下文的 this 关键字。
看下面代码(ES6):
(response,message)=>{.......}
相当于 ES5 代码:
function(response,message){......}
在 ES5 中我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的。例如:
functionpeople(name, age){return{name: name,age: age,};}
以上代码可以简写为:
functionpeople(name, age){return{
name,
age,};}
总结
本文介绍了 babel 的概念;ES6 声明变量里面的 let、const 方法;ES6 数组的 apply 方法和扩展运算符;以及 ES6 函数参数默认值与解构赋值结合、rest 和 参数箭头函数。
下文讲解ES6 对象与类的定义。
版权归原作者 小丫么小牛马 所有, 如有侵权,请联系我们删除。