1.JS为什么单线程一个简单的原因,js在设计之初

1. 为什么JS是单线程的

一个简单的原因是,在设计之初,js只进行了一些简单的表单验证,根本不需要多线程,单线程完全可以胜任这项工作。前端虽然发展很快js中运算符的优先级,承载的能力也越来越大,但并没有发展到需要多线程的程度。

还有另一个主要原因。想象一下,如果js是多线程的,运行时多个线程同时对DOM元素进行操作,那么主线程是哪个线程是个问题。线程的调度问题是一个比较。复杂的问题。

新的 HTML5 标准允许使用 new Worker 开启一个新线程来运行一个单独的 js 文件脚本,但是在这个新线程中,可以使用的功能是严格要求的。比如他只能使用 ECMAScript,不能访问 DOM 和 BOM。这也限制了多个线程同时操作 DOM 元素的可能性。

2.用css写一个三角角标记

元素的宽高设置为0,由border属性设置,使其他三个方向的边框颜色透明或与背景颜色一致,其余边框颜色设置为所需的颜色。

分区 {

宽度:0;

高度:0;

边框:5px 实心#transparent;

边框顶部颜色:红色;

}

3.水平和垂直居中

我一般只使用定位或者flex两种方式,我觉得就够了。

分区 {

宽度:100px;

高度:100px;

位置:绝对;

顶部:0;

右:0;

底部:0;

左:0;

边距:自动;

}

父级控制子集的居中

.父{

显示:弯曲;

证明内容:中心;

对齐项目:居中;

}

4. css 文本行超出…

溢出:隐藏;

文本溢出:省略号;

空白:nowrap;

5.多行文字超出显示…

显示:-webkit-box;

-webkit-box-orient:垂直;

-webkit-line-clamp:3;

溢出:隐藏;

6.IOS移动容器滚动条滑动不顺畅

溢出:自动;

-webkit-溢出滚动:触摸;

7.修改滚动条样式

隐藏div元素的滚动条

div ::-webkit-滚动条 {

显示:无;

}

div::-webkit-scrollbar 滚动条的整个部分

div::-webkit-scrollbar-thumb 滚动条里面的小方块,可以上下移动(或者从左到右,取决于是垂直滚动条还是水平滚动条)

div::-webkit-scrollbar-track 滚动条轨道

div::-webkit-scrollbar-button 滚动条轨迹两端的按钮,允许通过点击微调小方块的位置。

div::-webkit-scrollbar-track-piece 内轨,滚动条中间部分

div::-webkit-scrollbar-corner 两个滚动条相交的角落

div::-webkit-resizer 两个滚动条交叉处的 Gizmo,用于通过拖动来调整元素的大小

8.解决ios音频无法自动播放或循环播放的问题

ios手机使用音频或视频播放时,部分机型无法实现自动播放,可以使用以下代码hack。

// 解决ios音频无法自动播放,循环播放的问题

var music = document.getElementById(‘video’);

变量状态 = 0;

document.addEventListener(‘touchstart’, function(){

如果(状态== 0){

音乐.play();

状态 = 1;

}

}, 错误的);

document.addEventListener(“WeixinJSBridgeReady”, function () {

音乐.play();

}, 错误的);

//环形

音乐.onended =函数(){

音乐.load();

音乐.play();

}

9.隐藏页面元素

display-none:该元素不占空间,不显示在页面上,也不显示子元素。

opacity-0:元素的透明度会为0,但元素依然存在,绑定的事件依然有效,依然可以触发执行。

visibility-hidden:元素被隐藏,但元素仍然存在,占用空间,页面上无法触发元素的事件。

10.前端工程

提到前端工程,很多人会想到 webpack,这是错误的。Webpack 只是前端工程的一部分。在整个工程过程中,他帮助我们解决了大部分问题,但不是全部。

前端工程是通过工具提高效率和降低成本的一种手段。

