1.let, const
这两个东东的用处与var有点类似,只是它们只是作用于一个{}块中。
其次let是定义变量,而const是定义常量,即let定义的东西可以在{}块中更改,但const不行。
demo 如下:
function getes6(){
let a = "hello!"
const b = "world!"
return a
};
let c = getes6();
let a = 'es6';
let常用的情况
for(let i = 0;i < 5;i++){
console.log(i)
}
控制台打印结果
0
1
2
3
4
2.class, extends, super,promise
上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。
Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。下面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。
super关键字,这个类似python中的super。它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
console.log(this.type + ' says ' + say)
}
}
let animal = new Animal()
animal.says('hello') //animal says hello
class Cat extends Animal {
constructor(){
super()
this.type = 'cat'
}
}
let cat = new Cat()
cat.says('hello') //cat says hello
控制台打印结果
animal says hello
cat says hello
相信凡是写过javascript的童鞋也一定都写过回调方法(callback),简单说回调方法就是将一个方法func2作为参数传入另一个方法func1中,当func1执行到某一步或者满足某种条件的时候才执行传入的参数func2。
如下的例子:
function func1(a, func2) {
if (a > 10 && typeof func2 == 'function') {
func2()
}
}
func1(11, function() {
console.log('this is a callback')
})
控制台打印结果
this is a callback
3.箭头函数
箭头函数是ES6中特有的骚操作
3.1 最简单的箭头函数
var one = () => 1;
console.log(one())
以上等于
function one(){
return 1;
}
console.log(one())
控制台打印结果
1
3.2 两个参数的情况
var two = (x, y) => {x++; y--; return x+y};
console.log(two(11,22))
以上等于
function two(x,y){
x++;
y--;
return x+y
}
console.log(two(11,22))
控制台打印结果
33
3.3 箭头函数的this
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
setTimeout( () => {
console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal()
animal.says('hi')
控制台打印结果
animal says hi
4.字符串模板
var name2 = 'twy';
console.log(`this ${name2}`) # 注意这里的是`(上漂)不是'(单引号)
控制台打印结果
this twy
4.1 字符串模板最常用的场景:
var basket = {
count: 1,
onSale: 2
}
console.log(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!`);
控制台打印结果
There are <b>1</b> items
in your basket, <em>2</em>
are on sale!
4.2 若不使用字符串模板的情况
var basket = {
count: 1,
onSale: 2
}
console.log('There are <b>'+basket.count+'</b> items in your basket, <em>'+basket.onSale+'</em> are on sale!')
控制台打印结果·
There are <b>1</b> items in your basket, <em>2</em> are on sale!
4.3 字符串模板所包含的一些常用操作
1.includes:判断是否包含然后直接返回布尔值
let str = 'hahay'
console.log(str.includes('y'))
控制台打印结果
true
2.repeat: 获取字符串重复n次
let s = 'he'
console.log(s.repeat(3))
控制台打印结果
hehehe
5.destructuring(解构)
5.1 字符串转化成对象
var cat = 'tty';
var dog = 'yyt';
var zoo = {cat,dog};
console.log(zoo);
控制台打印结果
{cat: "tty", dog: "yyt"}
5.2 对象
const people = {
name: 'lux',
age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)
控制台打印结果
lux---20
5.3 数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first)
console.log(second)
控制台打印结果
red
blue
6.default, rest
default主要用在函数里面,代表一个默认值:
6.1 不使用default的情况
function animal(type){
type = type || 'cat'
console.log(type)
}
animal()
控制台打印结果
cat
6.2 使用default的情况
function animal(type = 'cat'){
console.log(type)
}
animal()
控制台打印结果
cat
6.3 rest
rest用于获取函数多余参数,将多余参数放入数组中
function animals(...types){
console.log(types)
}
animals('cat', 'dog', 'fish')
控制台打印结果
["cat", "dog", "fish"]
7.for-of循环
7.1 for-in
var test = ['apple','orange','banana','pear'];
for(let i in test){
console.log(i)
}
控制台打印结果
0
1
2
3
7.2 for-of
var test = ['apple','orange','banana','pear'];
for(let n of test){
console.log(n)
}
控制台打印结果
apple
orange
banana
pear
7.3 for-of不能循环json
for(var [key,value] of test.entries()){
console.log(key,value);
}
控制台打印结果
0 apple
1 orange
2 banana
3 pear
8.promise对象和async关键字对比
var a = async function (){
return "Hello"
}
a()
控制台打印结果
Promise {<fulfilled>: "Hello"}
var a = function (){
return new Promise(resolve => {
resolve("hello")
})
}
a()
控制台打印结果
Promise {<fulfilled>: "hello"}
9....
在es6的作用
9.1 function中使用作为剩余参数的用法
function a(...rest){
for(let i of rest){
console.log(i)
}
}
a(2,3,4,5,6)
控制台打印结果
2
3
4
5
6
9.2 作为迭代的对象遍历
var a = [1,2,3,4,5,6]
var b = [...a]
console.log(b)
控制台打印结果
[1, 2, 3, 4, 5, 6]
var a = [1,2,3,4,5,6]
var b = [11,22]
var c = [...a,...b]
console.log(c)
控制台打印结果
[1, 2, 3, 4, 5, 6, 11, 22]
10.json中使用变量作为key
Es6中新增的解构语法允许在json中使用变量作为key,方法如下:
var a = 'hello'
var b = {[a]:'world'}
b
控制台打印结果
{hello: "world"}
11.JS中的柯里化
let a = function(x) {
return function(y) {
return x+y
}
}
let b = a(3)(4)
console.log(b)
控制台打印结果
7