ES6 箭頭函數(shù)、函數(shù)擴(kuò)展
ES5:
function add(a,b){
return a+b;
}
console.log(add(1,2));
主動(dòng)拋出錯(cuò)誤:throw new Error(xxxx)
function add(a,b){
if(a==0){
throw new Error("這是錯(cuò)誤的")
}
return a+b;
}
console.log(add(0));
嚴(yán)謹(jǐn)模式:
function add(a,b){
'use strict'
return a+b;
}
console.log(add(1,2);
但注意參數(shù)不要有默認(rèn)值,否則會(huì)報(bào)錯(cuò)
//傳遞參數(shù)的個(gè)數(shù),length
function add(a,b){
return a+b;
}
console.log(add(add.length);
箭頭函數(shù):
var add =(a,b=1)=>a+b;
console.log(add(a));
ES6 中的函數(shù)和數(shù)組補(bǔ)漏
對(duì)象的函數(shù)解構(gòu)json形式的對(duì)象:
let json={
a:'jspang',
b:'胖籽'
}
function fun({a,b="web"}){
console.log(a,b)
}
//對(duì)象的函數(shù)調(diào)用
fun(json);
結(jié)果:jspang 胖籽
數(shù)組的解構(gòu):
let arr=['jspang','jspamng','wowow'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr)
結(jié)果:jspang jspamng wowow
in 的用法:
對(duì)判斷對(duì)象是否存在某個(gè)值
let obj ={
a:'技術(shù)胖',
b:'jspang',
}
console.log('c' in obj);
結(jié)果:false
對(duì)數(shù)組是否存在某個(gè)值:
let arr =[,,,];
console.log(arr.length);
結(jié)果:3
//數(shù)組的空位判斷
let arr =['jspang',,,];
console.log(1 in arr);
結(jié)果:false
數(shù)組遍歷的方法:
forEach遍歷方法
let arr = ['js','jq','vue','react'];
arr.forEach((val,index)=>console.log(index,val));
結(jié)果:
0 'js'
1 'jq'
2 'vue'
3 'react'
filter遍歷方法:
let arr = ['js','jq','vue','react'];
arr.filter(x =>console.log(x));
結(jié)果:
js
jq
vue
rect
some遍歷方法
let arr = ['js','jq','vue','react'];
arr.some(x =>console.log(x));
結(jié)果:
js
jq
vue
rect
false
map遍歷 方法:
let arr=['jspang','技術(shù)胖','前端視頻'];
console.log(arr.map(x=>'web'));
console.log(arr55.toString());
結(jié)果:
['web','web','web']
jspang,技術(shù)胖,前端視頻
轉(zhuǎn)化的實(shí)例方法:
toString()
join()
例子:
let arry =['js','jq','angular'];
console.log(arry.join('|'));
結(jié)果:
js|jq|angular
ES6中的對(duì)象:
對(duì)象賦值
ES5:
let name = 'js';
let skill = 'jq';
let obj ={name:name,skill:skill};
console.log(obj);
結(jié)果:
{name:'js',skill:'jq'}
ES6:
let name = 'js';
let skill = 'jq';
let obj ={name,skill};
console.log(obj);
結(jié)果:
{name:'js',skill:'jq'}
key值得構(gòu)建:
let key="skill";
var obj={
[key]:'web'
}
console.log(obj);
結(jié)果:
{skill:"web"}
自定義對(duì)象方法:
let obj={
add:function(a,b){
return a+b;
}
}
console.log(obj,add(1,2));
結(jié)果3
is()的方法:
let obj1={name:"js"};
let obj2={name:"js"};
console.log(obj1.name===obj2.name);
//注意Object一定要大寫(xiě)才是window自帶的方法
console.log(Object.is(obj1.name,obj2.name))
結(jié)果:
true
true
例子:
===同值相等,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
assign 數(shù)組的合并對(duì)象:
let a ={a:'js'};
let b ={b:'jq'};
let c ={c:'vue'};
let d =Object.assign(a,b,c);
console.log(d)
結(jié)果:
{a:"js",b:'jq',c:'vue'}
ES6 Symbol在對(duì)象中的作用
//數(shù)據(jù)類(lèi)型:
let a =new String;
let b =new Number;
let c =new Boolean;
let d = new Array;
let e = new Object;
let f =Symbol()
console.log(typeof(f))//symbol
例子:
let js = Symbol("wo");
console.log(js);
console.lof(js.toString());
結(jié)果:
Symbol(wo)//類(lèi)型
Symbol(wo)字符串
symbol在對(duì)象中的作用:
let js = Symbol();
let obj={
[js]:"wowo"
}
//注意在symgbol類(lèi)型里面沒(méi)有.這個(gè)用法,直接使用[]
console.log(obj[js]);
obj[js]='web';
console.log(obj[js]);
結(jié)果:
wowo
web
對(duì)對(duì)象元素的保護(hù)作用:
let obj ={name:'js',skill:'wb',age:18};
for(let item in obj){
console.log(obj[item]);
}
結(jié)果:
js
wb
18
//symbol的使用例子:
//沒(méi)有顯示symbol里面的年齡18
let obj ={name:'js',skill:'wb'};
let age =Symbol();
obj[age]=18;
console.log(obj);
for(let item in obj){
console.log(obj[item]);
}
結(jié)果:
js
wb
let obj ={name:'js',skill:'wb'};
let age =Symbol();
obj[age]=18;
console.log(obj);
for(let item in obj){
console.log(obj[item]);
}
//直接顯示你想要的年齡18
console.log(obj[age]);
結(jié)果:
js
wb
18
ES6 Set 和 WeakSet數(shù)據(jù)結(jié)構(gòu)
set 里面放的是數(shù)組,Set的數(shù)據(jù)結(jié)構(gòu)是以數(shù)組的形式構(gòu)建的,不是數(shù)組哦
Set 方法去重:
let setArr = new Set(['js','jq','web','js']);
console.log(setArr);
結(jié)果:
Set{'js','jq','web'}
Has 方法查找,返回false/true
let setArr = new Set(['js','jq','web','js']);
console.log(setArr.has('web'));
刪除的方法:
let setArr = new Set(['js','jq','web','js']);
console.log(setArr.clear('web'));
結(jié)果:
Set{}
刪除里面的某個(gè)值
let setArr = new Set(['js','jq','web','js']);
console.log(setArr.delete('jq'));
輸出的方法(循環(huán)方法):
for...of
forEach
WeakSet:可以放入對(duì)象,但是里面的值是不允許重復(fù)的
let weakObj= new WeakSet();
let obj ={a:'js',b:'jq'};
//不能直接賦值要通過(guò)add進(jìn)行賦值
weakObj.add(obj);
console.log(weakObj);
結(jié)果:
WeakSet {{…}}
注意:
let weakObj = new WeakSet();
let obj ={a:'js',b:'jq'};
let obj1 ={a:'js',b:'jq'};
weakobj.add(obj);
weakobj.add(obj1);
console.log(weakObj);
結(jié)果:
WeakSet {{…}, {…}}
ES6 map 數(shù)據(jù)結(jié)構(gòu):
map 數(shù)據(jù)類(lèi)型使用廣泛
使用map方法:
var json ={
name:'js',
age:'jq'
}
var map = new Map();
map.set(json,'iam')
console.log(map);
結(jié)果:
Map(1) {{…} => "iam"}
map 增刪查
get/delete/clear(全部刪除)/size(剩下個(gè)數(shù))/has
ES6 proxy 代理 增強(qiáng) 對(duì)象和函數(shù)(方法)
生命周期,鉤子函數(shù)、預(yù)處理
在執(zhí)行方法之前做一些預(yù)處理
let pro = new Proxy({
add:function(val){
return val+100;
},
name:'I am Js'
},{
get:function(target,key,property){
console.log('come in Get');
return target[key];
},
set:function(target,key,value,receiver){
console.log(`setting ${key}=${value}`);
}
});
console.log(pro.name)
pro.name = '技術(shù)胖'
ES6? promise 對(duì)象的使用
promise es5 回調(diào)地獄
直接使用結(jié)構(gòu)化的then
ES6 Class 類(lèi)
Class Coder{
name(val){
console.log(val);
//需要返回值
return val;
}
//注意多方法時(shí)不需要逗號(hào),直接往下打代碼就好
skill(val){
console.log(this.name('技術(shù)胖'))
}
}
let js = new Coder;
js.name('胖籽');
結(jié)果:
胖籽
ES6 模塊化操作
export可以讓我們把變量、函數(shù)、對(duì)象進(jìn)行模塊化,提供外部調(diào)用接口,讓外部進(jìn)行引用
//export 輸出 一個(gè)頁(yè)面可以使用多個(gè)
export default 一個(gè)頁(yè)面才有一個(gè)
//import 引入 需要{ }