es6（let關(guān)鍵字尚胞，const關(guān)鍵字，變量的解構(gòu)賦值帜慢，模板字符串笼裳，對(duì)象簡(jiǎn)寫(xiě)，箭頭函數(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>測(cè)試1</button>

<br>

<button>測(cè)試2</button>

<br>

<button>測(cè)試3</button>

<br>

<!--

***let

1. 作用:

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

2. 特點(diǎn):

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

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

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

3. 應(yīng)用:

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

? * 使用let取代var是趨勢(shì)

-->

<script type="text/javascript">

//面試題

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

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

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

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

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

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

? var btn = btns[i];

? //var 無(wú)法獲取正確的索引

? 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í)，不能寫(xiě)撩轰，會(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. 模板字符串 : 簡(jiǎn)化字符串的拼接

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

? * 變化的部分使用${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ì)象簡(jiǎn)寫(xiě)

<!DOCTYPE html>

<html lang="en">

<head>

? <meta charset="UTF-8">

? <title>05_簡(jiǎn)化的對(duì)象寫(xiě)法</title>

</head>

<body>

<!--

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

* 省略同名的屬性值

* 省略方法的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">測(cè)試箭頭函數(shù)this_1</button>

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

<!--

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

* 基本語(yǔ)法:

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

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

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

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

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

* 使用場(chǎng)景: 多用來(lái)定義回調(diào)函數(shù)

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

? ? 1堪嫂、簡(jiǎn)潔

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

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

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

? ? ? ? 如果沒(méi)有速挑，則this是window。

-->

<script type="text/javascript">

// let fun = function () {

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

// }

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

fun()

let fun1 = () => console.log("我是箭頭函數(shù)");//沒(méi)有參數(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ù)

? ? * 用來(lái)取代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ì)象: 代表了未來(lái)某個(gè)將要發(fā)生的事件(通常是一個(gè)異步操作)

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

? * ES6的Promise是一個(gè)構(gòu)造函數(shù), 用來(lái)生成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)求姥宝，開(kāi)啟定時(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)聽(tīng)

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í)沒(méi)有新聞內(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閱讀 221,273評(píng)論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件愕乎，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡壁公，警方通過(guò)查閱死者的電腦和手機(jī)感论，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評(píng)論 3贊 398
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)紊册，“玉大人比肄，你說(shuō)我怎么就攤上這事∧叶福” “怎么了芳绩？”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,709評(píng)論 0贊 360
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)撞反。 經(jīng)常有香客問(wèn)我妥色，道長(zhǎng)，這世上最難降的妖魔是什么遏片？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,520評(píng)論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任嘹害，我火速辦了婚禮，結(jié)果婚禮上吮便，老公的妹妹穿的比我還像新娘笔呀。我一直安慰自己，他們只是感情好髓需，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,515評(píng)論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布许师。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪枯跑。 梳的紋絲不亂的頭發(fā)上惨驶，一...
    開(kāi)封第一講書(shū)人閱讀 52,158評(píng)論 1贊 308
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音敛助，去河邊找鬼粗卜。 笑死，一個(gè)胖子當(dāng)著我的面吹牛纳击，可吹牛的內(nèi)容都是我干的续扔。 我是一名探鬼主播，決...
    沈念sama閱讀 40,755評(píng)論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼焕数，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼纱昧！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起堡赔，我...
    開(kāi)封第一講書(shū)人閱讀 39,660評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤识脆，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后善已，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體灼捂，經(jīng)...
    沈念sama閱讀 46,203評(píng)論 1贊 319
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,287評(píng)論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年换团，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了悉稠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,427評(píng)論 1贊 352
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡艘包，死狀恐怖的猛，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情想虎，我是刑警寧澤卦尊，帶...
    沈念sama閱讀 36,122評(píng)論 5贊 349
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站舌厨，受9級(jí)特大地震影響岂却，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜邓线，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,801評(píng)論 3贊 333
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一淌友、第九天 我趴在偏房一處隱蔽的房頂上張望煌恢。 院中可真熱鬧骇陈，春花似錦、人聲如沸瑰抵。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,272評(píng)論 0贊 23
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至婿崭，卻和暖如春拨拓，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背氓栈。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,393評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工渣磷， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人授瘦。 一個(gè)月前我還...
    沈念sama閱讀 48,808評(píng)論 3贊 376
  • 代替公主和親
    正文 我出身青樓醋界，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親提完。 傳聞我的和親對(duì)象是個(gè)殘疾皇子形纺，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,440評(píng)論 2贊 359

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