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));

效果:

es6 获取数组属性的和_es6 获取数组属性的和

由此可见这两种用法其效果是相同的,那么问题来了,既然效果是一样的为什么要用它,接着我们看下不同点。

/*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]);

es6 获取数组属性的和_数组_02

由此可见,我们使用new Array()的方式如果填一个数值类型的参数,它是会默认变成数组的长度,假如我们要定义一个值使用Array.of()的方式是不是更轻松了。

1.2 Array.from()方法: 可以将指定的参数转换为真正的数组。当然并不是任意参数都是可以被转换为数组,可以转换的有 1.类数组对象;2.具有遍历器接口的对象。

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

运行结果:

es6 获取数组属性的和_迭代_03


当然还有一点就是对象必须要有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); // []

运行结果:

es6 获取数组属性的和_ES6_04


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 获取数组属性的和_es6 获取数组属性的和_05


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

2、函数

2.1默认函数

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

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

运行结果:

es6 获取数组属性的和_es6/es7_06


从以上结果我们可以看到,如果我们设置个默认值,不传参数,第一个函数是会出现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);
		}
 	}
 }

运行结果:

es6 获取数组属性的和_ES6_07

3.2 for…of循环
for…of循环 是 ES6 新增的循环方法,用于替代 for…in 和 forEach() ,并且支持新的迭代协议。它可以用来迭代一些常规的数据类型,如 Array 、 String 、 Map 和 Set 等等,其中Map的key或者value也是可以迭代的,他的用法跟for…in 和 forEach() 类似我就不做代码演示了。

以上就是ES6中数组、函数、迭代器常用的方法,欢迎各位大佬一起探讨!