ES6新特性之解构、参数、模块和记号的示例分析

这篇文章主要介绍了ES6新特性之解构、参数、模块和记号的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

十多年的溧阳网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整溧阳建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“溧阳网站设计”,“溧阳网站推广”以来，每个客户项目都认真落实执行。

具体如下：

一、解构

解构提供了一个方便的地从对象或数组中提取数据的方法，请看下面的例子：

//ES6
let [x,y]=[1,2];//x=1,y=2
//ES5
var arr=[1,2];
var x=arr[0];
var y=arr[1];

使用这个语法，可以一次性给多个变量赋值。一个很好的附加用处是可以很简单的交换变量值：

let x=1,y=2;
[x,y]=[y,x];x=2 y=1

解构也可以用于对象，注意对象中必须存在的对应的键：

let obj={x:1,y:2};
let {x,y}=obj;//a=1,b=1

或者

let {x:a,y:b}=obj;//a=1,b=2

另一个有趣的模式是模拟多个返回值：

function doSomething(){
   return [1,2];
}
let [x.y]=doSomething();//x=1.y=2

解构可以用来为参数对象赋默认值。通过对象字面量，可以模拟命名参数：

function doSomething({y:1,z:0}){
   console.log(y,z);
}
doSomething({y:2})

二、参数

1、默认值

在ES6中，可以定义函数的参数默认值。语法如下：

function doSomething(){
   return x*y;
}
doSomething(5);//10
doSomethinf(5,undefined);//10
doSomething(5,3);//15

//ES5中给参数赋默认值
function doSomething(x,y){
y=y===undefined?2:y;
return x*y;
}

传递undefined或不传参数时都会触发参数使用默认值。

2、REST参数

前面我们已经学习了省略号操作符，剩余参数和它很类似，它同样是使用‘...'语法，允许你把末尾的参数保存在数组中：

funtion doSomething(x,...remaining){
  return x*rremaining.length;
}
dodSomething(5,0,0,0);//15

三、模块

在ES6的模块语法中，模块设计围绕export和import关键词，现在让我们看一个包含两个模块的例子：

//lib/ath.js
export function sum(x,y){
  return x+y
};
export var pi=3.14;
//app.js
import {sum,pi}form"lib/math.js";
console.log(sum(pi,pi);

正如你所见，可以存在多个export声明，每个都要明确的指出输出值得类型。本例中的import声明使用一种语法，来明确定义被导入的内容，可以使用*通配符，结合as关键词给模块提供一个本地名称，把模块当成一个整体导入：

//app.js
import*as math form"lib/math.js";
console.lgo(math.sum(math.pi,math.pi));

模块系统有一个default输出，它可以是一个函数，只需要提供一个本地名称就可以导入这个默认值：

//lib/my-fn.js
export default function(){
  console.log('echo echo);
}
//app.js
import doSomething from 'lib/my-fn,js';
doSomething();

请注意import声明是同步的，但是模块代码需在所有依赖加载完后才会运行

四、类

类的创建围绕calss和constructor关键词，以下是个简短的示例：

class Vehicle{
   constructor(name){
     this.name=name;
     this.kind=''Vehicle";
   }
  getName(){
     return this.name;
  }
};
//Create an instance
let myVehicle=new Vehicle('rocky');

注意类的定义不是一般的对象，因此，类的成员间没有逗号。创建一个类的对象时，需要使用new关键词，继承一个基类时，使用extends：

class Car extends Vehicle{
   constructor(name){
      super(name);
      this.kind='car';
   }
}
let myCar=new Car('bumpy');
myCar.getName();//'bumpy';
myCar instanceof Car;//true
myCar instanceof Vehicle;//true

从衍生类中，你可以使用从任何构造函数或方法中使用super来获取它的基类：使用super()调用父类构造函数；调用其他成员。

五、记号

记号是一个新的原生数据的类型，像Number和String一样，你可以使用记号为对象属性创建唯一标示或创建唯一的常量。创建方法如下：

const MY_CONSTANT=Symbol();
let obj={};
obj[MY_CONSTANT]=1;

注意通过记号产生的键值对不能通过Object.getOwnPorpertyNames()获得，在for...in遍历、Object.key()、JSON.stringify()中均不可见，这是与基于字符串的键相反的，你可以通过Object.getOenPropertySymbols()获取一个对象的记号数组。记号与const配合很合适，因为它们都有不可改变的特性。

转译

现在浏览器对ES6的支持还不广泛，且个浏览器也各不相同，可能你写的代码在用户的浏览器中还不能完全解析，这就是我们为什么需要把代码转换成能在当前的任何浏览器中良好运行的旧版本JavaScript（ES5），这种转换通常称为转译，我们必须要这么做，知道所有我们想兼容的浏览器都能运行ES6为止。转译的方法有很多种，包括Bable、Traceur、TypeScript等。

感谢你能够认真阅读完这篇文章，希望小编分享的“ES6新特性之解构、参数、模块和记号的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!