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
所以同样要注意,当Number.isFinite函数返回false的时候,参数不一定就是一个有穷的数值类型,也有可能是一个非数值类型的参数。如:字符串’abc’。
(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参数后面不能再跟有其他参数
rest参数并不是适合所有的函数使用,只在特定的情境下会比较适用,比方说刚刚案例中的求和函数,就十分适合要rest参数把实际的参数收集起来放在数组中进行求和,在适当的情况下使用它可以事半功倍,减少代码量,提高开发效率。
扩展运算符
上面讲到的rest参数,它的表示法使用...(三个点),它除了用在rest参数中,还有其他用途,我们称这种表示法为扩展运算符,那么,它还有什么作用呢?
它一般结合数组使用,把数组的元素用逗号分隔开来,组成一个序列。我们看一下实际案例
拓展 tuozhan
var arr = [10, 20, 30, 40];
1、遍历数组
console.log(...arr);
2、当做数组的元素
console.log("哈哈", 10, 20, 30, 40, true); 哈哈 10 20 30 40 true
console.log(["哈哈", ...arr, true]); ['哈哈',10,20,30,40,true]
3、用于深拷贝
var arrNew = [];
arrNew = [...arr];
[...arrNew] = arr;
console.log(arrNew); 10,20,30,40
arr.push(50);
console.log(arr); 10,20,30,40,50
console.log(arrNew); 10,20,30,40
4、用于函数的调用
function demo1(x, y, z, m) {
console.log(x + y + z + m);
}
demo1(arrNew[0], arrNew[1], arrNew[2], arrNew[3]); 100
demo1(...arrNew); 100
5、与解构赋值结合
var [a, ...arr1] = arrNew;
console.log(a, b, c, d);
console.log(a, ...arr1); 10,20,30,40
6、转化成真正的数组
var str = "hello";
var arrStr = Array.from(str);
console.log(arrStr); ['h','e','l','l','o']
console.log(...str); hello
console.log([...str]); ['h','e','l','l','o']