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

最新推荐文章于 2024-10-30 18:30:30 发布

桃子耶耶

最新推荐文章于 2024-10-30 18:30:30 发布

阅读量311

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/m0_46677484/article/details/126770074

版权

数据类型

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

数据类型

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>