ES6 部分筆記

• 遞歸實(shí)現(xiàn)深層凍結(jié)

        function myFreeze(obj){
Object.freeze(obj);
Object.keys(obj).forEach(function(key){
    if(typeof obj[key] === 'object'){
        myFreeze(obj[key]);
    }
});
        }

Object.keys(obj) 會(huì)返回當(dāng)前對(duì)象屬性所組成的一個(gè)數(shù)組。

• 使用箭頭函數(shù)作為事件的回調(diào)函數(shù)時(shí)，函數(shù)中的this將指向window
  使用箭頭函數(shù)定義對(duì)象中的方法時(shí)，函數(shù)中的this將指向window；
  不能夠使用箭頭函數(shù)作為構(gòu)造函數(shù)；
  不能定義原型下面的方法；
  arguments 是一個(gè)對(duì)應(yīng)于傳遞給函數(shù)的參數(shù)的類數(shù)組對(duì)象。但是arguments在箭頭函數(shù)中不可以使用。

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);

• 模版字符串

var roku = {name:'roku', hobby:'game'}

console.log(`你好，我叫${roku.name},我喜歡${roku.hobby}`)
//輸出：你好，我叫roku,我喜歡game

• 解構(gòu)賦值

const course = {
    name:'es6',
    price:500,
    student: {
        name: 'roku',
        age:16
    }
};

const{
    name:courseName,  //別名
    price,
    student:{
        name, age
    }
} = course;
console.log(courseName, price, name, age)
//output: es6 500 roku 16

解構(gòu)賦值使用場景：
1.函數(shù)參數(shù)

const sum = ([a, b, c]) => {
console.log(a+b+c)
};
sum([1, 2, 3])
//6

const foo = ({name, age, school='XX school'}) =>{
    console.log(name, age, school)
};

foo({
    name:'roku',
    age:"20",
});
//roku 20 XX school

2.函數(shù)返回值

const foo = () =>{
    return{
        name:'張三',
        age: 20
    }
};
const {name,age} = foo();
console.log(name, age);
//張三 20

3.變量互換

a = 1,b = 2;
[b,a] = [a,b];
console.log(a,b);
//2 1

4.JSON應(yīng)用

const json = '{"name":"es", "price":"500"}';
const{name, price} = JSON.parse(json);
console.log(name, price);
//es 500

5.Ajax請(qǐng)求應(yīng)用
請(qǐng)求JSON文件數(shù)據(jù),引入axios CDN庫
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.amd.js"></script>
axios.get方法獲取JSON數(shù)據(jù)文件。

//JSON文件內(nèi)容：
{
  "name": "es6",
  "type": "前端"
}
//js文件頁面內(nèi)容
axios.get('./data.json').then(({data:{name, type}})=>{
  console.log(name, type);
});
// es6 前端

• 瀏覽器兼容問題
  ES6=>BABEL（轉(zhuǎn)化）=>ES5=>瀏覽器