卡卡的笔录-优快云博客

CSS/JS/HTML对字符的不同表示1） CSS表示法‘\ + 16进制的unicode编码’2）JS表示法‘\u + 16进制的unicode编码’3）表示法‘&# + 10进制的unicode编码 + 英文分号’同时，一些特殊字符用HTML转义字符表示，常见的转义字符参见这里unicode编码和字符之间的转换1）10进制的unicode编码与字符之间的转换 var an = '安'； var anUnicode = an.charCodeAt(); //23433 .

2020-08-13 09:19:15 241

原创 ES6中的扩展运算符/剩余运算符：...

在ES6中。三个点(…) 有2个含义，分别表示扩展运算符和剩余运算符。扩展运算符用法一：将数组扩展成函数参数function foo(a,b, c) { console.log(a); console.log(b); console.log(c)}var arr = [1,2,3]foo(...arr)用法二：数组合并var arr1 = [1,2,3], arr2 = [4,5,6];var arr3 = [...arr1, ...arr2] // arr3为[1,

2020-08-11 09:45:53 367

原创 javaScript中的相等性判断

javaScript中的相等性判断一般包括以下四种情况：（1）严格相等（===）不仅会比较值是否相等，还会比较类型是否相等，这里有一个特殊情况是 +0 === -0（2）非严格相等（==）比较前会进行相应的[隐式类型转换](https://blog.youkuaiyun.com/m0_38102188/article/details/87167526)。（3）同值相等（Object.is）需要注意的是Object.is(NaN, NaN)返回的结果是true，也就是同值相等的判断中认为NaN和Na

2020-07-24 14:48:18 1841 1

原创 js中常见的隐式类型转换

比较运算符（&gt;, &gt;=, &lt;, &lt;= ）运算符两边操作数都是数字，则进行数字比较；运算符两边操作数都是字符串，则将字符的ASCII码进行一一比较（数字&lt;小写字母&lt;大写字母&lt;中文）；运算符一边操作数是数字，一边是字符串，则将字符串强制转换成number，再进行比较（因为字符串和数字都是值类型，应该是强制调用Number方法将字符串转换成数字，一般

2020-07-24 14:30:32 637

原创插入排序

首先留下第一个数，后面从第二个数开始，如果比前面的数大，那么保持顺序不变；如果比前面的数小，那么需要将后面的数与前面的数进行逐一比较，一旦遇到比他小的数，就插入到这个数的后面，不会继续跟前前面的数进行比较。 function insertionSort(arr) { var temp; for(var o = 1; o < arr.length; o++) { temp = arr[o] var i = o -1; //如果后

2020-06-30 09:48:30 125

原创选择排序

function selectionSort(arr) { var minIndex; for(var o = 0; o < arr.length-1; o++) { minIndex = o; for(var i = o + 1; i < arr.length; i++) { if(arr[i] < arr[minIndex]) { minIndex = i .

2020-06-29 09:43:25 133

原创冒泡排序

外循环负责遍历数组的每一项，内循环负责比较元素。 function bubbleSort(arr) { for (var i = 1; i < arr.length; i++) { for (var j = 0; j < i; j++) { if (arr[j] > arr[j + 1]) { swap(arr, j, j + 1) } } }

2020-06-28 11:17:11 156

原创回文

判断一个字符串是否是回文适合用栈（stack）这种数据结构来实现。Stack类的定义function Stack() { this.dataStore = []; this.top = 0; this.push = push; this.pop = pop; this.peek = peek; this.clear = clear; this.length = length;}function push(element) { this.dataStore[this.top++] =

2020-06-02 14:31:36 175

原创进制转换

进制转换(基数为2~9)适合用栈这种数据结构来实现。Stack类的定义function Stack() { this.dataStore = []; this.top = 0; this.push = push; this.pop = pop; this.peek = peek; this.clear = clear; this.length = length;}function push(element) { this.dataStore[this.top++] = elemen

2020-06-02 14:06:43 143

原创 clientY、screenY、pageY、offsetY和offsetTop分别指的是什么

clientY、screenY、pageY、offsetY这四者是事件对象event上的属性，offsetTop是目标元素的属性。、clientY: 事件距离浏览器可视视口顶部的距离（工具栏往下，不包含滚动条的距离）；screenY: 事件距离电脑窗口顶部的距离；pageY: 事件距离页面顶部的距离（包含滚动条的距离）；offsetY: 事件距离目标元素内填充边（padding edge）在Y轴方向上的偏移量；offsetTop: 目标元素的Y方向上滚动条的距离。...

2020-05-11 10:07:22 4064

原创实现元素的水平和垂直居中方法总结

非绝对定位元素方法一利用flex布局，IE浏览器兼容性不好。//HTML<div class="father"> <div class="son"> 哈哈 </div></div>//css.father { display: flex; justify-content: center; align-items: c...

2020-03-26 13:12:39 210

原创 Object.defineProperty和Proxy实现数据劫持

1. Object.defineProperylet obj = { name: 'zyp', likes: ['sleep', 'read']};function observe(obj) { Object.keys(obj).map(key => { reactive(obj, key, obj[key]) })}function...

2020-03-20 16:06:00 647

原创 Promise知识点

1.Promise.then()默认返回一个Promise，理论上可以无限制的then，只不过如果后面所有的then中的回调函数如果没有返回新的Promise.resolve(data)的话，那么它默认会生成一个Promise.resolve(undefined)。function 获取用户信息() { return Promise.resolve('姓名方方')}function 打...

2020-03-19 15:44:42 207

原创 EventHub简单实现

以下是EventHub的简单实现 class EventHub { constructor() { this.events = {} } on(eventName, fn) { if(!this.events[eventName]) { this.events[eventName] = [] } this.events[ev...

2020-01-10 16:40:38 911

原创函数防抖和函数节流

函数防抖(debounce)一般情况下，事件多次触发，导致回调函数被多次执行。将回调函数包入debounce函数中后，回调函数将在事件最后一次触发经过interval时间后执行一次。debounce函数 //匿名回调被多次触发，最后一次触发经过interval时间后执行一次fn function debounce(fn, interval) { let timeout......

2019-12-25 09:20:32 255

原创 XSS和CSRF

XSS: Cross-site scripting,跨站点脚本攻击。为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。而由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，或者利用这些信息冒充用户向网站发起攻击者定义的请求。...

2019-08-29 10:40:03 149

原创 async和await

首先要说明的是async函数和await的用法都是promise的语法糖，await必须在async函数中使用，但是async函数的调用不一定需要await关键字,且async函数中不一定有await。 async和await同时使用时，完成的操作是：async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise...

2019-08-28 08:25:24 928

原创全角空格和半角空格

  // 半角空格（英文）&emsp; // 全角空格（中文）

2019-08-27 17:27:39 4407

原创如何实现绝对定位元素的水平和垂直居中

方法一以下方法支持IE9+(包含IE9，亲测有效)//HTML<div class="father"> <div class="son"> 哈哈 </div></div>//CSS.father { position: relative; height: 100px; width: 100px; back...

2019-08-19 09:26:34 580

原创 BFC

MDN 对 BFC 的描述块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。下列方式会创建块格式化上下文：根元素或包含根元素的元素浮动元素（元素的 float 不是 none）绝对定位元素（元素的 position 为 absolute 或 fixed）行...

2019-07-09 08:24:04 166

原创 js继承的几种写法

Object.getPrototypeOf() + Object.create()var a = {name: 'zyp'}var ap = Object.getPrototypeOf(a)var b = Object.create(a) //继承自avar c = Object.create(ap) //继承自a的原型，即object...

2019-05-22 09:33:54 209

原创 JavaScript设计模式之观察者模式

适用场景：一个地方发生了更改，其他好几个地方进行相应的更改。实际应用： MVVM中的MV过程，Vue的事件总线，事件队列。ES5实现方式 var Subject = function () { this.observers = [] } Subject.prototype.addObserver = function(observer) { this....

2019-04-28 14:47:40 148 1

原创 JavaScript设计模式之桥接模式

适用场景：不同的对象(A,B)有相同的行为和特征，将这部分行为和特征单独出来，形成一个新的对象©，在构建对象(A,B)时传入对象C，对象(A,B)的行为函数中调用对象C对应的行为函数。实际应用场景：Toast、Message 两种形态的弹窗，弹窗都有出现和隐藏等行为。下面用代码实现一个最简单的桥接模式ES5实现方式function Toast(node, animation) {...

2019-04-09 17:11:30 138

原创 js中数组操作之includes&&indexOf

includesArray.includes(searchElement[, fromIndex])参数：（1）searchElement: 必填，需要查找的元素，（2）fromIndex: 非必填，默认是0，从该索引处开始搜索。如果是正值，且formIndex > Array.length，则必定搜索不到结果。如果是负值，且|Array.length+formIndex| <...

2019-04-08 09:15:58 2201

原创 JavaScript设计模式之工厂模式

适用场景：对象的构建比较复杂；根据不同的条件创建不同的对象；应用场景：根据不同的节点类型创建不同的DOM节点。下面用代码实现一个最简单的工厂模式ES5实现方式 var PhoneShop = function() {}; PhoneShop.prototype = { sellPhone: function(name) { var ph...

2019-04-04 16:37:02 145 2

原创 js中的相等性判断

严格相等(全等，===)在判断两个操作数是否完全相等，这里在比较时不会进行隐式类型转换，会带上操作数的类型进行比较。这里有两个需要注意的number数据NaN === NaN //false-0 === +0 //true非严格相等(==)比较时会涉及隐式类型转换，这里不做详细阐述，有兴趣的可以自行研究。转换规则见下图：Object.is(value1, value2)...

2019-03-28 17:04:36 617

原创 js中数组操作函数之some

some用法： Array.some(callback, thisArg)参数：callback：必选项，对数组中的每个值执行的回调函数。thisArg：可选项，callback中使用的this值。返回值：布尔值。（1）情况1：Array是非空数组let Arr = [15, 20, 25, 30]let result = Arr.some((item,index,arr) =...

2019-03-28 15:18:29 3259

原创 JavaScript设计模式之单例模式

JS中的单例模式一般为：代码模块实例化后仅返回一个唯一的对象。在ES6有了类的概念之后，更加接近通常所说的单例：一个类实例化后仅可以返回唯一的一个实例。应用场景：页面中的某个组件仅渲染一次。下面用代码实现一个最简单的单例（惰性单例）ES5实现方式 var singleton = (function () { var instance; function cr...

2019-03-27 15:10:38 144

原创层(堆)叠顺序和层(堆)叠上下文

层（堆）叠顺序由上图可知，在仅存在html这一个根元素层叠上下文的情况下，页面上的堆叠顺序为（序号越大，层级越高）：(0) z-index < 0(1) background(2) border(3) div(块级)(4) float(5) inline/inline-block(包括text)(6) position: absolute/relative(7)z-i...

2019-03-27 14:52:54 953

原创 Node对象的insertBefore方法

var node = parentNode.insertBefore(node, referenceNode) 作用：将node节点插入到referenceNode节点之前，parentNode为对应的父节点。返回值node是插入的node节点本身。插入新节点HTML代码 <div id="container"> <h1>标题1</h1>...

2019-03-27 10:06:57 5611

原创 JS中的异常捕获

JS中的异常捕获：(1) try …catch(2) try…finally(3) try…catch…finally用法主要有以上三种，try语句必须搭配catch语句或者finally语句或者三个在一起使用。作用：针对try块中的语句块可能抛出的异常进行处理。try…catch try { throw new Error('出错啦！') console.log(1)...

2019-03-21 13:13:34 3833

原创 js中数组操作函数之every

every用法： Array.every(callback, thisArg)参数：callback：必选项，对数组中的每个值执行的回调函数。thisArg：可选项，callback中使用的this值。返回值：布尔值。（1）情况1：Array是非空数组let Arr = [15, 20, 25, 30]let result = Arr.every((item,index,arr...

2019-03-13 16:55:25 1028

原创 js中的slice和splice

slice(startIndex[, endIndex])功能：字符串和数组原型上都有slice方法，字符串调用slice方法可以返回子串，数组调用slice方法可以返回子数组。参数：startIndex: 可选，表示子串截取自原字符串的开始位置，不填默认为字符串开始位置；endIndex: 可选，表示子串截取自原字符串的结束位置（不包含该位置）,不填默认至字符串结尾。针对stri...

2019-02-15 13:19:22 350

原创 Object.assign和Object.create的基本用法

let obj = Object.assign(targetObj, …sourceObj)作用：将一个或多个源对象自身的可枚举属性与目标对象的属性合并返回值：合并后的目标对象 var obj1 = {name: 'zyp1'} var obj2 = {name: 'zyp2', age: 18} var obj3 = {name: 'zyp'} obj3 = Object.def...

2019-01-22 11:45:16 2063

空空如也

空空如也