小知识点z

是詹詹呐 .

已于 2022-07-07 17:14:56 修改

阅读量204

点赞数

文章标签： javascript css html vue.js

于 2020-08-19 19:15:33 首次发布

本文链接：https://blog.csdn.net/qq_44398237/article/details/108108339

版权

CSS 滚动捕捉
就是每次滚动时，图片的中心位置和容器中心位置对齐（Swiper 的效果）

.container {
  scroll-behavior: smooth;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 20px;
}

img {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

[ ] == false     ![ ] == false    （[ ]） ==  true   {} == NaN  

[ ]  ==  ![ ]  结果为 true  

{}  ==  !{}  // false  例：({}==false)?true:false    =>   NaN == 0

解析：

1.如果有一个操作数为布尔值，则在比较相等性之前先将其转换为数值 - false 转换为0 ，true转换为1；

2.如果一个操作数为字符串，另一个操作数为数值，在比较之前先将字符串转为数值

3.如果一个操作数是对象，另一个不是，则调用对象的valueOf() 方法，用得到的基本数据类型按照前面的规则进行比较 ，如果对象没有valueOf()方法，则调用 toString()

注意：

null 和 undefined 相等
比较之前不能讲null和undefined转换为其他
如果有一个操作值为NaN 则 == 返回 false , !== 返回 true
如果两个操作值都为对象，判断是否是不是同一个对象，如果都指向同一个对象， == 返回 true , 否则返回 false

Boolean([]); // true
Number([]);  // 0 
Number({});  // NaN
Number(false); // 0
[]不是原始类型

! 优先级大于 ==     null ,undefined , NaN 以及 空字符串 '' 取反 都为 true ,
  其余的都为 false

定时器：

加了() , 将会立即调用执行
setTimeout( checkState(), 1000 )

没加() , 10秒后调用
setTimeout( checkState, 10000)

typeOf 返回数据类型：

undefined 

Null || Array => Object

Boolean

Number

String

Function

Symbol(ES6新增): 功能类似于标识唯一的ID   每个Symbol实例都是唯一的

哪些方法可以用作javascript异步模式的编程

回调函数 , 事件监听 , 发布/订阅 , Promises对象...

JavaScript的全局函数：

decodeURI()    			解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()				把字符串编码为 URI。
encodeURIComponent()	把字符串编码为 URI 组件。
escape()				对字符串进行编码。
eval()					计算 JavaScript 字符串，并把它作为脚本代码来执行。
getClass()				返回一个 JavaObject 的 JavaClass。
isFinite()				检查某个值是否为有穷大的数。
isNaN()					检查某个值是否是数字。
Number() ☆  			把对象的值转换为数字。
parseFloat() ☆			解析一个字符串并返回一个浮点数。
parseInt() ☆			解析一个字符串并返回一个整数。
String() ☆				把对象的值转换为字符串。
unescape()				对由 escape() 编码的字符串进行解码。

事件：

onerror 当图片不存在的时候触发
<img src='' onerror="handle" />

getElementsByClassName：

getElementsByClassName返回的是一个节点列表

使用要加[ ]:
document.getElementsByClassName("test")[0]

js变量回收：

1. 全局变量不会被回收  ☆

2. 局部变量会被回收,也就是函数一旦运行完后,函数内部的东西就会被销毁

3. 只要被另一个作用域所引用就不会被回收

var i = 1;
var i = 2;
var add = function() {
    var i = 0;
    return function()
{
        i++;
        console.log(i);
    }
}();
add();

// 全局变量 i 不会被回收
// 全局变量 add 不会被回收
// 局部变量 i 被另一个作用域引用 不会被回收

JS解决跨域问题：

1. jsonp请求: jsonp原理是利用<script>标签的跨域特性，可以不受限制的从其他域加载资源,类似的标签还有<img>.  
	优: 兼容性更好，在更加低版本的浏览器中都能运行
	缺: 它只支持GET请求而不支持POST等其他类型的HTTP请求

2. document.domain: 这种方式用在主域名相同子域名不同的跨域访问中

3. window.name: 在一个窗口的生命周期内, 窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写权限,window.name是持久存在在一个窗口载入过的所有页面中的，不会因为新页面的载入而重置。

4. window.postMessage : Html5中实现跨域的一种新方式,可以用它来向其他的window对象发送消息,无论这个window对象是属于同源或者不同源。

5. CORS  跨域资源共享(CORS) 是一种机制，使用自定义的HTTP头让浏览器与服务器进行沟通，从而决定请求或者响应是应该成功还是失败
......

Cookie 优缺:

优: 
	1. 数据持久性
    2. 不需要任何服务器资源 。Cookie 存储在客户端并在发送后由服务器读取
    3. 可配置到期规则。 控制cookie的生命周期 ，使之不会永久有效
    4. 简单性。 基于文本的轻量结构
    5. 通过加密和安全传输技术(ssl) , 减少被破解的可能性
	6. 只在cookie中存放不敏感数据
    
缺: 
	1. Cookie 数量和长度的限制
    2. 潜在的安全风险: cookie可能被拦截，篡改
    3. 有些状态不可能保存在Cookie中: 例如，为了防止重复提交表单，我们需要在服务器端保存一	   个计数器，如果保存在客户端，那么它基本不起任何作用
    4. cookie每次发送数据都会发送给服务端、造成不必要的浪费

JS可迭代对象：

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable)

