前端-----ES5知识点小梳理一

野性酷女 2024-04-07 14:35 56阅读 0赞

**目录**

数据类型

1.基本数据类型/简单数据类型:string number boolean null undefined symbol 2.引用数据类型:Object array function()\{\}

三目运算符

== 与 ===区别

函数

浅拷贝：引用地址的传递

深拷贝 值的复制

实现深拷贝方法：

引用数据类型的隐式转换

1. \[ \] + \[ \]

2. \[ \] + \{ \}

3. \{ \} + \{ \}

4.\{ \} + \[ \]

对象的序列化 和 反序列化

双向数据绑定小案例：

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

##  ##

## 数据类型 ##

#### 1.基本数据类型/简单数据类型:string number boolean null undefined symbol   2.引用数据类型:Object array function()\{\} ####

##  ##

## 三目运算符 ##

var obj = {name:'zhangsan', age: 17}
    var res = obj.age >= 18 ? '成年': '未成年'
    console.log(res);
    //未成年

## == 与 ===区别 ##

== 先将双等号左右两边的值 转换为统一数据类型 再去比较值

console.log(123 == '123');
     //true

=== 先去判断数据类型是否相等 如果数据类型不相等 直接false

console.log(123 === '123');
     //false

## 函数 ##

案例一

// 全局作用域
     function foo() {
      
       var a;
       // 局部作用域
       if (true) {
         var a = 3;
         console.log("inner", a);
       }
       console.log("outer", a);
     }
     foo();
     // inner 3
     // outer 3
     console.log(a);   //打印全局的a
    //a is not defined

案例二

function test() {
       // 如果一个变量没有被var声明 说明他是一个全局变量
       message = "hello";
     }
     test();
     console.log(message);
     //hello
    
    // 全局变量
     console.log(global);
     // modules.export
    
     console.log(this);
     // {}
    
     console.log(this === global);   //此时的this指向的全局是当前作用域的全局，不是global全局。！！！！！！！
    // false

案例三

注意函数执行顺序

function b() {
       a = 10;
       return;
     }
     var a = 1;
     b();//调用了b 最后输出10
     console.log(a);
     //10

案例四

var a = 1;
    function b() {
      console.log('------', this);
      a = 10;
      return;
      //a函数声明，提前变量a，将a认为是函数b作用域的变量，具有局部效果  相当于var a ;此时a变成了局部
      function a() { }
    }
    b();
    console.log(a);//打印全局的a  1

## 浅拷贝：引用地址的传递 ##

## 深拷贝 值的复制 ##

/ 浅拷贝
    var a = {name:'zhangsan', age: 20}
    var b = a
    // 对对象中的属性进行操作 直接使用点语法就可以了
    b.name = 'lisi'
    console.log(a, b);

解决浅拷贝的方案 实现深拷贝方法

var a = {name:'zhangsan', age: 20}
    // 三点运算符  拓展运算符
    // console.log({...a} === a);
    var b = { ...a }
    // 对对象中的属性进行操作 直接使用点语法就可以了
    b.name = 'lisi'
    console.log(a, b);
    //{ name: 'zhangsan', age: 20 } { name: 'lisi', age: 20 }

## 实现深拷贝方法： ##

*  通过json对象实现深拷贝（JSON.stringify，JSON.parse）： JSON.stringify(JSON.parse(obj));
 *  拓展运算符：
 *  let temp=\{...obj\}
 *  Object.assign()拷贝
 *  lodash函数库实现深拷贝：
 *  lodash \_.cloneDeep()
 *  递归的方式实现深拷贝
 *  等等

## 引用数据类型的隐式转换 ##

### 1. \[ \] + \[ \] ###

console.log([] + []);
    console.log([] + [], typeof ([] + []))
    // ""  string
    
    
    // 1.确定[] PreferredType 为number
    // 2.确定[] 不是一个原始值
    // 3.调用valueOf方法
    // console.log([].valueOf(), typeof [].valueOf());
    // 4.调用toString()方法
    // console.log([].valueOf().toString(), typeof [].valueOf().toString());
    // 5.最终 [] 隐式转换 => '' 空的字符串

### 2. \[ \] + \{ \} ###

console.log({} + [], typeof ({} + []))
    // [object Object]  string
    []的结果是""
    // 转换一个{}
    // 1.确定{} PreferredType 为number
    // 2.确定{} 不是一个原始值
    // 3.调用valueOf方法,结果是{}，不是原始值，
       4.所以继续调用toString()，
    // console.log({}.valueOf().toString(), typeof {}.valueOf().toString());
    结果是"[object Object]",是原始值，将"[object Object]"返回。
    // console.log('' + "[object Object]");
    // 5.最终[] + {}隐式转换 => "[object Object]"

## 3. \{ \} + \{ \} ##

console.log({} + {}, typeof ({} + {}));
     // [object Object][object Object] string
    
    //1.确定{} PreferredType 为number
    // 2.确定{} 不是一个原始值
    // 3.调用valueOf方法,结果是{}，不是原始值，
       //4.所以继续调用toString()，
    // console.log({}.valueOf().toString(), typeof {}.valueOf().toString());
    结果是"[object Object]",是原始值，将"[object Object]"返回。
    // console.log("[object Object]" + "[object Object]");
    // 5.最终{} + {}隐式转换 => "[object Object][object Object]"

## 4.\{ \} + \[ \] ##

console.log({} + [], typeof ({} + []))
    //[object Object] string
    
    //1.确定{} PreferredType 为number
    // 2.确定{} 不是一个原始值
    // 3.调用valueOf方法,结果是{}，不是原始值，
      // 4.所以继续调用toString()，
    // console.log({}.valueOf().toString(), typeof {}.valueOf().toString());
    结果是"[object Object]",是原始值，将"[object Object]"返回。
    // console.log('' + "[object Object]");
    // 5.最终{} + []隐式转换 => "[object Object]"

## 对象的序列化 和 反序列化 ##

var person = {
        name:'lili'
      }
    对象转为JSON字符串
    var jsonStr = JSON.stringify(person)
    console.log(jsonStr, typeof jsonStr);
    
    //{"name":"lili"} string
    
    // JSON字符串转对象
    console.log(JSON.parse(jsonStr), typeof JSON.parse(jsonStr));
    //{ name: 'lili' } object

## 双向数据绑定小案例： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      
      <input type="text" id="inputText">
      
      <div id="showContent"></div>
      <script>
        // 创建一个数据容器对象
        var dataObj = {}
        // 访问器属性新增一个属性  用户输入的值
        Object.defineProperty(dataObj,'inputText',{
          get:function(){
            return 10
          },
          set:function(newValue){
            // 给div的内容做一个赋值
            document.getElementById('showContent').innerHTML = newValue
          }
        })
    
        // 获取到用户输入的值 DOM 命令式编程
        document.getElementById('inputText').addEventListener('input', function (event) {
           console.log(event.target.value);
          // 给数据容器中的inputText进行赋值 调用set方法
    
          dataObj.inputText = event.target.value;
        })
      </script>
    </body>
    </html>

![983ec7deab57402ca48ad981fc3dc606.png][]

[983ec7deab57402ca48ad981fc3dc606.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ec0123f8ac724b9eb8dfd26313e0619c.png