es6常用方法總結
阿新 • • 發佈:2019-01-30
demo結構
dist為編譯後的程式碼
src放es5程式碼
環境搭建
<!-- 安裝babel --> npm install --save-dev babel-cli <!-- //轉換es5 --> cnpm i --save-dev babel-preset-es2015 babel-cli <!-- 建立一個.babelrc檔案 --> { "presets": [ "es2015" ], "plugins": [ ] } <!-- 然後,改寫package.json。 --> { // ... "devDependencies": { "babel-cli": "^6.0.0" }, "scripts": { "build": "babel src -d dist" }, } <!-- 執行下面的命令。 --> $ npm run build
方法
<!-- for…of 的迴圈可以避免我們開拓記憶體空間,增加程式碼執行效率--> function cc(f, ...arg) { for (let val of arg) { console.log(val) } } cc(1, 2, 3, 4) <!-- 判斷是否包含指定字串 --> let cc = "王乘衝"; arr.includes(cc); <!-- 判斷開頭是否存在: --> arr.startsWith(cc); <!-- 判斷結尾是否存在: --> arr.endsWith(cc); <!-- 重複複製字串 --> document.write(`${cc}`.repeat(3)); document.write(`王乘衝`.repeat(3)); <!-- 數字判斷的格式化|判斷等方法在 ##數字判斷和轉換裡 --> <!-- 陣列的方法 遍歷 替換 轉換 查詢 替換 -->
第3節解構賦值:
陣列的解構賦值:
<!-- 陣列是按順序解構的 -->
es6 let [a, b, c] = [1, 2, 3]; es5 var a = 1, b = 2, c = 3;
let [a, [b, c], d, e = "cc"] = [1, [2], 3, undefined];
console.log(a)//1
console.log(e)//cc
物件的解構賦值:
let foo; //foo已經定義了變數 再賦值時在外邊加括號 ({foo}={foo:'bb'}) ; <!-- 物件是按照key值解構的 --> let { fo, bar } = { fo: 'cc', bar: 'wd' }
字串的解構賦值:
const [f, g, h, j, k, l] = 'jspang';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
第4節運算子
物件擴充套件運算子
<!-- 引數不確定個數時候 -->
function cc(...arg) {
console.log(arg[0])
console.log(arg[1])
console.log(arg[2])
console.log(arg[3])
console.log(arg[4])
}
cc(1, 2, 3, 4)
eg: let arr1 = ['www', 'qqq'];
let arr2 = arr1;
arr2.push('eeee'); <!-- 這樣arr1和arr2都改變 因為let會使arr2從arr1對映一個值, -->
let arr1 = ['www', 'qqq'];
let arr2 = [...arr1];
arr2.push('eeee');<!-- 這樣就沒問題 -->
rest擴充套件運算子 rest譯為剩餘
<!-- 宣告方法時候 進行變數不確定處理 -->
function cc(f, ...arg) {
console.log(arg.length);
}
cc(1, 2, 3, 4) //length為3
第5節:字串模板 (拼接字串)
let cc = "乘衝"
let blog = `字串拼接 ${cc},不以物喜不以己悲`
console.log(blog) //字串拼接 乘衝,不以物喜不以己悲
支援html標籤
let blog = `<b>非常高興你能看到這篇文章</b>,我是你的老朋友${cc}。<br/>這節課我們學習字串模版。`;
document.write(blog);
對運算的支援:
let a=1;
let b=2;
let result=`文字${a+b}`;
document.write(result);
字串查詢
console.log(blog.indexOf(cc)); //ES5的方法是 返回的是6
console.log(blog.includes(cc)) //直接返回true
判斷開頭是否存在:
blog.startsWith(cc);
判斷結尾是否存在:
blog.endsWith(cc);
!!starts和ends 後邊都要加s
複製字串
document.write('cc,'.repeat(3));
第6節:ES6數字操作
二進位制和八進位制
<!-- Binary -->
let binary = 0B010101;//21
<!-- Ovtal -->
let octal = 0O666;//438
<!-- 使用Number.isFinite( )來進行數字驗證,只要是數字,不論是浮點型還是整形都會返回true,其他時候會返回false。 -->
let a= 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('jspang'));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false
<!-- NaN驗證 -->
console.log(Number.isNaN(NaN));
<!-- 判斷是否為整數Number.isInteger(xx) -->
let a=123.1;
console.log(Number.isInteger(a)); //false<!-- 整數轉換Number.parseInt(xxx)和浮點型轉換Number.parseFloat(xxx) -->
let a='9.18';
console.log(Number.parseInt(a));
console.log(Number.parseFloat(a));
<!-- 整數取值範圍操作(最大值|最大安全整數) -->
let a = Math.pow(2,53)-1;
console.log(a); //9007199254740991
<!-- 最大安全整數 -->
console.log(Number.MAX_SAFE_INTEGER);
<!-- 最小安全整數 -->
console.log(Number.MIN_SAFE_INTEGER);
<!-- 安全整數判斷isSafeInteger( ) -->
let a= Math.pow(2,53)-1;
console.log(Number.isSafeInteger(a));//false
第7節:陣列
JSON陣列格式轉換
<!-- json陣列格式 -->
let json = {
'0': 'jspang',
'1': '技術胖',
'2': '大胖逼逼叨',
length:3
}
let arr = Array.from(json);//json字串轉換為陣列
<!-- 陣列轉換為字串 -->
arr.toString()
arr.join('|') //改變陣列或者字串的分隔符
Array.of()方法:
<!-- 字串轉陣列 -->
let arr1 = Array.of(3, 4, 5, 6);
find()例項方法:
什麼是例項方法:是已經例項出來物件的方法,不需要呼叫Array物件
<!-- 查詢字串裡面的值,滿足條件就在找到的第一個地方停止 -->
var arr =[1,2,3,4,5,6]
console.log(arr.find(function(value, index, arr) {
return value > 2;
}))
第8節:fill( )例項方法:
<!-- 陣列填充 它接收三個引數,第一個引數是填充的變數,第二個是開始填充的位置,第三個是填充到的位置 -->
var arr4 = [0, 1, 2, 3, 4, 5, 6];
arr4.fill('cc', 1, 2);
document.write(arr4) //輸出 [0, "cc", 2, 3, 4, 5, 6]
for…of迴圈
let arr5 = ['jspang', '技術胖', '逼逼叨']
for (let item of arr5) {
console.log(index, item)//只輸出值
}
for (let item of arr5.keys()) {
console.log(index, item)//只輸出索引
}
for (let item of arr5.entries()) {
console.log(item )//一起輸出值和索引
}
for (let [index, value] of arr5.entries()) {
console.log(index, value)//分來輸出值和索引
}
entries( )例項方法
<!-- entries()例項方式生成的是Iterator形式的陣列,那這種形式的好處就是可以讓我們在需要時用next()手動跳轉到下一個值。進行手動遍歷 -->
let arr=['jspang','技術胖','逼逼叨']
let list=arr.entries();
console.log(list.next().value);
console.log('執行完這個,再繼續遍歷')
console.log(list.next().value);
console.log('執行完這個,再繼續遍歷')
console.log(list.next().value);
in的方法
let arr=[,,,,,];
console.log(arr.length);
//上邊的程式碼輸出了5,但是陣列中其實全是空值,這就是一個坑 ES6的in就可以解決這個問題
console.log(0 in arr); //這裡的0指的是陣列下標位置是否為空。
<!-- 陣列的遍歷方法 -->
陣列的遍歷
forEach遍歷
let arr=['jspang','技術胖','cc'];
arr.forEach((val,index)=>console.log(index,val));
.filter遍歷
arr.filter(x=>console.log(x));
.some遍歷
arr.some(x=>console.log(x));
.map遍歷
arr.map(x => console.log(x));
<!-- 陣列遍歷替換 -->
console.log(arr.map(x=>'web'));
第9節:箭頭函式和擴充套件
#
<!-- 手動丟擲異常 -->
throw new Error('丟擲異常')
<!-- se6中的嚴禁模式 可以不寫在頭部,實現區域性嚴謹-->
'use strict'
<!-- 獲取傳遞引數的個數 -->
function add(a, b) {
return a + b;
}
console.log('幾個引數:' + add.length)
箭頭函式
<!-- 箭頭函式中不可加new,也就是說箭頭函式不能當建構函式進行使用。 -->
var add11 = (a, b = 1) => a + b //只有一行執行邏輯的程式碼時不用帶括號
console.log(add11(1))
var add11 = (a, b = 1) => {
console.log('多行程式碼')
return a+b; //多行情況下
}
console.log(add11(1,3))
第10節:物件|陣列的函式結構
let obj={a:'cc',b:'qizhi'}
let arr=['cc','qizhi'];
function fun({a,b='qizhi'}){
console.log(a,b);
}
fun(obj) //cc qizhi
fun(arr) //cc qizhi
in的用法
<!-- in是用來判斷物件或者陣列中是否存在某個值的 -->
let obj = {
a: 'cc',
b: 'qizhi'
}
console.log('a' in obj);
<!-- 陣列中的用處 -->
let arr=[,,,,,];
console.log(arr.length);
//上邊的程式碼輸出了5,但是陣列中其實全是空值,這就是一個坑 ES6的in就可以解決這個問題
console.log(0 in arr); //這裡的0指的是陣列下標位置 看它是否為空。
<!-- 陣列的遍歷方法 在頂部-->
第11節:ES6物件
物件的賦值
變數直接賦值給物件
let name="cc";
let skill= 'web';
var obj= {name,skill}; //鍵和值都是變數
console.log(obj); //Object {name: "cc", skill: "web"}
物件Key值的變數構建
key允許變數 構建
let key='skill';
var obj={
[key]:'web'
}
console.log(obj.skill); //obj {skill:"web}
Object.is()物件值的比較
var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
console.log(obj1.name === obj2.name);//true
console.log(Object.is(obj1.name,obj2.name)); //true
=== 和 is方法的區別
console.log(+0 === -0); //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true
===為同值相等 is()為嚴格相等
Object.assign()合併物件
var a={name:'cc'};
var b={age:18};
var c={stature:'180cm'};
let d=Object.assign(a,b,c)
console.log(d);
第12節:Symbol在物件中的應用
使用Symbol來進行資料保護
let obj = { name: 'cc', skill: 'web' };
let age = Symbol();
obj[age] = 18;
for (let item in obj) {
console.log(obj[item]);// cc web
}
console.log(obj); //{name: "cc", skill: "web", Symbol(): 18}
console.log(obj[age]); //18
第13節:Set和WeakSet資料結構
set是一個數組結構 最重要的是去重
let setArr = new Set(['cc', 'web', 18, 18])
console.log(setArr) // Set(3) {"cc", "web", 18}
Set值的增刪查
//add
setArr.add('前端職場'); //不能增加重複的 會報錯
//delete
setArr.delete('前端職場');
//has 查
console.log(setArr.has('cc'));//true
//.clear 刪除全部
setArr.clear();
set的迴圈
//for…of…迴圈:
for (let item of setArr){
console.log(item);
}
size屬性
console.log(setArr.size); //3 18去重了一個
forEach迴圈
setArr.forEach((value)=>console.log(value));
WeakSet的宣告
set是一個數組結構 weakSet就是一個物件版的set
不能直接在new 的時候就放入值,將報錯 eg let weakObj=new WeakSet({a:'cc',b:'wd'});//報錯
let weakObj=new WeakSet();
let obj={a:'cc',b:'乘衝'}
let obj1=obj; obj1和obj用的是同一個記憶體空間 所以重複不會被新增進去
weakObj.add(obj);
weakObj.add(obj1);
console.log(weakObj);
let obj={a:'cc',b:'乘衝'}
let obj1={a:'cc',b:'乘衝'};
weakObj.add(obj);
weakObj.add(obj1);//obj1產生的記憶體空間和obj不一樣 所以會被新增進去
console.log(weakObj);
第14節:map資料結構
json和map的對比
Map的靈活性要更好,你可以把它看成一種特殊的鍵值對,但你的key可以設定成陣列,值也可以設定成字串,讓它不規律對應起來。
給 var map賦值 key為物件 value為字串
let json = {
name:'jspang',
skill:'web'
}
console.log(json.name);
var map=new Map();
map.set(json,'iam'); //拿json物件作為key iam字串作為值
console.log(map);
當然也可key字串,value是物件。我們調換一下位置,依然是符合map的資料結構規範的。
map.set('jspang',json);
console.log(map);
map的增刪查取
取值get
獲取json對應的value值 (json物件是key值)
console.log(map.get(json));
刪除delete
map.delete(json);
size屬性
console.log(map.size) //列印map物件的長度 從0開始
查詢是否存在某值 has
查詢的是key值
map.set('jspang',json);
console.log(map.has('jspang'));
清除所有的元素 clear
map.clear()
第15節:用Proxy進行預處理
get set是得到會要改變物件屬性值時預處理的方法
proxy為代理的意思 是es6用它增強物件和函式的方法
//es5定義物件的方法
let obj={
add:function(){
return val+100;
},
name:"i am cc"
}
//se6proxy的方法
let pro = new Proxy({放物件體},{放預處理機制})
let pro = new Proxy({
add:function(){
return val+100;
},
name:"i am cc"},{
//get 得到資料之前 預處理的事情
get:function(target,key,property){//三個引數是固定的
console.log('come in get')
return target[key]
},
set:function(target,key,value,receiver){
//目標,屬性名,要變成的值,原始值
console.log(`setting ${key}=${value}之前的值是${receiver}`)
return target[key]
}
}
);
console.log(pro.name)//列印的是get函式執行的結果
console.log(pro.name = 'cc');//這裡列印的是set裡面的返回值
apply apply的作用是呼叫內部的方法,它使用在方法體是一個匿名函式時。
語法:函式名.apply(物件,陣列(或者偽陣列))
功能:1,呼叫該函式 2,將this指向第一個引數 3,將第二個引數的陣列拆解成一個個的元素,依次作為函式的實參
let target = function () {
return 'I am JSPang';
};
var handler = {
apply(target, ctx, args) {
console.log('do apply');
return Reflect.apply(...arguments); //固定格式 並未完全解釋,要自己查文件深究
}
}
var pro = new Proxy(要處理的函式, 放預處理機制);
var pro = new Proxy(target, handler);
console.log(pro());
第16節 promise物件的使用
解決回撥地獄
let state=1;
function step1(resolve,reject){
console.log('1.開始-洗菜做飯');
if(state==1){
resolve('洗菜做飯--完成');
}else{
reject('洗菜做飯--出錯');
}
}
function step2(resolve,reject){
console.log('2.開始-坐下來吃飯');
if(state==1){
resolve('坐下來吃飯--完成');
}else{
reject('坐下來吃飯--出錯');
}
}
function step3(resolve,reject){
console.log('3.開始-收拾桌子洗完');
if(state==1){
resolve('收拾桌子洗完--完成');
}else{
reject('收拾桌子洗完--出錯');
}
}
new Promise(step1).then(function(val){
console.log(val);
return new Promise(step2);
}).then(function(val){
console.log(val);
return new Promise(step3);
}).then(function(val){
console.log(val);
return val;
});
第17節:class類的使用
類裡面是方法和函式
宣告類
class Coder{
name(val){
console.log(val)
}
}
例項化類
let cc = new Coder;
cc.name('cc');
在類裡面 多個方法不需要,號隔開
class Coder {
name(val) {
console.log(val)
return val
}
skill(val) {
console.log(this.name('cc') + ":" + val)
}
}
// 例項化類
let cc1 = new Coder;
cc1.skill('web');
類的引數傳遞
類引數傳遞 eg: new Coder('val')
與類裡面方法的引數傳遞區分開eg:cc1.skill('web')
<br>
在類的引數傳遞中我們用constructor( )進行傳參
class Coder{
constructor(a,b){
this.a=a;
this.b=b;
}
add(){
return this.a+this.b;
}
}
let cc=new Coder(1,2);
console.log(cc.add());
class的繼承
類的一大特點就是繼承
class htmler extends Coder{}
let pang=new htmler;
pang.name('cc-extends');
宣告一個htmler的新類並繼承Coder類,htmler新類裡邊為空,這時候我們例項化新類,並呼叫裡邊的name方法。結果也是可以呼叫到的。