- 博客(32)
- 收藏
- 关注
RSS订阅原创 es6中promise 链式调用理解总结
理解es6中promise链式调用promise状态，value不谈了，主要研究链式调用（then）constructor立即执行，参数resolve，reject决定promise对象状态和value//原生promise示例let p = new Promise((resolve，reject) => { resolve(1)})then总体特性：返回一个promise对象,所以可以链式调用如果 return new Promise() 返回一个promise对象，
2022-03-27 20:28:51
1173
原创 js面向对象oop
成员属性/方法，原型属性/方法，静态/属性方法，私有属性/方法成员属性/方法在构造函数中，通过this.属性声明。或者实例化出对象后，通过“对象.属性”追加的。都属于成员属性、或成员方法；也叫实例属性与实例方法成员属性/方法，是属于实例化出的这个对象。通过"对象.属性"调用function Person(name){this.name = name;//声明成员属性this.say =function(){}//声明成员方法}var zhangsan =new Person("张三");z
2021-03-17 14:41:00
158
原创 js加减乘除和双等号类型转换
加减乘除隐式类型转换1.加减乘除能直接转换number的直接转换否则先转换成string再转换成number(其实就是对象先valueof再tostring再转number)2.字符串加法变成拼接都转换成字符串3.null转number为0 undefined转number为NANconsole.log('12'+[])//12console.log(String([]))//''console.log(String([])=='')//trueconsole.log([]=='')//tr
2021-03-16 10:33:24
401
原创 实现eventbus
实现eventbus// eventbus构造函数class EventEmeitter { constructor() { this._events = this._events || new Map(); // 储存事件/回调键值对 this._maxListeners = this._maxListeners || 10; // 设立监听上限 } } // 触发名为type的事件EventEmeitter.prototype.emit = fu
2021-03-15 11:26:32
366
原创 深拷贝，浅拷贝
深拷贝，浅拷贝浅拷贝深拷贝浅拷贝// 直接赋值浅拷贝let obj = {a:1}let obj2 = objobj2.a = 123console.log(obj2,obj)// assign 浅拷贝let obj = {a:1}let obj2 = objlet obj3 = Object.assign(obj2,{a:'a'},obj)obj3.a = 'adf'console.log(obj,obj3,obj2)// arr 浅拷贝let arr = [1,2,{c:
2021-03-15 10:58:21
124
原创 react Router
安装npm install --save react-router-dom使用例子import React from "react";import { BrowserRouter as Router, Route, Link } from "react-router-dom";function Index() { return <h2>JSPang.com</h2>;}function List() { return <h2>List-Page
2021-03-05 14:07:51
66
原创 react context
context直接上代码import React, { useState , createContext } from 'react';//===关键代码const CountContext = createContext()function Example4(){ const [ count , setCount ] = useState(0); return ( <div> <p>You clicked {co
2021-03-04 15:34:40
126
1
原创 react useEffect
useEffect使用：import React, { useState , useEffect } from 'react';function Example(){ const [ count , setCount ] = useState(0); //---关键代码---------start------- useEffect(()=>{ console.log(`useEffect=>You clicked ${count} times`)
2021-03-04 15:30:47
151
1
原创 react useState
useStateuseState是react自带的一个hook函数，它的作用是用来声明状态变量。声明方式：const [ count , setCount ] = useState(0);使用<div>{count}</div>改变值setCount(i) // 调用setCount方法参数是想要修改的值注意：就是React Hooks不能出现在条件判断语句中，因为它必须有完全一样的渲染顺序。...
2021-03-04 15:11:56
236
1
原创 实现点击label激活文本框功能
实现点击label激活文本框功能html:<div> <label for="jspang">加入服务：</label> <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} /> <button onClick={this.addList.bind(this)}>
2021-03-04 10:14:09
178
1
原创 react 使用 PropTypes 进行类型检查
PropTypes示例代码；import PropTypes from 'prop-types';class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); }}Greeting.propTypes = { name: PropTypes.string};
2021-03-03 16:12:23
92
1
原创 redux Store
redux Store在前面的章节中，我们学会了使用 action 来描述“发生了什么”，和使用 reducers 来根据 action 更新 state 的用法。Store 就是把它们联系到一起的对象。Store 有以下职责：1维持应用的 state；2提供 getState() 方法获取 state；3提供 dispatch(action) 方法更新 state；4通过 subscribe(listener) 注册监听器;5通过 subscribe(listener) 返回的函数注销监听器
2021-03-03 10:56:28
470
原创 redux Reducer
ReducerReducers 指定了应用状态的变化如何响应 actions 并发送到 store 的设计 State 结构以 todo 应用为例，需要保存两种不同的数据：当前选中的任务过滤条件；完整的任务列表。{ visibilityFilter: 'SHOW_ALL', todos: [ { text: 'Consider using Redux', completed: true, }, { text: 'Keep all
2021-03-03 10:47:30
271
原创 redux action
ActionAction 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。添加新 todo 任务的 action 是这样的：const ADD_TODO = 'ADD_TODO'{ type: ADD_TODO, text: 'Build my first Redux app'}Action 本质上是 JavaScript 普通对象。我们约定，action 内必须使用
2021-03-03 10:11:49
670
原创 react 列表&key
列表&key列表&key渲染多个组件基础列表组件key用 key 提取组件key 只是在兄弟节点之间必须唯一在 JSX 中嵌入 map()列表&keyconst numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);渲染多个组件const numbers = [1, 2, 3, 4, 5];const listItems
2021-03-02 15:05:04
257
原创 react 事件处理
事件处理React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。阻止默认行为在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。function ActionLink() { function handleClick(e) { e.preven
2021-03-02 14:50:29
96
原创 react State & 生命周期
State & 生命周期state将函数组件转换成 class 组件向 class 组件中添加局部的 state将生命周期方法添加到 Class 中正确地使用 State不要直接修改 State使用 setState():State 的更新可能是异步的State 的更新会被合并数据是向下流动的stateState 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。将函数组件转换成 class 组件通过以下五步将函数组件转成 class 组件：1.创建一个同名的 ES
2021-03-02 14:35:32
202
原创 react 组件&props
组件&props组件 & Props函数组件与 class 组件渲染组件组合组件提取组件Props 的只读性组件 & Props组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。函数组件与 class 组件函数组件function Welcome(props) { return <h1>Hello, {props.name}</h1>;}class 组件
2021-03-02 14:14:02
77
原创 react 元素渲染概念
react 元素渲染元素是构成react应用的最小砖块const element = <h1>Hello, world</h1>;将一个元素渲染为 DOM想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：const element = <h1>Hello, world</h1>;ReactDOM.render(element, document.getElementById('root'
2021-03-02 14:02:43
107
原创 react JSX概念
JSX简介JSX简介在 JSX 中嵌入表达式JSX 也是一个表达式JSX 特定属性使用 JSX 指定子元素JSX 防止注入攻击JSX 表示对象JSX简介const element = <h1>Hello, world!</h1>;这个有趣的标签语法既不是字符串也不是 HTML。它被称为 JSX，是一个 JavaScript 的语法扩展。在 JSX 中嵌入表达式function formatName(user) { return user.firstName + '
2021-03-02 13:52:13
153
原创 创建react项目时遇到的报错
创建react项目时遇到的报错百度到的第一个方法：1.执行npm install -g create-react-app全局安装2.执行npx create-react-app myapp创建项目结果控制台打印：(node:18924) ExperimentalWarning: The fs.promises API is experimentalYou are running `create-react-app` 4.0.1, which is behind the latest relea
2021-02-04 09:50:49
4526
3
原创 es6新特性
es6新特性传统字符串用法模板字符串带标签的模板字符串参数默认值剩余参数展开数组对象字面量Object.assignObject.isProxyProxy与Object.defineProperty的区别class集成extendsset数据集合mapSymbol传统字符串用法const str = 'hello world this is a string'模板字符串const str = `hello world this is a \`string\``console.log(str)//
2021-01-22 09:54:34
123
原创 js中构造函数
new 一个构造函数会做哪些事1.在内存中创建一个新对象2.让this指向这个新对象3.执行构造函数里的代码，给这个新对象添加属性和方法4.返回这个新对象（所以构造函数里面不需要return）
2021-01-18 17:15:27
66
原创 js中object对象的defineProperty
definePropertyobject.defineProperty()是用来控制一个对象属性的一些特有操作，比如读写权，是否可以枚举。例子：var Book = {}var name = '';Object.defineProperty(Book, 'name', { set: function (value) { name = value; console.log('你取了一个书名叫做' + value); }, get: function () { ret
2021-01-18 10:58:51
146
原创 JavaScript高级程序设计-引用类型（对象，数组）
概述引用类型的值是引用类型的一个实例，引用类型是一种数据结构，用于将数据和功能组织到一起（类似与类）。引用类型也被称为对象定义，描述一类对象所具有的属性和方法。注意：引用类型与类看起来相似，但他们并不是相同概念对象是某个特定引用类型的实例。新对象是使用new操作符后跟一个构造函数来创建的。5.1object类型创建object实例的方法：1new操作符后跟object构造函数2对象字面量表示法对象字面量也是想函数传递大量可选参数的首选方法访问对象属性的方式：1点表示法2方括号表示法5
2021-01-09 11:33:49
124
原创 JavaScript高级程序设计-变量，作用域，内存
概述js的变量和其他语言的变量有很大区别。js变量松散类型的本质，决定了它只是在特定的时间用于保存特定值的一个名字而已。由于不存在定义某个变量时必须要保存何种数据类型值的规则，变量的值及其数据类型可以在脚本的生命周期内改变1基本类型和引用类型的值基本类型：简单的数据段引用类型：那些可能由多个值构成的对象给变量赋值时解析器必须确定值是基本类型还是引用类型基本类型：按值访问，可以操作保存在变量中的实际的值引用类型：按引用访问1.1动态属性引用类型：可以添加，删除，改变属性和方法基本类型：不可
2021-01-09 11:04:59
111
原创 js原型和原型链基本概念
原型原型链构造函数创建对象prototypeprotoconstructor原型链构造函数创建对象Person就是一个构造函数，使用new创建了一个实例对象personfunction Person(){}var person = new Person();person.name = '砸键盘';console.log(person.name); //砸键盘prototype每一个函数都有一个prototype属性每一个js对象（null除外)在创建的时候就会与
2021-01-05 10:38:47
447
原创 js中的call,apply,bind
js中的call,apply,bindcall,apply,bind都是用来改变this指向的，他们的区别如下。function fn(a,b,c,d){ console.log(a,b,c,d);}//callfn.call(null,1,2,3);//applyfn.apply(null,[1,2,3]);//bindvar f = fn.bind(null,1,2,3);f(4);call逐个传值，apply传一个数组，bind也是逐个传值，但是bind与另外两个有所不同，
2021-01-04 15:29:19
59
原创 js中的this
@js中的thisthis基本常见知识点面向对象语言中this表示当前对象的一个引用。this的指向在函数定义的时候确定不了，只有函数执行的时候才能确定到底指向谁，this的最终指向时调用他的对象（大部分情况如此，有特殊情况指向其他）基本的情况情况1：如果函数中有this，没有被上一级对象调用，那么this指向的是window，严格模式下为undefined情况2：如果函数中有this，有被上一级对象调用，那么this指向的就是上一级对象情况3：如果函数中有this， 这个函数中包含多个对象，
2021-01-04 15:21:05
119
2
原创 vue $set
@vue $setvue $set如果在创建实例以后，再在实例上绑定新属性，vue是无法进行双向绑定的此时如果使用this.$set的话，vue就会对它进行双向绑定了。this.$set(‘变量’,‘属性’,‘值’)this.$set(_this.jbxxData, ‘spzzlx’, ‘1’);...
2020-12-30 17:48:33
116
原创 vuex 知识点总结
vuex在vuecli3模板上使用1. 核心概念：store，state，getters，mutations，actions3. 辅助函数：mapstate，mapactions，mapmutations，mapgetters配置export default new Vuex.Store({ state: { userInfo: { u...
2020-03-31 20:08:25
132
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人