函数与箭头函数

• 函数与Symbol

• 完成变量值的互相交换

• 利用symbol对数组去重

• 箭头函数this指向

利用symbol对数组去重

• 箭头函数this指向

• 掌握数字类型新用法

• 掌握对象新用法

• 掌握箭头函数

• 掌握拓展运算符

• 熟练运用symbol类型

1.数字类型的用法

(1)、传统写法

在ES5中，我们存在几个全局函数 isNaN函数，isFinite函数，parseInt函数，parseFloat函数等，对于这些全局函数的使用很简单，就拿isNaN函数来举例。

ES5中的写法是：

以上两种写法均可，isNaN是全局函数，本身就是属于window对象下的一个方法，所以大部分人会使用第一种写法。

但是在ES6的标准中，isNaN方法被移植到了Number对象上，也就是原本属于全局对象window下的函数，现在属于Number对象上了，同样被处理的函数还有isFinite函数，parseInt函数，parseFloat函数。

被移植后的函数使用方式是这样的：

在使用之前必须指明它是Number对象下的函数，否则会被默认为window下的函数。

(2)、Number.isNaN函数

Number.isNaN函数：用于判断传入的是否是非数值，注意：是判断非数值，而不是判断数值，IsNaN的全称是： is not a number。

那么，移植到Number对象isNaN函数和原本是全局函数的isNaN函数，有不一样的地方吗？ 传统的isNaN函数会把非数值的参数转化成数值再进行判断，而Number. isNaN只对数值类型有效，非数值类型的参数一律返回false。

Number下面的isNaN都懒得给字符串’abc’做类型转换，直接返回false。而ES5中的isNaN函数会对字符串’abc’进行类型转换后，发现它是一个NaN（非数值），才返回true。

所以我们在使用这个函数到时候还要小心，当返回false的时候，不一定就是一个数值，有可能是一个非数值类型的参数。

(3)、Number.isFinite函数

Number.isFinite函数：用来检查一个数值是否非无穷。注意是判断非无穷，不是判断无穷，这里跟isNaN函数一样，有点绕。

注意第二行代码的参数：Infinity，Infinity是window对象下的一个常量，表示一个无穷数。所以第二行代码会返回false。此外，isFinite函数跟isNaN函数一样，也只是对数值类型有效，对非数值类型的参数一律返回false。

所以同样要注意，当Number.isFinite函数返回false的时候，参数不一定就是一个有穷的数值类型，也有可能是一个非数值类型的参数。如：字符串’abc’。

(4)、Number.parseInt函数

parseInt函数：解析一个字符串，返回一个整数。parseInt函数同样是从window对象下移植到Number对象下，但是它的作用没有任何变化。

以上函数都是在window对象下，移植到了Number对象下，这么做的目的是慢慢地减少全局性的函数，把全局函数合理地规划到其他对象下，渐渐实现语言的模块化。

(5)、Number.isInteger函数

Number.isInteger函数：用来判断是否是整数。

上面的运行结果也如我们所料，数值3.2不是整数，返回false。不过有一点要注意：在javascript内部对整数和浮点数采用一样的存储方式，因此小数点后如果都是0的浮点数，都会被认为是整数。看个例子就知道了：

数值3.0和3.00都会被认为是整数。

(6)、Math.trunc函数

Math.trunc函数：用于去除一个数的小数部分，返回整数部分。

运行结果也很好理解，如果传入的参数是整数，就直接返回整数，如果是小数，就去除了小数部分，返回整数部分：3。

(7)、Math.sign函数

Math.sign函数：用来判断一个数到底是正数、负数、还是零。

返回的结果类型有点多，我们分别来讲解一下，参数如果是正数，结果返回1；如果是负数，结果返回-1；如果是0，结果返回0；如果是一个非数值类型的参数，结果返回：NaN

2.对象的使用

(1)、对象的传统写法

传统表示法：

上面的案例很简单，变量person就是一个对象，对象含有name属性和一个say方法。表示法是用键值对的形式来表示，这就是传统的表示法。

ES6中的简洁写法：

