es6es6（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對象, 可以將異步操作以同步的流程表達(dá)出來, 避免了層層嵌套的回調(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)系作者
  • 人面猴
    序言：七十年代末拓轻，一起剝皮案震驚了整個濱河市斯撮，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌扶叉，老刑警劉巖勿锅，帶你破解...
    沈念sama閱讀 206,968評論 6贊 482
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件帕膜，死亡現(xiàn)場離奇詭異，居然都是意外死亡溢十，警方通過查閱死者的電腦和手機垮刹，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來张弛，“玉大人荒典，你說我怎么就攤上這事⊥萄迹” “怎么了寺董？”我有些...
    開封第一講書人閱讀 153,220評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長刻剥。 經(jīng)常有香客問我遮咖，道長，這世上最難降的妖魔是什么造虏？ 我笑而不...
    開封第一講書人閱讀 55,416評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任御吞，我火速辦了婚禮，結(jié)果婚禮上酗电，老公的妹妹穿的比我還像新娘魄藕。我一直安慰自己内列，他們只是感情好撵术，可當(dāng)我...
    茶點故事閱讀 64,425評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著话瞧，像睡著了一般嫩与。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上交排，一...
    開封第一講書人閱讀 49,144評論 1贊 285
  • 城市分裂傳說
    那天划滋，我揣著相機與錄音，去河邊找鬼埃篓。 笑死处坪，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的架专。 我是一名探鬼主播同窘，決...
    沈念sama閱讀 38,432評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼部脚！你這毒婦竟也來了想邦？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 37,088評論 0贊 261
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤委刘，失蹤者是張志新（化名）和其女友劉穎丧没，沒想到半個月后鹰椒，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,586評論 1贊 300
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡呕童，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年漆际，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片夺饲。...
    茶點故事閱讀 38,137評論 1贊 334
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡灿椅，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出钞支，到底是詐尸還是另有隱情茫蛹，我是刑警寧澤，帶...
    沈念sama閱讀 33,783評論 4贊 324
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布烁挟，位于F島的核電站婴洼，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏撼嗓。R本人自食惡果不足惜柬采，卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望且警。 院中可真熱鬧粉捻，春花似錦、人聲如沸斑芜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽杏头。三九已至盈包，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間醇王，已是汗流浹背呢燥。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留寓娩，地道東北人叛氨。 一個月前我還...
    沈念sama閱讀 45,595評論 2贊 355
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像棘伴，于是被迫代替她去往敵國和親寞埠。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,901評論 2贊 345

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

  • ECMAScript理解 它是一種由ECMA組織（前身為歐洲計算機制造商協(xié)會）制定和發(fā)布的腳本語言規(guī)范 而我們學(xué)的...
    咻咻咻滴趙大妞閱讀 4,561評論 0贊 3
  • 一：ECMAScript理解 1. 它是一種由ECMA組織（前身為歐洲計算機制造商協(xié)會）制定和發(fā)布的腳本語言規(guī)范 ...
    清清不快樂閱讀 271評論 0贊 0
  • 一：_ECMAScript理解 1. 它是一種由ECMA組織（前身為歐洲計算機制造商協(xié)會）制定和發(fā)布的腳本語言規(guī)范...
    噬魂__1727閱讀 199評論 0贊 0
  • 一：_ECMAScript理解 1. 它是一種由ECMA組織（前身為歐洲計算機制造商協(xié)會）制定和發(fā)布的腳本語言規(guī)范...
    發(fā)報員有問題私小鵬閱讀 75評論 0贊 0
  • 一：ECMAScript理解 1. 它是一種由ECMA組織（前身為歐洲計算機制造商協(xié)會）制定和發(fā)布的腳本語言規(guī)范 ...
    晚冬至雪閱讀 306評論 0贊 0