近年来,它受到了广泛的关注和讨论。主要原因是现代前端应用的功能需求不断提高,业务逻辑越来越复杂。前端作为当前互联网时代唯一不可或缺的技术,可以说是占据了整个开发行业。半壁江山。从传统的网站到现在的H5、手机app、桌面app、小程序。前端技术几乎是无所不能和全面的。

这些表象的背后,其实是行业对开发者的要求发生了翻天覆地的变化。以往前端写demo、设置模板、调整页面的方式,完全不符合现在对开发效率的要求。前端工程改造是前端工程师在这样的背景下被拉上台面的必要手段之一。

一般来说,前端项目包括项目初始化、项目开发、提交、构建、部署、测试、监控等过程。工程就是从工程的角度来解决这些问题。例如,我们一般使用 npm init 进行项目初始化,plop 用于创建页面模板。我们喜欢用ES6+开发,但是需要通过babel编码成ES5。对于持续集成,我们使用 git/ci cd,但是为了维护开发标准,我们引入了 ESLint,Deployment 一般使用 git/cd 或 jenkins 等。

11.内容可编辑

html中的大部分标签都是不可编辑的,但是添加contenteditable属性后,标签就会变成可编辑的。

分区>

但是,通过该属性使标签可编辑后,只有输入事件,没有更改事件。您也无法像表单一样通过 maxlength 控制最大长度。我也忘了是在什么情况下使用的,以后想起来再补上。

12.计算

这是一个css属性,我一般称之为css表达式。css的值是可以计算出来的。最有趣的是他可以计算不同单位之间的差异。一个非常有用的功能,缺点是不便于阅读。20px是什么,接机人是没有办法一眼看出来的。

分区 {

宽度:计算(25% – 20px);

}

13.日期对象

以毫秒为单位获取当前时间

//方法一

日期.now(); // 1606381881650

//方法二

新日期() – 0;// 1606381881650

//方法三

new Date().getTime() // 1606381881650

创建 Date 对象的兼容性问题。

//window和android支持,ios和mac不支持

新日期(‘2020-11-26’);

// window和android支持,ios和mac支持

新日期(‘2020/11/26’);

14.Proxy和Object.defineProperty的区别

proxy就是代理的意思,我一般称他为拦截器,可以拦截对对象的操作。用法如下,通过new方法创建对象,第一个参数是截取的对象,第二个参数是对象操作的描述。实例化后返回一个新对象,当我们对这个新对象进行操作时,会调用我们描述中对应的方法。

