Kedar-CSDN博客

原创默认参数值

很多时候会给函数的参数设置默认值,方式就像下面两种:function a(param1,param2){ param1 = param1 || 'default_value'; param2 !== undefined ? param2 : 'default_value'; ...}上面这段代码通常的意义是: 如过没有传入 param1、param2 参数,给它赋值默认值 ‘default_value’。param1 可能会有风险,如果你传入 0 、’’、null 等类型转换后为 fal

2021-01-15 16:55:38 1309

原创 React.useMemo、React.useCallback 配合实现性能优化

React.useMemo、React.useCallback 配合实现性能优化我想,用 React 写项目的程序员都明白实现 React 性能优化的一大方式就是减少不必要的组件更新,在 Class 组件里面减少不必要的组件更新方式之一就是利用 shouldComponentUpdate 钩子函数。而在 React hooks 里面并没有此类函数,要想实现类似的功能,就需要 useMemo 和 useCallback 配合来实现。...

2020-11-03 22:07:20 1367

原创 JavaScript 生成器

一般函数开始运行，在它结束之前，不会被任何事情打断。而在 ES6 中引入了一种叫生成器的函数形式，生成器可以在执行当中暂停自身，可以立即恢复执行，也可以过一段时间之后恢复执行，所以生成器它不能像普通函数那样保证运行到完毕。还有一点是生成器在每次暂停 / 恢复循环都提供了一个双向传递信息的功能，生成器可以返回一个值，恢复它的控制代码也可以接收一个值。一. 语法function *fn...

2020-03-06 14:52:12 1436 1

原创 Fetch 跨域

