更佳閱讀體驗(yàn)：zclzone.gitee.io/zhangsheng
一沮明、新的聲明方式
- let：聲明的變量只在代碼塊內(nèi)有效
- const： 聲明常量殖蚕，聲明時必須賦值且不可改變
let a = 'aaa';
const b = 'bbb';
console.log(a, b);
二蕾盯、變量的解構(gòu)賦值
數(shù)組解構(gòu)賦值
let [aa, bb, cc] = [0, 1, 2];
對象解構(gòu)賦值
let { cnName, enName } = {
id: '151521574',
cnName: '張生',
enName: 'Ronnie'
};
console.log(cnName, enName); //'張生'蛀骇，'Ronnie'
三般贼、擴(kuò)展運(yùn)算符和 rest 運(yùn)算符
對象擴(kuò)展運(yùn)算符
function test01(...arg) {
console.log(arg[0]); //1
console.log(arg[1]); //2
console.log(arg[2]); //3
console.log(arg[3]); //undefined
}
test01(1, 2, 3);
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.push(4); //此時不改變arr1
console.log(arr1); //[1,2,3]
console.log(arr2); //[1,2,3,4]
rest 運(yùn)算符(表示剩余參數(shù))
function test02(first, ...arg) {
for (let item of arg) {
console.log(item); //依次輸出1,2限嫌，3,4,5,6
}
console.log(first); //0
}
test02(0, 1, 2, 3, 4, 5, 6);
四愁拭、字符串模版
字符串模版
let name = 'Ronnie';
let str = `大家好栓袖，我是<b>${name}</b><br/>很高興認(rèn)識大家`;
document.write(str);
字符串查找
let str = `大家好匣摘，我是<b>${name}</b><br/>很高興認(rèn)識大家`;
console.log(str.includes('不高興')); //false
console.log(str.startsWith('大家好')); //判斷開頭是否存在，true
console.log(str.endsWith('大家')); //判斷結(jié)尾是否存在裹刮，true
五音榜、數(shù)字操作
二進(jìn)制聲明 Binary
let binary = 0b010101;
console.log(binary); //21
八進(jìn)制聲明 Octal
let octal = 0o666;
console.log(octal); //438
判斷是否為數(shù)字
Number.isFinite(888); //true
Number.isFinite('888'); //false，不會先將字符串嘗試轉(zhuǎn)換成數(shù)字再判斷
Number.isFinite('asd'); //false
Number.isFinite(undefined); //false
Number.isFinite(NaN); //false
判斷是否是整數(shù)
Number.isInteger(1.1); //false
Number.isInteger(1); //true
最大和最小安全整數(shù)
Number.MAX_SAFE_INTEGER;
Number.MIN_SAFE_INTEGER;
判斷是否為安全整數(shù)
Number.isSafeInteger(Math.pow(2, 53) - 1); //true
Number.isSafeInteger(Math.pow(2, 53) + 1); //false
六捧弃、新增的數(shù)組知識
數(shù)組格式轉(zhuǎn)換: Array.from赠叼、 Array.of
let json = {
'0': 'Ronnie',
'1': 'Rose',
'2': 'zhangsheng',
'3': 'Json',
length: 4
};
let jsonArr = Array.from(json);
console.log(jsonArr); //['Ronnie','Rose','zhangsheng','Json']
let strArr = Array.of('a', 'b', 'c', 'd');
console.log(strArr); //['a', 'b', 'c', 'd']
find()方法:返回滿足條件的第一個元素，三個參數(shù)
- value：當(dāng)前查找的值
- index: 當(dāng)前查找的值的索引
- strArr: 查找的原數(shù)組
let findRst = strArr.find((value, index, strArr) => {
return value === 'd' || value === 'a';
});
console.log(findRst); //a
fill() 方法
let fillArr = ['Ronnie', 'Rose', 'Zhangsheng'];
fillArr.fill('es6', 1, 3); //將索引為[1,3),即索引為1和2的值替換為'es6'
console.log(fillArr); //["Ronnie", "es6", "es6"]
for...of
for (let item of fillArr) {
console.log(item);
}
//帶索引的方式
for (let [index, value] of fillArr.entries()) {
console.log(index + ':' + value);
}
entries() 生成的是 Iterator 形式的數(shù)組,這種形式的好處就是可以讓我們在需要時用 next()手動跳轉(zhuǎn)到下一個值
let list = fillArr.entries();
console.log(list.next().value); //[0, "Ronnie"]
console.log(list.next().value); //[1, "es6"]
console.log(list.next().value); //[2, "es6"]
console.log(list.next().value); //undefined
some 方法: 返回一個 Boolean塔橡，判斷是否有元素符合 func 條件
let someArr = [1, 2, 3, 4];
someArr.some(item => item > 1); //true
every 方法: 返回一個 Boolean梅割，判斷每一個元素是否符合 func 條件
let everyArr = [1, 2, 3, 4];
everyArr.every(item => item > 3); //false
everyArr.every(item => item >= 1); //true
filter 方法: 返回一個符合 func 條件的元素數(shù)組,不改變原來數(shù)組
let ages = [23, 28, 25, 32];
ages.filter(item => item > 25); //[28,32]
console.log(ages); //[23, 28, 25, 32]
map 方法: 返回一個新的 array，數(shù)組元素由每一次調(diào)用函數(shù)產(chǎn)生結(jié)果組成
let mapArr = [1, 2, 3, 4, 5, 6];
mapArr.map(item => item + 1); //[2,3,4,5,6,7]
in 方法:用來判斷對象或者數(shù)組中是否存在某個 key 或索引
let inObj = {
cnName: '張生',
enName: 'Ronnie'
};
console.log('enName' in inObj); //true
console.log(4 in ages); //false
七葛家、ES6 中的函數(shù)
函數(shù)解構(gòu) json 對象
let jsonObj = {
cnName: '張生',
enName: 'Rose'
};
function fun({ cnName, enName = 'Ronnie' }) {
console.log(cnName, enName);
}
fun(jsonObj); //張生 Rose
八户辞、ES6 中的對象
對象賦值：ES6 允許把聲明的變量直接賦值給對象
let nameObj = { cnName, enName };
console.log(nameObj); //{cnName: "張生",enName: "Ronnie"}
//對象Key值構(gòu)建
let key = 'skill';
let keyObj = {
[key]: 'web'
};
console.log(keyObj); //skill: "web"
Object.is( ) 對象比較,===為同值相等，is()為嚴(yán)格相等
console.log(+0 === -0); //true
console.log(NaN === NaN); //false
console.log(Object.is(+0, -0)); //false
console.log(Object.is(NaN, NaN)); //true
Object.assign()對象合并
let obj1 = { cnName: '張生' };
let obj2 = { enName: 'Ronnie', age: 26 };
let obj3 = Object.assign(obj1, obj2);
console.log(obj3); //{cnName: "張生", enName: "Ronnie", age: 26}
九癞谒、Set底燎、WeakSet 以及 map 數(shù)據(jù)結(jié)構(gòu)
Set:Set 和 Array 的區(qū)別是 Set 不允許內(nèi)部有重復(fù)的值刃榨，如果有只顯示一個，相當(dāng)于去重
Set 的聲明
let setArr = new Set(['ronnie', 'zhangsheng', 'web']);
console.log(setArr); //Set(3) {'ronnie', 'zhangsheng', 'web'}
Set 值的增刪查
setArr.add('前端'); //增
setArr.delete('web'); //刪
setArr.has('前端'); //查: true
setArr.clear(); //清空
Set 的遍歷
for (let item of setArr) {
console.log(item);
}
size 屬性
console.log(setArr.size); //3
WeakSet：用于存儲對象的 set
WeakSet 聲明双仍，聲明是不允許賦值枢希，否則報錯,同時 WeakSet 里邊的值也是不允許重復(fù)的
let weakObj = new WeakSet();
weakObj.add({ cnName: '張生', age: 26 });
console.log(weakObj);
map：map 是一種靈活，簡單的適合一對一查找的數(shù)據(jù)結(jié)構(gòu)朱沃，它跟 json 對象很像苞轿，但反應(yīng)速度更高，而且 Map 的靈活性要更好逗物，你可以把它看成一種特殊的鍵值對搬卒，但 key 可以設(shè)置成數(shù)組，值也可以設(shè)置成字符串
map 的聲明
let map = new Map();
map 的增刪查
let obj4 = { cnName: '張生', age: 26 };
map.set('ronnie', obj4); //增
map.set('ronnie', '永遠(yuǎn)十八歲'); //改：相同key則修改
map.set(obj4, 'Ronnie'); //增：key也可以為對象
console.log(map);
console.log(map.get(obj4)); //取值： Ronnie
map.delete('ronnie'); //刪除:根據(jù)key值刪除
console.log(map.size); //size屬性
console.log(map.has(obj4)); //has：查找是否存在
map.clear(); //clear清除所有元素
console.log(map);
十翎卓、Proxy 預(yù)處理
Proxy: 類似于鉤子函數(shù)契邀，當(dāng)我們在操作一個對象或者方法時會有幾種前置動作
- get 屬性：get 屬性是在你得到某對象屬性值時預(yù)處理的方法，它接收三個參數(shù)
- target：得到的目標(biāo)值
- key：目標(biāo)的 key 值失暴，相當(dāng)于對象的屬性
- property：可選參數(shù)坯门，這個不常用
- set 屬性：set 屬性是指你要改變 Proxy 屬性值時，進(jìn)行的預(yù)先處理逗扒。它接收四個參數(shù)。
- target:目標(biāo)值
- key：目標(biāo)的 Key 值
- value：要改變的值
- receiver：改變前的原始值
let pro = new Proxy(
{
add: function(val) {
return val + 10;
},
name: 'I am Ronnie'
},
{
get: function(target, key) {
console.log('come in Get');
return target[key];
},
set: function(target, key, value, receiver) {
console.log(`setting ${key} = ${value}`);
return (target[key] = value);
}
}
);
console.log(pro.name); //先輸出 come in Get 再輸出 I am Ronnie
pro.name = '張生'; //setting name = 張生
十一矩肩、promise 對象的使用
promise 的出現(xiàn)是為了解決回調(diào)地獄的問題
promise 的基本用法(舉例說明)，比如把大象放入冰箱有三個步驟
- 打開冰箱門
- 把大象放進(jìn)去
- 關(guān)上冰箱門
let isSuccess = true;
function step1(resolve, reject) {
console.log('First step');
if (isSuccess) {
resolve('成功打開冰箱門');
} else {
reject('打開冰箱門出錯');
}
}
function step2(resolve, reject) {
console.log('Second step');
isSuccess = false;
if (isSuccess) {
resolve('成功把大象放進(jìn)去');
} else {
reject('把大象放進(jìn)去出錯');
}
}
function step3(resolve, reject) {
console.log('Third step');
if (isSuccess) {
resolve('成功關(guān)上冰箱門');
} else {
reject('關(guān)上冰箱門出錯');
}
}
new Promise(step1)
.then(function(rst) {
console.log(rst);
return new Promise(step2);
})
.then(function(rst) {
console.log(rst);
return new Promise(step3);
})
.then(function(rst) {
// console.log(rst);
return rst;
})
.catch(e => {
console.log(e); //捕獲Promise reject返回的錯誤信息
});
十二、class 類的使用
類的聲明與使用
class Coder {
name(val) {
console.log(val);
return val;
}
skill(val) {
console.log(this.name('Ronnie') + ':' + 'Skill-' + val);
}
constructor(cnName, age) {
this.cnName = cnName;
this.age = age;
}
introduce() {
return this.cnName + ':' + this.age;
}
}
let Ronnie = new Coder('張生', 26);
Ronnie.name('Ronnie'); //Ronnie
Ronnie.skill('web'); //Ronnie: Skill-web
console.log(Ronnie.introduce()); //Ronnie:26
class 的繼承
class htmler extends Coder {}
let zhangsheng = new htmler();
zhangsheng.name('zhangsheng'); //zhangsheng
十三痹升、模塊化操作
模塊化操作主要包括兩個方面
- export :負(fù)責(zé)進(jìn)行模塊化，也是模塊的輸出
- import : 負(fù)責(zé)把模塊引疼蛾，也是模塊的引入操作
export 的用法:export 可以讓我們把變量，函數(shù)察郁，對象進(jìn)行模塊化，提供外部調(diào)用接口皮钠，讓外部進(jìn)行引用
export let name = 'Ronnie'; //export temp.js
import { a } from './temp.js'; //在index.js中以import的形式引入 此時的a對應(yīng)的是temp.js中輸出的name
多變量的輸出以及函數(shù)的輸出
let var1 = 'Ronnie';
var var2 = '張生';
var var3 = 'zhangsheng';
function add(a, b) {
return a + b;
}
export { var1, var2, var3, add };
import { var1, add } from './temp'; //對應(yīng)的引入方式
export defalut: 只能輸出一個
let str = 'ronnie is so handsome';
export default str;
import aaa from './temp.js'; //對應(yīng)的引入方式，引入的名稱可以任意
OK麦轰，以上就是關(guān)于ES6的常用知識點(diǎn)了砖织，關(guān)于Proxy預(yù)處理的介紹可能不是很詳細(xì)末荐，具體講解的話將會是長篇大論侧纯，所以這里就不深入介紹了，感興趣的朋友可以自行搜索別人的文章甲脏，相信很多朋友都解釋得比我好眶熬。
怕什么真理無窮，進(jìn)一寸有進(jìn)一寸的驚喜~
