ES6中數組、函數、迭代器

ES6中數組、函數、迭代器

1、數組

1.1數組創建
Array.of()方法：

//ES5創建數組
let arr = new Array(1, 2, 3, 4);
console.log(arr);	

//ES6新增方法創建數組Array.of()
console.log(Array.of(1, 2, 3, 4));

效果：

由此可見這兩種用法其效果是相同的，那麼問題來了，既然效果是一樣的爲什麼要用它，接着我們看下不同點。

/*new Array()方式*/
let arr1 = new Array(3);
console.log("arr1長度："+ arr1.length);
console.log("arr1第一個元素："+arr1[0]);

/*Array.of()方式*/
let arr2 = Array.of(3);
console.log("arr2長度："+arr2.length);
console.log("arr2第一個元素："+arr2[0]);

由此可見，我們使用new Array()的方式如果填一個數值類型的參數，它是會默認變成數組的長度，假如我們要定義一個值使用Array.of()的方式是不是更輕鬆了。

1.2 Array.from()方法： 可以將指定的參數轉換爲真正的數組。當然並不是任意參數都是可以被轉換爲數組，可以轉換的有 1.類數組對象；2.具有遍歷器接口的對象。

let str = "asdfghjkl";
console.log(Array.from(str));

運行結果：

當然還有一點就是對象必須要有length屬性，不然會返回空數組

let arr1 = Array.from({
    0: '我',
    1: '愛',
    2: '編',
    3: '碼',
	length: 4
});
console.log(arr1); // ["我", "愛", "編", "碼"]
			 
// 沒有 length 屬性,則返回空數組
let arr2 = Array.from({
    0: '我',
    1: '愛',
    2: '編',
    3: '碼'
});
console.log(arr2); // []

運行結果：

1.3查找
在之前ES5的時候，我們要查找一個元素是需要for循環去查找的，但是現在有了以下幾個方法可以輕鬆的幫我們查找到某個元素。

1.3.1：find() 查找數組中符合條件的元素,如果有多個符合條件的元素，則返回第一個元素。
1.3.2：findIndex() 查找數組中符合條件的元素索引，如果有多個符合條件的元素，則返回第一個元素索引。
接下來我們看一下這兩個方法的使用：

let arr = Array.of(6, 7, 8, 9);
//查找數組中大於8的元素
console.log("數組中大於8的元素的值是："+arr.find(item => item > 8)); 
//查找數組中大於8的元素
console.log("數組中大於8的元素的下標是："+arr.findIndex(item => item > 8)); 

運行結果：

以上就是ES6中數組中新增的一些常用的方法。

2、函數

2.1默認函數

function fun1(name,age){
    console.log(name+","+age);
}

function fun2(name="張三",age=18){
    console.log(name+","+age);
}

運行結果：

從以上結果我們可以看到，如果我們設置個默認值，不傳參數，第一個函數是會出現undefined，而第二個函數調用時它是會用他的默認值的。

2.2不定參數
不定參數用來表示不確定參數個數，可以是一個或者多個，當然也可以不傳參數。
代碼：

function fun(... values){

}

其寫法只需在括號中使用三個點然後跟個參數名錶示即可。

2.3箭頭函數
簡單來說箭頭函數中的 this 對象是指向上一層函數的this引用，如果上一層也是箭頭函數那麼就繼續指向上一層。

var Person1 = {
		'age': 18,
		'fun1': ()=> {
		console.log("fun1中的age顯示:"+this.age); //100
	}
};
var age = 100;  //fun1中的this.age就會指向這個屬性
Person1.fun1();

3、迭代器

3.1 Iterator
使用Symbol.iterator 來創建一個迭代器，指向當前數據結構的起始位置，
之後通過 next()法進行向下迭代指向下一個位置， next() 方法會返回當前位置的對象，對象中包含了 value 和 done（Boolean類型）兩個屬性， value 是當前屬性的值， 而 done 則是用來判斷是否遍歷結束，當 done 爲 true 時則遍歷結束。

代碼：

let items = ["張三", "李四", "王五"];
let it = items[Symbol.iterator]();
let item1 = it.next();
 if (item1.done == false) {
	console.log(item1.value);
	
	
	let item2 = it.next();
	console.log(item2.value);
	if (item2.done == false) {
		let item3 = it.next();
		console.log(item3.value);
				
		if (item3.done == false) {
			let item4 = it.next();
			console.log(item4.value);
		}
 	}
 }

運行結果：

3.2 for…of循環
for…of循環 是 ES6 新增的循環方法，用於替代 for…in 和 forEach() ，並且支持新的迭代協議。它可以用來迭代一些常規的數據類型，如 Array 、 String 、 Map 和 Set 等等，其中Map的key或者value也是可以迭代的，他的用法跟for…in 和 forEach() 類似我就不做代碼演示了。

以上就是ES6中數組、函數、迭代器常用的方法，歡迎各位大佬一起探討！