js版本之ES6特性简述【let和const、数组、函数、集合、Symbol】(四)

Cshaosun2024-12-20 13:56

目录

[let [块级作用域] 和const简述](#let [块级作用域] 和const简述)

Array.from

Array.of

Array.prototype中新增的方法

for...of

函数参数调整

[集合类型 Map + Set + WeakMap + WeakSet](#集合类型 Map + Set + WeakMap + WeakSet)

Set

WeakSet

Map

WeakMap

[Symbol 类型](#Symbol 类型)

let [块级作用域] 和const简述

ES6 新增了let 命令，用来声明变量。它的用法类似于var ，但是所声明的变量，只在let 命令所在的代码块内有效。

复制代码 
{ let a = 10; var b = 1; }

a // ReferenceError: a is not defined.
b // 1

let 实际上为 JavaScript 新增了块级作用域。

下面的函数有两个代码块，都声明了变量 n ，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var 定义变量 n，最后输出的值才是 10。

复制代码 
function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

  • 允许在块级作用域内声明函数。

  • 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。

  • 同时，函数声明还会提升到所在的块级作用域的头部。

    注： 上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

const 声明一个只读的常量 。一旦声明，常量的值就不能改变。

注：const 变量指向的是一个对象或数组 ，那么对象或数组的内容是可以被修改的‌

如需了解let、const和var区别可以参看此文： 简述let、const和var的区别

Array.from

Array.from()是JavaScript中一个非常有用的方法，它可以将类似数组或可迭代对象（iterable）转换为真正的数组。这个方法在处理一些特殊的数据结构或需要对数据进行操作时非常方便。

语法： 【 Array.from(arrayLike[, mapFn[, thisArg]]) 】

参数：

  • arrayLike 想要转换成数组的伪数组对象或可迭代对象。
  • mapFn(可选参数)如果指定了该参数，新数组中的每个元素会执行该回调函数。
  • thisArg(可选参数)，执行回调函数mapFn 时 this对象。

**返回值：**一个新的数组实例。

从字符串获得数组

复制代码 
Array.from('foo'); 
// ["f", "o", "o"]

从集合中获得数组

复制代码 
var s = new Set(['foo', window]); 
Array.from(s); 
// ["foo", window]

从映射中获得数组

复制代码 
var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); 
// [[1, 2], [2, 4], [4, 8]]

从一个类似数组的对象中获得数组（其作为array构造时的参数）

复制代码 
function f() { return Array.from(arguments); }

f(1, 2, 3);    // [1, 2, 3]

Array.of

Array.of，可以将传入的一组参数值转换为数组

Array.of () 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素7的数组，而Array(7) 创建一个包含7个undefined元素的数组。

复制代码 
Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.prototype中新增的方法

  • Array.prototype.copyWithin，可以在当前数组内部将指定位置的数组项复制到其他位置，然后返回当前数组，使用 copyWithin 方法会修改当前数组

  • Array.prototype.fill，使用给定值，填充一个数组，会改变原来的数组

  • Array.prototype.find，用于找出第一个符合条件的数组元素，有点类似于 filter

  • Array.prototype.findIndex，用来返回某个特定数组元素在数组中的位置

  • Array.prototype.entries，对数组中键值对进行遍历

  • Array.prototype.keys，对数组键名进行遍历

  • Array.prototype.values，对数组键值进行遍历

  • **Array.prototype[Symbol.iterator]()**方法返回一个迭代器对象，用于遍历数组的所有值。

    Array.prototype[Symbol.iterator]() 方法返回的值和**Array.prototype.values()**方法返回的值是一样的。

for...of

语句 在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

延伸知识请看此文：for...in 和 for...of 的区别

函数参数调整

ES6 对函数参数进行了新的设计，主要添加了默认参数、不定参数和扩展参数

不定参数和扩展参数可以认为恰好是相反的两个模式，不定参数是使用数组来表示多个参数，扩展参数则是将多个参数映射到一个数组。

需要注意： 不定参数的 ... 和数组复制的 ... 是有区别的，不定参数可以使用函数的形参来表示所有的参数组成的列表。以前的 arguments 变量也有类似的作用，但是 arguments 不是真正的数组，除了存放参数的列表外，arguments 还有 length 属性，严格来说 arguments 是一个类数组对象，而不定参数则是一个完全的数组，这也是不定参数相对于 arguments 的优势，更加方便我们使用，所以建议使用不定参数来代替 arguments。

复制代码 
// 默认参数
function sayHi(name ="zhangsan ){
    console.log(Hello ${name})
}
sayHi()// Hello zhangsan

// 不定参数
function sayHi(...name){
    console.log(name.reduce((a,b)=>Hello ${a} ${b}))
}
sayHi('zhangsan','lisi')

// 扩展参数
let name =['zhangsan','lisi']
function sayHi(namel,name2){
    console.log(Hello ${name1} ${name2})
}
sayHi(...name)

集合类型 Map + Set + WeakMap + WeakSet

Set

Set 本身是一个构造函数 ，用来生成 Set 数据结构，Set 类似于数组（但它不是数组），Set 的成员的值都是唯一的，没有重复的值，也常用它来去重（不可以传递对象）。像 Set 加入值的时候 ，不会发生类型转换 ，所以 5 和 "5" 是两个不同的值。

复制代码 
const arr =new Set([1，2，3，4，5，5，5，5])
console.log(arr)         //[1，2，3，4，5]
console.log(arr.size)    //5

操作方法：

  • size：返回Set 实例的成员总数，只读属性
  • add(value)，添加某个值，返回 Set 结构本身
  • delete value，删除某个值，返回一个布尔值，表示删除是否成功
  • has(value)，返回一个布尔值，表示该值是否为 Set 成员
  • clear()，清除所有成员，没有返回值
复制代码 
const s = new Set([1, 2, 3, 4]);

console.log(s);              // Set(4) { 1, 2, 3, 4 }
console.log(s.add(5).add({ a: 6 }).add(1));  // Set(6) { 1, 2, 3, 4, 5, { a: 6 } }  返回 Set 本身
console.log(s);              // Set(6) { 1, 2, 3, 4, 5, { a: 6 } }  重复项没有新增会自动去重

console.log(s.size);         // 6
s.size = 5;                  // 设置无效只读属性
console.log(s.size);         // Set(6) { 1, 2, 3, 4, 5, { a: 6 } }  

console.log(s.delete(1));    // true
console.log(s);              // Set(5) { 2, 3, 4, 5, { a: 6 } }

console.log(s.has(2))        // true
console.log(s.clear());      // undefined  没有返回值
console.log(s);              // Set(0) {}

遍历方法：

  • keys()，返回键名的遍历器
  • values()，返回键值的遍历器
  • entries()，返回键值对的遍历器
  • forEach()，使用回调函数遍历每个成员
复制代码 
const s = new Set(["a", "b", "c"]);
for (const item of s.keys()) {
    console.log(item)
}
// a, b, c  依次打印
for (const item of s.values()) {
    console.log(item)
}
// a, b, c  依次打印
for (const item of s.entries()) {
    console.log(item)
}
// ["a","a"], ["b", "b"], ["c", "c"]

// 直接遍历set实例，等同于遍历set实例的values方法
for (let item of s) {
  console.log(item)
}
// a, b, c  依次打印
s.forEach((item, index, self) => {
    console.log(item, index, self);
})
// a a Set(3) { 'a', 'b', 'c' }  ,  b b Set(3) { 'a', 'b', 'c' } ,   c c Set(3) { 'a', 'b', 'c' }
// set集合中不存在下标，因此forEach中的回调的第二个参数和第一个参数是一致的，均表示set中的每一项

WeakSet

WeakSet 结构与 Set类似，也是不重复的值的集合，但是，它与 Set 有两个区别：

  • WeakSet 的成员只能是对象，而不能是其他类型的值。
  • WeakSet 中的对象都是弱引用，即垃圾回收机制 不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不在引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象是否还存在于 WeakSet 中。因此 ES6 规定 WeakSet 不可遍历。

Map

传统的 JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是只能用字符串当做键，这给它的使用带来了很大的限制，而 ES6 提供了 Map 数据结构，它类似于对象，也是键值对的集合，但是**"键" 的范围不限于字符串**，各种类型的值（包括对象）都可以当做键。也就是说，Object 结构提供了"字符串-值"的对应，Map 结构提供了"值-值"的对应，是一种更完善的 Hash 结构实现。Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。

操作方法：

  • size：返回Map实例的人员总数，只读属性
  • set(key, value)，设置 key 所对应的键值，返回整个 Map 结构 ，如果 key 已经有值，则键值会被更新，否则就生成该键
  • get(key)，读取 key 对应的键值，如果在好不到 key，则返回 undefined
  • has(key)，返回一个 布尔值，表示某个键是否在 Map 数据结构中
  • delete(key)，删除某个键，返回 true，如果删除失败，则返回 false
  • clear()，清除所有成员，没有返回值
复制代码 
const map = new Map();

console.log(map.set({}, 1).set(false, 2).set("abc", 4).set("abc", 5));  
// Map(3) { {} => 1, false => 2, 'abc' => 5 }  返回 Map   

console.log(map);
// Map(3) { {} => 1, false => 2, 'abc' => 5 }  // 添加相同的键为更新，不同则添加              

console.log(map.get("abc"))    // 5   get 获取值使用到自身 has 方法是否含有
console.log(map.get({}));      // undefined   

console.log(map.has(false));   // true   has方法也是采用 Object.is() 进行比较
map.size = 5;
console.log(map.size);         // 3 只读属性设置无效

console.log(map.delete({}));   // false  引用类型比较时地址的比较
console.log(map.delete(false));// true

console.log(map.clear());      // undefined
console.log(map);              // Map(0) {}

遍历方法：

  • keys()，返回键名的遍历器
  • values()，返回键值的遍历器
  • entries()，返回所有成员的遍历器
  • forEach()，遍历 Map 的所有成员
复制代码 
const m = new Map([[1, 'a'], [2,  'b']]);
 
for (let key of m.keys()) {
  console.log(key);                         // 1  2
}
 
for (let value of m.values()) {
  console.log(value);                       // 'a'  'b'
}
 
for (let item of m.entries()) {
  console.log(item[0], item[1]);            // 1 'a'    2 'b'
}
 
// 或者
for (let [key, value] of m.entries()) {
  console.log(key, value);                  // 1 'a'    2 'b'
}
 
// 等同于使用m.entries()
for (let [key, value] of m) {
  console.log(key, value);                  // 1 'a'    2 'b'
}
 
m.forEach((value, key, m) => {
  console.log("Key: %s, Value: %s", key, value);
});
//Key: 1, Value: a     Key: 2, Value: b  
 
m.forEach(item => {
  console.log(item)                        // 'a'  'b'
})

WeakMap

WeakMap 结构与 Map 结构类似，也用于生成键值对的集合，但 WeakMap 与 Map 有两个区别：

  • WeakMap 只接受对象作为键名（null 除外），不接受其他类型的值作为键名。
  • WeakMap 的键名所指向的对象不计入垃圾回收机制。它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内，因此，只要所引用的对象的其他引用被清除了，垃圾回收机制就会释放该对象所占用的内存。也就是说， 一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。基本上，如果要想对象中添加数据又不想干扰垃圾回收机制，便可以使用 WeakMap。一个典型的应用场景是，在网页的 DOM 元素上添加数据时就可以使用 WeakMap 结构，当该 DOM 元素被清除，其对应的 WeakMap 记录就会自动被移除。

注意：WeakMap 的专用场景就是它的键所对应的对象可能会在将来消失，WeakMap 结构有助于防止内存泄露。但是，WeakMap 弱引用的只是键名而不是键值，键值依然是正常引用的。

Symbol 类型

Symbol是ES6 引入了一种新的原始数据类型，表示独一无二的值

Symbol 值通过 Symbol 函数生成，一般作为属性键值，并且能避免对象属性键的命名冲突。也就是说，对象的属性名现在可以有两种类型：一种是原来就有的字符串，另一种就是新增的 Symbol 类型。只要属性名属于 Symbol 类型，就是独一无二的，可以保证不会与其他属性名产生冲突。

注意： Symbol 函数前不能使用 new 命令，否则会报错，这是因为生产的 Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。

Symbol 函数的参数只表示对当前 Symbol 值的描述，因此相同参数的 Symbol 函数的返回值是不相等的。

Symbol 值作为对象属性名时不能使用点运算符：

复制代码 
let s=Symbol()
let obj ={
    [s]:function(){
        console.log('Hello')
    }
}
obj[s]()//'Hello

Symbol 做为属性名，该属性不会出现在 for...in，for...of 循环中，也不会被 Object.keys()、Object.getOwnpropertyNames() 返回，但它也不是私有属性，Object.getOwnPropertySymbols() 可以获取指定对象的所有 Symbol 属性名。 Object.getOwnPropertySymbols() 返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。

上一章：js版本之ES6特性简述【类（class）、模块化(ES Module) 、j箭头函数、函数参数默认值、模板字符串、解构赋值、扩展运算符、对象属性简写、Promise】(三)

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了，像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件？21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50（常见的js数据通信与渲染问题）
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架：快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js：如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js：基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架：性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器：npm vs pnpm
前端·javascript·面试
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量05RAG 实践- Ollama+RagFlow 部署本地知识库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07【AUTOSAR 基础软件】Can模块详解（Can栈之驱动模块）08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek RAGFlow构建本地知识库系统10Mac cursor设置jdk、Maven版本