ES6
基于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 = 0
setInterval(function growUp() { //setinterval是一个定时器,每秒(1000毫秒)调用一次函数
this.age++
console.log(this.age)
}, 1000)
}
var worldWithStandardFunction = new DogWorldContext()
// 将会每秒打印NaN,因为growUp是普通函数,它有自己this关键字的指向
function DogWorldContext() {
this.age = 0
setInterval(()=> {
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]
//ES6
const 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=6
console.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/