1、let變量

// （1）聲明變量
let a;
let b,c,d;
let e = 1000;
let f = 521, g = 'I LOVE YOU!', h = [];

// （2）變量不能重復(fù)聲明
let star = '成龍';
let star = '陳港生';  // Uncaught SyntaxError: Identifier 'star' has already been declared

// （3）塊級(jí)作用域  全局、函數(shù)、eval
// if else while for 
{
    let girl = '周揚(yáng)青';
}
console.log(girl); // Uncaught ReferenceError: girl is not defined

// （4）不影響作用域鏈
{
    let school = '尚硅谷';
    function fn(){
        console.log(shoole);
    }
    fn(); // 尚硅谷
}

let 實(shí)踐案例======================

<div class="container">
    <h2 class="page-header"> 點(diǎn)擊切換顏色 </h2>
    <div class="item"></item>
    <div class="item"></item>
    <div class="item"></item>
</div>
<script>
    // 獲取div元素對(duì)象
    document.getElementsByClassName('item');
   // 1、遍歷并綁定事件
   for(var i = 0; i < items.length; i ++){
        item[i].onclick = function(){
            // 修改當(dāng)前元素的背景顏色
            this.style.background = 'pink';
        }
    }
    // 2、遍歷并綁定事件
    for(let i = 0; i < items.length; i ++){
        item[i].onclick = function(){
            // 修改當(dāng)前元素的背景顏色
            items[i].style.background = 'pink';
        }
    }
</script>

2、const常量

// 聲明常量
const SCHOOL = '尚硅谷';
// 1、一定要賦初始值
const = A;
// 2、一般常量使用大寫(xiě)（潛規(guī)則）
const A = 100;
// 3、常量的值不能修改
SCHOOL = '開(kāi)課吧!';
//4、塊級(jí)作用域
{
    const PLAYER = 'UZI';
}
console.log(PLAYER);
//5、對(duì)于數(shù)組和對(duì)象的屬性修改，不算做對(duì)常量的修改，不會(huì)報(bào)錯(cuò)
const TEAM = ['UZI','MXLG','HSSZT'];
TEAM.push('HGR');

3、變量的解構(gòu)賦值

ES6允許按照一定模式從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)賦值

