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中数组、函数、迭代器常用的方法，欢迎各位大佬一起探讨！