ES6语法

发表于 | 阅读次数

ES6 语法

解构赋值

数组的解构

1
let [a,b,c] = [1,2,3]
2
console.log(a, b, c) 
3
4
let [a, [b], c] = [2, [3], 4]
5
a //2
6
b //3
7
c //4
8
9
let [a] = 1 //报错

默认值

1
let [a, b = 2] = [3]
2
a // 3
3
b // 2
4
5
let [a, b = 2] = [3, 4]
6
a //3
7
b //4

数组对应对值有没有？如果没有（数组对没有指undefined）就使用默认值，如果有就使用对应值

1
let [a=2, b=3] = [undefined, null]
2
a //2
3
b //null
4
let [a=1, b=a] = [2]
5
a //2
6
b //2

对象的解构赋值

前置知识

1
let [name, age] = ['hunger', 3]
2
let p1 = {name, age}
3
//等同于
4
let p2 = {name: name, age: age}

解构范例

1
let {name, age} = {name: 'jirengu', age: 4}
2
name //‘jirengu’
3
age //4
4
//以上代码等同于
5
let name
6
let age
7
({name: name, age: age} = {name: 'jirengu', age: 4})

默认值

1
let {x, y=5} = {x: 1}
2
x //1
3
y //5

函数解构

1
function add([x=1, y=2]){
2
  return x+y
3
}
4
add() //Error
5
add([2]) //4
6
add([3,4]) //7
7
8
function sum({x, y}={x:0, y:0}, {a=1, b=1}){
9
    return [x+a, y+b]
10
}
11
sum({x:1, y:2}, {a:2}) //[3, 3]

作用