// 1、數(shù)組的解構(gòu)賦值
const F4 = ['小沈陽(yáng)','宋小寶','劉能','趙四'];
let [xiao,song,liu,zhao] = F4;
console.log(xiao);
console.log(song);
console.log(liu);
console.log(zhao);
//2、對(duì)象的解構(gòu)賦值
const zhao = {
    name:'趙本上',
    age:'不詳',
    xiaopin:function(){
        console.log('我可以演小品');
    }
};
let {name,age,xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();

4、模板字符串

ES6引入新的聲明字符串的方式[``] '' ""

// 1、聲明
let str = `我也是一個(gè)字符串哦!`;
console.log(str, typeof str);
// 2、內(nèi)容中可以直接出現(xiàn)換行符
let str = `<ul>
                  <li>沈騰</li>
                  <li>瑪麗</li>
                  <li>魏翔</li>
                  <li>艾倫</li>
              </ul>`;
// 3、變量拼接
let lovest = '魏翔';
let out = `${lovest}是我心目中最搞笑的演員！??！`;
console.log(out);

5、簡(jiǎn)化對(duì)象寫(xiě)法

ES6允許在大括號(hào)里面，直接寫(xiě)入變量和函數(shù)，作為對(duì)象的屬性和方法。
這樣的書(shū)寫(xiě)更加簡(jiǎn)潔。

let name = '尚硅谷';
let change = function(){
    console.log('我們可以改變你?。?！');
}
const school = {
    name,
    change,
    improve(){
        console.log('我們可以提高你的技能?。。?);
    }
}
console.log(school);

6、箭頭函數(shù)

ES6允許使用【箭頭】(=>)定義函數(shù)

// 聲明一個(gè)函數(shù)
let fn = function(){

}
let fn = (a,b) => {
    return a + b
}
// 調(diào)用函數(shù)
let result = fn(1,2);
console.log(result);

1、this是靜態(tài)的，this始終指向函數(shù)聲明時(shí)所在作用域下的this的值

function getName(){
    console.log(this.name);
}
let getName2 = () => {
    console.log(this.name);
}
// 設(shè)置window對(duì)象的name屬性
window.name = '尚硅谷';
const school = {
    name:'AIGUIGU'
}
// 直接調(diào)用
getName(); // 尚硅谷
getName2(); // 尚硅谷
// call 方法調(diào)用
getName.call(school);
getName2.call(school);

2、不能作為構(gòu)造函數(shù)實(shí)例化對(duì)象

let person = (name,age) => {
    this.name = name;
    this.age = age;
}
let me = new Person('xiao',30);
console.log(me);

3、不能使用arguments變量

let fn = () => {
    console.log(arguments);
}
fn(1,2,3);

4、箭頭函數(shù)的簡(jiǎn)寫(xiě)

1）省略小括號(hào)，當(dāng)形參有且只有一個(gè)的時(shí)候
let add = n => {
    return n + n
}
console.log(add(9));
2）省略花括號(hào)，當(dāng)代碼體只有一條語(yǔ)句的時(shí)候，此時(shí)return 必須省略，而且語(yǔ)句執(zhí)行結(jié)果就是函數(shù)的返回值
let pow = n => n * n;
console.log(9);

箭頭函數(shù)實(shí)踐===================

// 需求1  點(diǎn)擊div 2s后顏色變成【粉色】
// 獲取元素
let ad = document.getElementById('ad');
// 綁定事件
ad.addEventListener('click',function(){
    // 保存this的值
    // let _this = this;
    // 定時(shí)器
    setTimeout(() => {
        // 修改背景顏色 this
        // _this.style.background = 'pink';
        this.style.background = 'pink';
    },2000);
});
// -=======================================
// 需求2  從數(shù)組中返回偶數(shù)的元素
const arr = [1,3,5,6,10,100,34,45];
// 第一種寫(xiě)法
// const result = arr.filter(function(item){
//    if(item % 2 === 0){
//        return true;
//    }else{
//        return false;
//    }
//});
// 第二種
const result = arr.filter(item => {
    if(item % 2 === 0){
        return true;
    }else{
        return false;
    }
});
// 簡(jiǎn)化寫(xiě)法
const result = arr.filter(item => item % 2 === 0)
console.log(result);

箭頭函數(shù)適合與this無(wú)關(guān)的回調(diào)，定時(shí)器，數(shù)組的方法回調(diào)。箭頭函數(shù)不適合與this有關(guān)的回調(diào)，事件回調(diào)，對(duì)象的方法

7、函數(shù)參數(shù)默認(rèn)值

ES6允許給函數(shù)參數(shù)賦值初始值

// 1、形參初始值 具有默認(rèn)值的參數(shù)，一般位置要靠后（潛規(guī)則）
function add (a,b,c=10){
  return a + b + c
}
let result = add(1,2);
console.log(result);
// 2、與解構(gòu)賦值結(jié)合
function connect({host='127.0.0.1',username,password,port}){
    console.log(host);
    console.log(username);
    console.log(password);
    console.log(port);
}
connect({
    host: 'www.baidu.com',
    username: 'root',
    password: 'root',
    port: '3306'
});

8、rest參數(shù)

ES6引入rest參數(shù)，用于獲取函數(shù)的實(shí)參，用來(lái)代替arguments

// ES5獲取實(shí)參的方式
function date(){
    console.log(arguments);
}
date('白芷','阿嬌','思慧');

// rest參數(shù)
function date(...args){
    console.log(args); // filter,some,every,map
}
date('阿嬌','白芷','思慧');

// rest參數(shù)必須要放到參數(shù)最后
function fn(a,b,...args){
    console.log(a);
    console.log(b);
    console.log(args);
}
fn(1,2,3,4,5,6,7);

9、擴(kuò)展運(yùn)算符

【...】擴(kuò)展運(yùn)算符能將數(shù)組轉(zhuǎn)換為逗號(hào)分割的參數(shù)序列

// 聲明一個(gè)數(shù)組
const tfboys = ['易烊千璽','王源','王俊凱'];
// => '易烊千璽','王源','王俊凱'
// 聲明一個(gè)函數(shù)
function chunwan(){
    console.log(arguments);
}
chunwan(...tfboys); // chunwan('易烊千璽','王源','王俊凱');

10、擴(kuò)展運(yùn)算符應(yīng)用

// 1、數(shù)組的合并
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi,...fenghuang];
console.log(zuixuanxiaopingguo);

// 2、數(shù)組的克隆   淺拷貝
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua]; // ['E','G','M']
console.log(sanyecao); 

