解构、参数、模块和记号

解构、参数、模块和记号（续）

六、解构

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


1

2

3

4

5

6

7

//ES6

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

//ES5

var arr=[1,2];

var x=arr[0];

var y=arr[1];

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


1

2

3

let x=1,y=2;

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

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


1

2

3

4

5

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

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

或者

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

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


1

2

3

4

5

function doSomething(){

     return [1,2];

}

let [x.y]=doSomething();//x=1.y=2

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


1

2

3

4

function doSomething({y:1,z:0}){

      console.log(y,z);

}

doSomething({y:2})

七、参数

1、默认值

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


1

2

3

4

5

6

7

function doSomething(){

      return x*y;

}

doSomething(5);//10

doSomethinf(5,undefined);//10

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

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

2、REST参数

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


1

2

3

4

5

funtion doSomething(x,...remaining){

    return x*rremaining.length;

}

dodSomething(5,0,0,0);//15

　

八、模块

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


1

2

3

4

5

6

7

8

9

10

11

12

//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关键词给模块提供一个本地名称，把模块当成一个整体导入：


1

2

3

4

//app.js

import*as math form"lib/math.js";

console.lgo(math.sum(math.pi,math.pi));

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


1

2

3

4

5

6

7

8

9

10

//lib/my-fn.js

export default function(){

    console.log(‘echo echo);

}

//app.js

import doSomething from ‘lib/my-fn,js‘;

doSomething();

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

九、类　　

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

class Vehicle{

     constructor(name){

         this.name=name;

         this.kind=‘‘Vehicle";

     }

     

    getName(){

         return this.name;

    }

};

//Create an instance

let myVehicle=new Vehicle(‘rocky‘);

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


1

2

3

4

5

6

7

8

9

10

11

12

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一样，你可以使用记号为对象属性创建唯一标示或创建唯一的常量。创建方法如下：


1

2

3

4

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新特性-------解构、参数、模块和记号（续）

晴天碧日 2016-08-07 11:47 阅读:80 评论:0

ES6新特性-------数组、Math和扩展操作符（续）

晴天碧日 2016-07-31 14:43 阅读:31 评论:0

时间： 2024-12-27 23:25:15

解构、参数、模块和记号的相关文章

ES6解构赋值

前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 引入 在ES5中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码 let options = { repeat: true, save: false }; // 从对象中提取数据 let repeat = options.repeat, save = option

ES6新特性-------解构、参数、模块和记号（续）

六.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //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

参数和函数形参 到 解构和不完全解构

<span style="border-left:red;">函数的参数和形参</span> 声明一个有三个形参的函数 where function where(a,b,c){ ... } 而我们调用的时候执行 where(1,2,3,4,5){....} 此时参数 1.2.3会分别赋值给 a.b.c,参数4.5则不会赋值给任何形参.但是我们已让可以通过 隐式参数 arguments 去得到他们. <span style="border-left

[F2016061803] ES6的模块导入与变量解构的注意事项

在ES6中变量解构是这样的: const a = { b: 1 } const { b } = a 我们可以直接用解构赋值来获得对象的同名属性,这等效于: const b = a.b 除了变量的解构赋值,ES6的模块导入也提供了相似的语法: import { resolve } from 'path' 如果使用webpack构建项目的话,注意这里的解构与普通变量的解构是有所区别的,比如在a.js里有以下代码: export default { b: 1 } 如果按照普通变量的解构法则来导入这个包

python 输入参数解包，模块导入，接收IO输入参数

#coding=utf-8 from sys import argv script,first,second,third = argv print "the script is=",script print "the first is=",first print "the second is=",second print "the third is=",third """ 执行方法 D:\>

react开发技术1（解构赋值，reset参数

还是来用react了.前端框架都研究看看.这次网站就用它来做了.因为angular使用的ts,所以一些es6的规则也不是很清晰,都摘抄在下. es6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构. let [a,b,c]=[1,2,3];a//1 b//2 对象解构: let name ='a'; let age=18; let per={name,age}; per//obj{name : 'a' ,age : 18} 对象相反解构: let per={name:'a' ,

python 函数、参数及参数解构

函数 数学定义 y=f(x), y是x函数,x是自变量.y=f(x0,x1...xn) Python函数 由若干语句组成的语句块,函数名称,参数列表构成,它是组织代码的最小单位 完成一定的功能 函数作用 结构化编程对代码的最基本的封装,一般按照功能组织一段代码 封装的目的为了复用,减少冗余代码 代码更加简洁美观,可读易懂 函数分类 内建函数,如max(),reversed()等 库函数,如math.ceil()等 函数定义.调用 def语句定义函数 def 函数名(参数列表): 函数体(代码块)

【vue】es6 解构赋值--函数参数解构赋值

函数的参数也可以使用解构赋值. function add([x, y]){ return x + y; } add([1, 2]); // 3 上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y.对于函数内部的代码来说,它们能感受到的参数就是x和y. [[1, 2], [3, 4]].map(([a, b]) => a + b); 默认值 function move({x = 0, y = 0} = {}) { return [x, y]; } mo

ES6函数参数解构

ES6函数参数解构 常规的JavaScript若要给函数传递的参数是一个对象,需要像下面这样来实现: function sayName(person) { if(Object.prototype.toString.call(person) == '[object Object]') { console.log( `${person.firstName} ${person.lastName}`); } } sayName({firstName: 'Stephen', lastName: 'Curr