咱们来讲解一下上面这个案例，首先定义两个变量name和age，分别用传统的写法和ES6中的写法，把变量作为person对象的属性值。第一种写法大家很熟悉，使用键值对的表示法，而ES6中的新写法只是简单地用两个变量名即可，而得到的结果跟传统的写法一样。

这也就是新的写法更简捷了，变量名可以作为键值对的键（变量名name和age），而变量的名作为值（变量的值Zhangsan和12），最后一起组成了person对象的内容{name:”Zhangsan”,age:12}。

对象的属性可以这样简写，那么对象的方法表示呢？

我们来讲解方法的简写表示法：

  

通过上面的案例，可以看出两种写法的区别，不管是属性还是方法，确实ES6给我们带来的表示法更加简捷，代码量更少。

(2)、ECMAScript6中属性名的更新

用字面量定义一个对象的时候，可以用表达式作为对象的属性名或者方法名。

注意上面person对象的定义，其中属性名和方法名都是用中括号[ ]包裹着，里面都是一个字符串相加的表达式，这就告诉我们，用字面量（大括号{ }）定义对象的时候，属性名和方法名可以是一个表达式，表达式的运算结果就是属性名或者方法名。这点改进会使得对象在实际开发中的使用变得更加的灵活方便。

(3)、Object.is函数

函数的作用：比较两个值是否严格相等，或者说全等。

严格相等和抽象相等：

可以看到，抽象相等用“==”表示，严格相等用“===”表示，进行严格相等判断的时候，首先要求类型是一样的，否则会直接返回false。

所以上面的例子中，变量str和变量num一个是字符串类型，一个是数字类型，所以结果是false，而抽象相等会对类型不一致的两个变量进行类型转化，转成同一类型再进行判断。“12”转换成数字类型得到12，再进行比较后得到的结果是true。

上述的执行结果跟我们预期的一样，参数类型不一样str和num进行比较，得到的结果是false。变量类型和值都一样的num和num2进行比较，得到的结果是true。

(4)、Object.assign函数

函数作用：将源对象的属性赋值到目标对象上。（assign [əˈsaɪn] :分派、指派、委派）这么讲肯定是有点抽象的，咱们用案例说话，更直观更形象：

注意输出的结果，target对象已经不是{ a:1 }了，而是变成了{a: 1, b: 2, c: 3}，经过Object.assign( )函数的处理，源对象的属性被添加到了target对象上。这就是Object.assign( )函数的作用。

此外，Object.assign( )函数的参数还可以是多个（至少是两个）。我们在上面的案例稍做修改，加一个参数：

我们从最后打印出来的结果可以看出，对象origin1和对象origin2的属性都被添加赋值到了对象target上。也就是Object.assign( )函数参数中的源对象可以是一个或者一个以上，而目标对象只有一个。

那么，如果赋值过程中，对象的属性出现了相同的名字怎么办？如果这样，后面的属性值就会覆盖前面的属性值。还是上面的案例稍做修改，看代码：

每个对象属性都含有属性a，它的值从1到最后变成了3，也就是Object.assign()函数处理的过程中，会把最后出现的属性覆盖前面的同名属性。

巧妙利用Object.assign( )函数的功能，我们可以完成很多效果，比如：给对象添加属性和方法，克隆对象，合并多个对象，为对象的属性指定默认值。

(5)、Object.getPrototypeOf函数

函数作用：获取一个对象的prototype属性。这里的对象我们用一个自定义类实例出来的对象来演示。

这个案例代码有点长，但是为了大家能看懂，我把注释写得比较详细，前面部分都是关于面向对象的实现。把函数Person用new关键字调用，这个时候函数Person就相当于构造函数或者说是一个类，实例化后是一个对象，这个对象会继承Person类的prototype的属性和方法。上述例子中，也就是对象allen继承了一个say方法，可以直接调用。

如果你想看看prototype中还有哪些方法和属性，那么，你就可以使用Object.getPrototypeOf( )函数来获取，参数就是allen对象，最后的结果也如我们所料，确实打印出了我们刚开始定义好的内容：一个对象，含有一个say方法{say:function(){.....}}。

