es6（let關(guān)鍵字，const關(guān)鍵字，變量的解構(gòu)賦值，模板字符串，對象簡寫，箭頭函數(shù)，三點運算符，形參默認(rèn)值，Promise對象，獲取新聞內(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類似, 用于聲明一個變量

2. 特點:

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

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

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

3. 應(yīng)用:

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

? * 使用let取代var是趨勢

-->

<script type="text/javascript">

//面試題

//?? console.log(username);//沒有預(yù)解析 會報錯

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

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

? console.log(username);//沒有預(yù)解析 會報錯

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. 作用:

? * 定義一個常量

2. 特點:

? * 不能修改

? * 其它特點同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時，不能寫，會報錯

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. 理解:

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

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

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

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

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

4. 用途

? * 給多個形參賦值

-->

<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>

對象簡寫

<!DOCTYPE html>

<html lang="en">

<head>

? <meta charset="UTF-8">

? <title>05_簡化的對象寫法</title>

</head>

<body>

<!--

簡化的對象寫法

* 省略同名的屬性值

* 省略方法的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')

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

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

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

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

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

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

? ? 1、簡潔

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

? ? 3、擴展理解： 箭頭函數(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ù)要用括號占位

fun1();

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

fun2("aaa");

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

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>

三點運算符

<!DOCTYPE html>

<html lang="en">

<head>

? <meta charset="UTF-8">

? <title>07_3點運算符</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. 擴展運算符

? 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ù)的時候默認(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對象

<!DOCTYPE html>

<html lang="en">

<head>

? <meta charset="UTF-8">

? <title>11_Promise對象</title>

</head>

<body>

<!--

1. 理解:

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

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

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

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

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

? ? 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對象的3個狀態(tài)

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

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

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

4. 應(yīng)用:

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

? * 使用promise封裝處理ajax請求

? ? let request = new XMLHttpRequest();

? ? request.onreadystatechange = function () {

? ? }

? ? request.responseType = 'json';

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

? ? request.send();

-->

<script type="text/javascript">

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

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

//

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

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

//

//? ?? //執(zhí)行異步操作，通常是發(fā)送AJAX請求，開啟定時器

//? ?? 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實例對象

let xmlHttp = new XMLHttpRequest();

console.log(xmlHttp.readyState);

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

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState === 4){

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

// console.log(xmlHttp.responseText);

//修改狀態(tài)

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

}else{//請求失敗

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

}

}

};

// open設(shè)置請求的方式以及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)備獲取評論內(nèi)容的url

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

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

// // 發(fā)送請求獲取評論內(nèi)容

// return getNews(url);

// }, (error) => {

// console.log(error);

// })

// .then((data) => {

// console.2log(data);

// }, () => {

// });

</script>

</body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 230,825評論 6贊 546
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,814評論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 178,980評論 0贊 384
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 64,064評論 1贊 319
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 72,779評論 6贊 414
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 56,109評論 1贊 330
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 44,099評論 3贊 450
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 43,287評論 0贊 291
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 49,799評論 1贊 338
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3贊 361
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1贊 375
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,221評論 5贊 365
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 44,933評論 3贊 351
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1贊 296
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3贊 400
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 48,703評論 2贊 380

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