2、函数、对象、对象方法函数的使用、扩展运算符、箭头函数

一、函数

1、数字类型的用法

带Number的先判断是不是数字类型

Number.isNaN() 判断是否是非数值

非数值返回 true
数值类型返回 false

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(false)); // false
console.log(Number.isNaN(null)); // false
console.log(Number.isNaN(undefined)); // false
console.log(Number.isNaN(2)); // false

Number.inFinite() 判断是非无穷（有限的）

有限的 true 无穷的 false

console.log(Number.isFinite(2.1231)); // true
console.log(Number.isFinite('2.1231')); //  false
console.log(Number.isFinite(Math.PI)); // true **
console.log(Number.isFinite(-Infinity)); // false
console.log(Number.isFinite(3.000000000)); // true
console.log(Number.isFinite(null)); // false
console.log(Number.isFinite(true)); // false

Number.parsetInt() 返回整数

Number.parseInt == parseInt

console.log(Number.parseInt('12.12312')); // 12
console.log(Number.parseInt(12.12312)); // 12
console.log(Number.parseInt(null)); //   NaN
console.log(Number.parseInt(undefined)); //  NaN
console.log(Number.parseInt('1.23')); // 1

Number.isInteger() 用来判断是否是整数

console.log(Number.isInteger(1)); // true
console.log(Number.isInteger('1')); // false
console.log(Number.isInteger(1.2222)); // false
console.log(Number.isInteger(null)); // false
console.log(Number.isInteger(undefined)); // false
console.log(Number.isInteger(1.0000000000)); // true

Math.trunc() 用于去除一个数的小数部分，返回整数部分

会隐式转换

console.log(Math.trunc(1.63214)); // 1
console.log(Math.trunc('1.23214')); // 1
console.log(Math.trunc(null)); // 0
console.log(Math.trunc(undefined)); // NaN
console.log(Math.trunc(1.00000)); // 1

Math.sign()用来判断一个数到底是正数、负数、还是零

正数返回1 负数返回-1 零返回0 非数值返回NaN

console.log(Math.sign(1.12321)); // 1
console.log(Math.sign(-1.12321)); // -1
console.log(Math.sign(0)); //0 
console.log(Math.sign(null)); // 0
console.log(Math.sign(true)); // 1
console.log(Math.sign(undefined)); // NaN

二、对象

1、对象的使用（3条）

在对象中，属性名和属性值一样，可以省略
在对象中，函数可以省略 : function
在对象中，表达式可以当做对象中的属性

