ES6常見面試題 2019-06-14

1.es6熟悉嗎牛哺,說幾個es6的新增方法

(1)新增聲明命令let和const

在es6中通常用 let 和 const 來聲明淤堵,let 表示變量、const 表示常量实幕。

特點(diǎn):

? ? let 和 const 都是塊級作用域规惰。以{}代碼塊作為作用域范圍 只能在代碼塊里面使用睬塌。

? ? 不存在變量提升,只能先聲明再使用,否則會報(bào)錯揩晴。在代碼塊內(nèi)勋陪,在聲明變量之前,該變量都是不可用的硫兰。這在語法上诅愚,稱為“暫時性死區(qū)”(temporal dead zone,簡稱 TDZ)劫映。

? ? 在同一個代碼塊內(nèi)违孝,不允許重復(fù)聲明。

? ? const聲明的是一個只讀常量泳赋,在聲明時就需要賦值雌桑。(如果 const 的是一個對象,對象所包含的值是可以被修改的祖今。抽象一點(diǎn)兒說筹燕,就是對象所指向的地址不能改變,而變量成員是可以修改的衅鹿。)

(2)模板字符串(Template String)

用一對反引號(`)標(biāo)識撒踪,它可以當(dāng)作普通字符串使用,也可以用來定義多行字符串大渤,也可以在字符串中嵌入變量制妄,js表達(dá)式或函數(shù),變量泵三、js表達(dá)式或函數(shù)需要寫在${ }中耕捞。

var str = `abc

def

gh`;

console.log(str);

let name = "小明";

function a() {

? ? return "ming";

}

console.log(`我的名字叫做${name},年齡${17+2}歲烫幕,性別${'男'}俺抽,游戲ID:${a()}`);

(3)函數(shù)的擴(kuò)展

? ? 函數(shù)的默認(rèn)參數(shù)

ES6為參數(shù)提供了默認(rèn)值。在定義函數(shù)時便初始化了這個參數(shù)较曼,以便在參數(shù)沒有被傳遞進(jìn)去時使用磷斧。

function A(a,b=1){

? ? console.log(a+b);

}

A(1);? ? //2

A(2+3);? //5

? ? 箭頭函數(shù)

在es6中,提供了一種簡潔的函數(shù)寫法捷犹,我們稱作“箭頭函數(shù)”弛饭。

寫法:函數(shù)名=(形參)=>{……}? ? 當(dāng)函數(shù)體中只有一個表達(dá)式時,{}和return可以省略萍歉,當(dāng)函數(shù)體中形參只有一個時侣颂,()可以省略。

特點(diǎn):箭頭函數(shù)中的this始終指向箭頭函數(shù)定義時的離this最近的一個函數(shù)枪孩,如果沒有最近的函數(shù)就指向window憔晒。

//省略寫法

var people = name => 'hello' + name;

var getFullName = (firstName, lastName) => {

? ? var fullName = firstName + lastName;

? ? return fullName;

}

(4)對象的擴(kuò)展

? ? 屬性的簡寫藻肄。ES6 允許在對象之中,直接寫變量拒担。這時嘹屯,屬性名為變量名, 屬性值為變量的值。

var foo = 'bar';

var baz = {foo};? //等同于? var baz = {foo: foo};

? ? 方法的簡寫澎蛛。省略冒號與function關(guān)鍵字抚垄。

var o = {

? method() {

? ? return "Hello!";

? }

};

// 等同于

var o = {

? method: function() {

? ? return "Hello!";

? }

};

? ? Object.keys()方法蜕窿,獲取對象的所有屬性名或方法名(不包括原形的內(nèi)容)谋逻,返回一個數(shù)組。

var obj={name: "john", age: "21", getName: function () { alert(this.name)}};

console.log(Object.keys(obj));? ? // ["name", "age", "getName"]

console.log(Object.keys(obj).length);? ? //3

console.log(Object.keys(["aa", "bb", "cc"]));? ? //["0", "1", "2"]

console.log(Object.keys("abcdef"));? ? //["0", "1", "2", "3", "4", "5"]

? ? Object.assign ()桐经,assign方法將多個原對象的屬性和方法都合并到了目標(biāo)對象上面毁兆。可以接收多個參數(shù)阴挣,第一個參數(shù)是目標(biāo)對象气堕,后面的都是源對象。

var target? = {}; //目標(biāo)對象

var source1 = {name : 'ming', age: '19'}; //源對象1

var source2 = {sex : '女'}; //源對象2

var source3 = {sex : '男'}; //源對象3畔咧,和source2中的對象有同名屬性sex

Object.assign(target,source1,source2,source3);

console.log(target);? ? //{name : 'ming', age: '19', sex: '男'}

(5)for...of? 循環(huán)

是遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一的方法茎芭。for...of循環(huán)可以使用的范圍包括數(shù)組、Set 和 Map 結(jié)構(gòu)誓沸、某些類似數(shù)組的對象(比如arguments對象梅桩、DOM NodeList 對象)、Generator 對象拜隧,以及字符串宿百。

var arr=["小林","小吳","小佳"];

for(var v of arr){

? ? console.log(v);

}

//小林

//小吳

//小佳

(6)import和export

ES6標(biāo)準(zhǔn)中,JavaScript原生支持模塊(module)了洪添。這種將JS代碼分割成不同功能的小塊進(jìn)行模塊化垦页,將不同功能的代碼分別寫在不同文件中,各模塊只需導(dǎo)出公共接口部分干奢,然后通過模塊的導(dǎo)入的方式可以在其他地方使用痊焊。

export用于對外輸出本模塊(一個文件可以理解為一個模塊)變量的接口。

import用于在一個模塊中加載另一個含有export接口的模塊忿峻。

import和export命令只能在模塊的頂部宋光,不能在代碼塊之中。

//導(dǎo)入部分

//全部導(dǎo)入

import Person from './example'

//將整個模塊所有導(dǎo)出內(nèi)容當(dāng)做單一對象炭菌,用as起別名

import * as example from "./example.js"

console.log(example.name)

console.log(example.getName())

//導(dǎo)入部分

import { name } from './example'

//導(dǎo)出部分

// 導(dǎo)出默認(rèn)

export default App

// 部分導(dǎo)出

export class User extend Component {};

(7)Promise對象

Promise是異步編程的一種解決方案罪佳,將異步操作以同步操作的流程表達(dá)出來,避免了層層嵌套的回調(diào)函數(shù)黑低。

它有三種狀態(tài)赘艳,分別是pending-進(jìn)行中酌毡、resolved-已完成、rejected-已失敗蕾管。

Promise 構(gòu)造函數(shù)包含一個參數(shù)和一個帶有 resolve(解析)和 reject(拒絕)兩個參數(shù)的回調(diào)枷踏。在回調(diào)中執(zhí)行一些操作(例如異步),如果一切都正常掰曾,則調(diào)用 resolve旭蠕,否則調(diào)用 reject。對于已經(jīng)實(shí)例化過的 promise 對象可以調(diào)用 promise.then() 方法旷坦,傳遞 resolve 和 reject 方法作為回調(diào)掏熬。then()方法接收兩個參數(shù):onResolve和onReject,分別代表當(dāng)前 promise 對象在成功或失敗時秒梅。

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

? ? var success = true;

? ? if (success) {

? ? ? ? resolve('成功');

? ? } else {

? ? ? ? reject('失敗');

? ? }

}).then(

? ? (data) => { console.log(data)},

? ? (data) => { console.log(data)}

)

promise的執(zhí)行過程

setTimeout(function() {

? ? console.log(0);

}, 0);

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

? ? console.log(1);

? ? setTimeout(function () {

? ? ? ? var success = true;

? ? ? ? if (success) {

? ? ? ? ? ? resolve('成功');

? ? ? ? } else {

? ? ? ? ? ? reject('失敗');

? ? ? ? }

? ? },2000);

}).then(

? ? (data) => { console.log(data)},

? ? (data) => { console.log(data)}

);

console.log(promise); //<pending> 進(jìn)行中

setTimeout(function () {

? ? console.log(promise); //<resolved> 已完成

},2500);

console.log(2);

//1

//Promise {<pending>}

//2

//0

//成功

//Promise {<resolved>: undefined}

(8)解構(gòu)賦值

ES6 允許按照一定模式旗芬,從數(shù)組和對象中提取值,對變量進(jìn)行賦值捆蜀,這被稱為解構(gòu)(Destructuring)疮丛。

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

數(shù)組中的值會自動被解析到對應(yīng)接收該值的變量中,數(shù)組的解構(gòu)賦值要一一對應(yīng) 如果有對應(yīng)不上的就是undefined

var [name, pwd, sex]=["小周", "123456", "男"];

console.log(name) //小周

console.log(pwd)//123456

console.log(sex)//男

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

對象的解構(gòu)與數(shù)組有一個重要的不同辆它。數(shù)組的元素是按次序排列的誊薄,變量的取值由它的位置決定;而對象的屬性沒有次序锰茉,變量必須與屬性同名呢蔫,才能取到正確的值。

var obj={name:"小周", pwd:"123456", sex:"男"}

var {name, pwd, sex}=obj;

console.log(name) //小周

console.log(pwd)//123456

console.log(sex)//男

//如果想要變量名和屬性名不同洞辣,要寫成這樣

let { foo: foz, bar: baz } = { foo: "aaa", bar: "bbb" };

console.log(foz) // "aaa"

console.log(foo) // error: foo is not defined

(9)set數(shù)據(jù)結(jié)構(gòu)

Set數(shù)據(jù)結(jié)構(gòu)咐刨,類似數(shù)組。所有的數(shù)據(jù)都是唯一的扬霜,沒有重復(fù)的值定鸟。它本身是一個構(gòu)造函數(shù)。

屬性和方法:

? ? size 數(shù)據(jù)的長度

? ? add() 添加某個值著瓶,返回 Set 結(jié)構(gòu)本身联予。

? ? delete() 刪除某個值,返回一個布爾值材原,表示刪除是否成功沸久。

? ? has() 查找某條數(shù)據(jù),返回一個布爾值余蟹。

? ? clear() 清除所有成員卷胯,沒有返回值。

應(yīng)用:數(shù)組去重威酒。

var arr = [1,1,2,2,3];

var s = new Set(arr);

console.log(s); //{1, 2, 3}

console.log(s.size); //3

console.log(s.add(4)); //{1, 2, 3, 4}

console.log(s.delete(4)); //true

console.log(s.has(4)); //false

s.clear();

(10)Spread Operator 展開運(yùn)算符(...)

? ? 將字符串轉(zhuǎn)成數(shù)組

var str="abcd";

console.log([...str]) // ["a", "b", "c", "d"]

? ? 將集合轉(zhuǎn)成數(shù)組

var sets=new Set([1,2,3,4,5])

console.log([...sets]) // [1, 2, 3, 4, 5]

? ? 兩個數(shù)組的合并

var a1=[1,2,3];

var a2=[4,5,6];

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

? ? 在函數(shù)中窑睁,用來代替arguments參數(shù)

rest參數(shù)? …變量名稱

rest 參數(shù)是一個數(shù)組 挺峡,它的后面不能再有參數(shù),不然會報(bào)錯

function func(...args){

? ? console.log(args);//[1, 2, 3, 4]

}

func(1, 2, 3, 4);

function f(x, ...y) {

? ? console.log(x);

? ? console.log(y);

}

f('a', 'b', 'c');? ? //a 和 ["b","c"]

f('a')? ? ? ? ? ? ? ? //a 和 []

f()? ? ? ? ? ? ? ? ? //undefined 和 []



1.es6新特性,哪些在項(xiàng)目中使用舉例說明

let const 解構(gòu) 箭頭函數(shù) Set去重 新增數(shù)據(jù)類型Symbol 模板字符串`` 類怎么實(shí)現(xiàn)繼承 模塊化

promise async / await

2. var let const 區(qū)別

3.Set 怎么去重

ES6中新增了Set數(shù)據(jù)結(jié)構(gòu)担钮,類似于數(shù)組橱赠,但是 它的成員都是唯一的 ,其構(gòu)造函數(shù)可以接受一個數(shù)組作為參數(shù)箫津,如:

let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];

let set = new Set(array);

console.log(set); // 此時打印的是set 結(jié)構(gòu) Set(5) {1, 2, 3, 4, 5}

? ? 1

? ? 2

? ? 3

ES6中Array新增了一個靜態(tài)方法Array.from狭姨,可以把類似數(shù)組的對象轉(zhuǎn)換為數(shù)組,如通過querySelectAll方法得到HTML DOM Node List苏遥,以及ES6中新增的Set和Map等可遍歷對象饼拍,如:

let set = new Set();

set.add(1).add(2).add(3);

let array = Array.from(set);

console.log(array);

// => [1, 2, 3]

? ? 1

? ? 2

? ? 3

? ? 4

? ? 5

4.模板字符串怎么使用*

主要是針對變量

**5.promise 實(shí)現(xiàn)原理? promise的三種狀態(tài) **

promise實(shí)際上解決jquery的ajax回調(diào)地域(解決層層嵌套),只是異步編程的一種解決方案

代碼實(shí)現(xiàn):

new promise(function(resolve,reject) {

// 111111111

resolve('...')

} ).then(function(value) {

console.log(value)

}).catch(function(error){

console.log(error)

})

? ? 1

? ? 2

? ? 3

? ? 4

? ? 5

? ? 6

? ? 7

? ? 8

const p1 = new Promise(function (resolve, reject) {

? setTimeout(() => reject(new Error('fail')), 3000)

})

const p2 = new Promise(function (resolve, reject) {

? setTimeout(() => resolve(p1), 1000)

})

p2

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

? .catch(error => console.log(error))

? ? 1

? ? 2

? ? 3

? ? 4

? ? 5

? ? 6

? ? 7

? ? 8

? ? 9

? ? 10

? ? 11

三種狀態(tài):pending(進(jìn)行中)、fulfilled(已成功)和rejected(已失斉邸)

promise兩個特點(diǎn):

(1)對象的狀態(tài)不受外界影響

(2)一旦狀態(tài)改變惕耕,就不會再變纺裁,任何時候都可以得到這個結(jié)果诫肠。

promise 缺點(diǎn): 無法取消promise,如果不設(shè)置回調(diào)函數(shù),promise內(nèi)部拋出錯誤

第三,當(dāng)處于pending狀態(tài)時欺缘,無法得知目前進(jìn)展到哪一個階段(剛剛開始還是即將完成)栋豫。

6.es6繼承和es5繼承的區(qū)別

7.箭頭函數(shù) this指向

指向包裹她的父函數(shù)

8.對async 和 await的認(rèn)識

項(xiàng)目中應(yīng)用可以講異步改成同步執(zhí)行

9.新增數(shù)據(jù)類型是誰, 有什么作用

10.es6中對數(shù)組遍歷的幾種方式和不同之處

11.es6解構(gòu)

數(shù)組解構(gòu) 和 對象解構(gòu) , 項(xiàng)目中返回的response.data 可以解構(gòu)成自己需要的數(shù)據(jù)

12.對es6的了解

ECMAScript 6.0(以下簡稱 ES6)是 JavaScript 語言的下一代標(biāo)準(zhǔn),已經(jīng)在 2015 年 6 月正式發(fā)布了谚殊。它的目標(biāo)丧鸯,是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序,成為企業(yè)級開發(fā)語言嫩絮。

**13.正確區(qū)分?jǐn)?shù)組map方法 和 es6的Map結(jié)構(gòu) **

---------------------

作者:腦瓜疼兒

來源:CSDN

原文:https://blog.csdn.net/meikaied/article/details/85250327

版權(quán)聲明:本文為博主原創(chuàng)文章丛肢,轉(zhuǎn)載請附上博文鏈接!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末剿干,一起剝皮案震驚了整個濱河市蜂怎,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌置尔,老刑警劉巖杠步,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異榜轿,居然都是意外死亡幽歼,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進(jìn)店門谬盐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來甸私,“玉大人,你說我怎么就攤上這事飞傀』市停” “怎么了泣刹?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長犀被。 經(jīng)常有香客問我椅您,道長,這世上最難降的妖魔是什么寡键? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任掀泳,我火速辦了婚禮,結(jié)果婚禮上西轩,老公的妹妹穿的比我還像新娘员舵。我一直安慰自己,他們只是感情好藕畔,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布马僻。 她就那樣靜靜地躺著,像睡著了一般注服。 火紅的嫁衣襯著肌膚如雪韭邓。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天溶弟,我揣著相機(jī)與錄音女淑,去河邊找鬼。 笑死辜御,一個胖子當(dāng)著我的面吹牛鸭你,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播擒权,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼袱巨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了碳抄?” 一聲冷哼從身側(cè)響起愉老,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎纳鼎,沒想到半個月后俺夕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡贱鄙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年劝贸,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片逗宁。...
    茶點(diǎn)故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡映九,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出瞎颗,到底是詐尸還是另有隱情件甥,我是刑警寧澤捌议,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站引有,受9級特大地震影響瓣颅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜譬正,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一宫补、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧曾我,春花似錦粉怕、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蛉谜,卻和暖如春稚晚,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背悦陋。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工蜈彼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留筑辨,地道東北人俺驶。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像棍辕,于是被迫代替她去往敵國和親暮现。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評論 2 361

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

  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案楚昭,比傳統(tǒng)的解決方案——回調(diào)函...
    neromous閱讀 8,711評論 1 56
  • 一栖袋、Promise的含義 Promise在JavaScript語言中早有實(shí)現(xiàn),ES6將其寫進(jìn)了語言標(biāo)準(zhǔn)抚太,統(tǒng)一了用法...
    Alex灌湯貓閱讀 828評論 0 2
  • *node下用express框架塘幅,實(shí)現(xiàn)一個簡單的mvc *構(gòu)建工具:gulp / babel / webpack ...
    韓娜愛吃辣_前端程序媛閱讀 1,095評論 0 1
  • 本文章是根據(jù)以下文章內(nèi)容整理的: ES6高頻面試題目整理 前言 自從ES6發(fā)布以來,就受到了廣大開發(fā)者的歡迎它的新...
    艾薩克菊花閱讀 8,939評論 0 12
  • 一. Callback (回調(diào)函數(shù)) 1.定義:把函數(shù)當(dāng)作變量傳到另一個函數(shù)里又谋,傳進(jìn)去之后執(zhí)行甚至返回等待之后的...
    hutn閱讀 1,535評論 0 2