1
let [x, y] = [1, 2];
2
[x, y] = [y, x]
3
x //2
4
y // 1
5
function ajax({url, type=‘GET’}){
6
}
7
ajax({url: ‘http://localhost:3000/getData’})

字符串

多行字符串

1
let str =`
2
Hi,
3
This is jirengu.com.
4
You can study frontend here.
5
`

字符串模板

1
let website = 'jirengucom'
2
let who = 'You'
3
let str = `Hi
4
This is ${website}.
5
${who} can study frontend here
6
`

数组

扩展

1
var a = [1, 2]
2
console.log(...a)  // 1, 2
3
var b = [...a, 3]
4
b // [1, 2, 3]
5
6
var c = b.concat([4, 5])
7
var d = [...b, 4, 5]

函数参数的扩展

1
function sort(...arr){
2
  console.log(arr.sort())
3
}
4
sort(3, 1, 5)  //[1, 3, 5]
5
function max(arr){
6
  return Math.max(...arr)
7
}
8
max([3, 4, 1])  // 4

类数组对象转数组

1
let ps = document.querySelectorAll('p');
2
Array.from(ps).forEach(p=> {
3
  console.log(p.innerText);
4
});
5
[...ps].forEach(p=>{console.log(p.innerText)});

函数

默认值

1
function sayHi(name='frank') {
2
  console.log(`hi, ${name}`)
3
}
4
sayHi()
5
sayHi('tom')
6
7
function fetch(url, { body='', method = 'GET', headers = {} } = {}) {
8
  console.log(method);
9
}
10
11
fetch('http://example.com')

以下两种写法的区别?

1
//ex1
2
function m1({x = 0, y = 0} = {}) {
3
  return [x, y];
4
}
5
6
//ex2 
7
function m2({x, y} = { x: 0, y: 0 }) {
8
  return [x, y];
9
}
10
11
// 函数没有参数的情况
12
m1() // [0, 0]
13
m2() // [0, 0]
14
15
// x 和 y 都有值的情况
16
m1({x: 3, y: 8}) // [3, 8]
17
m2({x: 3, y: 8}) // [3, 8]
18
19
// x 有值，y 无值的情况
20
m1({x: 3}) // [3, 0]
21
m2({x: 3}) // [3, undefined]
22
23
// x 和 y 都无值的情况
24
m1({}) // [0, 0];
25
m2({}) // [undefined, undefined]
26
27
m1({z: 3}) // [0, 0]
28
m2({z: 3}) // [undefined, undefined]

ex1： 调用函数需要你传递一个对象，如果你没传对象就用默认值对象{}，默认值对象里面都是 undefined， 所以属性使用初始值

ex2：参数需要是一个对象，如果没传对象，就用默认值对象{ x: 0, y: 0 }如果传了对象，就使用你传递的对象

箭头函数

1
var f = v => v+1
2
//等价于
3
var f = function(v){return v+1}
4
5
var f = () => 5;
6
// 等同于
7
var f = function () { return 5 };
8
9
var sum = (num1, num2) => num1 + num2;
10
// 等同于
11
var sum = function(num1, num2) {
12
  return num1 + num2;
13
};
14
15
var arr = [1, 2, 3]
16
var arr2 = arr.map(v=>v*v)
17
arr2 //[1, 4, 9]

箭头函数里面的 this

1
// ES6
2
function foo() {
3
  setTimeout(() => {
4
    console.log('id:', this.id);
5
  }, 100);
6
}
7
8
//  等同于如下ES5
9
function foo() {
10
  var _this = this;
11
  setTimeout(function () {
12
    console.log('id:', _this.id);
13
  }, 100);
14
}

对象

1
var name = 'jirengu'
2
var age = 3
3
var people = {name, age} //{name:'jirengu', age:3}
4
`javascript
5
let app = {
6
selector: '#app',
7
init() {
8
},
9
bind() {
10
}
11
}
12
app.init()

类和继承

构造函数

1
class Person {
2
  constructor(name, age) {
3
    this.name = name;
4
    this.age = age;
5
  }
6
7
  sayHello() {
8
    console.log( `hello, ${this.name}, i am ${this.age} years old`);
9
  }
10
}
11
12
//等价于
13
14
function Person(name, age) {
15
  this.name = name;
16
  this.age = age;
17
}
18
19
Person.prototype.sayHello = function () {
20
  console.log(  `hello, ${this.name}, i am ${this.age} years old`);
21
};
22
23
var p = new Person('hunger', 2);

静态方法

1
class EventCenter {
2
  static fire() {
3
    return 'fire';
4
  }
5
  static on(){
6
    return 'on'
7
  }
8
}
9
// 等同于
10
11
function EventCenter(){
12
}
13
EventCenter.fire = function(){}
14
EventCenter.on = function(){}

继承

1
class Person {
2
  constructor(name, age) {
3
    this.name = name;
4
    this.age = age;
5
  }
6
7
  sayHello() {
8
    console.log( `hello, ${this.name}, i am ${this.age} years old`);
9
  }
10
}
11
class Student extends Person {
12
  constructor(name, age, score) {
13
    super(name, age); 
14
    this.score = score;
15
  }
16
17
  sayScore() {
18
     console.log(  `hello, ${this.name}, i am ${this.age} years old, i get ${this.score}`);
19
  }
20
}

模块化

写法1

1
// profile.js
2
export var firstName = 'Michael';
3
export var lastName = 'Jackson';
4
export var year = 1958;
5
//useage.js
6
import {firstName, lastName, year} from './profile';
7
console.log(firstName)

写法2

1
var firstName = 'Michael';
2
var lastName = 'Jackson';
3
var year = 1958;
4
5
export {firstName, lastName, year};
6
//useage.js
7
import {firstName, lastName, year} from './profile';
8
console.log(firstName)

写法3

1
//helper.js
2
export function getName(){}
3
export function getYear(){}
4
//main.js
5
import {getName, getYear} from './helper';
6
getName()

写法4

1
//helper.js
2
function getName(){}
3
function getYear(){}
4
export {getName, getYear}
5
//main.js
6
import {getName, getYear} from './helper';
7
getName()

写法5

1
// export-default.js
2
export default function () {
3
  console.log('foo');
4
}
5
// import-default.js
6
import getName from './export-default'
7
getName()