es6学习

9/16/2018es6js

已经使用了一段时间 es6 了,感觉应该对其中的知识点进行总结,能够时常回顾,加深记忆。

#let&const

let的主要作用是能够存在作用域,这一点是有别于var的,举个例子

var a = [];
for (var i = 0; i < 3; i++) {
  a[i] = function() {
    return i;
  };
}

a[0](); // 3
a[1](); // 3
a[2](); // 3
1
2
3
4
5
6
7
8
9
10

而 let 却没有这样的问题

let a = [];
for (let i = 0; i < 3; i++) {
  a[i] = function() {
    return i;
  };
}

a[0](); // 0
a[1](); // 1
a[2](); // 2
1
2
3
4
5
6
7
8
9
10

const一般情况下是不可变的,但这不是绝对的,例如数组,对象(我指的对象都是狭义上的对象)等

const arr = [1, 2, 3];
arr[0] = 3;
arr[0]; // 3
1
2
3

#箭头函数

在 es6 中我最偏爱的就是箭头函数了,它的简洁是我偏爱的最大原因,举个例子

// es5
var a = function() {
  return 1;
};

// es6
const a = () => 1;
1
2
3
4
5
6
7

#解构赋值

const str = "hello";
const { length: len } = str;
len; // 5
1
2
3
const source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [, , arr] = source;
arr; // [3,4,5,6,7,8,9,10]
1
2
3

#简洁函数声明

// es5
const person = {
  name: "Taylor",
  sayHello: function() {
    return `Hello! My name is ${this.name}.`;
  }
};

// es6
const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#函数参数结构

const person = {
  name: "nicegong",
  sex: "man",
  age: 100
};

function logPerson({ name, sex, age }) {
  return `my name is ${name}, I am ${age} years old...`;
}

logPerson(person); // my name is nicegong, I am 100 years old...
1
2
3
4
5
6
7
8
9
10
11

#构造函数

// es5
var Person = function(name) {
  this.name = name;
};
var one = new Person("nicegong");

// es6
class Person {
  construct(name) {
    this.name = name;
  }
}
const one = new Person("nicegong");
1
2
3
4
5
6
7
8
9
10
11
12
13

#export&import

export是从文件中导出变量与函数,import是从文件中引用变量与函数

// add.js
const add = (a, b) => {
  return a + b;
};

export { add };
1
2
3
4
5
6
import { add } from "add.js";
add(2, 5); // 7
1
2
Last Updated:5/25/2024, 2:23:06 AM