// 3、將偽數(shù)組轉(zhuǎn)化為真正的數(shù)組
const divs = document.querySelectorAll('div');
const disArr = [...divs];
console.log(divArr); // arguments

11、Symbol

ES6引入一種新的原始數(shù)據(jù)類(lèi)型symbol，表示對(duì)一無(wú)二的值，它是JavaScript語(yǔ)言的第七種數(shù)據(jù)類(lèi)型，是一種類(lèi)似于字符串的數(shù)據(jù)類(lèi)型。

Symbol特點(diǎn)

• Symbol的值是唯一的，用來(lái)解決命名沖突的問(wèn)題；
• Symbol值不能與其他數(shù)據(jù)進(jìn)行運(yùn)算；
• Symbol定義的對(duì)象屬性不能使用for...in循環(huán)遍歷，但是可以使用Reflect.ownKeys來(lái)獲取對(duì)象的所有鍵名；

// 創(chuàng)建Symbol
let s = Symbol();
console.log(s,typeof s);
let s2 = Symbol('尚硅谷');
let s3 = Symbol('尚硅谷');
console.log(s2 === s3); // false
// Symbol.for 創(chuàng)建
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4 === s5); // true
// 不能與其他數(shù)據(jù)進(jìn)行運(yùn)算
let result = s + 100;
let result = s > 100;
let result = s + s;
// USONB   you are so niubility!
// U undefined
// S string symbol
// O object
// N null number
// b boolean

12、Symbol創(chuàng)建對(duì)象屬性

// 向?qū)ο笾刑砑臃椒?up down
let geme = {
    name: '俄羅斯方塊',
    up: function(){

    },
    down: funtion(){

    }
};
// 聲明一個(gè)對(duì)象
let methods = {
    up: Symbol(),
    down: Symbol()
};
game[methods.up] = function(){
    console.log('我可以改變形狀！');
}
game[methods.down] = function(){
    console.log('我可以快速下降！');
}
console.log(game);

// 另一種格式
let youxi = {
    name: '狼人殺',
    [Symbol('say')]: function(){
        console.log('我可以發(fā)言！');
    },
    [Symbol('zibao')]: function(){
        console.log('我可以自爆');
    }
}
console.log(youxi);

13、Symbol內(nèi)置屬性

// Symbol.hasInstance
class Person{
    static [Symbol.hasInstance](param){
        console.log(param);
        console.log('我被用來(lái)檢測(cè)類(lèi)型了');
        return false;
    }
}
let o = {};
console.log(o instanceof Person);

// Symbol.isConcatSpreadable
const arr = [1,2,3];
const arr2 = [4,5,6];
arr2[Symbol.isConcatSpreadable] = false;
console.log(arr.concat(arr2));

// Symol.unscopables
// 該對(duì)象指定了使用with關(guān)鍵字時(shí),哪些屬性會(huì)被with環(huán)境排除；

// Symbol.match
// 一個(gè)正則表達(dá)式方法，該方法用正則表達(dá)式去匹配字符串，由String.prototype.match()方法使用。

// Symbol.replate 
// 該對(duì)象被str.replace(myObject)方法調(diào)用時(shí)，會(huì)返回該方法的返回值；

// Symbol.search 
// 當(dāng)該對(duì)象被str.search(myObject)方法調(diào)用時(shí)，會(huì)返回該方法的返回值；

// Symbol.split
// 當(dāng)該對(duì)象被str.split(myObject)方法調(diào)用時(shí)，會(huì)返回該方法的返回值；

// Symbol.iterator
// 一個(gè)方法，該方法返回對(duì)象默認(rèn)的迭代器，由for-of 語(yǔ)句使用

// Symbol.toPrimitive
// 該對(duì)象被轉(zhuǎn)為原始類(lèi)型的值，會(huì)調(diào)用這個(gè)方法，返回該對(duì)象對(duì)應(yīng)的原始類(lèi)型值；

