康立志-CSDN博客

原创 CSS Sticky footer

<div class="wrapper"> <div class="main"></div></div><div class="close">按钮</div>.wrapper{ min-height: 100%;}.main { padding-bottom: 64px;}.close { position: relative; width：32px; height： 32px; margin： -64px

2020-07-21 19:47:46 247

原创 clearfix类清楚浮动影响

.clearfix { display: inline-block}.clearfix:after { display: block content: "." height: 0 line-height: 0 clear: both visibility: hidden}

2020-07-21 19:21:42 267

原创 Vue基础入门（vue组件化的使用和vue-cli组件化的使用）

vue组件化的使用和vue-cli组件化的使用效果展示不使用用组件化使用组件使用vue-cli效果展示输入数字后点击提交自动生成一列显示输入内容，点击该列该列消失不使用用组件化<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src=vue.js></

2020-07-07 18:22:42 441

原创 globalThis获得全局对象

globalThisJavascript 在不同的环境获取全局对象有不通的方式：node 中通过 globalweb 中通过 window, self 等.TIPself：打开任何一个网页，浏览器会首先创建一个窗口，这个窗口就是一个window对象，也是js运行所依附的全局环境对象和全局作用域对象。self 指窗口本身，它返回的对象跟window对象是一模一样的。也正因为如此，window对象的常用方法和函数都可以用self代替window。self.setTimeout(() => {

2020-06-27 21:18:50 646

原创 Promise.allSettled()（ES11）

Promise.allSettledPromise.allSettled()Promise.allSettled()学习了ES新特性，我们都知道 Promise.all() 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise直接进入 reject 状态。场景：现在页面上有三个请求，分别请求不同的数据，如果一个接口服务异常，整个都是失败的，都无法渲染出数据Promise.all([ Promise.reject({

2020-06-27 21:16:11 595

原创 BigInt类型（ES11）

BigIntBigInt方式一：数字后面增加n方式二：使用 BigInt 函数BigInt在 ES10 增加了新的原始数据类型：BigInt，表示一个任意精度的整数，可以表示超长数据，可以超出2的53次方。Js 中 Number类型只能安全的表示-(2^53-1)至 2^53-1 范的值console.log(2 ** 53) // es7 幂运算符console.log(Number.MAX_SAFE_INTEGER) // 最大值-1使用 BigInt 有两种方式：方式一：数字后面增加n

2020-06-27 21:14:41 1388

原创 Dynamic Import动态引入

Dynamic ImportDynamic Import案例Dynamic Import按需 import 提案几年前就已提出，如今终于能进入ES正式规范。这里个人理解成“按需”更为贴切。现代前端打包资源越来越大，打包成几M的JS资源已成常态，而往往前端应用初始化时根本不需要全量加载逻辑资源，为了首屏渲染速度更快，很多时候都是按需加载，比如懒加载图片等。而这些按需执行逻辑资源都体现在某一个事件回调中去加载。案例页面上有一个按钮，点击按钮才去加载ajax模块。const oBtn = documen

2020-06-27 21:13:14 6166

原创 String.prototype.matchAll()和正则表达式匹配字符串对象方法

String.prototype.matchAll和正则表达式匹配字符串对象方法String 扩展String.prototype.matchAll()RegExp.prototype.exec() with /gString.prototype.match() with /gString.prototype.replace()String.prototype.matchAll 方法/g作用String 扩展String.prototype.matchAll()matchAll() 方法返回一个包含所

2020-06-27 20:26:45 739

原创 Symbol.prototype.description()（获取Sympol中的描述符）(ES10)

Symbol 扩展Symbol 扩展Symbol.prototype.descriptionSymbol 扩展Symbol.prototype.description我们知道，Symbol 的描述只被存储在内部的 Description ，没有直接对外暴露，我们只有调用 Symbol 的 toString() 时才可以读取这个属性：const name = Symbol('es')console.log(name.toString()) // Symbol(es)console.log(name

2020-06-27 19:28:43 443

原创 Function.prototype.toString()返回函数字符串

Function.prototype.toString（）Function.prototype.toString()Function.prototype.toString()函数是对象，并且每个对象都有一个 .toString() 方法，因为它最初存在于Object.prototype.toString() 上。所有对象（包括函数）都是通过基于原型的类继承从它继承的。这意味着我们以前已经有 funcion.toString() 方法了。Function.prototype.toString() 方法返

2020-06-27 19:25:55 452

原创 Array 数组扁平（ES10）

Array 扩展Array 扩展Array.prototype.flat()Array.prototype.flatMap()Array 扩展Array.prototype.flat()flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。语法const newArray = arr.flat(depth)解释参数含义必选depth 指定要提取嵌套数组的结构深度，默认值为 1 N示例const numbers = [1, 2

2020-06-27 19:23:40 235

原创 String 扩展（删除空格）

String 扩展（删除空格）String 扩展（删除空格）String.prototype.trimStart()String.prototype.trimEnd()String 扩展（删除空格）String.prototype.trimStart()trimStart() 方法从字符串的开头删除空格，trimLeft()是此方法的别名。语法str.trimStart()或str.trimLeft()注意虽然 trimLeft 是 trimStart 的别名，但是你会发现 Strin

2020-06-27 19:17:51 268

原创 Object.fromEntries()（ES10）

Object.fromEntriesObject.fromEntries()案例1：Object 转换操作案例2：Map 转 Object案例2：过滤Object.fromEntries()方法 Object.fromEntries() 把键值对列表转换为一个对象，这个方法是和 Object.entries() 相对的。Object.fromEntries([ ['foo', 1], ['bar', 2]])// {foo: 1, bar: 2}案例1：Object 转换操作

2020-06-27 19:14:59 332

原创模板字符串（ES9）

模板字符串字符串扩展字符串扩展放松对标签模板里字符串转义的限制, 遇到不合法的字符串转义返回undefined，并且从raw上可获取原字符串。ES9开始，模板字符串允许嵌套支持常见转义序列，移除对ECMAScript在带标签的模版字符串中转义序列的语法限制。带标签的模板字符串const foo = (a, b, c, d) => { console.log(a) console.log(b) console.log(c) console.log(d)}//

2020-06-27 19:11:22 187

原创 Promise.prototype.finally（ES9）

Promise.prototype.finallyPromise.prototype.finally()场景1：loading关闭场景2：数据库断开链接Promise.prototype.finally()指定不管最后状态如何都会执行的回调函数。Promise.prototype.finally() 方法返回一个Promise，在promise执行结束时，无论结果是fulfilled或者是rejected，在执行then()和catch()后，都会执行finally指定的回调函数。这为指定执行完pro

2020-06-27 19:09:07 229

原创 Rest & Spread（ES9对对象的操作）

Rest & Spread（ES9）在 ES9 新增 Object 的 Rest & Spread 方法，直接看下示例：const input = { a: 1, b: 2}const output = { ...input, c: 3}console.log(output) // {a: 1, b: 2, c: 3}这块代码展示了 spread 语法，可以把 input 对象的数据都拓展到 output 对象，这个功能很实用。我们再来看下 Object

2020-06-27 15:24:55 230

原创 for await of异步迭代器（ES9）

for await of异步迭代器for await offor await of异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步。我们知道 for…of 是同步运行的，有时候一些任务集合是异步的，那这种遍历怎么办呢？function Gen(time) { return new Promise(function(resolve, reject) { setTimeout(function() {

2020-06-27 15:22:48 4498 2

原创 String 填充（ES8）

String 填充String 扩展String.prototype.padStart()场景1：日期格式化场景2：数字替换String.prototype.padEnd()场景：时间戳统一长度String 扩展在 ES8 中 String 新增了两个实例函数 String.prototype.padStart 和 String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。String.prototype.padStart()把指定字符串填充到字符串头部

2020-06-27 14:32:36 656

原创 Object扩展（ES8）

Object 扩展Object 扩展Object.values()Object.entries()Object.getOwnPropertyDescriptors()Object 扩展之前的语法如何获取对象的每一个属性值const obj = { name: 'imooc', web: 'www.imooc.com', course: 'es'}console.log(Object.keys(obj))const res = Object.keys(obj).map(ke

2020-06-27 13:41:10 158

原创 async / await（ES8异步）

async / awaitasync / await基本语法对于失败的处理应用async / awaitasync 和 await 是一种更加优雅的异步编程解决方案，是Promise 的拓展。在我们处理异步的时候，比起回调函数，Promise的then方法会显得较为简洁和清晰，但是在处理多个彼此之间相互依赖的请求的时候，就会显的有些繁琐。这时候，用async/await更加优雅。我们知道 JavaScript 是单线程的，使用 Promise 之后可以让我们书写异步操作更加简单，而 async 是让

2020-06-27 13:13:28 290

原创幂运算符**（ES7）

幂运算符**幂运算符**幂运算符**如果不使用任何函数，如何实现一个数的求幂运算？function pow(x, y) { let res = 1 for (let i = 0; i < y; i++) { res *= x } return res}pow(2, 10)// 1024除了自己封装函数来实现，也可是使用 Math.pow() 来完成。Math.pow() 函数返回基数（base）的指数（exponent）次幂。con

2020-06-27 11:38:48 3303

原创 Array.prototype.includes()（ES7扩展）

Array.prototype.includes()在 ES7 之前想判断数组中是否包含一个元素，基本可以这样写：console.log(array1.find(function(item) { return item === 2}))或者console.log(array1.filter(function(item) { return item === 2}).length > 0)ES7引入的Array.prototype.includes() 方法用来判断一个数

2020-06-27 11:35:32 243

原创 Module（ES6）

ModuleModule模块化的发展CommonJS规范 Node中模块化规范AMD规范, 异步模块定义CMD规范ES6规范exportasexport defaultimportModule模块化的发展技术的诞生是为了解决某个问题，模块化也是。随着前端的发展，web技术日趋成熟，js功能越来越多，代码量也越来越大。之前一个项目通常各个页面公用一个js，但是js逐渐拆分，项目中引入的js越来越多. 在js模块化诞生之前，开发者面临很多问题:全局变量污染：各个文件的变量都是挂载到window对象上，

2020-06-27 00:43:18 285

原创定位position和z-index

定位position和z-index相对定位 relative相对定位微调小技巧绝对定位 absolute绝对定位微调小技巧固定式定位 fixedz-index 设置层级优先级相对定位 relative默认情况下元素 position 为 static，作为标准文档流的一部分，设置 relative 可转换为相对定位元素，该元素原本所占的空间（文档流）仍保留，之后可以通过设置垂直或水平位置，让这个元素相对于它的起点进行位移，exp：#box_relative { position: relat

2020-06-27 00:04:32 230

原创浮动float和display

浮动float和display浮动样式 floatcss 浮动示例常规浮动效果1常规浮动效果2常规浮动效果3常规浮动效果4float 浮动实际应用场景：clear 清除浮动：float 浮动副作用-塌陷父元素：display 设置元素框类型浮动样式 float浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，使用浮动的元素会默认转换为块儿级。css 浮动示例当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：常规浮动效果1当框 1

2020-06-26 23:53:18 705

原创 Iterator

Iterator处理集合中的每个项是很常见的操作。JavaScript 提供了许多迭代集合的方法，从简单的for循环到map()和filter()。迭代器和生成器将迭代的概念直接带入核心语言，并提供了一种机制来自定义for…of循环的行为。如果对 MDN 这个描述理解不是很到位的话，可以看下接下来这个小示例：let authors = { allAuthors: { fiction: [ 'Agatha Christie', 'J

2020-06-26 22:41:13 111

原创 Generator函数

Generator函数Generator常规循环利用 Generator基本语法yield 表达式方法-next([value])- return()- throw()场景1场景2Generator什么是 JavaScript Generators 呢？通俗的讲 Generators 是可以用来控制迭代器的函数。它们可以暂停，然后在任何时候恢复。如果这句话不好理解，可以看下接下来的示例。常规循环for (let i = 0; i < 5; i += 1) { console.log(i

2020-06-26 21:18:55 728

原创 promise(ES6)

promiseES6promise基本语法Promise.prototype.then()Promise.prototype.catch()Promise的静态方法Promise.resolve()Promise.reject()Promise.all()Promise.race()把前篇博客中Callback Hell的代码改写成promise的写法promise基本语法Promise 就是为了解决“回调地狱”问题的，它可以将异步操作的处理变得很优雅。回调地狱，代码难以维护，常常第一个的函数的输出

2020-06-26 19:14:57 290

原创异步操作和ajax原理以及回调地狱

异步操作和ajax原理以及回调地狱异步操作JS是单线程的Ajax原理Callback Hell异步操作JS是单线程的就是同一个时间只能处理一个任务。就类似生活中的去超市排队结账，正常情况下，一位收银员只能为一位顾客结账，其他顾客需要在后面排队等候。为什么 JS 是单线程的？作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM 。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定 JavaScript同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一

2020-06-26 14:42:49 378

原创 Reflect对象

Reflect对象Reflect设计目的常用方法Reflect.apply()Reflect.construct()Reflect.defineProperty()Reflect.deleteProperty()Reflect.get()Reflect.getOwnPropertyDescriptor()Reflect.getPrototypeOf()Reflect.has()Reflect.isExtensible()Reflect.ownKeys()Reflect.preventExten

2020-06-26 13:34:03 724

原创 Proxy代理（ES6）

Proxy代理Proxy基本语法语法解释常用拦截操作getsethasownKeysdeletePropertyapplyconstructProxy在 ES6 标准中新增的一个非常强大的功能是 Proxy，它可以自定义一些常用行为如查找、赋值、枚举、函数调用等。通过 Proxy 这个名称也可以看出来它包含了“代理”的含义，只要有“代理”的诉求都可以考虑使用 Proxy 来实现。基本语法语法let p = new Proxy(target, handler)解释MDN 给出的解释偏官方，通俗

2020-06-26 12:25:24 593

原创 ES6中二进制和八进制的表达方法以及Math和Number的扩展

ES6中二进制和八进制的表达方法以及Math和Number的扩展Number二进制与八进制新增方法Number.isFinite()Number.isNaN()Number.parseInt()Number.parseFloat()Number.isInteger()Number.MAX_SAFE_INTEGERNumber.MIN_SAFE_INTEGERNumber.isSafeInteger()Math扩展Math.trunc()Math.sign()Math.cbrt()Number二进制与八进

2020-06-25 23:08:19 648

原创 ES6中字符串的扩展

ES6中字符串的扩展Unicode表示法模板字符串ES6中字符串的扩展方法String.prototype.fromCodePoint()String.prototype.includes()String.prototype.startsWith()String.prototype.endsWith()String.prototype.repeat()Unicode表示法ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。"\u

2020-06-25 22:13:13 238

原创 Map和WeakMap

Map和WeakMapMap基本语法实例化添加数据删除数据统计数据查询数据遍历方式Object 和Map的区别键的类型键的顺序键值对的统计键值对的遍历性能WeekMapWeakMap与Map的区别（WeakMap是弱引用）MapES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的**范围不限于字符串，各种类型的值（包括对象）都可以当作键。**也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要

2020-06-25 21:23:55 223

原创 Set和WeakSet

Set和WeakSetset数据结构基本语法生成 Set 实例添加数据删除数据使用方法统计数据数组去重合并去重交集差集遍历方式WeakSetset数据结构在 JavaScript 里通常使用 Array 或 Object 来存储数据。但是在频繁操作数据的过程中查找或者统计并需要手动来实现，并不能简单的直接使用。比如如何保证 Array 是去重的，如何统计 Object 的数据总数等，必须自己去手动实现类似的需求，不是很方便。在 ES6 中为了解决上述痛点，新增了数据结构 Set 和 Map，它们分别

2020-06-25 20:47:55 156

原创列表样式修改

列表样式修改列表样式list-style-type 设置列表项的标志类型通过 list-style-type 可以将 "无序列表" 同 "有序列表" 进行相互转换：清除列表项标志，作为样式初始化：list-style-image 设置列表项图像：list-style-position 设置列表项标志定位：简写列表样式：列表样式list-style-type 设置列表项的标志类型exp 把无序列表中的列表项标志设置为方块：ul { list-style-type : square; }通

2020-06-25 19:20:57 846

原创盒子模型

盒子模型盒子模型标签默认样式：padding内边距border 边框border-styleborder-widthborder-colormargin 外边距使用小技巧：水平居中块儿级元素外边距合并怪异盒子模型盒子模型css 盒子模型 (Box Model) 规定了元素处理元素内容、内边距、边框和外边距的方式，在 css 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框不会影响内容区域的尺寸，但是会增加 “盒子” 的实际尺寸，故标准盒子模型中 “盒子” 尺寸的计算公式为：

2020-06-25 19:14:48 2708

原创 Symbol数据类型

Symbol数据类型Symbol声明方式Symbol.for()Symbol.keyFor()symbol的用处作为属性名属性遍历（隐藏属性名）消除魔术字符串SymbolES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型

2020-06-25 18:31:48 263

原创类与继承与静态属性和方法（ES5与ES6）

类与继承（ES5与ES6）声明类ES5中的class声明ES6中的class声明Setters & Getters静态属性和方法继承Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。这是摘自阮一峰老师的博客，这句话放在 ES5 可以说不为过，然而到了 ES6 这么说就已经不严谨了。因为 ES6 中已经有了专属的 class 语法了。有的同学喜欢函数式的编程方

2020-06-25 16:41:28 739 1

原创深拷贝和浅拷贝(自定义基本数据类型和数组、对象深拷贝函数)

深拷贝和浅拷贝定义深拷贝：浅拷贝：通过JSON对象的方法实现深拷贝自定义基本数据类型和数组对象深拷贝函数定义深拷贝：目标对象=源对象=>只存储源对象的数据内容，源对象内容改变不会影响目标对象内容。浅拷贝：目标对象=源对象=>只存储源对象的数据地址，源对象内容改变影响目标对象内容。通过JSON对象的方法实现深拷贝let obj1 ={ name:klz, age:22}let str=JSON.stringify(obj1);let obj2=JSON.parse(str)

2020-06-25 14:07:42 310

ImageProcessor.rar

空空如也