问题： fetch('http://localhost:3000/myWebSite/praise', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSO...

2020-02-11 23:31:18 21553 1

原创 JavaScript import&export

支撑 ES6 模块的两个主要关键字是 import 和 export 。它们在语法上有着自己的特点，这篇文章主要介绍这些特点。首先值得注意的一点就是这两个关键字都必须在最顶层作用域使用。也就是说，它们必须出现在所有代码块和函数的外面。一. 导出成员export 关键字可以放在声明前面，或者作为一个操作符与要导出的列表绑定。例：//放在声明前面export function foo(){ ...

2020-01-16 18:54:33 252

原创 JavaScript static

把类比作函数，类里面的方法是添加到类的 prototype 对象上的，而如果声明了 static 方法，这个方法是直接添加到这个类的函数对象上的，而不是在这个函数的原型上的。例：class Father{ static fatherName(){console.log('father')} fatherSay(){console.log('i am father!')}}class S...

2020-01-15 19:35:48 1676

原创 JavaScript extends 和 super

ES6 类提供了在两个函数原型之间建立 [[Prototype]] 链接的语法糖 extends，还提供了自动指向“父构造器”的语法糖 super。本篇文章介绍这两者，请看以下例子，以方便介绍：class FooFather{ constructor(a,b){ this.x = a; this.y = b; } returnXY(){ return this.x * this...

2020-01-15 15:56:31 883

原创 JavaScript class

class 是 ES6 新增的关键字以及相关的机制。请看以下例子：class Foo { constructor(a,b){ this.a = a; this.b = b; } giveAB(){ return this.a * this.b; }}因为 JavaScript 的类并不像传统类的工作机制。使用 class 这个语法糖，上面的例子需要注意以下几点:cl...

2020-01-12 19:41:41 128

原创 JavaScript 原型

一.原型 [[Prototype]]原型 [[Prototype]] 是 JavaScript 中对象的一个内置属性。它本质实际上是对其他对象的引用，基本上对象在创建的时候 [[Prototype]] 都会获得一个非空的值。[[Prototype]] 有什么作用？例：var obj1 = { a:2}var obj2 = Object.create(obj1);obj2; // {}...

2020-01-12 15:45:14 96

原创块级格式化上下文

块级格式化上下文听说过多次，自己也去看了许多文章，但自己总是觉得晦涩，搞不清楚，后来又再去查了下很多文章，终于觉得自己理解一些了，希望自己描述出来能够准确和易懂。Formatting contextFormatting context 是页面的一个渲染区域，它有着自己的渲染规则，决定渲染区域里面的元素怎么定位，以及里面的元素之间的相互作用。而块级格式化上下文(Block fomatting c...

2020-01-09 20:31:26 645

原创 Redux 基础

Redux 是 JavaScript 的状态容器，本篇文章主要介绍其 Action、Reducer、Store 等基础概念。一. ActionAction 描述将要采取什么动作，同时也可以把数据传送到 store 中。以下用 toDoList 添加事项来举例：// Action 里面的代码 function addToDo(detail) { const date = format...

2020-01-07 16:41:54 129

原创 React Hook API

useStateconst [state,setState] = useState(initState);返回 state 以及更新 state 的函数。setState 传入一个值用于更新 state，且 setState 不会在后面的渲染中变化，也就是说 setState 的地址是不会变的。如果需要旧的 state 计算出新的 state，可以将函数传递给 setState，这个函数...

2019-12-31 17:06:07 209

原创 React Hook规则

Hook 本质是 JavaScript 函数，但在使用的时候它有着它需要遵循的规则：只在最顶层使用 Hook，这能够让 React 在多次的 useState 和 useEffect 调用中保持 hook 的状态正确。只在 React 函数中调用 Hook，也就是说在 React 的函数组件中调用 Hook，还有一点是在自定义 Hook 中调用其他 Hook。...

2019-12-30 16:18:44 1103

原创 React Hook

Hook 是 React 16.8 增加的新特性，它可以使你在不使用 class 的时候使用 state 和 react 的其他特性。State Hook例：用 State Hook 实现一个计数器。import React,{useState} from 'react';function Counter(){ const [count,setCount] = useState(0);...

2019-12-27 17:00:48 247

原创 Content-Type 数据上传常用类型

Content-Type 表示具体请求的媒体类型气息。数据上传常用的类型Content-Type：application/x-www-form-urlencoded。form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）。Content-Type：multipart/form-data。表单中进行文件上传时，使用该格式。Content-Type：...

2019-12-26 19:00:32 1485

原创 React Refs转发

React数据流中，父组件可以传递 props 给子组件，如果要修改子组件里面的这些 props ，只能通过修改父组件的状态，从而更新子组件里面的 props，就能够更新子组件。如果遇到了需要操作一个真实的DOM元素的时候(如输入框聚焦、选中、触发动画)，则可以使用Refs。一. DOM 添加 refsclass RefButton extends React.Component{ rend...

2019-12-26 09:38:20 435

原创跨域

一.跨域以及同源政策广义的跨域是指一个域下的文档或者脚本试图去请求另一个域下的资源，如资源跳转、外部资源嵌入、脚本请求等。而我们通常所说的跨域是因为浏览器同源政策引发的限制这一类场景。同源是指“协议”、“域名”、“端口”三者相同，即为同源，如果三者中有一不相同，即便IP地址是一样的，也非同源。如果遇到了同源政策限制的场景，它会：无法读取Cookie、LocalStorage、IndexDB...

2019-12-20 16:33:35 190

原创解决URL出现ZERO-WIDTH SPACE的情况

出现的现象：一般封装的请求器报出类似于因为地址解析错误不能执行请求的错误，而打印出来的请求地址肉眼看来是正确的。这时候就应该考虑是不是出现了“没有宽度的空格”这种情况了。出现的原因：一般是从其他地方复制过来的一段文字(如Word,MarkDown)，粘贴上之后就可能会有多一个ZERO-WIDTH SPACE的情况，它肉眼看不见。解决方法：对 url 进行 encodeURI(u...

2019-12-20 15:23:14 3701

原创 ES6 公开符号Symbol.xxx

ES6 新增了类型Symbol,除了自己定义符号之外，还预定义了一些内置符号，称为公开符号。一. Symbol.iterator这个符号表示任意对象上的一个专门的属性，语言机制会自动的在这个属性上寻找一个方法，这个方法会构造一个迭代器来消耗这个对象的值。… 展开和 for…of 循环会自动使用它。通过定义 Symbol.iterator 属性为一对象的值，会覆盖它默认的迭代器，例：var ...

2019-12-15 13:31:14 189

原创 ES6 新增API Object

Object 也新增了些 API。一. Object.is(…)Object.is(…) 执行比 ===(严格等于) 更加严格的值比较。它调用的是底层 SameValue 算法，基本上和严格等于的比较是一样的，它们有两个区别。var x = NaN, y = 0, z = -0;x === x; //falsey === z; //trueObject.is(x,x); /...

2019-12-12 13:04:53 150

原创 ES6新增API Array

本篇是 ES6 新增关于 Array 的API。一. Array.of(…)Array(…) 构造器如果只传入一个参数且为数字的话，那么这个构造器不会构造一个值为这个数字的数组，而是构造一个长度为这个数字的空数组。而 Array.of(…) 没有这个问题。例：var a = Array(3);a.length; // 3a[0]; // undefinedvar b = Arr...

2019-12-10 19:55:41 179

原创解构

例一、对象属性赋值模式：function data(){ return { x:1,y:2,z:3,a:4,b:5,c:6 }}var {x:x,y:y,z:z}= data();console.log(x,y,z); // 1 2 3var {a,b,c} = data();console.log(a,b,c); // 4 5 6上面的例子中：左侧的对象把右侧的数值结...

2019-12-09 21:02:09 147

原创异步篇：Promise

这篇文章，总体上来说一下 Promise。new Promise(…)new Promise 必须传入一个函数回调，它是同步的或者立即调用的；这个函数回调接受两个函数回调，通常称为 resolve 和 reject。reject(…) 就是拒绝这个 Promise 。resolve 是可能完成，也可能拒绝，如果传给 resolve 的是一个普通值(立即值)，promise 会用这个值完成。...

2019-12-09 18:54:14 176

原创异步篇：Promise.all() & .race()

一般 Promise 是采用 Promise 链的顺序控制流程的，Promise 还有其他异步模式，用来简化异步的流程控制，易于追踪。一. Promise.all([…])在异步序列中，任意时刻只能有一个异步任务执行，如果想同时执行，怎么实现呢?可以用到 Promise.all([…]),它并不能让两个异步任务同时执行，但是可以让两个异步任务执行完了之后再让后面的流程继续执行，相对于这两个异步...

2019-12-04 19:11:13 634

原创异步篇：Promise信任问题

回调函数的信任问题在其他异步篇里面有介绍，这篇文章关注 Promise 是否解决了这些问题？一. 调用过早一个任务，它有时同步完成，有时异步完成，这可能会导致竞态条件。而 Promise 不用担心这个问题。因为：new Promise(function(resolve){ resolve(24); // 无法被同步观察})一个立即完成的 Promise （如上例子），它无法被同步观...

2019-12-03 21:00:15 314

原创异步篇：识别Promise (方法之一)

如何确定一个值是不是真正的 Promis，或者这个值的行为是不是很类似 Promise ？Promise 是通过 new Promise(…) 创建，那么是不是可以用 instanceof Promise 来检查？一. 为什么 instanceof 不足以检查 Promise原因有许多，总结如下：Promise 值可能是从其他浏览器窗口接收到的，然而接收到的 Promise 可能和当前窗口...

2019-12-03 19:39:29 1474

原创异步篇：理解Promise

回调函数有着缺乏顺序性和可信任性的缺陷，而 Promise 是解决这两个缺陷的模式。这篇文章分别通过两个方式来理解 Promise 模式。第一个方式：未来值设想一下，如果某天你突然想要去一个风景区，需要坐高铁。计划好了就去买票。买好了以后，我们获得了一张车票 (Promise，可以乘坐某班次高铁的凭据) ,在高铁出发前的时间，我们都可以在候车厅干自己的事，不用关心时间，因为运行商会通知我们进站...

2019-12-02 16:58:20 204

原创 HTTP协议相关

一. 相关基本概念1. 客户端与服务端客户端也称为用户端，主要为用户提供本地服务的程序。在前端领域主要是用户可见并且交互的界面程序，使用HTML、CSS、JavaScript等构建。服务端为客户服务，在服务器中运行，主要负责储存数据和处理应用逻辑。客户端会对服务端发出请求，服务端也会对客户端做出响应。2. IP 地址IP是 Internet Protocol (网络互联协议) 的简...

2019-12-01 21:14:47 118

原创 Node.js 基础相关

一. Node.js 模块化开发Node.js 规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到，模块内部可以使用 exports 对象进行成员的导出，使用 require 方法导入其他模块。1. 模块成员导出，例一：let years = 2019;const say = (word) => `speak a word: ${word}...

2019-11-30 21:28:26 93

原创异步篇: 回调

一. 为什么采用回调？采用 Ajax 请求为例:var data = ajax("http://xxx.xx.xx"); // 假设发送一个Ajax请求获取一些数据console.log(data); // 通常是获取不到data的因为 Ajax 请求一般是异步的，发送了请求之后，不会等待服务器响应结果而会继续执行后面的代码，而此时 console.log 中的 data 尚未获取到值...

2019-11-26 14:19:46 123

原创 HTTP 请求方法

一. 请求方法http请求有以下几种方法：GET 请求指定的页面信息，返回实体主体。POST 向指定资源提交数据进行处理请求(例如上传文件、提交表单)。数据包含在请求体中。PUT 从客户端向服务器传送的数据取代指定的文档的内容。DELETE 请求服务器删除指定的页面或内容。HEAD 用于获取报头，返回的响应中没有具体的内容。OPTIONS 允许客户端查看服务器的性能。TRACE ...

2019-11-25 20:41:30 90

原创 CSS3 transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。以下介绍它的相关属性。一. rotate可以让元素在平面内旋转，主要是设定旋转中心点和旋转角度。设置旋转角度。选择器{ transform: rotate(30deg);}数值正数顺时针旋转，负数逆时针旋转。单位为 °(度)设置旋转中心点。transform-o...

2019-11-25 08:50:11 299 1

原创 flex布局

一. flex 布局也叫弹性布局，就是给父盒子添加 flex 属性，以来控制子盒子的位置和排列方式。特点:布局比较简单，移动端使用比较广泛，对PC端浏览器支持不好。当父盒子设置为 flex 布局之后，子元素的 float、clear、vertical-align 属性将会失效。采用 flex 布局灵活性比较好。二. 常见属性（父盒子）1. flex-direction 主轴方向f...

2019-11-24 19:21:31 116

原创数组对象

一. 创建数组字面量方式创建 var arr = [1,"2",{name:"kedar"},false,[1,2,3]]; // 里面可以容纳任何类型的值new Array()var arr = new Array(); // 创建空数组var arr1 = new Array(9); // 传入一个参数规定数组的长度var arr2 = new Array(9,{name...

2019-11-24 13:42:08 2210

原创 Getter 和 Setter

对象的属性值的访问(对值的获取)有 [[ get ]] 操作，对值的操作有 [[ put ]] ，这篇文章主要探讨一下对象的这两个操作。一. get 获取值的步骤get操作并不仅仅是在对象里面查找一个你需要查找的属性，例:var obj = { a: 24}obj.a; // 24obj.b; // undefined这个例子中，obj 确实在自身里面找到了名为 “a” ...

2019-11-22 20:57:45 272

原创对象属性描述符

从 ES5 开始，对象的属性都具备了属性的描述符，它能设置属性的特性。我们可以使用 Object.defineProperty(…) 来添加或者配置一个属性并对它的特性进行配置。属性描述符有: writable、 enumerable 和 configurable。一. writable (可写)决定是否可以修改属性的值。var obj = {};Object.defineProper...

2019-11-22 11:09:42 497

原创 JavaScript This

一. this的机制this是在运行时绑定的，this的绑定和函数声明的位置没有关系，取决于函数的调用方式。注意点：this不在编写时绑定，它的执行上下文取决于函数调用时的条件。this只取决于函数的调用方式。this不指向函数的词法作用域，也不指向自身(参见第二点只取决于函数的调用方式)。执行上下文在函数被调用的时候创建，里面包含了函数在哪里被调用，调用的方法，传入的参数等...

2019-11-21 10:46:03 72

原创 JavaScript 闭包

一. 定义函数能够保存、访问它所在的词法作用域，就产生了闭包。注意点能够保存它 “所在” 的词法作用域。能够访问它所在的词法作用域。在它的词法作用域以外执行也同样产生闭包。二. 示例 function a(){ var num = 24; function b(){ console.log(num); } return b; } var run = ...

2019-11-19 20:45:09 75

原创 JavaScript 提升

一. 什么是提升？当某个作用域创建，到了执行作用域里面的内容的时候，编译器会把作用域里面的变量或函数声明放到作用域的最前面，这一过程称为提升。二. 提升的特点只提升变量，语句的其他逻辑不会提升。函数优先提升。三. 示例只提升变量 console.log(a); // undefined var a = 24;上面的例子运行在 window 作用域中，打印 a 为...

2019-11-19 19:35:14 210

原创 Vue 数据双向绑定

Vue数据双向绑定1.表现当数据发生变化的时候,前端视图也发生变化。当前端视图变化时，数据也会跟着变化。2.模拟双向绑定的实现1 视图层到数据层的实现以 input 元素为例，实现视图层到数据层单向绑定,要实现首先要监听视图层是否发生变化。input 标签可以用 oninput 事件实现。<input type='text' placeholder='编辑内容' i...

2019-11-18 18:22:16 389

空空如也

空空如也