// Symbol.toStringTag
// 一個(gè)字符串，該字符串用于創(chuàng)建對(duì)象的默認(rèn)字符串描述，由內(nèi)置方法Object。prototype.toString()使用。

// Symbol.species 
// 創(chuàng)建衍生對(duì)象時(shí)，會(huì)使用該屬性

14、迭代器

迭代器（iterator）是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制，任何數(shù)據(jù)結(jié)構(gòu)只要部署iterator接口，就可以完成遍歷操作。

 // 聲明一個(gè)
const xiyou = ['唐僧','孫悟空','豬八戒','沙悟凈'];
// 使用for...of遍歷數(shù)組
for (let v of xiyou){
    console.log(v);
}
// 唐僧、孫悟空、豬八戒、沙悟凈

let iterator = xiyou[Symbol.iterator]();
// 調(diào)用對(duì)象的next方法
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
// 結(jié)果見(jiàn)下圖：

打印結(jié)果

工作原理：

• 創(chuàng)建一個(gè)指針對(duì)象，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置
• 第一次調(diào)用對(duì)象的next方法，指針自動(dòng)指向數(shù)據(jù)結(jié)構(gòu)的第一個(gè)成員
• 接下來(lái)不斷調(diào)用next方法，指針一直往后移動(dòng)，指導(dǎo)最后一個(gè)成員
• 每調(diào)用next方法返回一個(gè)包含value和dome屬性的對(duì)象

注：需要自定義遍歷數(shù)據(jù)的時(shí)候，要想到迭代器。

15、迭代器應(yīng)用

自定義遍歷數(shù)據(jù)

// 聲明一個(gè)對(duì)象
const banji = {
    name: '終極',
    stus: [
        'xiaoming',
        'xiaoning',
        'xiaotian',
        'knight'
    ],
    [Symbol.iterator](){
        // 索引變量
        let index = 0;
        //
        let  _this = this;
        return {
             next: function(){
                if(index < _this.stus.length){
                    const result =  {value: _this.stus[index],done:false};
                    // 下標(biāo)自增
                    index ++;
                    return result;
                }else{
                    return {value:undefined,done:true}
                }
            }
        }
    }
}

// 遍歷這個(gè)對(duì)象
for( let v of banji){
     console.log(v);
}

16、生成器

// 生成器其實(shí)就是一個(gè)特殊的函數(shù)
// 異步編程，純回調(diào)函數(shù) node fs ajax mongodb
function * gen(){
    console.log('hello generator');
}
let iterator = gen();
iterator.next();
// ============================
// 函數(shù)代碼的分割符
function * gen(){
    console.log(111);
    yield '一只沒(méi)有耳朵';
    console.log('222');
    yield '一只沒(méi)有尾巴';
    console.log('333');
    yield '真奇怪';
    console.log(444);
}
// let iterator = gen();
// iterator.next();
// iterator.next();
// iterator.next();
// iterator.next();
for (let v of gen()){
     console.log(v);
}

17、生成器函數(shù)參數(shù)

function * gen(arg){
    console.log(arg);
    let one = yield 111;
    console.log(one);
    let two = yield 222;
    console.log(two);
    let three = yield 333;
    console.log(three);
}
// 執(zhí)行獲取迭代器對(duì)象
let iterator = gen('AAA');
console.log(iterator.next());
// next 方法可以傳入實(shí)參
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next('DDD'));

18、生成器函數(shù)實(shí)例一

// 異步編程 文件操作 網(wǎng)絡(luò)操作(ajax,request) 數(shù)據(jù)庫(kù)操作
// 1s 后控制臺(tái)輸入111   2s后輸出222   3s后輸出333
function one(){
    setTimeout(()=>{
        console.log(111);
        iterator.next();
    },1000)
}
function two(){
    setTimeout(()=>{
        console.log(222);
        iterator.next();
    },2000)
}
function three(){
    setTimeout(()=>{
        console.log(333);
        iterator.next();
    },3000)
}
function * gen(){
    yield one();
    yield two();
    yield three();
}
// 調(diào)用生成器函數(shù)
let iterator = gen();
iterator.next();

