JavaScript
卡卡的笔录
前方的路。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
HTML/CSS/JS对unicode字符的不同处理
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 · 271 阅读 · 0 评论 -
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 · 393 阅读 · 0 评论 -
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 · 1892 阅读 · 1 评论 -
js中常见的隐式类型转换
比较运算符(>, >=, <, <= )运算符两边操作数都是数字,则进行数字比较;运算符两边操作数都是字符串,则将字符的ASCII码进行一一比较(数字<小写字母<大写字母<中文);运算符一边操作数是数字,一边是字符串,则将字符串强制转换成number,再进行比较(因为字符串和数字都是值类型,应该是强制调用Number方法将字符串转换成数字,一般原创 2020-07-24 14:30:32 · 666 阅读 · 0 评论 -
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 · 680 阅读 · 0 评论 -
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 · 937 阅读 · 0 评论 -
js中的valueOf和toString
valueOf和toSring两个函数是除null和undefined两种数据类型以外其他五种数据类型(number/string/bool/object/symbol)原型链上共有的函数,那么这两个函数主要是用来干什么的呢?司徒正美大神给出的答案是:值运算和显示问题。例1:var aaa = { i: 10, valueOf: function() { console.log...原创 2018-12-14 10:16:40 · 3991 阅读 · 6 评论 -
Node对象的appendChild和append方法
这里主要就目前本人了解到的关于appendChild和append方法阐述的一点点理解。这两个方法都是在父节点的末尾添加子节点。appendChild() var child = parent.appendChild(child)该方法的参数是一个Node对象...原创 2018-12-17 14:52:03 · 8619 阅读 · 1 评论 -
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 · 3864 阅读 · 0 评论 -
获取对象属性的几种方法getOwnPropertyNames/Object.keys()/for...in
getOwnPropertyNames获取对象自身的可枚举和不可枚举属性,不包括属性名为Symbol值的属性var obj = {name: 'zyp', age: 18};Object.defineProperty(obj, 'like', { enumerable: false, value: 'reading'})Object.defineProperty(obj, Sym...原创 2018-12-19 14:07:34 · 1561 阅读 · 0 评论 -
js中的replace方法
本文主要研究字符串方法中的replace方法,该方法主要用于将字符串中符合匹配条件的字串替换成其他的字符串,返回替换后的字符串,且原字符串不变。语法: var newStr = str.replace(regexp|substr, newSubStr|function)参数1:匹配条件:可以是正则表达式(regexp)或者字符串(substr)如果参数1是字符串的话仅匹配一次。...原创 2018-12-12 15:50:40 · 46796 阅读 · 0 评论 -
input输入框的事件监听
主要涉及到的事件有:change, input,propertychange针对IE浏览器(IE11测试):输入框内容变化且失去焦点,触发change事件。 <input type="text" value="4545"> var input = do原创 2018-11-27 09:49:56 · 17763 阅读 · 0 评论 -
js中的事件捕获和事件冒泡,以及由事件冒泡引入的事件委托
首先我们认识一下事件模型:上图转自:https://zhuanlan.zhihu.com/p/26536815由上图所示,事件模型分为三个阶段:捕获阶段目标阶段冒泡阶段在IE8及其以前,IE浏览器监听事件的API为attachEvent, 但是它只能在事件冒泡阶段对事件进行捕获,而且在IE8以后的IE9等浏览器中已经弃用,所以这里我们不对它进行讨论。...原创 2018-11-26 16:35:25 · 152 阅读 · 0 评论 -
字符串搜索匹配之 test&search&indexOf&match&&exec&includes
这里要讨论的是字符串搜索匹配时常用到的API: test search indexOfsearch该方法返回的是第一次匹配得到的结果,如果匹配到,返回第一次匹配得到的位置。如果没有匹配到,返回-1。var a = 'foofoo'var regexp1 = /foo/var regexp2 = /foo/gvar s1 = a.search(regexp1) //返回0var ...原创 2018-11-26 13:25:04 · 1047 阅读 · 0 评论 -
js正则表达式中的零宽断言
首先要说的是js正则表达式只支持零宽先行断言,而零宽先行断言又可以分为正向零宽先行断言(判断字符后面必须匹配regexp)和负向零宽先行断言(判断字符后面不能匹配regexp)正向零宽先行断言例:var str = 'abABb'var regexp = /ab(?=[A-Z])/str.match(regexp) 得到的结果为:2. 负向零宽先行断言var str = '...原创 2019-01-11 11:52:36 · 1356 阅读 · 0 评论 -
谈谈js中的继承
我们这里这里主要讨论js中的主要继承方式,包括构造函数继承,原型继承,组合式继承(原型继承和构造函数继承的组合),继承继承和寄生组合式继承(寄生继承、原型继承和构造函数继承三者的组合)。构造函数继承 function SuperType(name) { this.name = name this.colors = ['red',...原创 2019-01-03 11:51:21 · 356 阅读 · 0 评论 -
async和await
首先要说明的是async函数和await的用法都是promise的语法糖,await必须在async函数中使用,但是async函数的调用不一定需要await关键字,且async函数中不一定有await。 async和await同时使用时,完成的操作是:async 会将其后的函数(函数表达式或 Lambda)的返回值封装成一个 Promise 对象,而 await 会等待这个 Promise...原创 2019-08-28 08:25:24 · 984 阅读 · 0 评论 -
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 · 234 阅读 · 0 评论 -
js中数组操作之includes&&indexOf
includesArray.includes(searchElement[, fromIndex])参数:(1)searchElement: 必填,需要查找的元素,(2)fromIndex: 非必填,默认是0,从该索引处开始搜索。如果是正值,且formIndex > Array.length,则必定搜索不到结果。如果是负值,且|Array.length+formIndex| <...原创 2019-04-08 09:15:58 · 2248 阅读 · 0 评论 -
js中的相等性判断
严格相等(全等,===)在判断两个操作数是否完全相等,这里在比较时不会进行隐式类型转换,会带上操作数的类型进行比较。这里有两个需要注意的number数据NaN === NaN //false-0 === +0 //true非严格相等(==)比较时会涉及隐式类型转换,这里不做详细阐述,有兴趣的可以自行研究。转换规则见下图:Object.is(value1, value2)...原创 2019-03-28 17:04:36 · 649 阅读 · 0 评论 -
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 · 3344 阅读 · 0 评论 -
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 · 5688 阅读 · 0 评论 -
js中的slice和splice
slice(startIndex[, endIndex])功能:字符串和数组原型上都有slice方法,字符串调用slice方法可以返回子串,数组调用slice方法可以返回子数组。参数:startIndex: 可选,表示子串截取自原字符串的开始位置,不填默认为字符串开始位置;endIndex: 可选,表示子串截取自原字符串的结束位置(不包含该位置),不填默认至字符串结尾。针对stri...原创 2019-02-15 13:19:22 · 378 阅读 · 0 评论 -
Object.defineProperties和Object.defineProperty的基本用法
Object.defineProperties(obj, props)作用:在对象上定义多个新的属性或者修改多个原有属性返回值: 修改后的目标对象obj参数含义:obj: 在其上定义或修改属性的目标对象props: 属性对象,其属性值为属性描述符,包括数据属性描述符和访问器属性描述符。关于数据属性描述符和访问器属性描述符,详见我的另外一篇文章:js中对象属性的类型和属性的特性定义...原创 2019-01-18 10:31:48 · 6822 阅读 · 0 评论 -
click事件
直接写在html标签中 <button id="clickMe" onclick="alert(1)">点我</button>缺点:不利于js和html代码分离。2. onclick<button id="clickMe">点我</button>clickMe.onclick = function() { ale原创 2018-11-21 13:46:49 · 347 阅读 · 0 评论 -
js中对象属性的类型和属性的特性(属性描述符)
ES5中对象的属性可以分为数据属性和访问器属性数据属性数据属性包含以下4个特性:[[configurable]]:表示属性是否可以被delete,是否可以被重新修改,或者是否可以被修改成访问器属性[[enumerable]]:是否可枚举,是否能通过for in 循环返回该属性[[writable]]: 是否可修改[[value]]:属性的数据值,默认是undefined数据属性可以...原创 2018-11-05 16:36:58 · 3373 阅读 · 2 评论 -
js对象属性的获取
我们这里仅遍历可枚举属性for in: 遍历的是对象本身及其原型链上的可枚举属性ES5写法:对于Object对象,即Object构造器构造出来的对象来说: var obj = {name: 'zyp', age: 18} Object.defineProperty(obj, 'like', {value: 'reading', enumerable: false}) let...原创 2018-11-05 09:38:51 · 588 阅读 · 0 评论 -
原型与原型链
1、 原型 JavaScript规定,每个函数都有一个prototype属性,指向一个对象,称为原型对象。 对于构造函数来说,这个prototype属性指向的原型对象定义了实例对象的共有属性。2、原型链 JavaScript规定,任何对象都有自己的原型对象,由于原型对象也是对象,因此他也有自己的原型对象,于是就形成了“原型链”,对象到原型,再到原型的原型……例: var d = n...原创 2018-07-14 13:40:14 · 164 阅读 · 0 评论 -
JS里的数据类型转换
JS里的数据类型共有7种,分别为number、 string、boolean、undefined、null、symbol、object,这里先放下symbol不考虑 1、其他5种数据类型转string类型,以number类型为例var a = 20 - a.toString() // 对于null和undefined会报错,所以不是一个通用选择 - window.String(a) ...原创 2018-07-11 10:55:09 · 203 阅读 · 0 评论 -
JS里的数据类型
JS中的数据类型目前包括7种:number 、string、 boolean、 undefined、null、symbol、 object 1. number类型 包括整数和小数 2. string类型 包括单行字符串和多行字符串,多行字符串一般用ES6中的反引号表示 如var a = aa bb 3. boolean类型 包含true和false两个值 4. undef...原创 2018-07-09 13:31:18 · 163 阅读 · 0 评论 -
如何获取数组的最值以及合并数组
巧用js apply函数获取数组的最值以及合并数组。 let arrA = [1,2,3,4] let arrB = [5,6,7,8] 获取arrA的最小值:Math.min.apply(null,arrA) 获取arrA的最大值:Math.max.apply(null,arrA) 获取arrA和arrB的合并值:Array.prototype.push.apply(arrA,arrB...原创 2018-06-05 18:01:36 · 407 阅读 · 0 评论 -
js小技巧
判断变量a是否有值,如果有值则执行某个操作,很多人一般的做法是 if(a) {} 但是这样容易出现如果a没有申明的话就会报错,因此更好的方法是: if(typeof a === ‘number’) { } //更明确的提示如果返回值是number类型的,才会执行接下来的操作...原创 2018-06-05 10:20:54 · 113 阅读 · 0 评论 -
javascript中数组和对象的深拷贝和浅拷贝
1、首先理解一下“深拷贝”和“浅拷贝”的区别:浅拷贝:a = b;//a和b中存的是相同的地址,该地址指向堆内存中相同的地方,即a和b就是一个东西,改变a的值b的值也会跟着改变,同理改变b的值a的值也会发生改变;深拷贝:a和b中存的地址不同,但是地址对应的堆内存中的内容完全一致,即b是a的副本2、(1)数组和对象的浅拷贝一样 ,简单的赋值操作var b = a;如数组的浅...原创 2018-04-27 13:41:53 · 3596 阅读 · 0 评论 -
javaScript中字符串函数slice(),substring()和substr()之间的关系
首先,这三个函数都是字符串函数,作用是取得子串,slice()和substring()函数第一个参数是子串起始位置,第二个参数是终止位置(不包括),substr()函数第一个参数也是子串起始位置,第二个参数是子串长度。如:var text = "Hello World!";alert(text.slice(4,7));//o Walert(text.substring(4,7));//o...原创 2018-02-28 17:07:04 · 229 阅读 · 0 评论 -
javascript中的undefined和null及NaN
(1)undefined:一般是声明了,但没有赋初值的变量,其中没有返回值的函数返回值默认是undefined;null:表示一个“空”的对象;NaN:非正常的数字,如0/0型,可以用isNaN()函数判断一个数字是否是正常值。(2)undefined null NaN三者相比较:alert(undefined == null);//truealert(undefin原创 2018-01-16 16:06:54 · 196 阅读 · 0 评论 -
对json数据格式的理解
首先我理解的JavaScript中有number型,布尔型,字符串,数组,对象,undefined,function等几种基本的数据格式,但是json格式是其中一种特殊的字符串,基本格式为:var a =' {"one","1","two":"2","trhree":"3"}';//斯认为123的双引号是可加可不加的,但是按照标准规范来说one two three是必须要加双引号的,这点得与原创 2018-01-05 11:35:08 · 1956 阅读 · 0 评论 -
简单实现jQuery
jQuery的本质是函数,下面来简单实现一下jQuery中的addClass和textwindow.jQuery = function() { let nodes = {} if(typeof nodeOrSelector === 'string') { nodes = document.querySelectorAll(nodeOrSelector) ...原创 2018-07-30 13:19:16 · 235 阅读 · 0 评论 -
JavaScript中的伪数组对象转化成数组的方法
首先什么是伪数组对象呢? 字面意思理解来说,伪数组对象就是长得像数组的对象,拥有0,1,2,3…以及length等key,但是在原型链中没有Array.prototype这一环,所以他没有操作数组的方法push,pop,shift,unshift等。javaScript中常见的伪数组对象有以nodeList为原型的DOM对象,函数的参数arguments对象等。那么有没有方法将这些伪数组对象...原创 2018-08-01 11:18:21 · 1806 阅读 · 0 评论 -
var 与let/const 变量提升与TDZ
我们都知道,在ES5及以前,var关键字被用来定义变量,但是到了ES6,就开始使用let/const来定义变量或者常量。那么这两者到底有什么区别呢?var遵循函数作用域,let/const遵循块级作用域;由于变量提升,var关键字定义的变量在申明之前可以访问,但得到undefined, let/const关键字定义的变量在申明之前访问会抛出ReferenceError的错误。第一点没什么...原创 2018-11-02 10:15:49 · 199 阅读 · 0 评论 -
获取当前的时间戳
常用的有三种方法:var now = +new Date()var now = Date.now()var now = new Date().getTime()原创 2018-11-06 15:14:31 · 176 阅读 · 0 评论
分享