es6（let關(guān)鍵字，const關(guān)鍵字帖蔓，變量的解構(gòu)賦值矮瘟，模板字符串，對(duì)象簡寫塑娇，箭頭函數(shù)澈侠，三點(diǎn)運(yùn)算符，形參默認(rèn)值埋酬，Promise對(duì)象哨啃，獲取新聞內(nèi)容）

let關(guān)鍵字

<!DOCTYPE html>


<html lang="en">


<head>


? <meta charset="UTF-8">


? <title>01_let關(guān)鍵字</title>


</head>


<body>


<button>測試1</button>


<br>


<button>測試2</button>


<br>


<button>測試3</button>


<br>


<!--


***let


1. 作用:


? * 與var類似, 用于聲明一個(gè)變量


2. 特點(diǎn):


? * 在塊作用域內(nèi)有效


? * 不能重復(fù)聲明


? * 不會(huì)預(yù)處理, 不存在變量提升


3. 應(yīng)用:


? * 循環(huán)遍歷加監(jiān)聽


? * 使用let取代var是趨勢


-->


<script type="text/javascript">


//面試題


//? console.log(username);//沒有預(yù)解析 會(huì)報(bào)錯(cuò)


let username = "kobe";//不能重復(fù)聲明


// let username = "wade";//不能重復(fù)聲明


? console.log(username);//沒有預(yù)解析 會(huì)報(bào)錯(cuò)


let btns = document.getElementsByName("button");


for(let i=0; i<btns.length; i++){


? var btn = btns[i];


? //var 無法獲取正確的索引


? btn.onclick = function () {


? ? alert(i);


? }


}


// (function (i) {


//? btn.onclick = function () {


//? ? alert(i)


//? }


// })(i)


</script>


</body>


</html>


const關(guān)鍵字

<!DOCTYPE html>


<html lang="en">


<head>


? <meta charset="UTF-8">


? <title>02_const關(guān)鍵字</title>


</head>


<body>


<!--


1. 作用:


? * 定義一個(gè)常量


2. 特點(diǎn):


? * 不能修改


? * 其它特點(diǎn)同let


3. 應(yīng)用:


? * 保存不用改變的數(shù)據(jù)


-->


<!--var是聲明變量 const是聲明常量-->


<!-- var 可以修改 const 不能修改-->


<script type="text/javascript">


var KEY = 'NBA';//var可修改


KEY = 'CBA'


const KEY = "NBA";//CBA


console.log(KEY);//CBA


const KEY = 'NBA';//const不可修改


//KEY ='CBA'; 當(dāng) var換成const時(shí)，不能寫奇瘦，會(huì)報(bào)錯(cuò)


console.log(KEY);


</script>


</body>


</html>


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

<!DOCTYPE html>


<html lang="en">


<head>


? <meta charset="UTF-8">


? <title>03_變量的解構(gòu)賦值</title>


</head>


<body>


<!--


1. 理解:


? * 從對(duì)象或數(shù)組中提取數(shù)據(jù), 并賦值給變量(多個(gè))


2. 對(duì)象的解構(gòu)賦值


? let {n, a} = {n:'tom', a:12}


3. 數(shù)組的解構(gòu)賦值


? let [a,b] = [1, 'hello'];


4. 用途


? * 給多個(gè)形參賦值


-->


<script type="text/javascript">


let obj = {username:"kobe",age:"40"};


// let username = obj.username;


// let age = obj.age;


// let xxx = obj.xxx;//undefined


//username


? let{age} = obj;


console.log(age);


let arr? = [1,3,5,"abc",true];


// let[a,b,c,d,e] = arr;


// console.log(a,b,c,d,e);//1 3


let[,,a,b] = arr;


console.log(a,b);//5 "abc"


// function foo(obj) {


//? console.log(obj.username, obj.age);


// }


function foo({username,age}) {//{username.age}=obj


? console.log(username,age);


}


foo(obj);


</script>


</body>


</html>


模板字符串

<!DOCTYPE html>


<html lang="en">


<head>


? <meta charset="UTF-8">


? <title>04_模板字符串</title>


</head>


<body>


<!--


1. 模板字符串 : 簡化字符串的拼接


? * 模板字符串必須用 `` 包含


? * 變化的部分使用${xxx}定義


-->


<script type="text/javascript">


let obj = {username :"kobe",age:"40"};


// let str = "我的名字是："+ obj.username + "我的年齡是"+ obj.age;


str = '我的名字是: ${obj.username},我的年齡: ${obj.age}';


// console.log(str)//我的名字是：kobe我的年齡是40


