Blank0411-CSDN博客

原创 js高级 5.作用域与执行上下文的区别与联系

js 作用域与执行上下文的区别与联系

2022-02-17 12:35:46 145

集中式（svn）svn因为每次存的都是差异需要的硬盘空间会相对的小一点可是回滚的速度会很慢优点：代码放在单一的服务器上，便于项目的管理缺点：服务器宕机：员工写得代码得不到保障服务器炸了，整个项目的历史记录都会消失分布式（git）git每次存的都是项目的完整快照需要的硬盘空间会相对的大一点git团队对代码做了极致的压缩最终需要的实际空间比svn多不了多少git操作最基本的流程创建工作目录对工作目录进行修改git add ./1.git hash-object -w 文件名（

2022-02-16 10:17:54 255

原创 js 基础知识

在JS中一共有6中数据类型String 字符串Number 数值Boolean 布尔值Null 空值：这个值专门用来表示一个空的对象Undefined 未定义：当声明一个变量，但是并不给变量赋值时。它的值就是undefinedObject 对象其中 String Number Boolean Null Undefined 为基本数据类型Object 为引用数据类型强制类型转换：将其它的数据类型转换成String方式一： 1.调用被转换类型的toString()方法，该方法不会影

2022-02-09 15:05:09 775

原创 ES6 Promise