19、生成器函數(shù)實(shí)例二

// 模擬獲取 用戶(hù)數(shù)據(jù) 訂單數(shù)據(jù) 商品數(shù)據(jù)
function getUsers(){
    setTimeout(()=>{
        let data = '用戶(hù)數(shù)據(jù)';
        iterator.next(data);
    },1000)
}

function getOrders(){
    setTimeout(()=>{
        let data = '訂單數(shù)據(jù)';
        iterator.next(data);
    },1000)
}

function getGoods(){
    setTimeout(()=>{
        let data = '商品數(shù)據(jù)';
        iterator.next(data);
    },1000)
}

function * gen(){
    let users = yield getUsers();
    console.log(users);
    let orders = yield getOrders();
    console.log(orders);
    let goods = yield getGoods();
    console.log(goods)
}

let iterator = gen();
iterator.next();

20、Promise

Promise是ES6引入的異步編程的新解決方案，語(yǔ)法上Promise是一個(gè)構(gòu)造函數(shù)，用來(lái)封裝異步操作并可以獲取其成功或失敗的結(jié)果。

• Promise構(gòu)造函數(shù)：Promise(excutor){}
• Promise.prototype.then方法
• Promise.prototype.catch方法

// 實(shí)例化 Promise對(duì)象
const p = new Promise(function(resolve,reject){
    setTimeout(()=>{
        // 成功
        let successMsg = '數(shù)據(jù)庫(kù)中的用戶(hù)數(shù)據(jù)';
        resolve(successMsg);
        // 失敗
        let errorMsg = '數(shù)據(jù)讀取失敗';
        reject(errorMsg);
    },1000)
});
// 調(diào)用promise對(duì)象的then方法
p.then(function(value){
    console.log(value);
},function(reason){
    console.log(reason);
})

21、Promise讀取文件

// 1、引入fs模塊
const fs = require('fs');
// 2、調(diào)用方法讀取文件
fs.readFile('./resources/為學(xué).md',(err,data)=>{
    // 如果失敗，則拋出錯(cuò)誤
    if(err) throw err;
    // 如果正確，則輸出內(nèi)容
    console.log(data.roString());
});
// 3、使用promise封裝
const p = new Promise(function(){
    fs.readFile('./resources/為學(xué).md',(err,data)=>{
        // 判斷如果失敗
        if(err) reject(err);
        // 如果成功
        resolve(data);
    });
});
p.then(function(){
    console.log(value.toString());
},function(reason){
    console.log('讀取失敗?。?！');
})

22、Promise封裝Ajax請(qǐng)求

const p = new Promise((resolve,reject) => {
    // 1、創(chuàng)建對(duì)象
    const xhr = new XMLHttpRequest();
    // 2、初始化  
    xhr.open('GET','https://api.xxx.xxx/xxxx?id=111');
    // 3、方法
    xhr.send();
    // 4、綁定事件，處理響應(yīng)結(jié)果
    xhr.onreadystatechange = function(){
        // 判斷
        if(xhr.readyState === 4){
            // 判斷響應(yīng)狀態(tài)碼 200-299
            if(xhr.status >= 200 && xhr.status < 300){
                // 表示成功
                resolve(xhr.response);
            }else{
                // 如果失敗
                reject(xhr.status);
            }
        }
    }
});
// 指定回調(diào)
p.then(function(value){
    console.log(value);
},function(reason){
    console.error(reason);
});

23、Promise.prototype.then

// 創(chuàng)建promise對(duì)象
const p = new Promise((resolve,reject) => {
    setTimeout(()=>{
        // resolve('用戶(hù)數(shù)據(jù)');
        reject('出錯(cuò)了?。?！');
    },1000);
});
// 調(diào)用then方法 then方法的返回結(jié)果是promise對(duì)象，對(duì)象的狀態(tài)由回調(diào)函數(shù)的執(zhí)行結(jié)果決定
// 1、如果回調(diào)函數(shù)中返回的結(jié)果是非promise類(lèi)型的屬性，狀態(tài)為成功，返回值為對(duì)象的成功的值；
const result = p.then(value =>{
    console.log(value);
    // 1、非promise類(lèi)型的屬性
    // return '123';
    // 2、是promise對(duì)象
    // return new Promise((resolve,reject)=>{
    //    resolve('ok');
    // });
   // 3、拋出錯(cuò)誤
    throw new Error('出錯(cuò)啦！');
},reason=>{
    console.warn(reason);
});
console.log(result);