那么，如果我想为这个对象修改prototype的内容，要怎么办？这个时候，我们可以用ES6给我们的另一个方法。

(6)、Object.setPrototypeOf函数

函数作用：设置一个对象的prototype属性。

上面的代码，我们使用Object.setPrototypeOf()函数对对象的prototype属性进行了修改，具体的修改是重写了say方法。在修改前，我们曾经调用过一次say( )方法，得到的结果是打印hello，修改之后我们再一次调用allen.say( )；得到的结果是打印出hi，说明我们修改成功了。

最后两个函数Object.getPrototypeOf()和Object.setPrototypeOf()的案例代码有点长，涉及到了javascript的面向对象内容。新手如果没有接触过面向对象的话，读起来一定会懵逼，这里有必要拓展一下javascript的面向对象。

(7)、Javascript中面向对象

Javascript本身不是一种面向对象的编程语言，在ES5中，它的语法中也没有class（类的关键字），但是，开发者可以利用对象的原型prototype属性来模拟面向对象进行编程开发。

上面的案例告诉我们，模拟面向对象编程有几个关键步骤：1、构造函数；2、给prototype对象添加属性和方法；3、实例化；4、通过实例化后的对象调用类的方法或者属性。

注意：面向对象是一种编程思想，并不是具体的工具。

3.函数的使用

(1)、参数的默认值

传统方式：

上面是传统的实现方式，通过或运算实现，原理：如果运算符 || 左侧为true，直接返回左侧的值，否则返回右侧的值； 在person函数内，如果参数n没有传参，那么变量name得到的值就是“Zhangsan”，如果传参了，变量name的值就为参数n的值。

但是，前提是参数对应的布尔值不能false（比如：数字0，空字符串等转换成布尔值就是false），这就使得这种传统的实现方式存在一定的不足和缺陷。

ES6的写法：

看，我们把默认值的设定放在了参数上：(name = 'Zhangsan',age = 25)，这样就实现了参数name的默认值为‘Zhangsan’，age的默认值为25。而不需要在函数体内进行检测，函数体内可以专注对参数的使用或者运算，再也不用担心函数的实际传参情况了。

上面的案例，我们对person( )函数进行两次调用，区别是有传参数和没传参数，运行的结果也符合我们的预期：没传参，得到的是默认值Zhangsan 25，传参就会得到传入的参数值：Lisi 18。

但是，多留个心眼，凡事总会有但是，如果函数有多个参数，但只有部分需要指定默认值，另一部分不需要的话，那么，设定默认值的参数一定要放在最后。看案例：

上面的person函数，两个参数name和age，其中只有age需要指定默认值，name不需要，那么，age的排序就必须放在最后，name放在前面。也就是有默认值的参数后面不能再跟不需默认值的参数了。

另外，只有当传入的参数为undefined，才会触发默认值赋值。否则，哪怕你传的参数值为0，false，null都不会触发默认值赋值，这就完美的解决了传统实现方式的弊端，试试看：

看person( )函数的4次调用和结果，只有不传或者传入undefined的时候才会触发默认值赋值，得到12，传入数字0或者null都不会触发默认值赋值。

还有一个要注意的地方，函数的参数是默认声明的，声明过的变量，就不能用let或者const关键字再次声明，否则会报错的，不信给你看一个案例：

上面这种情况，函数被调用后，就会报错，会提示你age已经被声明过了，你别再声明它了。

(2)、rest参数

rest参数，这是一个新的概念，rest的中文意思是：剩下的部分。

上面的代码注释把每一步都写得很详细，首先，我们会看到一个陌生的语法：...values；咦？这是什么鬼？这是一种新的写法，也就是我们要介绍的rest参数，它代表的意思是：在实参中，除了第一个参数以外，剩余的参数都会被...values获取到。

在上面的案例中：sum(res,1,2,3,4)，也就是除去实参 res 以外的参数，它们是1,2,3,4一共4个参数。它们全被...values收入囊中，接着，我们打印了values，看到的结果是一个数组：[1,2,3,4]，也就是这4个参数被装在了一个数组中，我们想要使用这4个参数的话，就可以用数组的方法来对他们进行处理，所以我们用了forEach方法对它们进行了循环，并求和，把求和结果存储到了变量res中，最后我们打印出结果，得到了数字10，也就是数字1,2,3,4的求和结果。

