大海里没有水-CSDN博客

一、存储方案一(localStorage/sessionStorage)1、localStorage/sessionStorage2、localStorage/sessionStorage 常用方法// 1、setItemlocalStorage.setItem("name", "chen123");localStorage.setItem("age", 13);// 2、lengthconsole.log(localStorage.length);for (let i = 0; i &

2022-05-31 11:48:51 121

原创 JSON序列化与解析

1、JSON顶层支持的三种类型的值2、基本使用const obj = { name: "chen", age: 23, friends: { name: "feng", }, hobbies: ["足球"],};// 我们需要使用JSON.stringify():const objstring = JSON.stringify(obj);// 本质上是一个json格式// 将对象数据存储localStoragelocalStorage.setItem("obj"

2022-05-30 15:59:46 481

原创包管理工具

一、npm工具1、版本2、安装3、npm install 原理二、yarn工具三、cnpm工具四、npx工具npx webpack --version,调用的是项目中的模块指令发布自己的包

2022-05-30 14:17:04 83

原创模块化 CommonJS ES Module

一、模块化1、没有模块化的时候xiaoming/index.js// 我们把它写到函数里面，函数有自己的作用域// function foo() {// var name = "why";// var isFlag = false;// }// foo();// 但是上面的写法还要写foo()执行它，自执行函数可以替换var moduleA = (function () { var name = "chen"; var isFlag = true; // 把对象返

2022-05-29 21:07:11 157

原创浏览器node事件循环

javascript浏览器中的JavaScript线程 1、浏览器的事件循环2、宏任务和微任务1、定时器、ajax、DOM等的回调会加入宏任务2、queueMicrotask、Promise then等加入到微任务里面注：在执行任何的宏任务之前，都需要保证微任务队列已经被清空了。3、Promise面试题3.1setTimeout(function () { console.log("setTimeout1"); // 构造函数的代码是不会被加入到任务队列里面的，会被放入到

2022-05-28 17:12:22 97

原创 async/await 异步函数

1、async异步函数的使用// await/async写法async function foo1() {}const foo2 = async () => {};2、async异步函数的执行流程// 都是同步代码，跟普通函数代码没区别async function foo() { console.log("内部代码执行1"); console.log("内部代码执行2"); console.log("内部代码执行3");}console.log("script st

2022-05-28 14:33:41 352

原创 js 迭代器生成器异步代码处理 promise+生成器 -＞ await/async

一、迭代器迭代器本身就是一个对象，可以帮助我们遍历另外一个对象1、认识迭代器// 下面是我们编写的一个迭代器,就是一个对象。帮我们遍历容器结构// const iterator = {// next: function () {// return {// done: true,// value: 123,// };// },// };// 数组const names = ["a", "b", "c"];const iterator

2022-05-25 22:49:27 350

原创 Promise 大法-手撕promise

1、没有Promise之前的处理// 以前是使用回调函数// 这种回调的方式有很多的弊端：// 1> 如果是我们自己缝制的requestData,那么我们在封装的时候必须自己设计好callback名称// 2> 如果是别人封装的，那我们必须去看别人的源码，看参数等，才能获取到结果// request.jsfunction requestData(url, successCallback, errorCallback) { // 模拟网络请求 setTimeout(()

2022-05-22 16:44:14 311

原创 Proxy-Reflect 响应式原理 vue3/vue2

一、Proxy1、监听对象的操作 - Object.defineProperty()通过使用Object.defineProperty()const obj = { name: "chen", age: 23,};// 1.监听一个属性// Object.defineProperty(obj, "name", {// get: function () {// console.log("监听到name被访问");// return this;// },//

2022-05-21 16:37:07 215

原创自定义filter()

let hd = [1, 2, 3, 4, 5];Array.prototype.myfilter = function (callback) { let arr = []; for (const [key, value] of this.entries()) { // console.log('key ,value===', key, value); let isFlag = callback(value, key) if (isFlag) { arr.pus

2022-05-19 10:18:12 165

原创 ES6~ES12 类的混入 mixin 多态 let/const/var等

1、混入 mixinJavaScript的类只支持单继承：也就是只能有一个父类，我们在开发中如果需要添加多个类的功能，可以使用混入（mixin）class Student { styding() { console.log("styding"); }}class Runner { running() { console.log("running"); }}class Eater { eating() { console.log("eating");

2022-05-18 22:39:17 399

原创 js class

类1、class定义的方式class Person{}// 研究一下类的特点console.log(Person.prototype); // {}console.log(Person.prototype.__proto__);//[Object: null prototype] {}console.log(Person.prototype.constructor);//[class Person]console.log(typeof Person);//function 这里只是typeo

2022-05-15 23:02:00 189

原创 js原型-对象方法的补充

1、判断属性是否在原型上var obj = { name: "chen", age: 30,};var info = Object.create(obj, { // 这个属性，是添加到info上的，不是原型上 address: { value: "北京", enumerable: true, },});console.log(info); //{ address: '北京' }console.log(info.__proto__); //{ name: '

2022-05-15 17:16:29 124

原创一些零散js知识点

1、String跟toStringlet a;let b = null;// console.log(a.toString()); // Cannot read property 'toString' of undefined// console.log(b.toString()); // Cannot read property 'toString' of nullconsole.log(String(a)); // undefinedconsole.log(String(b)); // n

2022-05-12 16:10:03 253

原创 js面向对象原型

1、面向对象创建对象：a.使用newb.使用字面量形式 : let obj = {name: ‘chen’}1.1、属性描述符可以精准的添加和修改对象的属性，需要使用Object.defindPropertyvar obj = { name: 'chen', age: 12,};// 属性描述符是一个对象. 返回的是同一个对象var newObj = Object.defineProperty(obj, 'height', { value: 1.8})consol

2022-05-11 17:48:55 222

原创 use strict

1、use strict"use strict"// 1、不允许函数有相同的参数名称// function foo(x, y, x) {// console.log(x, y, x);// }// console.log(foo(1, 2, 3)) // 3 2 3 ,如果在严格模式下，是不允许的// 2、静默错误// var obj = {};// Object.defineProperty(obj, "name", {// writable: false,// val

2022-05-11 17:23:07 103

原创 javascript 纯函数柯里化回顾

1、纯函数a、确定的输入，一定会产生确定的输出b、函数在执行过程中，不能产生副作用var names = ["abc", "cba", "nab", "a"];// slice, 只要传入一个start/end// slice函数本身不会修改原来的数组// slice就是一个纯函数var newNames = names.slice(0, 3);console.log(newNames);console.log(names);// splice不是纯函数var newNames

2022-05-10 22:38:57 211

原创一些css常用样式

一些css常用样式

2022-05-10 15:34:42 97

原创数组极值自定义push pop forEach map

// 1、求数组极值// 方式1：使用排序函数let arr = [23, 2, 34, 5, 2, 123];let newArr = arr.sort(function (a, b) { return b - a})console.log(newArr)// 方式2：假设法，假设第一个最小let min = arr[0];for (let i = 0; i < arr.length; i++) { min = min > arr[i] ? min : arr[i]

2022-05-10 13:47:22 181

原创 arguments了解

// 箭头函数中是没有arguments的function foo(num1, num2) { console.log(arguments); // 取出参数并乘10 // 1.方式一： // var newArr = []; // for (var i = 0; i < arguments.length; i++) { // newArr.push(arguments[i] * 10); // } // 2.方式二：是不可以使用map、forEach的.

2022-05-09 23:22:05 170

原创 aplly bind slice自定义实现

自定义 apply bind slice 简单实现

2022-05-09 22:15:07 301

空空如也

空空如也