24、promise實(shí)踐-讀取多個(gè)文件

// 引入fs模塊
const fs = require('fs');
const p = new Promise((resolve,reject)=>{
    fs.readFile('./resources/為學(xué).md',(err,data)=>{
        resolve(data);
    });
});
p.then(value => {
    return new Promise((resolve,reject)=>{
        fs.readFile('./resources/插秧詩(shī).md',(err,data)=>{
            resolve([value,data]);
        })
    })
}).then(value=>{
    return new Promise((resolve,reject)=>{
        fs.readFile('./resources/觀書(shū)有感.md',(err,data)=>{
            // 加入
            value.push(data);
            resolve(value);
        })
    })
}).then(value => {
    console.log(value.join('\r\n'));
});

25、promise-catch方法

const p = new Promise((resolve,reject) => {
   setTimeout(()=>{
       // 設(shè)置p對(duì)象的狀態(tài)為失敗，并設(shè)置失敗的值
       reject('出錯(cuò)啦！');
   },2000);
});
p.catch(reason => {
   console.warn(reason);
})

26、集合set

// 聲明一個(gè)set
let s = new Set();
let s2 = new Set(['大師傅','小師傅','大師傅','小師傅']);
// 元素個(gè)數(shù)
console.log(s2.size);
// 添加新的元素
s2.add('喜事兒');
// 刪除元素
s2.delete('壞事兒');
// 檢測(cè)
console.log(s2.has('糟心事兒'));
// 清空
s2.clear();
console.log(s2);

27、Set實(shí)踐

let arr = [1,2,3,4,5,6,4,32,1,2,3];
// 數(shù)組去重
let result = [...new Set(arr)];
// 交集
let arr2 = [2,3,4,5,5,5,4,7,8,1];
// 方法一：
let result = [...new Set(arr)].filter(item => {
  let s2 = new Set(arr2);
  if(s2.has(item)){
    return true;
  }else{
    return false;
  }
});
// 方法二：
let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
// 并集
let union = [...new Set([...arr,...arr2])];
// 差集
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));

28、Map

// 聲明
let m = new Map();
// 添加元素
m.set('name','尚硅谷');
m.set('change',function(){
    console.log("我們可以改變你?。?！");
});
let key = {
  school: 'ATGUIGU'
};
m.set(key,['北京','上海','深圳']);

// size
console.log(m.size);

// 刪除
m.delete('name');

// 獲取
m.get(key);

//清空
m.clear();

// 遍歷
for(let v of m){
  console.log(v);
}

29、Class類(lèi)

// 手機(jī)  之前實(shí)現(xiàn)方式
function Phone(brand,price){
  this.brand = brand;
  this.price = price;
}
// 添加方法
Phone.prototype.call = function(){
  console.log("我可以打電話??！");
}
// 實(shí)例化對(duì)象
let Huawei = new Phone('華為',5999);
Huawei.call();
console.log(Huawei);

// class
class Shouji{
  // 構(gòu)造方法，名字不能修改
  constructor(brand,price){
    this.brand = brand;
    this.price = price;
  }
  // 方法必須使用該語(yǔ)法，不能使用ES5的對(duì)象完整形式
  call(){
    console.log('我可以打電話?。?！');
  }
}

let onePlus = new Shouji('+1',1999);
console.log(onePlus);

30、靜態(tài)成員

function Phone(){}
Phone.name = '手機(jī)';
Phone.change = function(){
  console.log('我可以改變世界');
}
Phone.prototype.size = '5.5inch';
let nokia = new Phone();
nokia.change();
console.log(nokia.size);

// class
class Phone{
  // 靜態(tài)屬性
  static name = '手機(jī)';
  static change(){
    console.log('我可以改變世界');
  }
let nokia = new Phone();
console.log(nokia.name);
console.log(Phone.name);
}

31、對(duì)象繼承