Promise 承诺Promise相当于一个容器，保存着未来才会结束的事件（异步操作）结果各种异步操作都可以用同样的方法进行处理 axios特点：1.对象的状态不受外界影响处理异步操作，三个状态 pending(进行) resolved(成功) rejected（失败）2.一旦状态发生改变，任何时候都可以得到这个结果首先先查看一下promise的结构 let pro = new Promise(function(resolved,reject){ //执行异步操作

2022-01-24 16:10:44 161

原创 ES6 Generator生成器和应用

generator函数，可以通过yield关键字，将函数挂起，为了改变执行流，提供了可能性，同时为异步编程提供了方案于普通函数的区别：1.function后面函数名之前有个*2.它只能在函数内部使用yield表达式，让表达式挂起对生成器的结构截图：生成器内部有next()方法 function* add(){ console.log("one"); yield 2; console.log("two"); yield 3;

2022-01-24 14:47:08 438

原创 ES6 迭代器Iterator

Iterator是一种新的遍历机制两个核心1.迭代器是一个接口，能快捷的访问数据，通过Symbol.iterator来创建迭代器，通过迭代器的next()方法，获取数据2.迭代器是用于遍历数据结构的指针（类似于数据库的游标）const arr = [20,30,50,20,50];console.log(arr);const itr = arr[Symbol.iterator]();console.log(itr);//结果：Array Iterator {}console.log(itr

2022-01-24 12:54:32 1003

原创 ES6 数组的扩展方法

1.数组的方法 from() of()from() 将伪数组转换成真正的数组function add(){ console.log(arguments); //es5中将参数转换成数组 let arr = [].slice.call(arguments); console.log(arr); //es6中将参数转换成数组 let arr1 = Array.from(arguments); console.log(arr1);}add(1,

2022-01-24 11:35:26 756

原创 ES6 中的Set和Map

ES6中的setlet m = new Set();console.log(m);//往set中添加元素m.add(1);m.add("str");m.add([4,2,3]);//查看set中是否有某个元素console.log(m.has("str"));m.delete("str");//set遍历m.forEach((val,key)=>{ console.log(val); console.log(key);})使用扩展运算符将set转换成数组l

2022-01-24 10:34:32 426

原创扩展的对象功能

在es5中定义一个对象let name = 'blank0411';let age = 32;const person = { name : name, age : age, sayHello:function(){ console.log(`${name}${age}`); }}person.sayHello();在es6中直接写入变量和函数，作为对象的属性和方法let name = 'blank0411';let age = 32;co

2022-01-21 16:09:33 60

原创解构赋值

解构赋值是对赋值运算符的一种扩展它针对数组和对象来操作优点：代码书写上简洁易读let stu = { name:"blank0411", age:32}//完全解构let {name,age} = stu;console.log(name,age);不完全解构，可忽略不需要的属性let stu = { a:{ name:'stu1', age : 10, }, b:{ name:'stu2',

2022-01-21 15:43:40 70

原创函数的扩展运算符和箭头函数

剩余运算符：把多个独立的合并到一个数组中扩展运算符：将一个数组进行分割，并将各个项作为分离的参数传给函数let arr= [10,30,90,20,50];let m = Math.max(10,30,90,20,50);let n = Math.max(...arr);//上面两行的作用相同console.log(m);console.log(n);es5中的this指向：取决于调用该函数的上下文对象es6 箭头函数 => 来定义 function(){} 等于 ()=>{

2022-01-21 15:26:13 202

原创函数默认值和剩余参数

在es5中函数参数的默认值：function add(a,b){ a = a || 10; b = b || 20; return a+b;}console.log(add());在es6中function add(a=10,b=20){ return a+b;}console.log(add());默认的参数，也可以是一个函数function add(a=10,b=getVal(5)){ return a+b;}function getVa

2022-01-21 13:46:37 191

原创 es6 模板字符串

在es5中我们需要使用字符串拼接的方式来加入某个变量let name = "blank0411";let hello = "hello " +name+" 来到我的博客";console.log(hello);如果是一段代码块的话，再加入变量，会更加麻烦所以在es6中，加入了模板字符串1.首先将字符串用符号（tab键上方的小波浪线键）包裹2.变量用美元符号和花括号包裹${variable}let hello1=`hello ${name} 来到我的博客`console.log(h

2022-01-21 13:18:34 181

原创 let和const

在es5中声明一个变量只有var 关键字，而在es6中新增了 let 和const.首先先说明一下 var:console.log(a);var a ='123';结果：上述代码并有报错，只是打印出了undefined.是因为var是全局变量，变量提升console.log(a);var a ='123';//变量提升，上述代码不报错，因为其等同于如下代码// var a;// console.log(a);// a = '123';{ var a ='345';}

2022-01-21 13:03:59 391

原创 React Hooks -- useMemo,useCallback

useMemo 主要用来解决使用React Hooks产生的无用渲染的性能问题，使用function的形式声明组件失去了shouldComponentUpdate（组件更新之前）这个声明周期，也就是说我们没有办法通过组件更新前条件来决定组件是否更新。而且在函数组件中，也不再区分mount和update两种状态，这意味着函数组件的每一次调用都会执行内部的所有逻辑，带来了非常大的性能损耗。useMemo 和 useCallback都是解决上述性能问题的。useMemo和useCallback都会在组件第一

2020-11-09 16:44:39 121

原创 React Hooks --useReducer

为了更好的理解useReducer，所以先要了解Javascript里的Reducer是什么。reducer其实就是一个函数，这个函数接受两个参数，一个是状态，一个用来控制业务逻辑的判断参数。如下所示：function countReducer(state, action) { switch(action.type) { case 'add': return state + 1; case 'sub': return

2020-11-09 15:27:38 111

原创学习ReactHooks--useContext

useContext的作用就是对它所包含的组件树提供全局共享数据的一种技术。在用类生命组件时，父子组件的传值是通过组件属性和props进行的，那现在使用方法（Function）来声明组件，已经没有了constructor构造函数，也就没有了props的接收，那父子组件之间的传值也就成了一个问题。React Hooks为我们准备了useContext。useContext其实总共分两步：1.createContext函数创建context2.useContext接收上下文变量1.createCont

2020-11-09 15:16:50 148

原创 React Hooks --useEffect

再用class写组件时，经常会用到生命周期函数，来处理一些额外的事情（副作用：和函数业务主逻辑关联不大，特定时间或事件中执行的动作，比如请求后端数据，修改Dom等）在React HookS中也需要类似的生命周期函数，useEffect由此诞生。由class的形式，声明一个组件，并增加两个生命周期函数componentDidMount和componentDidUpdateimport React, { Component } from 'react';class Example3 extends Co

2020-11-09 14:54:50 668

原创 React Hooks --useState

useState是React自带的一个hook函数，它的作用是用来声明状态变量。上一篇文章中，useState的声明方式如下：const [count, setCount] = useState(0);这种方法是ES6语法中的数组结构，如果不写成数组结构，上边一句话要写成下面的三行：let _useState = userState(0)let count = _useState[0]let setCount = _useState[1]useState这个函数接受的参数是状态的初始值（i

2020-11-09 14:31:24 138

原创初识React Hooks

React Hooks就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state,有了Hooks可以不再使用类的形式定义组建了。react原始开发形式：import React, { Component } from 'react';class Example extends Component { constructor(props) { super(props); this.state = { count:0 } } ren

2020-11-09 14:18:00 62

原创 Redux--用React-Redux来重构ToDoList

React-Redux 的两个核心组件：Provider提供器connect连接器index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import ToDoList from './ToDoList'import {Provider} from 'react-redux'import store from './store' const app=( <P

2020-11-03 15:47:54 92

原创 Redux-用Redux来完成ToDoList(5) _无状态组件

***无状态组件***其实就是一个函数，它不用再继承任何的类（class），当然如名字一样，也不存在state（状态）。因为无状态组件其实就是一个函数（方法）,所以它的性能也比普通的React组件要好。// import React, { Component } from 'react';import 'antd/dist/antd.css'import {Input,Button,List } from 'antd'const ToDoListUi=(props)=>{ re

2020-11-02 15:11:29 75

原创 Redux-用Redux来完成ToDoList(4)

组件UI和业务逻辑的拆分其实整合就是通过属性传值的形式，把需要的值传递给子组件，子组件接收这些值，进行相应的绑定就可以了。新建ToDoListUi.js组件import React, { Component } from 'react';import 'antd/dist/antd.css'import {Input,Button,List } from 'antd'class ToDoListUi extends Component { render() {

2020-11-02 14:55:28 54

原创 Redux-用Redux来完成ToDoList(3)

目前ToDoList组件里有很多Action,并且分散在程序的各个地方，如果庞大的工程，这势必会造成混乱，那么接下来把所有的Redux Action放在一个文件里进行管理新建文件actionCreators.jsimport {DELETE_ITEM,CHANGE_INPUT,ADD_ITEM} from '../actionTypes'export const changeInputAction=(value)=>({ type:CHANGE_INPUT, value})

2020-11-02 14:07:59 80

原创 Redux-用Redux来完成ToDoList(2)

把Action Types单独写入一个文件写Redux Action的时候，我们写了很多Action的派发，产生了很多Action Types,如果需要action的地方我们就自己命名一个Type，会出现两个问题：1.这些Types如果不统一管理，不利于大型项目的服用，设置太长会产生冗余代码2.因为Action 里的Type，一定要和Reducer里的type一一对应，所以这部分的代码或字母写错后，浏览器并没有明确的报错，这给调试带来极大的困难。那么此篇文章是将Action Types单独拆出一个

2020-11-02 13:54:32 60

空空如也

空空如也