前端开发ECMAScript 6整理总结

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
前端完整开发流程视频教学
前端开发项目实战视频
完整前端开发视频
» 本文来自:前端开发者 » 《前端开发ECMAScript 6整理总结》
» 本文链接地址:https://www.rokub.com/6985.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!