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)載請附上博文鏈接!