找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发ECMAScript 6整理总结

2018-12-11 分类：JavaScript 阅读(751) 评论(0)
web前端开发视频传智播客
一周前端开发视频
前端开发实战视频

1、es6 arrow函数
在es6新标准中可以使用“=>”来定义函数，具体例子如：（参数1，参数2）=>函数体
例子1：vahtml 代码

varadd=(a，b)=> a + b;
add（a2, 12）；//14

主要注意的是，当没有参数的时候，也需要保留小括号。而函数体处理步骤稍微复杂的时候，也需要使用大括号{}把函数体括起来。
例子2：
html 代码

var add = () => {
    alert(‘no param’)
}
var add = (a, b) => {
    if (typeof a == ‘number’ && typeof b == ‘number’) {
        return a + b
    } else {
        return 0
    }
}

当返回对象为多个的时候，需要用小括号把返回对象括起来
例子3：
html 代码

vargetArr=arr=>{
……
return ({
    name:”zhchj”,
age:28,
sex:”nan”
});
}

此外，还可以直接作为事件处理函数
例子4：javascript 代码

var zhchj = {
    name: ‘zhchj’,
    friends: [‘Jhon’, ‘Marry’, ‘Jack’, ‘Monkey’, ‘elephant’],
    findFriends() {
        this.friends.forEach((f) => console.log(this.name + ‘ knows ‘ + f))
    },
}
zhchj.findFriends()

最后，关于arrow函数需要注意的是，在arrow函数内部，this固定，而且arrow函数不能new，也不能使用argument

2、class类
在以往版本的JavaScript中，JavaScript是没有类的概念的，要使用类的话，只能用function来模拟
例如：
javascript 代码

function Person(name, age) {
    this.name = name
    this.age = age
    this.sayName = function() {
        console.log(this.name)
    }
}

但是在新版本的JavaScript中，也就是ES6版本中，有明确的class关键字可以来定义类，方便了许多，其基本用法如下
例子：
javascript 代码

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

在定义好类以后如何继承呢，以前大多采用原型链继承，但是在新版本中，可以采用关键字extends来继承
例子：javascript 代码

class Student extends Person {
    constructor(name, age, grade) {
        this.name = name
        this.age = age
        this.grade = grade
    }
}

在ES6以前，都是用构造函数.prototype.method来添加原型链方法，但是在ES6中，直接在class类中添加即可
例子:
javascript 代码

class Student {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    sayHello() {
        console.log(‘Hello’ + this.name)
    }
}
var student1 = new Student(‘zhchj’, ’22’)
student1.sayHello()

以上例子，如果使用static来定义方法的话，就跟原型链没有关系了。
例子：
javascript 代码

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    sayHello() {
        console.log(this.name)
    }
    static say() {
        console.log(‘say hi’)
    }
}
class student extends Person {
    constructor(name, age, grade) {
        super(name, age)
        this.grade = grade
    }
}
var Person1 = new Person(‘zhchj’, ’22’)
var Student1 = new student(‘Jhon’, ’22’, ‘100’)
console.log(Person1.sayHello())
console.log(Person.say())
console.log(Student1.sayHello())
console.log(student.say())

注意：static是定义静态方法，静态方法是没法被new的，super是用来继承父对象的。

3、取值get和设值set
例子：
javascript 代码

class person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    get() {
        return this.name
    }
    set(name) {
        this.name = name
    }
}
var person1 = new person()
person1.name = ‘zhchj’
console.log(person1.name)
person1.set(‘John’)
console.log(person1.name)

3、let定义变量
在ES6中，可以通过let来定义变量，与var不同的是，let定义的变量只在块级作用域中有效。
例子1：
javascript 代码

{
    var a = 1
    let b = 3
}
console.log(a) //1
console.log(b) //error

此外，还可以通过另外一个例子来看
例子2：
javascript 代码

var a = []
for (var i = 0; i < 10; i++) {
    a[i] = function() {
        console.log(i)
    }
}
a[5]()
var b = []
for (let j = 0; j < 10; j++) {
    b[j] = function() {
        console.log(j)
    }
}
b[5]()

在例子2中，第一种采用var声明，当循环结束后i变为10，因此，最后输出结果都是10，第二种，采用let，当调用完成后，外部无效，因此最后的结果就是5
需要注意的是let不存在变量提升，必须先声明再使用，否则的话，会报错
例子3：
javascript 代码

console.log(aaa)
let aaa = 5
前端完整开发流程视频教学
前端开发项目实战视频
完整前端开发视频
赞(0)
前端开发者 » 前端开发ECMAScript 6整理总结
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论