解构赋值
数组的解构
let [a,b,c] = [1,2,3]
console.log(a, b, c)
let [a, [b], c] = [2, [3], 4]
a //2
b //3
c //4
let [a] = 1 //报错
默认值
let [a, b = 2] = [3]
a // 3
b // 2
let [a, b = 2] = [3, 4]
a //3
b //4
数组对应对值有没有？如果没有（数组对没有指undefined）就使用默认值，如果有就使用对应值
let [a=2, b=3] = [undefined, null]
a //2
b //null
let [a=1, b=a] = [2]
a //2
b //2
对象的解构赋值
前置知识
let [name, age] = ['hunger', 3]
let p1 = {name, age}
//等同于
let p2 = {name: name, age: age}
解构范例
let {name, age} = {name: 'jirengu', age: 4}
name //‘jirengu’
age //4
//以上代码等同于
let name
let age
({name: name, age: age} = {name: 'jirengu', age: 4})
默认值
let {x, y=5} = {x: 1}
x //1
y //5
函数解构
function add([x=1, y=2]){
return x+y
}
add() //Error
add([2]) //4
add([3,4]) //7
function sum({x, y}={x:0, y:0}, {a=1, b=1}){
return [x+a, y+b]
}
sum({x:1, y:2}, {a:2}) //[3, 3]
作用
let [x, y] = [1, 2];
[x, y] = [y, x]
x //2
y // 1
function ajax({url, type=‘GET’}){
}
ajax({url: ‘http://localhost:3000/getData’})
字符串
多行字符串
let str =`
Hi,
This is jirengu.com.
You can study frontend here.
`
字符串模板
let website = 'jirengucom'
let who = 'You'
let str = `Hi
This is ${website}.
${who} can study frontend here
`
数组
扩展
var a = [1, 2]
console.log(...a) // 1, 2
var b = [...a, 3]
b // [1, 2, 3]
var c = b.concat([4, 5])
var d = [...b, 4, 5]
函数参数的扩展
function sort(...arr){
console.log(arr.sort())
}
sort(3, 1, 5) //[1, 3, 5]
function max(arr){
return Math.max(...arr)
}
max([3, 4, 1]) // 4
类数组对象转数组
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(p=> {
console.log(p.innerText);
});
[...ps].forEach(p=>{console.log(p.innerText)});
函数
默认值
function sayHi(name='frank') {
console.log(`hi, ${name}`)
}
sayHi()
sayHi('tom')
function fetch(url, { body='', method = 'GET', headers = {} } = {}) {
console.log(method);
}
fetch('http://example.com')
以下两种写法的区别?
//ex1
function m1({x = 0, y = 0} = {}) {
return [x, y];
}
//ex2
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]
// x 和 y 都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]
// x 有值，y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]
// x 和 y 都无值的情况
m1({}) // [0, 0];
m2({}) // [undefined, undefined]
m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]
ex1： 调用函数需要你传递一个对象，如果你没传对象就用默认值对象{}，默认值对象里面都是 undefined， 所以属性使用初始值
ex2：参数需要是一个对象，如果没传对象，就用默认值对象{ x: 0, y: 0 }如果传了对象，就使用你传递的对象
箭头函数
var f = v => v+1
//等价于
var f = function(v){return v+1}
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
var arr = [1, 2, 3]
var arr2 = arr.map(v=>v*v)
arr2 //[1, 4, 9]
箭头函数里面的 this
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// 等同于如下ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
对象
var name = 'jirengu'
var age = 3
var people = {name, age} //{name:'jirengu', age:3}
`javascript
let app = {
selector: '#app',
init() {
},
bind() {
}
}
app.init()
类和继承
构造函数
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log( `hello, ${this.name}, i am ${this.age} years old`);
}
}
//等价于
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function () {
console.log( `hello, ${this.name}, i am ${this.age} years old`);
};
var p = new Person('hunger', 2);
静态方法
class EventCenter {
static fire() {
return 'fire';
}
static on(){
return 'on'
}
}
// 等同于
function EventCenter(){
}
EventCenter.fire = function(){}
EventCenter.on = function(){}
继承
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log( `hello, ${this.name}, i am ${this.age} years old`);
}
}
class Student extends Person {
constructor(name, age, score) {
super(name, age);
this.score = score;
}
sayScore() {
console.log( `hello, ${this.name}, i am ${this.age} years old, i get ${this.score}`);
}
}
模块化
写法1
// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
//useage.js
import {firstName, lastName, year} from './profile';
console.log(firstName)
写法2
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
//useage.js
import {firstName, lastName, year} from './profile';
console.log(firstName)
写法3
//helper.js
export function getName(){}
export function getYear(){}
//main.js
import {getName, getYear} from './helper';
getName()
写法4
//helper.js
function getName(){}
function getYear(){}
export {getName, getYear}
//main.js
import {getName, getYear} from './helper';
getName()
写法5
// export-default.js
export default function () {
console.log('foo');
}
// import-default.js
import getName from './export-default'
getName()