? console.log(str)


</script>


</body>


</html>


對(duì)象簡寫

<!DOCTYPE html>


<html lang="en">


<head>


? <meta charset="UTF-8">


? <title>05_簡化的對(duì)象寫法</title>


</head>


<body>


<!--


簡化的對(duì)象寫法


* 省略同名的屬性值


* 省略方法的function


* 例如:


? let x = 1;


? let y = 2;


? let point = {


? ? x,


? ? y,


? ? setX (x) {this.x = x}


? };


-->


<script type="text/javascript">


let username = "kobe";


let age = 40;


let obj = {


? username,


? age,


? getName(){


? ? return this,username;


}


}


console.log(obj);


console.log(obj.getName());


</script>


</body>


</html>


箭頭函數(shù)

<!DOCTYPE html>


<html lang="en">


<head>


? <meta charset="UTF-8">


? <title>06_箭頭函數(shù)</title>


</head>


<body>


? ? <button id="btn1">測試箭頭函數(shù)this_1</button>


? ? <button id="btn2">測試箭頭函數(shù)this_2</button>


<!--


* 作用: 定義匿名函數(shù)


* 基本語法:


? * 沒有參數(shù): () => console.log('xxxx')


? * 一個(gè)參數(shù): i => i+2


? * 大于一個(gè)參數(shù): (i,j) => i+j


? * 函數(shù)體不用大括號(hào): 默認(rèn)返回結(jié)果


? * 函數(shù)體如果有多個(gè)語句, 需要用{}包圍棘催，若有需要返回的內(nèi)容，需要手動(dòng)返回


* 使用場景: 多用來定義回調(diào)函數(shù)


* 箭頭函數(shù)的特點(diǎn)：


? ? 1耳标、簡潔


? ? 2醇坝、箭頭函數(shù)沒有自己的this，箭頭函數(shù)的this不是調(diào)用的時(shí)候決定的，而是在定義的時(shí)候所處的對(duì)象就是它的this


? ? 3呼猪、擴(kuò)展理解： 箭頭函數(shù)的this看外層的是否有函數(shù)画畅，


? ? ? ? 如果有，外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this宋距，


? ? ? ? 如果沒有轴踱，則this是window。


-->


<script type="text/javascript">


// let fun = function () {


//? ? console.log('我是函數(shù)');


// }


// let fun = () => console.log("我是箭頭函數(shù)");


fun()


let fun1 = () => console.log("我是箭頭函數(shù)");//沒有參數(shù)要用括號(hào)占位


fun1();


let fun2 = a => console.log(a);//只有一個(gè)形參括號(hào)可以省略


fun2("aaa");


let fun3 = (x,y) => console.log(x,y);//多個(gè)形參括號(hào)不可以省略


fun3("23,45");


let fun4 = (x,y) => x + y;


console.log(fun4(34,26));//60


let fun5 = (x,y) =>{


? ? console.log(x,y);


? ? return x + y;


};


? ? console.log(fun5(35,49));//84


let btn1 = document.getElementById("btn1");


let btn2 = document.getElementById("btn2");


btn1.onclick = function () {


? ? alert(this);//[object HTMLButtonElement]


? ? console.log(this);


};


btn2.onclick = function () {


? ? alert(this);//[object windows]


? ? console.log(this);


};


// let obj = {


//? ? name:"箭頭函數(shù) ",


//? ? getName:function(){


//? ? ? ? btn2.onclick = () =>{


//? ? ? ? ? ? alert(this);//[object,Object]


//? ? ? ? ? ? con】sole.log(this);//{name : "箭頭函數(shù)",getName:f


//? ? }


//? ? }普通函數(shù)


// }


let obj = {


? ? name:"箭頭函數(shù) ",


? ? getName:() =>{


? ? ? ? btn2.onclick = () =>{


? ? ? ? ? ? alert(this);//[object,windows]


? ? ? ? ? ? console.log(this);//windows


? ? ? ? }


? ? }


}


// fun4()


</script>


</body>


</html>


三點(diǎn)運(yùn)算符

<!DOCTYPE html>


<html lang="en">


<head>


? <meta charset="UTF-8">


? <title>07_3點(diǎn)運(yùn)算符</title>


</head>


<body>


<!--


* 用途


1. rest(可變)參數(shù)


? ? * 用來取代arguments 但比 arguments 靈活,只能是最后部分形參參數(shù)