// 手機(jī)
function Phone(brand,price){
  this.brand = brand;
  this.price = price;
}
Phone.prototype.call = function(){
  console.log('我可以打電話');
}
// 智能手機(jī)
function SmartPhone(brand,price,color,size){
  Phone.call(this,brand,price);
  this.color = color;
  this.size = size;
}
// 設(shè)置子級(jí)構(gòu)造函數(shù)的原型
SmartPhone.prototype = new Phone;
SmartPhone.prototype.constructor = SmartPhone;
// 聲明子類(lèi)的方法
SmartPhone.prototype.phone = function(){
  console.log('我可以拍照');
}
SmartPhone.prototype.playGame = function(){
  console.log('我可以玩游戲');
}
const chuizi = new SmartPhone('錘子',2499,'黑色','5.5inch');
console.log(chuizi);

32、class類(lèi)繼承

class Phone(){
  // 構(gòu)造方法
  constructor(brand,price){
    this.brand = brand;
    this.price = price;
  }
  // 父類(lèi)的成員屬性
  call(){
    console.log('我可以打電話！');
  }
}
class SmartPhone extends Phone {
  // 構(gòu)造方法
  constructor(brand,price,color,size){
    super(brand,price);
    this.color = color;
    this.size = size;
  }
  phone(){
    console.log('拍照');
  }
  playGame(){
    console.log('玩游戲');
  }
}
const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
xiaomi.call();
xiaomi.phone();
xioami.playGame();

33、class的get和set

// get和set
class Phone{
  get price(){
    console.log('價(jià)格屬性被讀取了');
    return 'iloveyou';
  }
  set price(newVal){
    console.log('價(jià)格屬性被修改了');
  }
}

// 實(shí)例化對(duì)象
let s = new Phone();
s.price = 'free';

34、數(shù)值擴(kuò)展

// 0、Number.EPSILON 是JavaScript表示的最小精度
// EPSILON屬性的值接近于2.2204460492503130808472633361816E-16
function equal(a,b){
  if(Math.abs(a-b) < Number.EPSILON){
    return true;
  }else{
    return false;
  }
}
console.log(0.1+ 0.2 === 0.3);
console.log(equal(0.1 + 0.2, 0.3));
1、二進(jìn)制和八進(jìn)制
let b = 0b1010;
let o = 0o777;
let d = 100;
let x = 0xff;
console.log(x);
2、Number.isFinte 檢測(cè)一個(gè)數(shù)值是否為有限數(shù)
console.log(Number.isFinite(100));
console.log(Number.isFinite(100/0));
console.log(Number.isFinte(Infinity));
3、Number.isNaN 檢測(cè)一個(gè)數(shù)值是否為NaN
console.log(Number.isNaN(123));
4、Number.parseInt Number.parseFloat字符串轉(zhuǎn)整數(shù)
console.log(Number.parseInt('54321234love'));
console.log(Number.parseFloat('3.1415916神奇'));
5、Number.isInteger 判斷一個(gè)數(shù)是否為整數(shù)
console.log(Number.isInteger(5));
console.log(Number.isInteger(2.5));
6、Math.trunc將數(shù)字的小數(shù)點(diǎn)部分抹掉
console.log(Math.trunc(3.5));
7、Math.sign 判斷一個(gè)數(shù)到底為正數(shù)  負(fù)責(zé) 還是零
console.log(100);
console.log(0);
console.log(-100);

35、對(duì)象方法擴(kuò)展

1、Object.is 判斷兩個(gè)值是否完全相等
console.log(Object.is(120,120));
console.log(Object.is(NaN,NaN));
console.log(NaN === NaN);
2、Object.assign 對(duì)象的合并

const config1 = {
  host: 'localhost',
  port: 3306,
  name: 'root',
  pass: 'root',
  test: 'test'
}
const config2 = {
  host: 'http://atguigu.com',
  port: 33060,
  name: 'atguigu.com',
  pass: 'iloveyou',
  test2: 'test2'
}
console.log(Object.assign(config1,config2));
3、Object.setPrototypeOf 設(shè)置原型對(duì)象 Object.getPrototypeOf
const school = {
    name: '尚硅谷'
}
const cities = {
  xiaoqu: ['北京','上海','深圳']
}
Object.setPrototypeOf(school,cities);
console.log(Object.getPrototypeOf(school));
console.log(school);