原生具备:
	1. 数组 Array
    2. 字符串 String
    3. Map 
    4. Set
    5. 函数的 arguments
    6. Typed Array 
    7. Generators  (ES6新增)

reflow(回流) 和 repaint (重绘)：

reflow(回流)和repaint(重绘)
简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。

什么是reflow和repaint（原文链接：http://www.cnblogs.com/Peng2014/p/4687218.html）

reflow(回流): 例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。
reflow：几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint(重绘): 如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow

下面情况会导致reflow发生:

1：改变窗口大小

2：改变文字大小

3：内容的改变，如用户在输入框中敲字

4：激活伪类，如:hover

5：操作class属性

6：脚本操作DOM

7：计算offsetWidth和offsetHeight

8：设置style属性

防抖 / 节流：

防抖和节流是针对响应跟不上触发的频率这种问题的两种解决方案。
有一些事件我们没办法控制它的频率,比如鼠标移动事件 mousemove , 页面滚动触发的事件 scroll 等等
瞬间的操作都会导致事件的高频率的触发。如果事件的处理函数较为复杂，就会导致响应跟不上触发,出现页面卡顿,用户体验较差。
针对快速触发和不可控的高频触发:
	防抖: 
	原理是当事件被触发时，设置一个周期延迟动作, 若期间又被触发了,就重新设定周期,直到周期结束,执行了动作。
    (原理是当事件被触发后,开启一个定时器,在定时器中调用关键代码,假如设置定时器延时时间为1秒, 在这一秒内事件再次被触发了, 就清除之前未执行完的定时器, 重新开启一个定时器, 重新开始等待执行...直到一定时间内没有再触发事件,才会执行一次 。这种方法会高频的创建定时器 )

	节流:
	节流的原理是，固定的时间间隔内, 只执行一次动作,若有新的事件被触发, 不执行, 等到周期结束后, 又有新的事件触发,才会开始执行新的
	(原理: 当事件被触发后, 设置一个定时器, 在触发事件时, 判断如果这个定时器存在,就不执行任何代码,直到定时器到时间后执行了函数, 并且清空定时器,这样就可以让下一个定时器开启 ,如果有新的事件触发,就会开始执行新的)

区别:
  防抖 : 是将几次操作合并为一次,只有最后一次操作才能被触发
  节流 : 让一定时间内只执行一次,不管操作多频繁都在规定时间执行一次

Promise:

promise是异步编程的一种解决方案,其实就是一个构造函数,自己身上有all, reject,resolve这几个方法. 原型上有 then , catch 等方法

promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作) 的结果.
从语法上来说,promise是一个对象, 从它可以获取异步操作的消息. Promise提供统一的API , 各种异步操作都可以用同样的方法进行处理

Promise 对象有以下两种特点:

(1) 对象的状态不受外界影响, promise对象代表一个异步操作,有三种状态: 
Pending(进行中) , Resolved (已完成) , Rejected (已失败) 。
只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态, 也是Promise名字的由来, 他的英文意思就是 承诺。

(2) 一旦状态改变,就不会再变, 任何时候都可以得到这个结果,promise对象状态改变只有两种可能: pending => Resolved 或者 pending => Rejected, 只要这两种情况发生, 状态就凝固了 , 不会再变,会一直保持这个结果.就算改变已经发生,你再对Promise对象添加回调函数,也会得到这个结果.

好处: 
	Promise主要解决回调地狱问题
    使得原本的多层级的嵌套代码,变成了链式调用
	让代码更清晰,减少嵌套数
缺点: 
	编写难度比传统写法高,而且阅读代码也不是一眼就能看懂的, 必须在回调函数中理清逻辑

练习题：

var foo=function(x,y){
  return x-y;
}
function foo(x,y){
  return x+y;
}
var num=foo(1,2); // -1

解答步骤:
	js预解析
    
    var foo;#1
	var num;   
	function foo (x,y){ return x + y }#2
    foo = function (x,y) { return  x - y } #3
    num = foo (1,2) 
// 变量声明,函数声明都会被提升到作用域顶处
// 当出现相同的名称 , 优先级为: 变量声明 #1 < 函数声明 #2 < 变量赋值 #3
num 计算时调用的 foo 为变量赋值 #3

获取当前时间 转化为YYYY-MM-DD
        console.log(new Date().toISOString().split('T')[0],  new Date((new Date().getTime() - 7 * 24 * 60 * 60 * 1000)).toISOString().split('T')[0]);

是詹詹呐 .

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小知识点z

[ ] == false ![ ] == false （[ ]） == true {} == NaN [ ] == ![ ] 结果为 true {} == !{} // false 例：({}==false)?true:false => NaN == 0 解析：1.如果有一个操作数为布尔值，则在比较相等性之前先将其转换为数值 - false 转换为0 ，true转换为1；2.如果一个操作数为字符串，另一个操作数为数值，在比较之前先将字符
复制链接

扫一扫