? ? function fun(...values) {


? ? ? ? console.log(arguments);


? ? ? ? arguments.forEach(function (item, index) {


? ? ? ? ? ? console.log(item, index);


? ? ? ? });


? ? ? ? console.log(values);


? ? ? ? values.forEach(function (item, index) {


? ? ? ? ? ? console.log(item, index);


? ? ? ? })


? ? }


? ? fun(1,2,3);


2. 擴(kuò)展運(yùn)算符


? let arr1 = [1,3,5];


? let arr2 = [2,...arr1,6];


? arr2.push(...arr1);


-->


<script type="text/javascript">


function foo(a,...value) {


? console.log(arguments);


? // arguments.callee();//遞歸


? //


? console.log(value);


? //? arguments.forEach(function (item,index) {


? //? console.log(item,index);


? // })


? value.forEach(function (item,index) {


? ? console.log(item,index);


? })


}


foo(2,65,33,34);


let arr = [1,6];


let arr1 = [2,3,4,5];


arr = [1,...arr1,6];


console.log(arr);//[1,2,3,4,5,6]


console.log(...arr);


</script>


</body>


</html>


形參默認(rèn)值

<!DOCTYPE html>


<html lang="en">


<head>


? <meta charset="UTF-8">


? <title>08_形參默認(rèn)值</title>


</head>


<body>


<!--


? ? * 形參的默認(rèn)值----當(dāng)不傳入?yún)?shù)的時(shí)候默認(rèn)使用形參里的默認(rèn)值


? ? function Point(x = 1,y = 2) {


this.x = x;


this.y = y;


? ? }


-->


<script type="text/javascript">


function Point(x=0,y=0) {


? this.x = x;


? this.y = y;


}


let point = new Point(23,35);


console.log(point);


let point1 = new Point();


console.log(point1);


</script>


</body>


</html>


Promise對(duì)象

<!DOCTYPE html>


<html lang="en">


<head>


? <meta charset="UTF-8">


? <title>11_Promise對(duì)象</title>


</head>


<body>


<!--


1. 理解:


? * Promise對(duì)象: 代表了未來某個(gè)將要發(fā)生的事件(通常是一個(gè)異步操作)


? * 有了promise對(duì)象, 可以將異步操作以同步的流程表達(dá)出來, 避免了層層嵌套的回調(diào)函數(shù)(俗稱'回調(diào)地獄')


? * ES6的Promise是一個(gè)構(gòu)造函數(shù), 用來生成promise實(shí)例


2. 使用promise基本步驟(2步):


? * 創(chuàng)建promise對(duì)象


? ? let promise = new Promise((resolve, reject) => {


? ? ? ? //初始化promise狀態(tài)為 pending


? ? ? //執(zhí)行異步操作


? ? ? if(異步操作成功) {


? ? ? ? resolve(value);//修改promise的狀態(tài)為fullfilled


? ? ? } else {


? ? ? ? reject(errMsg);//修改promise的狀態(tài)為rejected


? ? ? }


? ? })


? * 調(diào)用promise的then()


? ? promise.then(function(


? ? ? result => console.log(result),


? ? ? errorMsg => alert(errorMsg)


? ? ))


3. promise對(duì)象的3個(gè)狀態(tài)


? * pending: 初始化狀態(tài)


? * fullfilled: 成功狀態(tài)


? * rejected: 失敗狀態(tài)


4. 應(yīng)用:


? * 使用promise實(shí)現(xiàn)超時(shí)處理


? * 使用promise封裝處理ajax請(qǐng)求


? ? let request = new XMLHttpRequest();


? ? request.onreadystatechange = function () {


? ? }


? ? request.responseType = 'json';


? ? request.open("GET", url);


? ? request.send();


-->


<script type="text/javascript">


// // 創(chuàng)建Promise對(duì)象


//? let promise = new Promise((resolve,reject) => {


//


//? ? //初始化Promise狀態(tài) pending(初始化)


//? ? console.log("111");


//


//? ? //執(zhí)行異步操作谚赎，通常是發(fā)送AJAX請(qǐng)求淫僻，開啟定時(shí)器


//? ? setTimeout(() => {


//? ? ? console.log('333');


//? ? ? //根據(jù)異步任務(wù)的返回結(jié)果，去修改Promise的狀態(tài)


//? ? ? //異步任務(wù)執(zhí)行成功


//? ? ? resolve('哈哈');//修改Promise的狀態(tài)為fullfilled(成功狀態(tài))


//


//? ? ? //異步任務(wù)執(zhí)行失敗


//? ? ? reject('555');//修改Promise的狀態(tài)為rejected: 失敗狀態(tài)


//? ? }, 2000);


//? })


//


//? ? console.log('222');


