有趣的JavaScript（1）

╰+哭是因爲堅強的太久メ 2023-10-03 09:07 18阅读 0赞

**目录**

1.取整操作的新方法

2.箭头函数的返回值问题

3.JSON.stringfy()的特别用法

3.1 判断数组 / 对象是否相等

3.2判断数组是否包含某对象

3.3 让localStorage/sessionStorage可以存储对象（实际项目中常用）

4 defineProperty可以用来给对象添加一个新的属性，但是该属性默认不可枚举，比如object.keys方法无法枚举出由其定义的属性 还有一个是symbol

5.console用法

计时功能

追踪功能

6. js运算符优先级问题

--------------------

## 1.取整操作的新方法 ##

let  a = 3.1415926 | 0
    console.log(a)  // 输出  3

> 总结：0可以将指定数值转为32位有符号整数，也就是取整，正负数都可以，超过32位数部分会被忽略

--------------------

## 2.箭头函数的返回值问题 ##

> 箭头函数如果要返回对象，需要按`({})`的格式
> 
> 如果只返回一个值，则不需要任何括号
> 
> 如果用`{}`则不会返回任何值

const a = obj1 => {name:'小白'}        // 输出： undefined
    const b = obj2 => console.log(123)    // 输出： 123
    const c = obj3 => ({name:'小白'})     // 输出： {name:'小白'}
    console.log(a())
    b()
    console.log(c())

总结:箭头函数如果返回对象，要加（）包裹，因为和函数体的\{ … \}有语法冲突。箭头函数后面没有加大括号并且只有一行代码返回，是会默认return的；  
而箭头函数后面加了大括号，则不会默认return

--------------------

## 3.JSON.stringfy()的特别用法 ##

#### 3.1 判断数组 / 对象是否相等 ####

let a = [1, 2, 3,4,5,6]
     let b = [1, 2, 3,4,7,8]
    console.log(JSON.stringfy(a) === JSON.stringfy(b)) // 返回false

#### 3.2判断数组是否包含某对象 ####

let A = [
         	{name: 'aaa'},
         	{name: 'bbb'}
            ]
    
    let B = {name: 'bbb'}
         
         console.log(JSON.stringify(A).indexOf(JSON.stringify(B)) !== -1)
         // 返回true
         
         console.log(A.indexOf(B))
         // 返回false,找不到该对象

#### 3.3 让localStorage/sessionStorage可以存储对象（实际项目中常用） ####

> localStorage/sessionStorage 默认只能存储字符串，如果想要存储对象必须先利用`JSON.stringify()`转换为字符串；而取缓存时，再通过`JSON.parse()`转回对象

--------------------

## 4 defineProperty可以用来给对象添加一个新的属性，但是该属性默认不可枚举，比如object.keys方法无法枚举出由其定义的属性 还有一个是symbol ##

--------------------

## 5.console用法 ##

#### 计时功能 ####

> **`console.time()` 和 `console.timeEnd()`**
> 
> **可以显示一段代码的运行时间**

console.time("代码的运行时间是：");　　
    for(let i = 0 ; i<10000;i++){
       console.log(1)
    }
    console.timeEnd("代码的运行时间是：");
    // 代码的运行时间是：: 264.711669921875 ms

#### 追踪功能 ####

> **使用`console.trace()`追踪函数的调用轨迹，可以输出在第几行代码、其他哪个方法、其他什么地方调用了该函数**

控制台打印：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

--------------------

## 6. js运算符优先级问题 ##

> **逻辑非`(!)`优先级高于`全等号(===)`**

console.log(!true === false)
    //先看！左边为false 再比较全等么 结果为true

> **`逻辑非(!)`优先级高于`全等号(===)`因此先看左边再看右边。**
> 
> **左边逻辑非只会返回布尔值`true`或`false`，**再看全等不。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210624013321628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70