ES6

本内容修改自：https://segmentfault.com/a/1190000015288439

基于nodejs的js独立运行环境

http://www.runoob.com/nodejs/nodejs-install-setup.html

课间题

1 请创建一个js文件，并写入如下代码运行输出。回家记得在自己电脑上安装nodejs并运行下面的代码

console.log("hello world!") //屏幕输出

ES6

如果把JavaScript近似等同于ECMAScript(ES)，那么ES6相当于js的新版本，增加了在对原有语法完全兼容的情况下加入了一些新功能。由于接下来我们要学习react，而这个js的库大量使用了ES6的相关语法，因此我们需要先学习ES6
ES6增加了超过75个新特性，通常使用了不到20%的ES6新特性。

课间题

2 请自行百度“ECMAscript”，给出它的定义，并说明它与javascript的关系

Let和const

在旧版的JavaScript (ES5)中，使用关键字var来声明变量；在ES6中必须通过使用let或者const关键字，你必须先声明变量，才能使用它
从下面的结果可以看出，const和let的不同在于，用const声明变量，该变量值是不能更改的，而let可以更改

<script>
// ES6
let x = 10
const y = 20
x = 25 // Ok
y = 30 // TypeError: Assignment to constant variable.
</script>

不再使用分号

ES6以及所有相关的工具都很好地支持了自动分号插入。所以，ES6的代码中可以几乎去掉所有的分号, 使代码看起来更加简洁
ES6相比ES5其实是多了一些附加的，而这些本质上都可以用ES5实现，因此这两个语法看起来能混用的

<script>
//ES5
var theNumber = 10;
document.write(theNumber);//注意这两段代码同时放入网页是可以的。//ES6 - 可以去掉分号
let theNumber1 = 10
document.write(theNumber1)
</script>

箭头函数

在ES5语法中，如果声明一个函数，需要这样写：

// ES5
function c1 (a, b) {return a + b
}
var sum = c1(2,4)

// ES5
var sum = function(a, b) {return a + b
}

在ES6中，你可以通过箭头函数快速声明函数：

// ES6
const sum = (a, b) => {return a + b}

并且，如果你只需要简单的一行函数，甚至可以去掉return关键字

// ES6
const sum = (a, b) => a + b // 一行箭头函数会自动返回结果

还有非常重要的一点，就是箭头函数的this是绑定了父级作用域的上下文：

