函数与Symbol-CSDN博客

本文链接：https://blog.csdn.net/rolanannn/article/details/130834757

1.数字类型的用法

(1)、传统写法

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

ES5中的写法是：

console.log(isNaN(2.5));

console.log(window.isNaN('2.5'));

两个都是false 单纯的isNaN相当于window.isNaN会进行隐式转化 number的isNaN不会

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

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

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

console.log(Number.isNaN(2.5)); false

console.log(Number.isNaN("ccc")); false

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

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

(2)、Number.isNaN函数

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

由于2.5是一个number类型的数值，所以返回false（再次注意：判断是非数值，所以是false，表示2.5是一个数值类型的值）。

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

Number.isNaN()不会进行隐式转换

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

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

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

(3)、Number.isFinite函数

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

注意是判断非无穷，不是判断无穷，这里跟isNaN函数一样

console.log(Number.isFinite(1)); true 数值1不是无穷的

console.log(Number.isFinite(Infinity)); 数值类型只有一个是错误的就是infinity

也只是对数值类型有效，对非数值类型的参数一律返回false。

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

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

console.log(Number.isFinite("abc")); 因为没有隐式类型转换所以字符串之类的也是false

(4)、Number.parseInt函数

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

Number.parseInt函数

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

console.log(parseInt("12.13abc")); 传统用法返回数值12

console.log(Number.parseInt("12.3")); es6用法返回数值12

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

(5)、Number.isInteger函数

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

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

console.log(Number.isInteger("1.2")); false

console.log(Number.isInteger(1.2)); false

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

console.log(Number.isInteger(1)); true

console.log(Number.isInteger(1.000)); true

console.log(Number.isInteger(1.001)); false

数值1.0和1.00都会被认为是整数。

(6)、Math.trunc函数

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

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

console.log(Math.trunc("3.29")); 3

console.log(Math.trunc("aaaaa")); NaN

console.log(Math.trunc(3)); 3

console.log(Math.trunc(3.2)); 3

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

Math.sign函数

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

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

console.log(Math.sign(3)); 1

console.log(Math.sign(-3)); -1

console.log(Math.sign(0)); 0

console.log(Math.sign('aaa')); NaN

参数如果是正数，结果返回1；如果是负数，结果返回-1；如果是0，结果返回0；如果是一个非数值类型的参数，结果返回：NaN

对象传统写法

let person = {

"name" : 'zs',

"age" : 18,

"say":function(){

console.log('the world');

}

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

ES6中的简洁写法：

var name = "zs"

var age = 18

var person = {

"name" : name,

"age" : 18

}

var person = { name, age }

console.log(person);

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

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

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

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

var person = {

say:function(){

console.log('喜欢说话');

}

传统表示法

ES6表示法

var person = {

say() {

console.log('喜欢说话');

}

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

ECMAScript6中属性名的更新

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

var f = 'first'

var n = 'name'

var s = 'say'

var h = 'hello'

var person = {

[ f+n ] : 'zhang',

[ s+h] (){

return '我是一个好忍者麻';

}

console.log(person.firstname);

console.log(person.sayhello());

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

Object.is函数函数的作用：比较两个值是否严格相等，或者说全等。严格相等和抽象相等：

var str = '12'

var num = 12

var num2 = 12

console.log(num == str); true

console.log(num === str); false

console.log(Object.is(str,num)); false

console.log(Object.is(num,num2)); true

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

这个充当目标对象

let str1 = { "a": 1 }

这个充当源对象

let str2 = { "b": 2, "c": 3 }

Object.assign(str1, str2)

console.log(str1); 现在str1是{"a":1,"b":2,"c":3}

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

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

let str3 = { "d": 4, "e": 5 }

Object.assign(str1, str2, str3)

console.log(str1); 现在str1是{"a":1,"b":2,"c":3,"d":4,"e":5}

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

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

var str1 = { "a": 1 }

var str2 = { "a": 2 }

var str3 = { "a": 3 }

Object.assign(str1, str2, str3)

console.log(str1); {"a":3}

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

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

Object.getPrototypeOf函数

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

function person() { }

函数都有一个预属性prototype对象给prototype添加一个say方法

person.prototype = {

say() {

console.log('hello');

}

实例化person对象赋值变量给allen

let allen = new person();

allen.say() 打印出hello

获取allen对象的prototype属性

console.log(Object.getPrototypeOf(allen)); 打印出say方法函数

前面部分都是关于面向对象的实现。把函数Person用new关键字调用，这个时候函数Person就相当于构造函数或者说是一个类，实例化后是一个对象，这个对象会继承Person类的prototype的属性和方法。上述例子中，也就是对象allen继承了一个say方法，可以直接调用

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

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

Object.setPrototypeOf函数函数作用:设置一个对象的prototype属性。

function person() {

}

person.prototype = {

say() {

console.log('这是打印出来了');

}

let allen = new person()

allen.say() 这是打印出来了

Object.setPrototypeOf(

allen, {

say() { console.log('这个是换了打印'); }

}

)

allen.say() 这个是换了打印

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

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

avascript中面向对象

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

function dog(name) {

this.name = name

}

把一些属性和方法定义在他的prototype对象上

dog.prototype = {

"type": "动物",

"say": function () {

console.log("他的名字叫" + this.name);

}

实例化

var dog = new dog('旺财');

dog.say() 他的名字叫旺财

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

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

.函数的使用 (1)、参数的默认值

传统方式：

function person(n, a) {

var name = n || 'zhangsan';

var rage = a || 18

}

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

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

ES6的写法：

function person(name = 'zhangsan', age = 25) {

console.log(name, age);

}

person() name = 'zhangsan',age = 25

person('tetls', 19) name = 'tetls',age = 19

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

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

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

错误写法

function person(age = 25,name){

console.log(name,age);

}

正确写法

function person(name, age = 25) {

console.log(name, age);

}

person()

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

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

function person(age = 18) {

console.log(age);

}

person() 18

person(undefined) 18

person(0) 0

person(null) null

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

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

function person(age = 18) {

let age = 19;

console.log(age);

}

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

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

function sum(result, ...values) {

console.log(values); 结果[1,2,3,4]

values.forEach(function (v, i) {

求和的结果存到result上

result += v

});

结果10

console.log(result);

}

存储求和结果的变量res

var res = 0;

调用sum函数

sum(res,1,2,3,4)

首先，我们会看到一个陌生的语法：...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参数必须是函数的最后一个参数，后面不能再跟其他参数，什么意思呢？看案例：

错误写法

function sum(result,...values,mult){

rest参数 ...values后面还有一个mult

}

正确写法

function sum(result,mult,...values){

rest参数 ...values放最后

}

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