//? promise.then((data) => {//成功的回調(diào)


//? ? console.log('成功了：健雳灵！!');


//? },(error) => {//失敗的回調(diào)


//? ? console.log('失敗了！Ｕ⒖悯辙！');


// })


// 定義獲取新聞的功能函數(shù)

function getNews(url){


let promise = new Promise((resolve, reject) => {


// 狀態(tài)：初始化


// 執(zhí)行異步任務(wù)


// 創(chuàng)建xmlHttp實(shí)例對(duì)象


let xmlHttp = new XMLHttpRequest();


console.log(xmlHttp.readyState);


//綁定readyState監(jiān)聽


xmlHttp.onreadystatechange = function(){


if(xmlHttp.readyState === 4){


if(xmlHttp.status == 200){//請(qǐng)求成功


// console.log(xmlHttp.responseText);


//修改狀態(tài)


resolve(xmlHttp.responseText);//修改promise的狀態(tài)為成功的狀態(tài)


}else{//請(qǐng)求失敗


reject('暫時(shí)沒有新聞內(nèi)容');


}


}


};


// open設(shè)置請(qǐng)求的方式以及url


xmlHttp.open('GET', url);


// 發(fā)送


xmlHttp.send();


})


return promise;


}


getNews('http://localhost:3000/new?id=2')


? ? ? ? ? ? .tnen((data) =>{


? console.log(data);


},(error) => {


? console.log(error);


});


// getNews('http://localhost:30001/news?id=2')


// .then((data) => {


// console.log(data);


// // console.log(typeof data);


// // 準(zhǔn)備獲取評(píng)論內(nèi)容的url


// let commentsUrl = JSON.parse(data).commentsUrl;


// let url = 'http://localhost:3000' + commentsUrl;


// // 發(fā)送請(qǐng)求獲取評(píng)論內(nèi)容


// return getNews(url);


// }, (error) => {


// console.log(error);


// })


// .then((data) => {


// console.2log(data);


// }, () => {


// });


</script>


</body>


</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市迎吵，隨后出現(xiàn)的幾起案子躲撰，更是在濱河造成了極大的恐慌，老刑警劉巖击费，帶你破解...
    沈念sama閱讀 206,968評(píng)論 6贊 482
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件拢蛋，死亡現(xiàn)場離奇詭異，居然都是意外死亡荡灾，警方通過查閱死者的電腦和手機(jī)瓤狐，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來批幌，“玉大人础锐，你說我怎么就攤上這事∮担” “怎么了皆警？”我有些...
    開封第一講書人閱讀 153,220評(píng)論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長截粗。 經(jīng)常有香客問我信姓，道長，這世上最難降的妖魔是什么绸罗？ 我笑而不...
    開封第一講書人閱讀 55,416評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任意推，我火速辦了婚禮，結(jié)果婚禮上珊蟀，老公的妹妹穿的比我還像新娘菊值。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布腻窒。 她就那樣靜靜地躺著昵宇，像睡著了一般。 火紅的嫁衣襯著肌膚如雪儿子。 梳的紋絲不亂的頭發(fā)上瓦哎，一...
    開封第一講書人閱讀 49,144評(píng)論 1贊 285
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音柔逼，去河邊找鬼蒋譬。 笑死，一個(gè)胖子當(dāng)著我的面吹牛愉适，可吹牛的內(nèi)容都是我干的羡铲。 我是一名探鬼主播，決...
    沈念sama閱讀 38,432評(píng)論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼儡毕，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了扑媚？” 一聲冷哼從身側(cè)響起腰湾，我...
    開封第一講書人閱讀 37,088評(píng)論 0贊 261
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎疆股，沒想到半個(gè)月后费坊，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡旬痹，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年附井，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片两残。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1贊 334
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡永毅，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出人弓，到底是詐尸還是另有隱情沼死，我是刑警寧澤，帶...
    沈念sama閱讀 33,783評(píng)論 4贊 324
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布崔赌，位于F島的核電站意蛀，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏健芭。R本人自食惡果不足惜县钥，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望慈迈。 院中可真熱鬧若贮，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評(píng)論 0贊 19
  • 一樁弒父案锥咸，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至细移，卻和暖如春搏予，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背弧轧。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評(píng)論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工雪侥， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人精绎。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2贊 355
  • 代替公主和親
    正文 我出身青樓速缨，卻偏偏與公主長得像，于是被迫代替她去往敵國和親代乃。 傳聞我的和親對(duì)象是個(gè)殘疾皇子旬牲，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2贊 345

推薦閱讀更多精彩內(nèi)容