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

    目录

    数据类型

    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(){}

    三目运算符

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

    == 与 ===区别

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

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

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

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

    函数

    案例一

    1. // 全局作用域
    2.  function foo() {
    3.   
    4.    var a;
    5.    // 局部作用域
    6.    if (true) {
    7.      var a = 3;
    8.      console.log("inner", a);
    9.    }
    10.    console.log("outer", a);
    11.  }
    12.  foo();
    13.  // inner 3
    14.  // outer 3
    15.  console.log(a);   //打印全局的a
    16. //a is not defined

     案例二

    1. function test() {
    2.    // 如果一个变量没有被var声明 说明他是一个全局变量
    3.    message = "hello";
    4.  }
    5.  test();
    6.  console.log(message);
    7.  //hello
    8.  
    9. // 全局变量
    10.  console.log(global);
    11.  // modules.export
    12.  
    13.  console.log(this);
    14.  // {}
    15.  
    16.  console.log(this === global);   //此时的this指向的全局是当前作用域的全局，不是global全局。！！！！！！！
    17. // false

    案例三

    注意函数执行顺序

    1. function b() {
    2.    a = 10;
    3.    return;
    4.  }
    5.  var a = 1;
    6.  b();//调用了b 最后输出10
    7.  console.log(a);
    8.  //10

    案例四

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

       浅拷贝：引用地址的传递

    深拷贝 值的复制

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

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

    1. var a = {name:'zhangsan', age: 20}
    2. // 三点运算符  拓展运算符
    3. // console.log({...a} === a);
    4. var b = { ...a }
    5. // 对对象中的属性进行操作 直接使用点语法就可以了
    6. b.name = 'lisi'
    7. console.log(a, b);
    8. //{ 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. [ ] + [ ]

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

    2. [ ] + { }

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

    3. { } + { }

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

    4.{ } + [ ]

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

    对象的序列化 和 反序列化

    1. var person = {
    2.     name:'lili'
    3.   }
    4. 对象转为JSON字符串
    5. var jsonStr = JSON.stringify(person)
    6. console.log(jsonStr, typeof jsonStr);
    7.  
    8. //{"name":"lili"} string
    9.  
    10. // JSON字符串转对象
    11. console.log(JSON.parse(jsonStr), typeof JSON.parse(jsonStr));
    12. //{ name: 'lili' } object

    双向数据绑定小案例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8. head>
    9. <body>
    10.   
    11.   <input type="text" id="inputText">
    12.   
    13.   <div id="showContent">div>
    14.   <script>
    15.     // 创建一个数据容器对象
    16.     var dataObj = {}
    17.     // 访问器属性新增一个属性  用户输入的值
    18.     Object.defineProperty(dataObj,'inputText',{
    19.       get:function(){
    20.         return 10
    21.       },
    22.       set:function(newValue){
    23.         // 给div的内容做一个赋值
    24.         document.getElementById('showContent').innerHTML = newValue
    25.       }
    26.     })
    27.  
    28.     // 获取到用户输入的值 DOM 命令式编程
    29.     document.getElementById('inputText').addEventListener('input', function (event) {
    30.        console.log(event.target.value);
    31.       // 给数据容器中的inputText进行赋值 调用set方法
    32.  
    33.       dataObj.inputText = event.target.value;
    34.     })
    35.   script>
    36. body>
    37. html>

     

     

  • 相关阅读:
    反序列化漏洞(1), 原理, 实验, 魔术方法
    Java程序员面试大厂95%会被问到的25个问题(附答案)
    QT屏幕自适应自动布局，拖动窗口自动变大变小（一）
    分布式锁使用
    JAVA-SpringBoot入门Demo用IDEA建立helloworld
    生成二维坐标数组numpy.meshgrid()
    榜一的蔑视！阿里专家手写Spring全家桶笔记，整2000页
    一篇搞定CAS，深度讲解，面试实践必备
    TypeScript——泛型理论与实践
    基于特征选择的二元蜻蜓算法（Matlab代码实现）
  • 原文地址：https://blog.csdn.net/m0_46677484/article/details/126770074