- 博客(14)
- 收藏
- 关注
RSS订阅原创 JS-Symbol的含义及使用场景
Symbol是ES6的一个新类型，用通俗易懂的话来说，就是独一无二的值。如 const a1 = Symbol(“name”) const a2 = Symbol(“name”) console.log(a1 === a2) // false 虽然都是生存一个叫做name的独一无二的值，但是两个值是不一样的，那这个跟之前直接定义的 const a1 = “name” 有什么区别呢？ 一、消除直接的 == 比较 一般我们写代码都是 if(name == "Tom"){ xxxx }else if(name
2020-12-07 17:11:05
1859
原创 JS判断数据类型的方法
一：typeof typeof对于基本数据类型，可以直接判断，如 typeof 1 // “number” typeif “1” // “string” 但是对于复合数据类型，除了函数以外，都会返回 object，如 typeof [] // “object” typeof {} // “object” typeof function() {} // “function” 对于null和undefined typeof null // “object” typeof undefined // “unde
2020-12-01 10:41:34
721
原创 js不定参数求和
1：使用es6的rest参数 function add(...arg) { return arg.reduce((pre,cur) => { return cur + pre }, 0) } console.log(add(1,2,3,4)) 2：使用参数集合arguments（因为arguments不是一个数组，所以要先转换成数组） function add() { var arg = [].slice.call(arguments) // 因为argumemts没有slice方法，所
2020-08-19 15:00:03
1195
原创 原型与原型链--超简单讲解
原型与原型链，是所有JS初学者的噩梦，虽然工作过程中用不到，但是理解他对于我们写代码，看源码都有很大的提升，下面就带大家一步一步，认识原型与原型链 原型 原型的概念：每一个javascript对象创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。 一：prototype 在JavaScript中，每一个函数都有一个 prototype 属性，该属性指向函数的原型对象。 当用该函数构造出一些对象之后，这些对象也继承了原型对象上的属性，来看看下面的例子 func
2020-08-17 15:54:33
5685
4
原创 apply、call、bind超简单理解
作用 apply、call、bind都是用来改变this指向的 传参区别 三者的第一个参数都是this要指向的那个对象，第二个参数开始就有区别 1：bind和call传参是一样的，把参数一个一个传递进去 2：apply则是要传递一个参数数组 var obj = { name: "小敏" } function test(a, b) { console.log(a) console.log(b) console.log(this.name) } test.bind(obj,"aaa", "bbb") te
2020-08-17 11:26:41
142
原创 flex布局讲解
Flex: Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 设置display为flex之后，可以理解为他变成了一个容器，容器下的所有子元素，都称为项目 容器有两根轴:水平主轴就是x轴(main axis)和竖直轴也是y轴(cross axis) flex容器属性: flex-direction:决定项目的排列方向。 flex-wrap:即一条轴线排不下时如何换行。 flex-flow:是flex-direction属性和flex-wrap属性的简写形式，默认值
2020-08-13 14:54:14
101
原创 虚拟dom中，key的作用
无论是vue或者react，但我们遍历数组生成dom元素的时候，都会建议我们给每一个dom元素加上key值，而且key值最好用每一项的唯一id，而不用index值，这是为什么呢？ key的作用 key值的作用，其实是：追踪列表中哪些元素被添加、被修改、被移除的辅助标志。 通俗点来说，就是他可以帮助我们快速对比两个虚拟dom对象，找到虚拟dom对象被修改的元素，然后仅仅替换掉被修改的元素，然后再生成新的真实dom。 原理讲解 一：如果没有key值，就会根据就地复用的原则，一个一个对比，然后修改渲染 二：如果k
2020-08-12 11:08:07
1210
1
原创 react-hook：useState与useEffect详解
背景 hook是什么呢？又改变了什么呢？我们先来看官网的原话：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 为什么要使用hook呢？因为在react项目越来越大之后，我们会发现有时候一个class类往往很大，代码的复用性也很差，冗余的代码也很多，特别是在class类很多的时候，每个class类的生命周期的逻辑代码就很多了，维护起来更是麻烦。 跟着文章往下走，你就会知道hook使用的好处以及便捷，也能理解为什么reac
2020-06-29 11:32:52
2018
1
原创 react-生命周期超详细讲解
首先，我们来看一张官方的生命周期图 很多人，看到这张图的时候，都是一脸懵逼的，因为他是把所有生命周期所出现的所有场景整合在一起的，初学者难免会有点混乱，接下来，我会通过代码加场景，跟大家一一的过一遍。 挂载过程 1.constructor() react的初始化函数，它完成了react数据的初始化，接受一个props参数，如果想要在constructor函数中使用父组件传递过来的props的时候，就需要在super里面传递这个参数。 在我的另外一篇关于constructor的文章中也提到了，如果不定义co
2020-06-19 16:04:06
492
原创 react-虚拟dom超详细解析
前言 我们都知道，react性能好，大部分原因就是因为他用了虚拟dom，而到底什么是虚拟dom呢？他和我们平时所说的dom元素有什么不一样呢？接下来让我们一步一步解答。 虚拟dom与真实dom元素 先来看一段简单的代码 <ul id="box"> <li>111</li> <li>222</li> </ul> 这段代码里面，有一个ul元素以及它包裹着的两个li元素，ul元素与li元素，就都是我们平时说的dom元素，那么用虚拟dom
2020-06-17 17:47:10
789
原创 setState与异步
场景 学过react的人都知道，react的setState是异步的，如 state = { text: "111" } handleChange() { this.setState({ text: "222" }) console.log(this.state.text) // 111 } 得到的结果，是111，而不是我们期望中的222，而一般我们的解决办法都是，传入第二个回调函数 state = { text: "111" } handleChange() { this.
2020-06-17 14:49:50
110
1
原创 constructor、super()、super(props)的区别
对于初学react的人来说，constructor好像在每一个组件里面都是有写的，但是大部分人也都不知道他的作用的什么，更不用说里面的super了，本篇文章就带大家缕一缕这三者的关系。 1：constructor与super() 众所周知，react的组件大部分采用的都是es6的class语法糖写法，而constructor就是class里面的默认方法，是必须的，如果我们没有定义，那么系统会默认生成一个constructor方法。 而super()，是在constructor里面，用于继承父类的，因为子类是
2020-06-16 16:22:10
1456
2
原创 vue axios接口封装及拦截的基本使用
一般使用axios的时候，我们都是直接引入，然后在main.js里面直接添加到vue的prototype上面，再直接使用，如下 // main.js import axios from "axios" Vue.prototype.axios = axios; // 在需要使用的页面 this.axios.get("xxx.xxx.xxx.xx:8080").then((res) => { ...
2019-04-28 16:20:44
542
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人