es6一些基本可以使用的東西

2022-02-07 06:48:39 字數 3413 閱讀 1010

用let定義的變數只在塊當中起作用,離開變數外界的塊(括號)就會被銷毀。

用於字串拼接和寫模板,使用 ` (反引號,左上角波浪線),變數使用${} 

1

var a="大帥比";

2var b="你呢";

3 console.log( `my name is $,$?` ); //

my name is 大帥比,你呢?45

var tpl=`` //不用加 \n來換行了

交換值

1

var a=1;

2var b=2;

3 [a,b]=[b,a];

4 console.log(a,b); //

2 1

從陣列裡獲得元素

1

var array=[1,2,3,4];

2var [a, ,b]=array;

3 console.log(a,b); //

1 3

引數解構

1

var user=

2function

getuser( ),今年$歲。`;4}

5 console.log( getuser(user) ); //

我叫李大白,今年23歲。

返回值的解構

1

function

margin()4}

5var =margin();

6 console.log(left,bottom); //

1 4

深度匹配

1

function

setting(),keyboard: }3}

45var ,keyboard: }=setting();

6 console.log(dis_color,key_layout); //

red querty

1

class animal

5 speak()8}

9var animal=new animal("dog");

10 animal.speak(); //

dog makes a noise

如果在es5中,要這麼寫

1

var animal=(function

()5 myconstructor.prototype.speak=function()8

return

myconstructor;

9})();

1011

var animal=new animal("dog");

12 animal.speak(); //

dog makes a noise

繼承

1

class cat extends animal5}

6var cat=new cat("短尾貓");

7 cat.speak(); //

短尾貓 makes a noise

extends關鍵字代表繼承,super關鍵字代表父類

箭頭函式相當於匿名函式,並且簡化了函式定義。()中放引數,沒有引數就省略,箭頭後面是函式體。

1

var fun1=(x)=>x*x;

2var fun2=(x,y)=>else8}

9var set=(name,age)=>( ) //

直接返回物件需要加小括號

1011 fun1(4); //

1612 fun2(7,1); //

true

13 set("李大白","1000"); //

object

es5中this比較坑,當需要外層的this時有幾種方法

用變數儲存引用

1

var _this=this

;2 $(".btn").click(function

());

直接繫結

1 $(".btn").click(function

().bind(this) );

es6中

1 $(".btn").click( ()=> this.senddata() );  //

es5的遍歷

1

var array=["a","b","c","d"];

2for (var i=0,l=array.length;i)

或者

1 array.foreach(function(a))

es6  for...of

1

for(var a of array )

for...of和for...in的區別,for...in主要用於獲取屬性名,如果用來遍歷陣列,確實可以獲得序號,但序號都是字串形式。

1

function abc(x=0,y=2,flag=true)4

5 abc(); //

0 2 true

6 abc(4,0,false); //

4 0 false

用於引數數量不固定的場合,剩餘引數前面需要加...

1

function

reduce(base,...nums)

6return

result;7}

8 reduce(10,5,3); //

2

es5

1

function

reduce(base)

7return

result;8}

9 reduce(10,5,3); //

2

1 math.max(2,100,1,6,43);  //

1002 math.max([2,100,1,6,43]); //

nan3 math.max(...[2,100,1,6,43]); //

100 展開的效果

陣列拼接也可以使用...

1 arr1=[2,100,1,6,43];

2 arr2=["a","b","c","d"];

3 arr3=arr1.concat(arr2);

4 arr4=[...arr1,...arr2];

56 console.log( arr3 ); //

[2, 100, 1, 6, 43, "a", "b", "c", "d"]

7 console.log( arr4 ); //

[2, 100, 1, 6, 43, "a", "b", "c", "d"]

es6中陣列新增的一些東西

1.array.from 作用 將兩類物件轉為真正的陣列 類似陣列的物件 array like object 和可遍歷 iterable 的物件 包括 es6 新增的資料結構 set 和 map let json es5的寫法 var arr1 slice call json a b c es6的寫...

es6的一些技巧

1,強制要求引數 es6 有預設引數設定機制 允許在入參的括號裡給引數賦予預設值 防止函式在呼叫時沒有傳參 我們知道在js函式在入參的時候是入幾個都可以的 這就給了我們發揮的空間,我們來強制要求引數必須有 否則就報錯 const required const add a required b req...

es6的一些筆記

new set 用來去重陣列。let arr 1,2,2,3 let set new set arr let newarr array.from set console.log newarr 1,2,3 set類似於陣列,區別在於它所有的成員都是唯一的,不能有重複的值 展開運算子 合併陣列 let ...