36、模塊化

// 后期補(bǔ)充

37、ES7新特性

// includes  indexOf
const mingzhu = ['西游記','紅樓夢(mèng)','水滸傳','三國(guó)演義'];

// 判斷
console.log(mingzhu.includes('西游記'));
console.log(mingzhu.includes('金平煤'));

// 冪運(yùn)算
console.log(2 ** 10);
console.log(Math.pow(2,10));

38、async 函數(shù)

async function fn(){
    // 返回一個(gè)字符串
    // return '尚硅谷'
    // 返回的結(jié)果不是一個(gè)Promise類(lèi)型的對(duì)象，返回的結(jié)果就是成功 promise 對(duì)象
    // return;
    // 拋出錯(cuò)誤，返回的結(jié)果是一個(gè)失敗的Promise
    throw new Error('出錯(cuò)了！');
    // 返回的結(jié)果如果是一個(gè)Promise對(duì)象
    return new Promise((resolve,reject) => {
        // resolve('成功的數(shù)據(jù)');
        reject('失敗的錯(cuò)誤');
    });
}
const result = fn();
// 調(diào)用then方法
result.then(value => {
    console.log(value);
},reason => {
    console.warn(reason);
})

39、await 表達(dá)式

// 創(chuàng)建 Promise 對(duì)象
const p = new Promise((resolve,reject) => {
  // resolve("用戶(hù)數(shù)據(jù)");
  reject("失敗啦！");
});
// await 要放在async函數(shù)中
async function main(){
    try {
        let result = await p;
        console.log(result);
    } catch(e){
        console.log(e);
    }
};
// 調(diào)用函數(shù)
main();

40、async和await結(jié)合讀取文件

// 1、引入fs模塊
const fs = require('fs');
// 讀取 為學(xué)
function readWeixue(){
  return new Promise((resolve,reject) => {
    fs.readFile('./resources/為學(xué).md',(err,data) => {
      // 如果失敗
      if(err) reject(err);
      // 如果成功
      resolve(data);
    })
  });
}

// 聲明一個(gè)async函數(shù)
async function main(){
  // 獲取為學(xué)內(nèi)容
  let weixue = await readWeixue();
  console.log(weixue.toString());
}
main();

41、async和await封裝AJAX請(qǐng)求

// 發(fā)送AJAX請(qǐng)求，返回的結(jié)果是promise對(duì)象
function sendAJAX(url){
  return new Promise((resolve,reject) => {
    // 創(chuàng)建對(duì)象
    const x = new XMLHttpRequest();
    // 初始化
    x.open('GET',url);
    // 發(fā)送
    x.send();
    // 事件綁定
    x.onreadystatechange = function (){
      if(x.readyState === 4){
        if(x.status >= 200 && x.status < 300){
          // 成功
          resolve(x.response);
        }else{
          // 如果失敗
          reject(x.status);
        }
      }
    }
  })
};
// promise then方法測(cè)試
sendAJAX('https://api.apiopen.top/getJoke').then(value => {
  console.log(value);
},reason => {
  
});

// async和await測(cè)試
async function main(){
  // 發(fā)送AJAX請(qǐng)求
  let result = await sendAJAX('https://api.apiopen.top/getJoke');
  // 再次發(fā)送
  let tianqi = await sendAJAX('https://www.tianqiapi.com/api/');
  console.log(tianqi);
}
main();

42、ES8對(duì)象方法擴(kuò)展

// 生命對(duì)象
const school = {
  name: '尚硅谷',
  cities: ['北京','上海','深圳'],
  xueke: ['前端','Java','大數(shù)據(jù)']
}
// 獲取對(duì)象所有的鍵
console.log(Object.keys(school));
// 獲取對(duì)象所有的值
console.log(Object.values(school));
// entries
console.log(Object.entries(school));
// 創(chuàng)建Map
const m = new Map(Object.entries(school));
console.log(m.get('cities'));
//對(duì)象屬性的描述對(duì)象
console.log(Object.getOwnPropertyDescriptors(school));
const obj = Object.create(null,{
  name: {
    // 設(shè)置值
    value: '尚硅谷',
    // 屬性特性
    writable: true,
    configurable: true,
    enumerable: true
  }
})