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）使用 filter 和 indexOf:

通过 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）使用 reduce 和 includes:

使用 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]

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