（上面这段有点长，耐心读完了吗？读不懂，可以拉上去再阅读一遍上面的代码案例）

上面的案例主要是介绍了rest参数的用法，首先是表示法：...values（三个点+变量名）；其次，values是一个数组；我们要学会这两点即可。

要注意的是，rest参数必须是函数的最后一个参数，后面不能再跟其他参数，什么意思呢？看案例：

上面有错误和正确的两种表示，在注释上有说明原因。总之rest参数后面不能再跟有其他参数。

rest参数并不是适合所有的函数使用，只在特定的情境下会比较适用，比方说刚刚案例中的求和函数，就十分适合要rest参数把实际的参数收集起来放在数组中进行求和，在适当的情况下使用它可以事半功倍，减少代码量，提高开发效率。

(3)、扩展运算符

上面讲到的rest参数，它的表示法使用...（三个点），它除了用在rest参数中，还有其他用途，我们称这种表示法为扩展运算符，那么，它还有什么作用呢？

它一般结合数组使用，把数组的元素用逗号分隔开来，组成一个序列。我们看一下实际案例

// 拓展 tuozhan

var arr = [10, 20, 30, 40];

// 1、遍历数组

console.log(...arr);

// 2、当做数组的元素

console.log("哈哈", 10, 20, 30, 40, true);

console.log(["哈哈", ...arr, true]);

// 3、用于深拷贝

var arrNew = [];

// arrNew = [...arr];

[...arrNew] = arr;

console.log(arrNew);

arr.push(50);

console.log(arr);

console.log(arrNew);

// 4、用于函数的调用

function demo1(x, y, z, m) {

console.log(x + y + z + m);

}

demo1(arrNew[0], arrNew[1], arrNew[2], arrNew[3]);

demo1(...arrNew);

// 5、与解构赋值结合

var [a, ...arr1] = arrNew;

// console.log(a, b, c, d);

console.log(a, ...arr1);

// 6、转化成真正的数组

var str = "hello";

var arrStr = Array.from(str);

console.log(arrStr);

console.log(...str);

console.log([...str]);

4.箭头函数

箭头函数，这又是一个新概念，ES6给我们介绍一种全新的定义函数的方式，就是用箭头符号（=>），故得名为箭头函数。具体怎么用，我们来看案例：

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

(1)、基础语法

通常函数的定义方法

var fn1 = function(a, b) {

return a + b

}

function fn2(a, b) {

return a + b

}

使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。

var fn1 = (a, b) => {

return a + b

}

(a, b) => {

return a + b

}

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

// 无参

var fn1 = function() {}

var fn1 = () => {}

// 单个参数

var fn2 = function(a) {}

var fn2 = a => {}

// 多个参数

var fn3 = function(a, b) {}

var fn3 = (a, b) => {}

// 可变参数

var fn4 = function(a, b, ...args) {}

var fn4 = (a, b, ...args) => {}

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ ... }和return。还有一种可以包含多条语句，这时候就不能省略{ ... }和return

() => return 'hello'

(a, b) => a + b

(a) => {

a = a + 1

return a

}

如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的{ ... }有语法冲突。

注意，用小括号包含大括号则是对象的定义，而非函数主体

x => {key: x} // 报错

x => ({key: x}) // 正确

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。（词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变 。

(2)、箭头函数基本特点

(1). 箭头函数this为父作用域的this，不是调用时的this

箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。

普通函数的this指向调用它的那个对象。

let person = {

name:'jike',

init:function(){

//为body添加一个点击事件，看看这个点击后的this属性有什么不同

document.body.onclick = ()=>{

alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？

}

}

}

person.init();

上例中，init是function，以person.init调用，其内部this就是person本身，而onclick回调是箭头函数，

其内部的this，就是父作用域的this，就是person，能得到name。

let person = {

name:'jike',

init:()=>{

//为body添加一个点击事件，看看这个点击后的this属性有什么不同

document.body.onclick = ()=>{

alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？

}

}

}

