文章详情 - 首页

::: warning 
 不改变这行代码,如何使其成立? 
::: 
``` 
const [a,b] = {a:1,b:2} 
``` 
::: details 
 ``` 
 Object.prototype[Symbol.iterator] = function () { 
 const values = Object.values(this) 
 function* increment() { 
 let curr = 0; 
 while (curr < values.length) { 
 yield values[curr++]; 
 } 
 } 
 return increment() 
}; 
const [a,b] = {a:1,b:2} 
``` 
::: 
 
 
 
 
:::align-left 
**1. es6解构** 
1. 数组解构 
``` 
let [a, b, ...rest] = [1, 2, 3, 4, 5]; 
console.log(a); // 1 
console.log(b); // 2 
console.log(rest); // [3, 4, 5] 
``` 
默认值: 
``` 
let [a, b=2, c=3] = [1]; // b 和 c 分别设置了默认值 
console.log(a); // 1 
console.log(b); // 2 
console.log(c); // 3 
``` 
2. 对象解构 
``` 
let { a, b } = { a: 1, b: 2 }; 
console.log(a); // 1 
console.log(b); // 2 
``` 
变量重命名: 
``` 
let { a: x, b: y } = { a: 1, b: 2 }; 
console.log(x); // 1，a 被重命名为 x 
console.log(y); // 2，b 被重命名为 y 
``` 
3. 函数解构 
``` 
function foo({ x=0, y=0 } = {}) { 
 console.log(x, y); 
} 
 
foo({x: 1, y: 2}); // 1, 2 
foo(); 
 
``` 
 
**2. 可迭代对象** 
可迭代对象是一种可以被迭代的数据结构，其中包含了一个名为 Symbol.iterator 的内置方法。当该方法被调用时，会返回一个迭代器对象，用于按顺序遍历数据结构中的每个元素 
常用: 
1. 数组 
``` 
const arr = [1, 2, 3]; 
for (let item of arr) { 
 console.log(item); 
} 
``` 
2. 字符串 
``` 
const str = 'hello'; 
for (let ch of str) { 
 console.log(ch); 
} 
``` 
3. Set和Map 
``` 
const set = new Set([1, 2, 3]); 
for (let item of set) { 
 console.log(item); 
} 
 
const map = new Map([['a', 1], ['b', 2], ['c', 3]]); 
for (let [key, value] of map) { 
 console.log(key, value); 
} 
``` 
4. arguments 对象 
``` 
function foo(...args) { 
 for (let arg of args) { 
 console.log(arg); 
 } 
} 
 
foo(1, 2, 3); 
``` 
5. NodeList 对象 
``` 
const nodes = document.querySelectorAll('a') 
var arr = [...nodes] 
``` 
::: warning 
 并非所有的对象都是可迭代对象。若对象不包含 Symbol.iterator 方法，则在其上使用 for...of 、Array.from() 等语法将会抛出错误 
::: 
 
:::align-left 
 
**3. 迭代器** 
迭代器（Iterator）是一种对象，用于提供遍历数据结构的统一接口。具有迭代器的对象可以使用 for...of 循环来遍历它们的元素,迭代器提供了两个重要方法 
1. next()：该方法返回一个包含两个属性的对象。其中，value表示当前元素的值，done表示是否已经完成遍历。 
2. return(value)：如果需要在迭代过程中提前终止遍历，则可以调用该方法。它会立即结束迭代，并将给定的value作为最后返回对象的value属性值。当然，如果不调用该方法直接退出循环或者数组自然结束了，那么该方法也会自动调用。 
``` 
const arr = [1, 2, 3]; 
const iterator = arr[Symbol.iterator](); 
let result = iterator.next(); 
 
while (!result.done) { 
 console.log(result.value); 
 result = iterator.next(); 
} 
``` 
 
**4. 生成器函数** 
生成器函数是一种特殊类型的函数，用来创建迭代器对象。生成器函数通过 function* 关键字进行定义，并且使用 yield 关键字来产生输出值并暂停函数的执行。生成器函数可以创建一系列值，避免像数组、集合等数据结构同时占用大量内存的问题 
 
``` 
function* increment() { 
 let curr = 0; 
 while (curr < values.length) { 
 yield values[curr++]; 
 } 
 } 
 return increment() 
} 
``` 
 
**5. 类数组** 
类数组（Array-like）对象是指具有类似于数组的行为和属性但不像数组那样实现数组的方法的对象 
 
常见的类数组包括： 
- arguments 对象 
- DOM 元素列表 (NodeList) 和集合 (HTMLCollection) 
- 字符串（String） 
- TypedArray 数组 
 
这些对象都具备了类似于数组的索引和 length 属性,没有实现数组特定的方法比如 map、filter、reduce 等，不能进行数组操作。对类数组对象的多次循环会影响性能，故将其转换为真正的数组对象使用 
 
类数组转换为数组: 
1. Array.from,将可迭代对象或类数组对象转换为数组(es6) 
``` 
const nodeList = document.querySelectorAll('div'); 
const arr = Array.from(nodeList); 
``` 
2. Array.prototype.slice.call() 
``` 
function foo() { 
 const argsArr = Array.prototype.slice.call(arguments); 
 console.log(argsArr); // [1, 2, 3] 
} 
``` 
3. ...拓展运算符,是一种用于展开数组或类数组对象、迭代器对象、可遍历对象等的语法 
``` 
const nodeList = document.querySelectorAll('div'); 
const arr = [...nodeList]; 
``` 
 
 
::: tip 
 - **原型与原型列** 
 - **构造函数,类** 
 - **实例化** 
 - **继承** 
 
:::