React学习：ES6 - 技术栈

1. let，var, const 区别

js 复制代码

var x = 1;      // 函数作用域，可重复声明
let y = 2;      // 块级作用域，不可重复声明
const z = 3;    // 块级作用域，不可重新赋值

2. Objects

js 复制代码

const person ={
    name: 'Maximilian',
    age: 30,
    walk(){
        console.log("walk")
    }
}
// 访问对象属性的两种方式：
//1. 通过[]
console.log(person["name"])
//2. 通过 .
console.log(person.age)

3. this

如果使用对象的形式调用方法，this指向这个对象；但如果单独调用该函数，this并不指向该对象，具体而言：严格模式下：this 为undefined；非严格模式下：this 这时指向的是浏览器的全局对象，即window。

js 复制代码

const person ={
    name: 'Maximilian',
    age: 30,
    walk(){
        console.log(this)
    }
}


person.walk() //{name: 'Maximilian', age: 30, walk: ƒ}
const walk= person.walk
walk() // undefined because this is not bound to the object anymore

注意 ：在js中，由于函数也是对象，因此单独调用该孤立函数时，可以通过.bind()方法绑定this指向的对象

js 复制代码

const walk= person.walk.bind(person)
walk() //{name: 'Maximilian', age: 30, walk: ƒ}

4 . Arrow Function

js 复制代码

const person ={
    name: 'Maximilian',
    age: 30,
    walk(){
        console.log(this)
    },
    talk(){
        //由于以孤立函数调用setTimeout,因此this默认是window对象
        setTimeout(function(){
            console.log(this)
        }, 1000)

        //使用箭头函数，不重新绑定this
        setTimeout(()=>{
            console.log(this)
        },1000)
    }
}

person.talk()

5. Array map && filter

js 复制代码

const colors=["red","blue","green"]

const items =colors.map(color=>`<li>${color}</li>`)
const list=colors.filter(color=> color === "red")

6. Object Destructing 解构

js 复制代码

const address={
    street:"1234",
    city:"New York",
    state:"NY",
    zip:"10001"
}

// const street=address.street
// const city=address.city
// const state=address.state
// const zip=address.zip

const{street,city,state,zip}=address

7. Spread Operator

把一个可迭代对象（数组、字符串等）或对象"展开"成独立的元素。

js 复制代码

const address={
    street:"1234",
    city:"New York",
    state:"NY",
    zip:"10001"
}

const person ={
    name:"John",
    age:30,
    address:address
}

// concat
const information={...address,... person}
// clone
const clone ={...address}

8. Named and Default

js 复制代码

// Default -> import ... from '';
// Named -> import {...} from ''