person.init();

上例中，init为箭头函数，其内部的this为全局window，onclick的this也就是init函数的this，也是window，

得到的this.name就为空，因为window默认name属性为空。

(2). 箭头函数不能作为构造函数，不能使用new

//构造函数如下：

function Person(p){

this.name = p.name;

}

//如果用箭头函数作为构造函数，则如下

var Person = (p) => {

this.name = p.name;

}

由于this必须是对象实例，而箭头函数是没有实例的，此处的this指向别处，不能产生person实例，自相矛盾。

(3). 箭头函数没有arguments，caller，callee

箭头函数本身没有arguments，如果箭头函数在一个function内部，它会将外部函数的arguments拿过来使用。

箭头函数中要想接收不定参数，应该使用rest参数...解决。

let B = (b)=>{

console.log(arguments);

}

B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined

let C = (...c) => {

console.log(c);

}

C(3,82,32,11323); // [3, 82, 32, 11323]

(4). 箭头函数通过call和apply调用，不会改变this指向，只会传入参数

let obj2 = {

a: 10,

b: function(n) {

let f = (n) => n + this.a;

return f(n);

},

c: function(n) {

let f = (n) => n + this.a;

let m = {

a: 20

};

return f.call(m,n);

}

};

console.log(obj2.b(1)); // 11

console.log(obj2.c(1)); // 11

(5). 箭头函数没有原型属性

var a = ()=>{

return 1;

}

function b(){

return 2;

}

console.log(a.prototype); // undefined

console.log(b.prototype); // {constructor: ƒ}

(6). 箭头函数不能作为Generator函数，不能使用yield关键字

(7). 箭头函数返回对象时，要加一个小括号

var func = () => ({ foo: 1 }); //正确

var func = () => { foo: 1 }; //错误

(8). 箭头函数在ES6 class中声明的方法为实例方法，不是原型方法

//deom1

class Super{

sayName(){

//do some thing here

}

}

//通过Super.prototype可以访问到sayName方法，这种形式定义的方法，都是定义在prototype上

var a = new Super()

var b = new Super()

a.sayName === b.sayName //true

//所有实例化之后的对象共享prototypy上的sayName方法

//demo2

class Super{

sayName =()=>{

//do some thing here

}

}

//通过Super.prototype访问不到sayName方法，该方法没有定义在prototype上

var a = new Super()

var b = new Super()

a.sayName === b.sayName //false

//实例化之后的对象各自拥有自己的sayName方法，比demo1需要更多的内存空间

因此，在class中尽量少用箭头函数声明方法。

(9). 多重箭头函数就是一个高阶函数，相当于内嵌函数

const add = x => y => y + x;

//相当于

function add(x){

return function(y){

return y + x;

};

}

(10). 箭头函数常见错误

let a = {

foo: 1,

bar: () => console.log(this.foo)

}

a.bar() //undefined

bar函数中的this指向父作用域，而a对象没有作用域，因此this不是a，打印结果为undefined

function A() {

this.foo = 1

}

A.prototype.bar = () => console.log(this.foo)

let a = new A()

a.bar() //undefined

原型上使用箭头函数，this指向是其父作用域，并不是对象a，因此得不到预期结果

(3)、this的指向实例

var obj = {

birth: 1990,

getAge: function(){

console.log(new Date().getFullYear() - this.birth); //this指向obj对象

},

}

obj.getAge(); // 29

var obj = {

birth: 1990,

getAge: function () {

var b = this.birth; // 1990

var fn = function () {

return new Date().getFullYear() - this.birth; // this指向window或undefined

};

return fn();

}

};

obj.getAge();// NaN

var obj = {

birth: 1990,

getAge: function () {

var b = this.birth; // 1990

var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象

return fn();

}

};

obj.getAge(); // 29

var obj = {

getAge: () => {

console.log(this); // window

}

};

obj.getAge(); //window

作为对象的属性时，this的指向则不再是对象本身了，箭头函数捕获的是obj{}这个对象的环境，然后这个环境的this指向的是window