ES6函数、迭代器

前言

今天给大家介绍ES6中的函数、迭代器的新特性。废话不多说，进入正题！

1.函数

函数参数的扩展

• 默认参数

function sayHi(name,age=17){
	console.log(name+","+age);	
}
sayHi("六十元",18);//六十元,18
sayHi("六十元","");//六十元,
sayHi("六十元");//六十元,17

在使用默认参数时，不允许有同名的参数。

function sayHi(name,name,age=17){//SyntaxError: Duplicate parameter name not allowed in this context
	console.log(name+","+age);
}
//不使用默认参数时，允许同名参数
function sayHi(name,name,age){//编译通过
	console.log(name+","+age);//如出现同名参数，则只会使用最后面传进来的name参数值，第一个值会被覆盖掉。
}

只有在未传递参数时，或者参数为undefined时，才会使用默认参数值。null也会作为参数。

function sayHi(name,age=17){
	console.log(name+","+age);	
}
sayHi("六十元",null);

默认参数存在暂时性死区，在默认参数表达式中，未进行初始化赋值的参数值无法作为其它默认参数的默认值。

function sayHi(weight,age=weight){
	console.log(weight+","+age);
}
sayHi(100);//100,100
sayHi(100,200);//100,200
sayHi(100);//undefined,undefined
function sayHi2(a=b){
	console.log(a);
}
sayHi();//ReferenceError: x is not defined
sayHi(1);//1

• 不定参数：顾名思义就是不确定的参数列表，具体多少个参数，由实参的个数决定。

function go(...value){
	console.log(value.length);
}
go(1,2,3);//3
go();//0

箭头函数

基本语法：参数 => 函数体

基本用法：

let count = item => item * 2;
console.log(sayHi(2));//4
console.log(sayHi(3));//6

//等同于
let count = function(item){
	return item * 2;
}

当有多个参数时，需要使用（）括起来。

let count = (num,num2) => num*num2;
console.log(sayHi(3,3));//9

//等同于
let sayHi = funntion(num,num2){
	return num * num2;
}

当函数体有多行语句时，需使用 {} 括起来。表示代码块。

let count = (num,num2) => {
	let result = num * num2;
	return result;
}
sayHi();

当需要返回对象时，为了区分于代码块，需要用（）括起来。

let object = (name,age) => ({name:name,age:age});
object("六十元",18);

注意点：

• 箭头函数中没有this、super、arguments和new.target绑定。

let test = (age) => {
	console.log(this.age);//此时的this是外层的this，即window
}
test(55);//undefined

• 箭头函数中的this对象，是上一层定义函数时的this对象，而不是使用时的函数对象。

function test(){
	setTimeout(() => {
		console.log(this.a);//此时的this是fn的函数
	});
}
var a = 25;
test();//输出的是25
test.call({a:15});//输出15

适用的场景

在ES6之前也就是ES5的时候，JavaScript中的this对象一直很令人头疼，在回调函数中需要调用外面一层的this对象，
那么就经常可以看到var self = this这段代码，为了外部this对象能够被回调函数中访问。那么有了箭头函数，就不用这样做了。

let user = {
	name : "六十元",
	sayHi(){
		setTimeout(function () {
			console.log(this.name);//此时的this为window
		});
	}
};
var name = "柳时元";
user.sayHi();//输出柳时元
let user = {
	name : "六十元",
	sayHi(){
		setTimeout(() => {
			console.log(this.name);//此时的this为user对象
		});
	}
};
var name = "柳时元";
user.sayHi();//输出六十元

所以，当我们需要维护this上下文关系的时候，就得用到箭头函数。

不适用的场景

使用箭头函数定义一个方法，该方法包含this。

let user = {
	name : "六十元",
	sayHi :() => {
		console.log(this.name);//此时的对象为window
	}
};
var name = "柳时元";
user.sayHi();//输出柳时元
let user = {
	name : "六十元",
	sayHi(){
		console.log(this.name);//此时的对象为user
	}
};
var name = "柳时元";
user.sayHi();//输出六十元

2.迭代器

迭代器是ES6引入的一种新遍历机制

核心概念：

• 迭代器是一个统一的接口，是用来使各种数据结构元素被便捷访问的，是通过一个建Symbol.iterator的方法来实现。
• 用于遍历数据结构元素的指针。

可迭代对象：

• Array
• String
• Map
• Set
• 类数组对象

不可迭代对象：

• WeakMaps
• WeakSets

迭代过程如下：

• 通过Symbol.iterator创建一个迭代器，指向可迭代对象的起始位置。
• 通过迭代器的next()方法进行向下迭代指向下一个位置，next()方法会返回当前位置的对象，对象中包含value属性和done属性，value属性为当前值，done属性用于判断是否遍历结束。
• 遍历结束返回true。

下面使用一个简单例子演示一下：

let array = Array.of(1,4,6,"六十元");
let iterator = array[Symbol.iterator]();

iterator.next();//{value: 1, done: false}
iterator.next();//{value: 4, done: false}
iterator.next();//{value: 6, done: false}
iterator.next();//{value: "六十元", done: false}
iterator.next();//{value: undefined, done: true}

如图：

迭代器是协议的一部分，用于遍历，该协议的关键特性就是它是顺序的，一次返回一个值。这意味着如果迭代的对象是非线性的（例如树），那么迭代器会将其线性。

下面我们使用for…of循环，对数据结构进行迭代。

Array

String

Map

Set

类数组对象：类似于数组结构的对象，在循环前必须得使用Array.from()方法进行转换。

arguments在ES6中使用的越来越少了，但也是可以遍历的。

普通对象不可迭代

在使用for循环时，建议尽量不要使用var，因为它属于全局变量，每次循环的时候都不会创建一个新的存储空间。
反之let和const如果出现在一个代码块中，会将该区域形成一个暂时性死区。使其每次循环时都会创建一个新的存储空间（也就是一个新变量），这可以保证作用域在循环的内部。

使用const，迭代对象。

可以看见，在最后一行输出num时会报错，原因就是num变量的作用域只在for循环內。外部访问不到。

使用var，迭代对象。

结束语

今天ES6中的函数和迭代器就介绍到这里了，谢谢大家的观看，后面还好持续更新ES6其他的内容。