新代理(目标,{

获取(目标,属性){

},

设置(目标,属性){

},

删除属性(目标,属性){

代理不同于 Object.definedProperty。

Object.defineProperty 只能监控属性的读写,而Proxy除了可以监控读写之外,还可以监控属性的删除、方法调用等。

通常我们想要监控数组的变化,这基本上取决于覆盖数组方法的方式,这也是Vue实现的方式,而Proxy可以直接监控数组的变化。

常量列表 = [ 1, 2, 3];

常量列表代理 = 新代理(列表,{

设置(目标,属性,值){

目标[属性] = 值;

返回真;//标志设置成功

}

});

list.push(4);

Proxy以非侵入的方式监督对象的读写,而defineProperty需要以特定的方式定义对象的属性。

15.反射

他是 ES2015 中的一个新对象。纯静态对象不能由实例绘制。它只能由静态方法调用。与 Math 对象类似,只能通过类似于 Math.random() 的方法调用。

Reflect内部封装了一系列对对象的低级操作,一共14个,其中1个被丢弃,13个保留。

Reflect 的静态方法与 Proxy 中描述的完全一样。也就是说,Reflect成员方法是Proxy处理对象的默认实现。

Proxy对象的默认方法是调用Reflect内部的处理逻辑,即如果我们调用get方法,那么在内部,Reflect会将get原封不动的交给Reflect,如下。

常量代理 = 新代理(obj,{

获取(目标,属性){

return Reflect.get(target, property);

}

})

Reflect和Proxy之间没有绝对的关系。我们一般将它们放在一起,以方便对两者的理解。

那么为什么会有 Reflect 对象呢?其实它最大的用途就是提供一套API来统一操作Objects。

判断一个对象是否具有某种属性,可以使用 in 操作符,但不够优雅。你也可以使用 Reflect.has(obj, name); 要删除一个属性,可以使用delete,也可以使用Reflect.deleteProperty(obj, name); 获取所有属性名可以使用Object.keysjs中运算符的优先级,或者Reflect.ownKeys(obj);我们更喜欢使用 Reflect API 来操作对象,因为他是未来。

16. 解析获取参数

url中的参数键值对通过replace方法获取,get参数可以快速解析。

常量 q = {};

location.search.replace( /([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);

控制台.log(q);

17. 解析连接url

通过创建标签并将href属性赋给a标签,可以获取位置对象上的协议、路径名、来源等属性。

// 创建一个标签

const aEle = document.createElement(‘a’);

//将href路径分配给a标签

aEle.href = ‘/test.html’;

// 访问 aEle 中的属性

aEle.protocol; // 获取协议

aEle.pathname; // 获取路径

aEle.origin;

aEle.host;

aEle.search;

18.本地存储

LocalStorage 是 H5 提供的永久存储空间。一般最多可存储5M数据,支持跨域隔离。它的出现大大提高了前端开发的可能性。localStorage的使用 很多人都知道setItem、getItem、removeItem,但是他也可以直接作为成员操作。

// 店铺

localStorage.name = ‘yd’;

// 获得

本地存储名称;//码

// 删除

删除localStorage.name;

//清除所有

localStorage.clear();

// 遍历

for ( 让 i = 0; i < localStorage.length; i++) {

常量键 = localStorage.key(i); // 获取本地存储的Key

本地存储[键];// 获取本地存储的值

}

当localStorage满了会继续存储,不会覆盖其他值,而是直接报错(QuotaExceededError),当前存储的值也会被清除。浏览器支持每个域名下存储5M数据。

19.会话存储

sessionStorage 和 localStorage 的区别在于有一个当前会话,很多人理解为浏览器关闭,这是错误的。假设您将 sessionStorage 存储在页面 A 上,并将页面 A 的链接粘贴到新选项卡中以打开该页面。SessionStorage 也不存在。

因此,sessionStorage 存在的条件是页面之间的跳转。页面A存储sessionStorage,需要通过超链接或location.href或window.open打开同域的另一个页面才能访问sessionStorage。

这一点在混合开发和嵌套H5的开发模式中尤为重要。如果页面在新的 webview 中打开,很可能 sessionStorage 将不可用。

20.会话cookies

如果 cookie 没有设置过期时间,则表示它是会话 cookie。我曾经认为关闭浏览器后会话cookie会消失,但是……我想提一个错误。

大多数情况下windows系统或者android系统都是这样的。但是在macOS系统或ios系统中,关闭浏览器不会清除会话cookie,只是结束浏览器进程。

21. 标签模板字符串

模板字符串支持在其前面添加一个函数。第一个参数是一个内容固定的数组,后面的参数是依次传入的变量,函数返回模板字符串实际显示的值。但是,在我看来,此功能毫无用处。

常量标签 = (参数, …args) => {

返回参数 [0] + 参数 [0]; // 返回值是模板字符串的真值。

}

const str = tag `你好 ${‘world’}`;

22.字符串中常用的几种方法1.includes();

字符串是否包含某个字符串,这个就不说了,其实是indexOf的替代品,用起来更优雅。

2. 开始();

字符串是否以某个字符串开头,我一般用它来判断url是否有http

3. 结束();

字符串是否是字符串的结尾。在判断后缀名时特别有效。

4. 重复(数字);

获取重复次数的字符串。呃……不知道什么时候有用,一般都是用来做测试数据的。

5. ‘abc’.padEnd(5, ‘1’); // abc11;

将给定的字符串连接到最后指定的长度,第一个参数是长度,第二个参数是用于连接的值。

6. ‘abc’.padStart(5, ‘1’); // 11abc;

将给定的字符串连接到标头中的指定长度。第一个参数是长度,第二个参数是用于连接的值。第一个补码是0?

23.数组快速去重

这个应该很多人都知道,数组先转换成Set,再转换成数组,但是这种去重的方法只能去掉基本数据类型组成的数组。

常量 arr = [ 1, 2, 3, 4, 5, 6];

const arr2 = new Set(arr);

常量 arr3 = […arr2];

24.Object.keys、值、条目

一般我们经常使用 Object.keys,它返回一个对象的键数组。其实还有Object.values,它返回一个对象值的数组。Object.entries 将对象转换为数组,每个元素都是一个键值对数组。您可以使用此功能将对象快速转换为地图。

const obj = { name: ‘yd’, age: 18};

Object.keys(obj); // [‘姓名年龄’];

Object.values(obj); // [‘yd’, 18];

常量 l = Object.entries(obj); // [[‘name’, ‘yd’], [‘age’: 18]];

常量 m = 新地图(l);

25.Object.getOwnPropertyDescriptors

获取对象的描述

复制 Object.assign 时,对象的属性和方法被复制为普通属性,不会复制完整的描述信息,例如 this。

常量 p1 = {

一个:’是’,

b:’d’,

获取名称(){

返回`${this.a} ${this.b}`;

}

}

const p2 = Object.assign({}, p1);

p2.a = ‘z’;

p2.名称;//码; 发现 p2.a 的值没有被修改,因为 this 仍然指向 p1

使用 Object.getOwnPropertyDescriptors 获取完整的描述信息

常量描述 = Object.getOwnPropertyDescriptors(p1);

const p2 = Object.defineProperty({}, 描述);

p2.a = ‘z’;

p2.名称;// zd

26.大整数

JavaScript 可以处理的最大数字是 2 的 53 次方 – 1,我们可以在 Number.MAX_SAFE_INTEGER 中看到。

consoel.log(Number.MAX_SAFE_INTEGER); //9007199254740991

无法处理更大的数字,ECMAScript 2020 引入了 BigInt 数据类型来解决这个问题。通过将字母 n 放在末尾,可以对大数据进行操作。

BigInt 可以使用算术运算符进行加法、减法、乘法、除法、余数和幂等运算。它可以由数字和十六进制或二进制字符串构成。此外,它还支持 AND、OR、NOT 和 XOR 等按位运算。唯一无效的按位运算是零填充的右移运算符。

常量大数 = 10000000000000000000000000000n;

控制台.log(bigNum * 2n); // 200000000000000000000000000000n

const bigInt = BigInt(1);

控制台.log(bigInt); // 1n;

常量 bigInt2 = BigInt(‘2222222222222222222’);

console.log(bigInt2); // 2222222222222222222n;

BigInt 是一个大整数,因此不能用于存储小数。

27.?? 合并空运算符

假设变量a不存在,我们要给系统一个默认值,一般我们会使用|| 操作员。但是,在 javascript 中,空字符串、0 和 false 将执行 || 运算符,所以 ECMAScript2020 引入了组合的 null 运算符来解决这个问题,并且只允许在值为 null 或 undefined 时使用默认值。

常量名称 = ”;

控制台.log(名称||’yd’);//码;

console.log(name ?? ‘yd’); // ”;

28.? 可选链运算符

业务代码经常会遇到这样的情况,一个对象有一个属性b,b也是一个对象有一个属性c,

我们需要访问c,通常写成abc,但是如果f不存在,就会出错。

常量 a = {

乙:{

c: 123,

}

}

控制台.log(abc); // 123;

控制台.log(afc); // f不存在所以会报错

ECMAScript2020 定义了可选的链接运算符来解决这个问题,通过添加一个?前 。使键名可选

让人 = {};

console.log(person?.profile?.age ?? 18); // 18

29.导入

import 是 ECMAScript2015 中定义的一套 ES Module 模块系统。大多数浏览器已经支持语法功能。通过将 type=module 属性添加到 script 标签,您可以使用 ES Module 标准来执行 javascript 代码。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论