在學(xué)習(xí)react過程中,發(fā)現(xiàn)自己js的基礎(chǔ)還很薄弱,一些ES6版本里常見的內(nèi)容在這里做下總結(jié)。
一,var let 和 const
let,var,const的區(qū)別:
http://www.itdecent.cn/p/9f7f053f7204
https://baijiahao.baidu.com/s?id=1621787284851612777&wfr=spider&for=pc
二,解構(gòu)賦值
數(shù)組解構(gòu)賦值,對象解構(gòu)賦值
{
let a,b,rest;
[a,b]=[1,2]; //數(shù)組解構(gòu)賦值
// let a=1,b=2; 之前的方法
console.log(a,b);
}
{
let a,b,rest;
[a,b,...rest]=[1,2,3,4,5,6];
console.log(a,b,rest);
}
{
let a,b;
({a,b}={a:1,b:2}); //對象解構(gòu)賦值
console.log(a,b);
}
//對象解構(gòu)賦值
{
let o={p:42,q:true};
let {p,q}=o;
console.log(p,q);
}
//對象解構(gòu)賦值,默認(rèn)值的處理
{
let {a=10,b=5}={a:3};
console.log(a,b);
}
{
let a,b,c,rest;
[a,b,c=3]=[1,2]; //數(shù)組解構(gòu)賦值,給3一個(gè)默認(rèn)值
// [a,b,c]=[1,2]; 如果沒能配對,會出現(xiàn)未定義
console.log(a,b,c);
}
數(shù)組解構(gòu)賦值應(yīng)用場景
1.取函數(shù)的返回值
{
function f() {
return [1,2];
}
let a,b;
[a,b]=f();
console.log(a,b);
}
2.變量交換
{
let a=1;
let b=2;
[a,b]=[b,a];
console.log(a,b);
}
3.接受函數(shù)返回值,可選擇
{
function f1() {
return[1,2,3,4,5];
}
let a,b,c;
[a,,,b]=f1();
console.log(a,b); //返回的是多個(gè)值,可以只關(guān)心自己想要的
}
4.如果不確定長度,接受多個(gè)值
{
function f1() {
return[1,2,3,4,5];
}
let a,b,c;
[a,...b]=f1();
console.log(a,b);
}
對象解構(gòu)賦值應(yīng)用場景
取json對象的某些值
{
let Data={
title:'abc',
test:[{
title:'test',
desc:'description'
}]
}
let {title:a,test:[{title:b}] }=Data;
console.log(a,b);
}
三,函數(shù)相關(guān)
參數(shù)默認(rèn)值
{
function test(x,y='world') {
console.log(x,y);
}
test('hello');
}
作用域
以函數(shù)內(nèi)部參數(shù)的優(yōu)先
{
let x='test';
function f(x,y=x) {
console.log(x,y);//輸出的是 kill kill
}
f('kill');
}
{
let x='test';
function f(c,y=x) {
console.log(c,y); //輸出的是 kill test
}
f('kill');
}
rest參數(shù)
{
function test3(...arg) {
for(let v of arg){
console.log('rest',v);
}
}
test3(1,2,3,'a','b','c');
}
箭頭函數(shù)
{
let arrow = v => v*2; //arrow是函數(shù)名,v是參數(shù),v*2是返回值
console.log(arrow(3));
let arrow2 = () => 5;
console.log(arrow2());
}
this綁定
尾調(diào)用
四,模塊化
import 引入模塊
export 導(dǎo)出模塊