let s ="say"
let h = 'hello'
let name = 'zs'
let obj = {name,age: 18,say() {//可以省略functionconsole.log("说话了");},[s + h](){//表达式可以当作属性console.log("sayHello");}
}
console.log(obj);//{name: 'zs', age: 18, say: ƒ}
obj.sayhello()//sayHello

删除对象中的属性 delete
- delete obj.age

2、对象的方法（6条）

Object.is() 比较两个值是否严格相等，或者是全等

console.log(Object.is(10, 10)); // true
console.log(Object.is(10, '10')); //false
console.log(Object.is(NaN, NaN)); // true

Object.assign(目标对象，源对象…) **

函数作用：将源对象的属性赋值到目标对象上
目标对象会改变源对象不会改变

var obj1 = { a: 1, b: 2,}
var obj2 = { c: 3, d: 4 }
var obj3 = { a: 6, e: 5 }
let obj4 = Object.assign(obj1, obj2, obj3) //跟obj1一样
console.log(obj1);//{a:6 b:2 c:3 d:4  e:5}  目标函数会改变
console.log(obj2);//{c:3 d:4} 源函数不会改变

对象深拷贝

let obj5 = Object.assign({}, obj3)
obj3.a = 8
console.log(obj3);//{a:8 e:5}
console.log(obj5);//a:6 e:5

Object.getPrototypeOf()

函数作用：获取一个对象的prototype属性

function Person() { }//构造函数
Person.prototype.name = 'zs'//原型
Person.prototype.age = 18//原型
var p1 = new Person()//实例化
console.log(Object.getPrototypeOf(p1));//{name: 'zs', age: 18}

Object.setPrototypeOf()

函数作用：设置一个对象的prototype属性
原型的指向会发生改变

Object.setPrototypeOf(p1, {color: 'red'
})
console.log(Object.getPrototypeOf(p1));//{color: 'red'}

Object.keys()

函数作用：获取对象中的属性名、

var obj3 = { a: 6, e: 5}
console.log(Object.keys(obj3));//['a', 'e']

Object.values()

函数作用：获取对象中的属性值

var obj3 = { a: 6, e: 5}
console.log(Object.values(obj3));//[6, 5]

三、函数的使用

1、初始化

2、||

相当于 if ()
如果运算符 || 左侧为true，直接返回左侧的值，否则返回右侧的值

function fn(age) {var age = age || 20console.log(age)
}
fn(false) // 20  
fn(null) //  20  
fn(true) // true 
fn(undefined) // 20  
fn(0) // 20 
fn(1) // 1

3、？？

除了null 和undefined其他传过来的都是直接执行

function fn(age) {var age = age ?? 20console.log(age);
}
fn(false) // false
fn(null) // 20
fn(true) //  true
fn(undefined) // 20
fn(0) // 0
fn(1) //  1

例子：

function fn1(name) {// var name = 'zs'  形参相当于var了一个  不能重复let name = 'ls'console.log(name);
}
fn1('zs')//程序会报错

4、扩展运算符 …

(1)、数组（6条）

遍历数组

var arr = [1, 2, 3, 4]
console.log(...arr);//1 2 3 4
console.log([...arr]);//[1 2 3 4]

当作数组中元素

var arr = [1, 2, 3, 4]
var arr1 = [0, ...arr]
console.log(arr1);// [0, 1, 2, 3, 4]

数组深拷贝

var arr = [1, 2, 3, 4]
var arr_2 = [...arr]
arr.unshift(5)//数组开头添加元素5
console.log(arr);//[5, 1, 2, 3, 4]
console.log(arr_2);//[1, 2, 3, 4]

函数的调用

var arr_1 = [0, 1, 2, 3, 4]
function fn(a, b, c) {console.log(a, b, c);
}
fn(arr_1[0], arr_1[1])//0 1 undefined
fn(...arr_1)//0 1 2

与解构赋值连用

var arr = [1, 2, 3, 4]
var [x, y, z] = [...arr]
console.log(x, y, z);//1 2 3

将伪数组转为真正数组

var str = '是web31'
console.log(Array.from(str));//['是', 'w', 'e', 'b', '3', '1']
console.log([...str]);//['是', 'w', 'e', 'b', '3', '1']

(2)、对象

遍历对象

要加 { }

var obj = {name: "zs",age: 18
}
console.log({ ...obj });//{name: 'zs', age: 18}

对象深拷贝

var obj = {name: "zs",age: 18
}
var obj_1 = { ...obj }
delete obj.age
console.log(obj);//{name: 'zs'}
console.log(obj_1);//{name: 'zs', age: 18}

合并

var a = { a: 1, b: 3 }
var b = { b: 2, ...a, }
console.log(a); //{a: 1, b: 3}  会覆盖前面的
console.log(b);//{b: 3, a: 1}

四、箭头函数（重点）

1、箭头函数格式

去掉function （）后面写 =>

var fn_1 = (name) => {console.log(name)//ls
}
fn_1("ls")

补充：

定时器函数打印出来是数字类型

let setInterval1 = setInterval(function () {
}, 1000)
console.log(setInterval1);//1

map也可以写成箭头函数

let arr = [1, 2, 3]
arr.map(function (item, index) {
})
arr.map((item, index) => {
})

2、箭头函数的特点（7条）

箭头函数只有一个参数可以省略小括号

var fn = x => {console.log(x)//10
}
fn(10)

箭头函数返回值只有一条语句可以省略return和 {}

// var fn_1 = (y) =>{ return y }
var fn_1 = y => y
console.log(fn_1(20))//20

箭头函数没有内置对象 arguments

var fn_2 = function () {console.log(arguments);//可以输出
}
fn_2()
var fn_2 = () => {console.log(arguments) //会报错 arguments is not defined
}
fn_2()

箭头函数不能是构造函数

//正常函数
var Person = function () { }
console.log(Person.prototype);//{}
var p1 = new Person()
console.log(p1);//Person {}
//箭头函数
var Person = () => { }
console.log(Person.prototype)//undefined
var p1 = new Person()
console.log(p1); // 会报错 Person is not a constructor

箭头函数的this不能发生改变，call() 和 apply() 能调用箭头函数

//正常的
var obj = { age: 18 }
var fn_3 = function () { console.log(this); }
fn_3() //window
fn_3.call(obj) //{age: 18}
fn_3.apply(obj) //{age: 18}
//箭头函数
var fn_3 = () => { console.log(this); }
fn_3()//window
fn_3.call()//window
fn_3.call(obj)//报错
fn_3.apply(obj)//报错

箭头函数没有原型对象（prototype原型）

var Person = () => { }
console.log(Person.prototype)//undefined

箭头函数的this指向父作用域（定义他的地方）

var birth = 2000
var obj = {birth: 1990,getAge: () => { //因为是箭头函数  所以指向父作用域  window 2000var fn = function () {return new Date().getFullYear() - this.birth;// 2024 - 2000};return fn();}
};
console.log(obj.getAge());//24