当前位置: 首页 > news >正文

JavaScript知识点2

目录

1.JavaScript无阻塞加载的具体方式?

2.什么事JavaScript箭头函数以及特性?

3.JavaScript数组去重有哪些方法?


1.JavaScript无阻塞加载的具体方式?

在JavaScript中,无阻塞加载的目的是确保页面在加载时不会因为脚本执行而变得卡顿或不响应。主要有以下几种方法实现无阻塞加载:

(1)异步加载 (async):

使用 async 属性来异步加载外部JavaScript文件。脚本会在后台下载并在下载完成后执行,不会阻塞页面的渲染。例如:

<script src="script.js" async></script>

async 属性只适用于外部脚本,不适用于内联脚本。

(2)延迟加载 (defer):

使用 defer 属性来延迟脚本的执行,直到页面的DOM完全加载完成。脚本的下载和执行不会阻塞页面的解析。例如:

<script src="script.js" defer></script>

defer属性也只适用于外部脚本,且多个使用 defer 的脚本会按它们在文档中出现的顺序依次执行。

(3)动态创建脚本标签:

使用JavaScript动态创建并插入 <script> 标签可以实现异步加载。例如:

var script = document.createElement('script');
script.src = 'script.js';
document.head.appendChild(script);

这种方式可以在需要时加载脚本,而不会阻塞页面的初始渲染。

(4)模块化加载:

使用 ES6 的 import() 动态导入模块可以实现按需加载脚本。例如:

import('./module.js').then(module => {// 使用 module
});

import() 返回一个 Promise,可以与 async/await 配合使用,实现更灵活的模块加载。

2.什么事JavaScript箭头函数以及特性?

箭头函数是ES6引入的一种简洁的函数定义语法。其主要特性包括:

(1)简洁语法:

语法更简洁,没有function关键字。例如:

// 普通函数
function add(a, b) {return a + b;
}// 箭头函数
const add = (a, b) => a + b;

(2)没有自己的this:

箭头函数不会创建自己的 this 绑定,它会继承父作用域的 this。例如:

function Counter() {this.value = 0;setInterval(() => {this.value++;console.log(this.value);}, 1000);
}
new Counter();

在上面的例子中,this 始终指向 Counter 的实例。

(3)没有arguments 对象:

箭头函数没有自己的 arguments 对象。如果需要访问函数参数,可以使用 rest 参数语法。例如:

const sum = (...args) => args.reduce((a, b) => a + b, 0);

(4)不能用作构造函数:

箭头函数不能用 new 关键字调用,因为它没有 [[Construct]] 方法。

(5)没有 prototype 属性:

箭头函数没有 prototype 属性,所以不能使用 prototype 方法。

3.JavaScript数组去重有哪些方法?

(1)使用 Set:

Set 是一种集合类型,自动去除重复元素。例如:

const array = [1, 2, 2, 3, 4, 4];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4]

(2)使用 filterindexOf:

通过 filter 方法和 indexOf 方法结合使用来实现去重。例如:

const array = [1, 2, 2, 3, 4, 4];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
console.log(uniqueArray); // [1, 2, 3, 4]

(3)使用 reduceincludes:

使用 reduce 方法和 includes 方法结合实现去重。例如:

const array = [1, 2, 2, 3, 4, 4];
const uniqueArray = array.reduce((acc, item) => {if (!acc.includes(item)) {acc.push(item);}return acc;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4]

(4)使用 Map:

利用 Map 对象的键值唯一特性进行去重。例如:

const array = [1, 2, 2, 3, 4, 4];
const uniqueArray = [...new Map(array.map(item => [item, item])).values()];
console.log(uniqueArray); // [1, 2, 3, 4]

这些方法各有优劣,选择合适的去重方式取决于具体的使用场景和性能要求。


http://www.mrgr.cn/news/26224.html

相关文章:

  • C语言基础:条件语句与分支控制实例解析
  • js 笔记
  • 面试真题 | web自动化关闭浏览器,quit()和close()的区别
  • leetcode 每日一题
  • deepin 25 版本规划
  • 精选推荐!分享6款论文写作ai免费带附加文献
  • 【QT】系统-上
  • FL studio1——手把手教你写歌,从作曲到发布一条龙服务
  • day48
  • 免费试用谷歌云API指南
  • 学习笔记 韩顺平 零基础30天学会Java(2024.9.13)
  • Java数据结构应用(力扣题20. 有效的括号)
  • springboot014校园管理系统的设计与实现
  • fpga系列 HDL:全连接层实现单个神经元PE(组成:FADD+FM)+vivado单模块仿真
  • Qt:pro文件和pri文件中不同参数的效果(持续更新)
  • NAS黑群晖7.21折腾笔记
  • pandas中基于范围条件进行表连接
  • HID用法ID与按键扫描码对照
  • (学习总结16)C++模版2
  • 【解决方案】双系统中修复ubuntu引导