1.說出至少5個ES6的新特性绕娘,并簡述它們的作用脓规。(簡答題)
答:
?????1、let關(guān)鍵字险领,用于聲明只在塊級作用域起作用的變量抖拦。
?????2、const關(guān)鍵字舷暮,用于聲明一個常量。
?????3噩茄、解構(gòu)賦值下面,一種新的變量賦值方式。常用于交換變量值绩聘,提取函數(shù)返回值沥割,設(shè)置默認(rèn)值。
?????4凿菩、Symbol數(shù)據(jù)類型机杜,定義一個獨(dú)一無二的值。
?????5衅谷、Proxy代理椒拗,用于編寫處理函數(shù),來攔截目標(biāo)對象的操作获黔。
?????6蚀苛、for...of遍歷,可遍歷具有iterator 接口的數(shù)據(jù)結(jié)構(gòu)玷氏。
?????7堵未、Set結(jié)構(gòu),存儲不重復(fù)的成員值的集合盏触。
?????8渗蟹、Map結(jié)構(gòu),鍵名可以是任何類型的鍵值對集合赞辩。
?????9雌芽、Promise對象,更合理诗宣、規(guī)范地處理異步操作膘怕。
?????10、Class類定義類和更簡便地實(shí)現(xiàn)類的繼承召庞。
?????...
2.使用解構(gòu)賦值岛心,實(shí)現(xiàn)兩個變量的值的交換(編程題)来破。
答:
let a = 1;
let b = 2;
[a,b] = [b,a];
3.使用解構(gòu)賦值,完成函數(shù)的參數(shù)默認(rèn)值(編程題)忘古。
function demo({name="王德發(fā)"}){
console.log(name);
}
4.利用數(shù)組推導(dǎo)徘禁,計(jì)算出數(shù)組 [1,2,3,4] 每一個元素的平方并組成新的數(shù)組。(編程題)
var arr1 = [1, 2, 3, 4];
var arr2 = [for (i of arr1) i * i];
console.log(arr2);
5.使用模板字符串改寫下面的代碼髓堪。(ES5 to ES6改寫題)
let iam = "我是";
let name = "王德發(fā)";
let str = "大家好送朱,"+iam+name+",多指教。";
改:
let iam = `我是`;
let name = `王德發(fā)`;
let str = `大家好干旁,${iam+name},多指教驶沼。`;
6.用對象的簡潔表示法改寫下面的代碼。(ES5 to ES6改寫題)
let name = "王德發(fā)";
let obj = {
"name":name,
"say":function(){
alert('hello world');
}
};
改:
let name = "王德發(fā)";
let obj = {
name,
say(){
alert('hello world');
}
};
7.用箭頭函數(shù)的形式改寫下面的代碼争群。(ES5 to ES6改寫題)
arr.forEach(function (v,i) {
console.log(i);
console.log(v);
});
改:
arr.forEach((v,i) => {
console.log(i);
console.log(v);
});
8.設(shè)計(jì)一個對象回怜,鍵名的類型至少包含一個symbol類型,并且實(shí)現(xiàn)遍歷所有key换薄。(編程題)
答:
let name = Symbol('name');
let product = {
[name]:"洗衣機(jī)",
"price":799
};
Reflect.ownKeys(product);
9.有一本書的屬性為:{“name”:“《ES6基礎(chǔ)系列》”, ”price”:56 }玉雾;要求使用Proxy對象對其進(jìn)行攔截處理,name屬性對外為“《ES6入門到懵逼》”,price屬性為只讀轻要。(練習(xí)題)
答:
let book = {"name":"《ES6基礎(chǔ)系列》","price":56 };
let proxy = new Proxy(book,{
get:function(target,property){
if(property === "name"){
return "《入門到懵逼》";
}else{
return target[property];
}
},
set:function(target,property,value){
if(property === 'price'){
target[property] = 56;
}
}
});
10.閱讀下面的代碼复旬,并用for...of改成它。(ES5 to ES6改寫題)
let arr = [11,22,33,44,55];
let sum = 0;
for(let i=0;i<arr.length;i++){
sum += arr[i];
}
改:
let arr = [11,22,33,44,55];
let sum = 0;
for(value of arr){
sum += value;
}
11.關(guān)于Set結(jié)構(gòu)冲泥,閱讀下面的代碼驹碍,回答問題。(代碼閱讀題)凡恍。
let s = new Set();
s.add([1]);
s.add([1]);
console.log(s.size);
問:打印出來的size的值是多少幸冻?
答:2。如果回答為1的咳焚,多必是記得Set結(jié)構(gòu)是不會存儲相同的值洽损。其實(shí)在這個案例中,兩個數(shù)組[1]并不是同一個值革半,它們分別定義的數(shù)組碑定,在內(nèi)存中分別對應(yīng)著不同的存儲地址,因此并不是相同的值又官。所以都能存儲到Set結(jié)構(gòu)中延刘,size為2。
12.關(guān)于Map結(jié)構(gòu)六敬,閱讀下面的代碼碘赖,回答問題。(代碼閱讀題)
let map = new Map();
map.set([1],"ES6系列");
let con = map.get([1]);
console.log(con);
問:打印出來的變量con的值是多少,為什么普泡?
答:undefined播掷。因?yàn)閟et的時候用的數(shù)組[1]和get的時候用的數(shù)組[1]是分別兩個不同的數(shù)組,只不過它們元素都是1撼班。它們是分別定義的兩個數(shù)組歧匈,并不是同一個值。新手避免在這里犯錯砰嘁。如果想達(dá)到預(yù)期的效果件炉,你要保證get的時候和set的時候用同一個數(shù)組。比如:
let map = new Map();
let arr = [1];
map.set(arr,"ES6系列");
let con = map.get(arr);
console.log(con); //ES6系列
13.定義一個類Animal矮湘,通過傳參初始化它的類型斟冕,如:“貓科類”。它有一個實(shí)例方法:run缅阳,run函數(shù)體內(nèi)容可自行定義宫静。
答案:
class Animal {
constructor(type){
this.type = type;
}
run(){
alert('I can run');
}
}
14.基于第12題的Animal類,定義一個子類Cat并繼承Animal類券时。初始化Cat類的昵稱name和年齡age。并擁有實(shí)例方法eat伏伯,eat函數(shù)體內(nèi)容可自行定義橘洞。
答:
class Cat extends Animal{
constructor(type,name,age){
super(type);
this.name = name;
this.age = age;
}
eat(){
alert('I am eating');
}
}
15.利用module模塊,實(shí)現(xiàn)兩個模塊A和B说搅,A模塊導(dǎo)出變量name炸枣,age和say方法。B模塊只導(dǎo)入變量name和say方法弄唧,并且重命名name為nickname适肠。
//-----模塊A-------//
var name = "kitty";
var age = 15;
var say = function(){
//....