牛客刷题——前端面试【五】谈一谈Symbol 、迭代器、生成器

简介: 本章带你了解Symbol 、迭代器、生成器。

一、Symbol


1.Symbol是惟一的,即使同一一个变量生成的也不相等


2.不能与运算符计算,会直接报错


3.Symbol创建唯一的值


4.Symbol的应用


二、迭代器


迭代器为所有数据结构提供了统一的访问机制。只要为数据结构部署了接口,就可以进行遍历操作。就是为遍历而生。


1. 迭代器接口定义


2.接口的应用


三、生成器


生成器是一种特殊的函数,是ES6提出的异步编程的解决方案,解决回调地狱的问题。


1.生成器的定义


2.生成器的传参


一、Symbol

1.Symbol是惟一的,即使同一一个变量生成的也不相等

const a = Symbol("a");
const b = Symbol("a");
console.log(a===b);//false


2.不能与运算符计算,会直接报错

const a = Symbol("a");
const b = Symbol("a");
a+1;//报错


3.Symbol创建唯一的值

const a = Symbol.for("a");
const b = Symbol.for("a");
console.log(a===b);//true


4.Symbol的应用

const Method = {
  say:Symbol(),
  play:Symbol(),
  }   
const Person = {
  realname:"张三",
  age:19,
  say(){
  console.log('会说话');     
    }
    }
Person[Method.say] = ()=>{
  console.log("会说话");
    }   
Person[Method.play] = ()=>{
  console.log("会玩游戏");
    }
// 1:获得所有的key
const keys = Reflect.ownKeys(Person);
onsole.log(keys);    // ['realname', 'age', 'say', Symbol(), Symbol()]
// 2:获得symbol的keys
const sysbolKeys = Object.getOwnPropertySymbols(Person);
console.log(sysbolKeys);   //[Symbol(), Symbol()]
// 3:调用方法
Person[sysbolKeys[0]](); //会说话
Person[sysbolKeys[1]](); //会玩游戏


二、迭代器


迭代器为所有数据结构提供了统一的访问机制。只要为数据结构部署了接口,就可以进行遍历操作。就是为遍历而生。

1.  迭代器接口定义

   迭代器接口定义

let arr = ['a','b','c'];
let myIte = arr[Symbol.iterator]();
console.log(myIte.next());


2.接口的应用

迭代器接口应用

const Stu = {
title:"web2209",
persons:['张三','李四','王五'],
[Symbol.iterator](){
     let i=0;
 return{
     next:()=>{
if(i<this.persons.length){
      const Obj = {value:this.persons[i],done:false}
      i++;
      return Obj;
      }else{
       return {value:undefined,done:true};
                        }
                    }
                }
            }
        }
const Myite = Stu[Symbol.iterator]();
console.log(Myite.next());
console.log(Myite.next());
console.log(Myite.next());
console.log(Myite.next());
// for(let v of Stu){   // 直接访问
//     console.log(v);
// }


三、生成器


生成器是一种特殊的函数,是ES6提出的异步编程的解决方案,解决回调地狱的问题。

1.生成器的定义

// 生成器的定义
function  * ride(num){
console.log("函数执行了...");
yield num*2;
console.log("第二步...");
yield num*4;
console.log("第三步...");
yield num*8;
console.log("函数执行end...");
    }
const myride = ride(10);//生成器函数调用的时候 会生成一个迭代器对象
console.log(myride.next()); 
console.log(myride.next()); 
console.log(myride.next());
console.log(myride.next());
//控制台显示
函数执行了...
{value: 20, done: false}
第二步...
{value: 40, done: false}
第三步...
{value: 80, done: false}
函数执行end...
{value: undefined, done: true}



2.生成器的传参

// 生成器的传参
function  * ride(num){
let a1 = yield num*2;
  console.log(a1);
let a2 = yield a1*4;
  console.log(a2);
let a3 = yield a2*8;
  onsole.log(a3);
    }
const myride = ride(30);
console.log(myride.next());
console.log(myride.next(20));//a1就是20
console.log(myride.next(30));//a2就是30
console.log(myride.next(40));//a3就是40
//控制台内容
{value: 60, done: false}
20
{value: 80, done: false}
30
{value: 240, done: false}
40
{value: undefined, done: true}


相关文章
|
19天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
54 1
|
2月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
30天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
3月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
51 2
|
3月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
38 0
|
3月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
3月前
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
50 0
|
30天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
127 2
|
30天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
37 0
|
30天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。