ES6常用語法

2021-10-23 11:37:34 字數 4640 閱讀 2247

es6允許為函式的引數設定預設值,及直接寫在引數定義的後面。

function log(x,y="world")

console.log(log("hello")); //print "hello world"

console.log(log("hello","china")); //print "hello china"

注意引數變數x或y是預設宣告的,在函式體中不能用let或者const再次宣告,否則會報錯。

function log(x,y="world")

console.log(log("hello")); //print "hello world22"

console.log(log("hello","china")); //print "hello china22"

與解構賦值預設值聯合起來使用
const =;

console.log(x) //5

console.log(y) //5

function foo()

foo() //6

foo() //12

//注意傳的引數必須是乙個物件

函式的length屬性

函式的length屬性將返回沒有指定預設值的引數的個數,即給引數指定了預設值之後,length屬性將失真。

rest引數(剩餘引數)

用於函式的引數,rest引數之後不能有其他的引數(即rest引數只能是最後乙個引數)

function score(name,...scores)

return name + ":" + sumscore;

}console.log(score("fuyu",100,100,100));

console.log(score("song",100,95))

//此時...arguments視為乙個「引數」陣列

擴充套件運算子

rest引數的形式是「. . .變數名」:rest搭配的變數是乙個陣列,該變數將多餘的引數放入其中

擴充套件運算子的形式是「. . .」,後面跟陣列或者物件,將陣列轉為引數序列,例如:

let arr =[1,2,3,4,5,6];

console.log(...arr); //output 1 2 3 4 5 6

let obj =;

let obj2 =

console.log(...obj) //error

console.log(obj2); //output

擴充套件運算子的應用

合併陣列

let arr1=[1,2];

let arr2=[3,4];

//es5合併陣列 concat方法

console.log(arr1.concat(arr2));

//est合併陣列

console.log([...arr1,...arr2])

與解構賦值結合

與解構賦值結合用於生成新的陣列

let arr = [1,2,3,4,5,6,7,8,9,10];

//es5

let first=arr[0];

let rest=arr.slice(1);

console.log(first);

console.log(rest)

//es6

let [first , ...rest] = arr;

console.log(first);

console.log(rest);

將字串轉為真正的陣列

console.log(..."hello"); //output h e l l o

let arr = [..."hello"];

console.log(arr.length) //output5

總結

// ...被當做剩餘引數使用

let [first,...rest]=[1,2,3,4,5,6];

console.log(first); //1

console.log(rest); //[2,3,4,5]

//...被當做拓展運算子

let arr = [1,2,3,4,5];

console.log(...arr); //1 2 3 4 5

console.log([...arr]) //[1,2,3,4,5]

let obj=;

// console.log(...obj) //error

console.log(); //

console.log() //

箭頭函式

如果箭頭函式不需要引數或者需要多個引數時,就使用圓括號代表引數部分;當只有乙個引數時,可以不用寫括號。

如果箭頭函式的**塊多於一條語句,就要使用大括號將其括起來,並使用return語句返回。

let f =v=>v

let f = ()=>5;

//等同於

let f =function()

console.log(f());

let sum = (a,b)=>a + b;

console.log(sum(1,2))

//等同於

let sum=function(a,b)

console.log(sum(1,2)

注意:

1.箭頭函式體內的this物件就是定義時所在的物件,而不是使用時所在的物件。

2.箭頭函式不能用作generator函式

es6遍歷物件屬性的方法

(1)for … in …

let obj=

for(let key in obj)

(2)object.keys(obj)

將所有的屬性當成乙個陣列返回

let obj=

console.log(object.keys()) //[ 'name', 'age', 'grade' ]

陣列的array.from()方法

array.from()方法用於將兩類物件轉為真正的陣列:

let obj=

console.log(array.from(obj));

//output [ 'song', 20, 10 ]

將字串變為陣列

let str="hello"

console.log(array.from(str));

//output [ 'h', 'e', 'l', 'l', 'o' ]

將set結構變為陣列

let set = new set([1,1,2,2,3,3,4,5])

console.log(array.from(set));

//or

console.log([...set])

//output [ 1, 2, 3, 4, 5 ]

set資料結構

set資料結構是es6提供的新的資料結構,類似於陣列,但是成員的值都是唯一的,沒有重複的值。

(1)set.prototype.constructor:建構函式,即set函式。set函式可以接受乙個陣列(或類似陣列的物件)作為引數,用於初始化。例如

let set = new set([1,1,2,2,3,3,4,5])

console.log(set) //set

console.log([...set]) //[ 1, 2, 3, 4, 5 ]

//可以將set結構解構沒有重複值的陣列

(2)set.prototype.size:返回set例項的成員總數

let set = new set([1,1,2,2,3,3,4,5])

console.log(set);

console.log(set.size);

//output set size:5

(1)add(value):新增某個值,返回set結構本身

(2)delete(value):刪除某個值,返回乙個布林值,表示刪除是否成功。

(3)has(value):判斷引數是否是set的成員,返回值為乙個布林值

(4)clear():清除所有成員,沒有返回值

let set = new set();

set.add("a");

set.add("b");

set.add("a");

console.log(set); //set

console.log(set.size); //2

console.log(set.has("c")); //false

console.log(set.has("a")); //true

set.delete("b"); //返回boolean ,表示是否刪除成功

console.log(set); //set

set.clear(); //清除所有成員

console.log(set);//set {}

ES6常用語法

var var name woniu console.log name imooc let 塊級作用域 console.log name imooc let是塊級作用域,只有在括號內部才可以獲取到,外部是獲取不到的 const 塊級作用域 用處當我們很多人協作開發乙個專案的時候,希望乙個變數不會被修...

ES6常用語法

let宣告的變數不存在預解析 例如,使用var呼叫如下 不會出錯 alert inum var inum 10 預解析 預編譯 不報錯但是使用let會報錯 let不能預解析 下面的寫法會報錯 alert inum let inum 10 let宣告的變數不允許重複 同乙個作用域 下面方式不會報錯 如...

ES6常用語法

宣告變數let和const let宣告的變數不存在預解析 console.log flag var flag 123 let flag 456 let宣告的變數不允許重複 在同乙個作用域內 let flag 123 let flag 456 console.log flag es6引入了塊級作用域 ...