function DogWorldContext() {this.age = 0setInterval(function growUp() {  //setinterval是一个定时器，每秒（1000毫秒）调用一次函数this.age++console.log(this.age)}, 1000)
}
var worldWithStandardFunction = new DogWorldContext()
// 将会每秒打印NaN,因为growUp是普通函数，它有自己this关键字的指向

function DogWorldContext() {this.age = 0setInterval(()=> {this.age++console.log(this.age)}, 1000)
}
var worldWithArrowFunction = new DogWorldContext()
// 将会每隔1s打印出1,2,3...

箭头函数没有自己的this绑定。该this上下文就是父级作用域的上下文，本例子中，就是DogWorldContext。

解构

从数组和函数中提取值，并存储为变量

// ES5; this.props.user = {name: "Daniel", age : 32}
var name = this.props.user.name;
var age = this.props.user.age;
alert(name + " " + age);

// ES6; this.props.user = {name: "Daniel", age : 32}
const {name} = this.props.user
const {age} = this.props.user
alert(name + " " + age)

对象字面量

// ES5
str = "HELLO"
number = 20
obj = {str: str,number: number
}

// ES6
str = "HELLO"
number = 20
obj = { str, number} //  obj = {str: "HELLO", number: 20}

Filter函数

const numbers = [5,1, 20, 90, 8, 22, 33, 9]
//ES6const notDigits = numbers.filter( function(value) {return value > 9})
console.log(notDigits) // 打印出 [20,90,22,33]// 或者使用箭头函数：
const notDigits1 = numbers.filter( (value) =>  {return value > 9})
// 或者使用箭头函数默认返回的形式去掉return关键字：
const notDigits2 = numbers.filter( (value) => value > 9 )

map


const numbers = [5,1, 20, 90, 8, 22, 33, 9]
numbers.map( (n) => console.log(n))
// 还可以加第二个参数, index
numbers.map( (n, index) => console.log(n + ' is the ' + index + ' value from the array ') )
// 或者我们想创建新的数组
const double= numbers.map( (n) => n*2 )

ES6 类（class）

JS语言并不自带类，需要通过构造函数来实现，由于比较麻烦这里就直接略过了。我们直接学习在ES6中类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。
构造函数示例

转自 https://www.cnblogs.com/lianjq/p/6952019.html

菜鸟：http://www.runoob.com/w3cnote/es6-class.html

Demo中的constructor方法是构造方法，this关键字则代表实例对象。也就是说，ES5的构造函数Demo，对应ES6的Demo这个类的构造方法。
Demo这个类除了构造方法，还定义了一个print方法。注意，定义"类"的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

class Demo {constructor(a, b) {this.a = a;this.b = b;return this;}print() {console.log(this.a + ' ' + this.b);}
}；
const demo = new Demo('hello', 'world').print();
console.log(typeof demo);

super

super([arguments]); // 访问父对象上的构造函数

super.functionOnParent([arguments]); // 访问对象上的方法

class Person{constructor(name,age){this.name = name;this.age = age;this.c=116}getName(){console.log("person:"+this.name)}
}class Student extends Person{constructor(stu_class,name,age){//需注意这个地方 如果一个子类继承了父类,那么必须在这个地方调用super 才能再constructor 使用this 否则会报 this is not defined//但是在类其他方法定义里面还是会指向实例本身的super(name,age);}getClass(){console.log("班级:"+this.name)console.log("班级:"+this.stu_class)//由于在构造函数中没有定义此量，因此为undefine}getc(){console.log("班级:"+this.c)super.c=6console.log("班级:"+this.c)console.log("班级:"+super.c)}
}
let p=new Person("luoqiang",26)
let s=new Student("aa","bb",30)p.getName()
s.getClass()
s.getName()
s.getc()

课间题

开一家餐厅

1,创建一家餐厅类，餐厅有如下属性：

餐厅类

属性：金钱，座位数量、职员列表

方法：招聘职员（往职员列表中添加一项），解雇职员（列表中删除一项）

并实例化此类，假设餐厅金钱有100000，座位有30个，职员为空

2，完成职员类

属性：ID，姓名，工资
方法：完成一次工作（直接屏幕输出一个“word done”即可）

3，请实例化一个员工，并让餐厅招聘此位员工，并输出餐厅此时的员工列表

4，请开除上面员工，并输出员工列表

5，请完成服务类与厨师类

服务员类，继承自职员
完成一次工作：如果参数是个数组，则记录客人点菜，如果参数不是数组则是上菜行为（输出dishes done）

厨师类，继承自职员
完成一次工作：烹饪出菜品（输出“cook done”）

实例化一位服务员与一位厨师，并招聘入餐厅，并输出餐厅员工列表

6，完成餐厅其他类：

厨师类，继承自职员
完成一次工作：烹饪出菜品

顾客类
方法：点菜，吃

菜品类
属性：名字、烹饪成本、价格

7，我们假设只有一个厨师，一个服务员，一个座位。而且餐厅永远只有一个厨师，一个服务员和一个座位。

整个餐厅的运作流程是这样的，顾客入座，服务员招待顾客点菜，点完菜后告诉厨师，厨师做好菜后服务员上菜，顾客用餐，然后换下一个顾客

你需要设计一个菜单，然后设计一个顾客随机点菜的方法

成品案例：https://chjxx.github.io/2018-baiduIFE/basic/50-53/build/

es6简易教程（for react）相关推荐

react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
微信小程序开发1.简易教程
微信小程序简易教程一.基础: 第一章起步开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序. 跟随这个教程,开始你的小程序之旅吧! 申请账号点击 https:/ ...
qmake 简易教程
qmake 简易教程 qmake是Qt开发中默认的构建工具. posted on 2018-05-27 00:09 JichengTang 阅读(...) 评论(...) 编辑收藏转载于:http ...
eslint不报错 vue_【简易教程】基于Vue-cli使用eslint指南
插件安装首先在vscode插件中搜索eslint和prettier. 啥也不管,这俩必须得装. 插件简介 vscode插件库里的eslint是用来在你写代码的时候就直接给你报错.(vue-cli中的 ...
Ocelot简易教程（一）之Ocelot是什么
Ocelot简易教程(一)之Ocelot是什么原文:Ocelot简易教程(一)之Ocelot是什么作者:依乐祝原文地址:https://www.cnblogs.com/yilezhu/p/955 ...
安装python程序后要进行什么设置-安装好Pycharm后如何配置Python解释器简易教程...
这两天有许多Python小白加入学习群,并且问了许多关于Pycharm基本使用的问题,今天小编就以配置Python解释器的问题给大家简单絮叨一下. 1.一般来说,当我们启动Pycharm,如果Pych ...
ST单片机使用ST Visual Programmer软件烧录程序简易教程
文章原始地址: http://feotech.com/?p=100 ST单片机使用ST Visual Programmer软件烧录程序简易教程 ST Visual Programmer 是ST公司为自 ...
mysql游标进阶_mysql进阶(三)游标简易教程
mysql游标简易教程从mysql V5.5开始,进行了一次大的改变,就是将InnoDB作为默认的存储引擎.InnoDB支持事务,而且拥有相关的RDBMS特性:ACID事务支持,数据完整性(支持外键 ...
Android开发简易教程
Android开发简易教程 Android 开发因为涉及到代码编辑.UI 布局.打包等工序,有一款好用的IDE非常重要.Google 最早提供了基于 Eclipse 的 ADT 作为开发工具,后来在2 ...

es6简易教程（for react）

ES6