【React工作记录九十四】前端小知识点扫盲笔记记录3

简介: 【React工作记录九十四】前端小知识点扫盲笔记记录3

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

```




Document


symbol

  Symbol    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


this指向小练习

```




this指向


```


this指向问题

```




this指向


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


总结

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

相关文章
|
11天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
39 9
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
37 0
|
16天前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
44 2
|
18天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
18天前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
28 2
|
18天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
23天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
23天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
17天前
|
前端开发 Android开发 开发者
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第26天】近年来,React Native凭借其跨平台开发能力在移动应用开发领域迅速崛起。本文将探讨React Native的优势与挑战,并通过示例代码展示其应用实践。React Native允许开发者使用同一套代码库同时构建iOS和Android应用,提高开发效率,降低维护成本。它具备接近原生应用的性能和用户体验,但也面临平台差异、原生功能支持和第三方库兼容性等挑战。
28 0
|
18天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略