#yyds干货盘点 前端小知识点扫盲笔记记录3

时间：2023-04-07 18:14:55

前言

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结

localStorage 和 sessionStorage

cookie 本身用于浏览器和 server 通讯。 被“借用”到本地存储来的。 可用 document.cookie = '...' 来修改。 其缺点： 存储大小限制为 4KB。 http 请求时需要发送到服务端，增加请求数量。 只能用 document.cookie = '...' 来修改，太过简陋。 2、localStorage 和 sessionStorage HTML5 专门为存储来设计的，最大可存 5M。 API 简单易用， setItem getItem。 不会随着 http 请求被发送到服务端。 它们的区别： localStorage 数据会永久存储，除非代码删除或手动删除。 sessionStorage 数据只存在于当前会话，浏览器关闭则清空。 一般用 localStorage 会多一些

objectDefineProperty

// 三个参数（属性所在的对象，你要操作的属性，被操作的属性的特性）
      //   var geyao = {
      //     sex: "男",
      //     age: 18,
      //   };
      //   console.log(geyao,"geyao1")

      //   Object.defineProperty(geyao, "sex", {

      //     get: function () {
      //       console.log("读取时,get被触发");

      //       return this.sex
      //     },
      //     set: function (value) {
      //       console.log(value,"value");
      //      this.sex=value
      //     },

      //   });
      //   console.log(geyao.sex,"geyao2")
      function getObj() {
        let obj = {
            sex:"男",
            age:18
        };
        let val = ""; //此处val是安全的,外部是无法修改的
        let o = Object.defineProperty(obj, "key", {
          configurable: true,
          enumerable: true,
          get: function () {
            return val || 0;
          },
          set: function (n) {
            val = n;
          },
        });
        return o; //每个对象都是新的
      }
      let aa = getObj();
      console.log(aa.sex); //返回性别

objectDefinePropertytest

<!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>
    <script>
      //
      let geyao = {
        name: "歌谣",
        age: 18,
      };

      function definereactive(data, key, val) {
        Object.defineProperty(data, key, {
          enumerable: true,
          configurable: true,
          get: function () {
            console.log("有人在读取我");
            return val;
          },
          set: function (newVal) {
            if (val == newVal) {
              console.log("我没有变化");
              return;
            }
            console.log("我变化了 我的天呀");
            val = newVal;
          
          },
        });

    
      }
      console.log("--------------1");
      console.log(definereactive(geyao, "age", 18));
      console.log("--------------1");
      console.log("--------------2");
      geyao.age = 19;
      console.log(geyao,"geyao")
      console.log("--------------2");
      console.log("--------------3");
      console.log(definereactive(geyao, "age"));
      console.log("--------------3");
    </script>
  </body>
</html>

slice

<!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>slice</title>
</head>
<body>
  <script>
    var fangfang=["geyao","fangfang","huahua","mingming"]
    //arr.slice([begin[, end]])
    var fangfangTest=fangfang.slice(1)
    //从第一位进行截取
    console.log(fangfangTest,"fangfangTest") // [ "fangfang", "huahua", "mingming" ]
    //截取数组的二到四位
    var fangfangList=fangfang.slice(2,4)
    console.log(fangfangList,"fangfangList") //[  "huahua", "mingming" ]
    //截取数组的第一位到倒数第二个元素
    var fangfangHH=fangfang.slice(1,-1)
    console.log(fangfangHH,"fangfangHH") //[ "fangfang","huahua"]

  </script>
</body>
</html>

symbol

<!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>Symbol</title>
	</head>
	<body>
		<script>
			const symbol1 = Symbol()
			const symbol2 = Symbol(42)
			const symbol3 = Symbol('foo')
			console.log(typeof symbol1)
			// expected output: "symbol"
			console.log(symbol2 === 42)
			// expected output: false
			console.log(symbol3.toString())
			// expected output: "Symbol(foo)"
			console.log(Symbol('foo') === Symbol('foo'))
			// expected output: false
		</script>
	</body>
</html>

this指向小练习

<!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>this指向</title>
</head>

<body>
  <script>
    window.val = 1;
    var json = {
      val: 10,
      dbl: function () {
        this.val *= 2;
      },
    };
    json.dbl(); 
    console.log(json.val,"jsonval")//20
    console.log(window.val,"winval")//1
    var dbl = json.dbl;
   
    dbl();
    console.log(json.val,"jsonval")//20
    console.log(window.val,"winval")//2
    json.dbl.call(window);
    console.log(json.val,"jsonval")//20
    console.log(window.val,"winval")//4
    console.log(window.val + json.val); //24
  </script>
</body>

</html>

this指向问题

<!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>this指向</title>
</head>
<body>
  <script>
    function foo() {
  console.log(this.a)
}
var a = 1
foo() //1

const obj = {
  a: 2,
  foo: foo
}
obj.foo()//2 

const c = new foo()//undefined
  </script>
</body>
</html>

typeOf

//typeof：能判断所有值类型，函数。不可对 null、对象、数组进行精确判断，因为都返回 object // console.log(typeof undefined) // undefined // console.log(typeof 2) // number // console.log(typeof true) // boolean // console.log(typeof 'str') // string // console.log(typeof Symbol('foo')) // symbol // console.log(typeof 2172141653n) // bigint // console.log(typeof function () {}) // function // // 不能判别 // console.log(typeof []) // object // console.log(typeof {}) // object // console.log(typeof null) // object

总结

我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣

标签：

相关文章