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

一、函数

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() {//可以省略function
         console.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，直接返回左侧的值，否则返回右侧的值
  == false 0 undefined null返回右侧==

function fn(age) {
  var age = age || 20
  console.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 ?? 20
    console.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)、对象（3条）

• 遍历对象

• 要加 { }

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 2000
        var fn = function () {
            return new Date().getFullYear() - this.birth;// 2024 - 2000
        };
        return fn();
    }
};
console.log(obj.getAge());//24

五、symbol（唯一值）

• symbol的类型

let sy1 = Symbol()
console.log(typeof sy1)//symbol   symbol类型的

• symbol声明的变量是独一无二的

let sy2 = Symbol('a')
let sy3 = Symbol('a')
console.log(sy2 == sy3)//false  两个不一样

• ==初衷：==为了解决对象中属性名冲突的问题

let a = Symbol("a")
let obj = {a:1, b:2, [a]:3}
console.log(obj)// {a: 1, b: 2, Symbol(a): 3}
console.log(obj.a)//1
console.log(obj[a])//3

• for in 和 keys遍历 不能获取symbol的属性

for (let key in obj) {
  console.log(key) //只能获取a和b
}
console.log(Object.keys(obj));//['a', 'b'] 不能获取symbol

• Object.getOwnPropertySymbols函数 只能获取symbol类型

console.log(Object.getOwnPropertySymbols(obj))//[Symbol(a)]

• Reflect.ownKeys函数 获取所有属性名 (重点)

console.log(Reflect.ownKeys(obj));//['a', 'b', Symbol(a)]

• Symbol.for() 函数（了解）
• 函数作用：根据参数名，去全局环境中搜索是否有以该symbol.for()参数为名的symbol值，有就返回他，没有就以该参数名来创建一个新的symbol值

let a_1 = Symbol.for('b')
let a_2 = Symbol.for('b')
console.log(a_1 == a_2);//true

• Symbol.keyFor函数 (了解)
• 函数作用：返回一个以被登记在全局环境中的symbol.for()值的key，没有就返回undefined。

let a_1 = Symbol.for('b')
let a = Symbol('a')
console.log(Symbol.keyFor(a_1));//b
console.log(Symbol.keyFor(a));//undefined