qaqLjj-CSDN博客

原创 JavaScript简单对象

今天了解到了朴素对象的概念。什么是朴素对象或纯粹对象或简单对象（plainObject）？字面量创建的，或是new Object() 创建的。如何判断plainObject？export default function isPlainObject(obj) { if (typeof obj !== 'object' || obj === null) return false l...

2020-03-28 23:57:34 359

原创关于height与line-height

关于height与line-height的小Tips平时我经常使用如下代码来使文本在垂直方向居中对齐：.demo { font-size:18px; height:30px; line-height:30px;}这就是常见的文本垂直居中的方式。但是在最近，我发现了一个问题，line-height到底指定的是元素那一部分的高度呢？比如，这段代码中div的高度是多少呢？<di...

2020-01-05 19:39:01 240

原创 JavaScript将某个对象的一部分属性抽象成另一个对象

目的：提取对象的c与d属性const source = { a: 1, b: 2, c: 3, d: 4, e: 5}有两种方式解构赋值以及展开运算符let {a,b,e,...target} = source定义一个方法做这件事const pick = (obj, arr) => arr.reduce((iter, va...

2019-10-20 20:17:44 2520

原创生成表格

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equi...

2019-08-14 22:43:15 279

原创 js 判断数据类型

1.typeof形如 var x = “xx”; typeof x == ‘string’ typeof(x);返回类型有：‘undefined’ “string” ‘number’ ‘boolean’ ‘function’ ‘object’缺点：对于object类型不能细分是什么类型优点：对空null的判断 'undefined’的应用2.instanceof形如 var d = n...

2019-05-04 16:10:47 174

原创 JavaScript 的异步任务与Event loop

首先有一个问题：setTimeout 函数第二个参数设定的时间是准确的吗？用一个例子回答这个问题运行以下代码：<script> console.time('test'); setTimeout(function () { console.timeEnd('test') },200) for(var i = 0,j=10000;i&l...

2019-03-27 15:13:30 144

很久没写博客了，要好好反省一下。最近，苹果在商店悄无声息地上架了ipad mini5 售价2999元搭载了最新的a12处理器，要知道此前最便宜的a12设备是4899元的iphone xr 。现在在2999的价位上出现了一款a12设备，真是喜大普奔啊！除此之外，作为大学生还可以享受教育优惠，所以最低就只要2799元。但是兴奋之余有一个问题困扰了我，ipad mini5 的屏幕到底有多大，它能不...

2019-03-25 10:48:57 11002

原创 js中bind的实现

&lt;script&gt; Function.prototype.bind = function () { var fn = this, arr = [].slice.call(arguments), obj = arr.shift(); return function () { return fn.apply(obj, arr.conca...

2019-03-12 16:13:27 149

原创 js的方法重载

这是很简陋的版本，功能距完善还有很长的距离。<script> var obj = { values: ['a', 'b', 'c', 'd'] }; function addMethod(object, name, fn) { var old = object[name]; if (old === undefined) { objec...

2019-03-12 15:29:56 477

原创 JavaScript中交换两个数的值的七种方式

let a=10,b=20;//onelet t = a;a = b;b = t;//twoa += b;b = a - b;a -= b;//threea = a^b;b = a^b;a = a^b;//four[a,b] = [b,a];//fivea = [b,b=a][0];//sixa = {a:a,b:b};b = a.a;a = a....

2019-03-05 10:04:29 1878

原创带缓存的素数判断

<!DOCTYPE html><html><head> <title>prime</title> <script> function assert(value, desc) { var li = document.createElement("li"); li.classNam

2019-02-26 15:23:07 181

原创 javaScript 数据结构之集合&字典

集合set是一种包含不同元素的数据结构。集合中的元素成为成员。集合的两个最重要特性是：集合中的成员是无序的；集合中不允许相同成员存在计算机中的集合与数学中集合的概念相同，不包含任何成员的集合称为空集；包含一切可能的成员为全集如果两个成员完全相同，则称为两个集合相等集合的实现：function Set() { let items = {}; this.has = function(v...

2019-02-15 22:59:55 237

原创 javaScript 数据结构之链表

要存储多个元素，数组（或列表）可能是最常用的数据结构。正如本书之前提到过的，每种语言都实现了数组。这种数据结构非常方便，提供了一个便利的[]语法来访问它的元素。然而这种数据结构有一个缺点：（在大多数语言中）数组的大小是固定的，从数组的起点或中间插入或移除项的成本很高，因为需要移动元素（尽管我们已经学过JavaScript的array类方法可以帮我们做这些事，但背后的情况是一样的）。链表存...

2019-02-09 21:26:24 158

原创 javaScript 数据结构之队列

队列，是先进先出（FIFO, First-In-First-Out）的线性表。在具体应用中通常用链表或者数组来实现。队列只允许在后端（称为rear）进行插入操作，在前端（称为front）进行删除操作。简而言之队列就像日常生活的排队买东西先到的先享受服务。队列的实现普通的队列常用的有以下几个方法：enqueue 向队列尾部添加一个(或多个)新的项dequeue 移除队列的第一(即排在队列最...

2019-01-29 15:01:43 157 1

原创 javaScript 数据结构之栈

栈是一种遵从后进先出（ LIFO）原则的有序集合。新添加的或待删除的元素都保存在栈的同一端，称作栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。示意图如下下面我们来用js来实现栈吧（使用es6）：class Stack { constructor () { this.item = []; } push (element) { this.item.push(...

2019-01-25 22:25:16 142

原创 JavaScript 一些简单算法

其实这是前一阵子写的了今天复习一下又发现记得不牢靠所以决定放到博客上面function selectionSort(arr) {var l = arr.lengthfor (var i = 0; i &amp;amp;amp;amp;amp;lt; l - 1; i++) {var minIndex = i;for (var j = i + 1; j &amp;amp;amp;amp;amp;lt; l; j++) {if (arr[minIndex] &am

2019-01-13 11:15:42 214

原创阻止事件冒泡，阻止浏览器默认事件

功能:停止事件冒泡function stopBubble(e) { // 如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { ...

2018-12-24 22:19:48 154

原创三列布局中间自适应

方法1：左边左浮动右边又浮动中间的写在html结构的最后加左右的margin<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

2018-12-23 17:18:41 308

原创 ![] == [] //true !{} =={}//false

==运算符如果有对象，调用对象的valueOf方法，如果返回的还是对象就调用toString方法再不行就报错了。来看题目：左边都是对象取非都返回false再被转换为0再看右边两个对象的valueOf都是Object.prototype.valueOf() 返回自身还是无法比较再调用toString：前者返回空字符串‘’再被转换成数字0 所以前者为true后者返回‘[object O...

2018-12-22 21:57:41 305

原创 js几种继承方式

1.原型链继承2.借用构造函数继承3.组合继承4.拷贝继承这些都不完美最完美的如下 function Animal(name, age) { this.name = name; this.age = age; }; Animal.prototype.eat = function () { console.log('eat something'); ...

2018-12-21 21:49:07 116

原创数组降维

var arr=[1,2,[3,4,[5,6,7]],9,[10,11]];// 1) 方法一循环数组+递归调用function steamroller (arr){ var newArr=[]; for(var i=0;i<arr.length;i++){ if(Array.isArray(arr[i])){ // 如果是数...

2018-12-21 14:06:59 1090

转载 dom事件委托

为什么要用事件委托：一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与...

2018-12-19 22:11:53 394

原创复习封装原生js动画函数

//定义获取任意属性值的方法 function getStyle(ele, attr) { return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : window.currentStyle(ele)[attr] } function animate(ele, obj, callb...

2018-12-17 16:32:38 156

转载 js mouseenter和mouseover的区别

单独一个元素没有区别，但是有了子元素会有区别<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>

2018-11-23 17:38:11 1678

原创坑！ nodejs在控制台输入文件名并用fs创建这个文件

初学node模块，本来是一个很简单的案例：用process.stdout 提示用户输入一个文件名用process监听用户输入的字符串再用fs.mkdirSync创建文件于是写了如下代码：var fs = require('fs');process.stdout.write('please enter the project name\n')process.stdin.on('data',...

2018-11-23 11:20:53 572

原创 JavaScript 布尔操作符汇总

布尔操作符分为逻辑非，逻辑或，以及逻辑与。1逻辑非.如果操作数为对象时结果为：false；如果操作数为非空字符串时结果为：false；如果操作数为任意非0数字（包括infinity）时结果为：false；如果操作数为null,undefined,NaN时结果为：true；值得注意的是如果将操作数取非两次就和对这个值使用Boolean()一样2.逻辑与.如果第一个操作数是对象就返回...

2018-11-23 09:33:07 161

原创 es6一行代码搞定数组去重

运用知识点：…rest语法以及Set key不能重复的特性var shuzu =[&quot;red&quot;,&quot;blue&quot;,&quot;red&quot;,&quot;green&quot;,&quot;blue&quot;];var quchonghou = [...new Set(shuzu)];cons

2018-11-22 11:06:11 499

原创箭头函数中this指向问题

es6的箭头函数修复了this的指向问题如今我们在函数内部定义的函数不必再这样写了：var that = this;比如：var obj = { birth: 1990, getAge: function () { var fn = function () { return new Date().getFullYear() - th...

2018-11-22 10:12:31 377

原创 es6 函数参数定义默认值

我们之前想让函数的参数在不传的时候有一个默认值的话，通常的做法是在函数内部接收到参数之后再用逻辑或语句给参数再赋值一次代码如下 var f = function (a,b) { a = a|10; b = b|10; //这段代码本意是不传就给10 但是传0的话会转为false console.log(a+b) ...

2018-11-21 23:08:01 998

原创 JavaScript首字母大写其余小写多种解法

var src = ['Bob', 'Lisa', 'li','waNG'];function f1(arr) {var tem = []; for (var i of arr) { tem.push(i.substring(0,1).toUpperCase()+i.substring(1).toLowerCase()) } return tem}...

2018-11-17 11:35:25 731

原创 map函数和parseInt搭配使用导致的问题

let arr = [‘1’，‘3’，‘5’];let res = arr.map(parseInt);console.log(res); // [ 1, NaN, NaN ]//这是一个美丽的误会，map其实可以传出三个参数给回调函数，而parseInt作为回调函数恰好可以接收两个参数这就导致数组传出元素和索引而parseInt把他们当成字符串和基数//1.map 传出item i...

2018-11-17 10:49:50 242

原创不使用Number或parseInt将字符串转换为数字

function str2int (){return Array.prototype.map.call(s, x => x - 0).reduce((x,y) => x * 10 + y)}

2018-11-16 23:42:00 540

原创 JavaScript查询某一年是否为闰年

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>闰年计算器</title></head><script> var num = N

2018-11-15 21:46:22 647

原创使用css3制作时钟动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div class

2018-11-02 11:27:24 1022

原创 JavaScript标签的特点

1 .js的标签里的内容默认在浏览器不显示script标签内type = text/javascript 或者空时其中的代码才会执行，如果是别的那么内部的内容不会当做javaScript执行模板引擎就是巧妙的利用了这一点...

2018-10-24 17:01:16 737

原创 ajax请求流程以及readyState请求状态含义

&lt;script&gt; var xhr = new XMLHttpRequest() console.log(xhr.readyState) // =&gt; 0 // 初始化请求代理对象 xhr.open('GET', 'time.php') console.log(xhr.readyState) // =&gt; 1 ...

2018-10-23 23:32:01 889

原创 js中 swith 与 break位置的细节

function aa(a) { switch (a) { case 1: console.log("A") break; case 2: console.log("B") case 3: ...

2018-10-23 23:01:53 284

原创打印1到100的数遇到含九的跳过

打印1到100的数遇到含九的跳过我先写了这样的 function print() { var i, j, flag = 0; for (i = 0; i &lt; 10; i++) { for (j = 0; j &lt; 10; j++) { if (i===0&amp;&...

2018-10-22 09:59:59 850

空空如也

空空如也