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

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.kler.cn/news/303097.html

相关文章:

  • 告别繁琐,IsMyHdOK硬盘测速,即刻享受科技便利
  • 安全工具 | 使用Burp Suite的10个小tips
  • Apache SeaTunnel Committer 进阶指南
  • 数据结构和算法之基本概念
  • Azure web app has no access to openai private endpoint in virtual network
  • 4G物联网智能电表是什么?什么叫4G物联网智能电表?
  • 参数传了报错没传参数识别不到参数传丢
  • ‌汽车的舒适进入功能是什么意思?
  • 【区块链 + 人才服务】Blockchain Workshop- 区块链编程实践平台 | FISCO BCOS应用案例
  • Maven从入门到精通(二)
  • 设计模式-行为型模式-备忘录模式
  • 关于.net Framework向.net core的移植
  • HarmonyOS SDK开放能力简介
  • 基于学习功能聚合的英语口语学习APP
  • flink实战--如何基于java-agent技术上线收集任务流量功能
  • 向量——通俗地解释
  • 网络编程(UDP)
  • 详解贪心算法
  • STM32 如何生成随机数
  • CentOS 7下CX5-RDMA网络测试
  • 6年前倒闭的机器人独角兽,再次杀入AGV市场
  • Vue3+TS项目封装一个公共的el-table组件二次封装
  • ADB 之 logcat 极简小抄(过滤日志、保存日志到文件)
  • C++复习day11
  • 基于人工智能的自动驾驶系统项目教学指南
  • 【C++】STL容器-string的遍历
  • Android10源码刷入Pixel2以及整合GMS
  • 【python】python中非对称加密算法RSA实现原理与应用实战
  • Linux的历史,版本,Linux的环境安装、简单学习4个基本的Linux指令、创建普通用户等的介绍
  • android kotlin 基础复习 继承 inherit