牛客刷题——前端面试【五】谈一谈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}


相关文章
|
2月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
71 1
|
4月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
5月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
122 57
|
3月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
5月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
67 2
|
5月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
5月前
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
73 0
|
5月前
|
存储 Java
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输,之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。
|
2月前
|
存储 缓存 算法
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
本文介绍了多线程环境下的几个关键概念,包括时间片、超线程、上下文切换及其影响因素,以及线程调度的两种方式——抢占式调度和协同式调度。文章还讨论了减少上下文切换次数以提高多线程程序效率的方法,如无锁并发编程、使用CAS算法等,并提出了合理的线程数量配置策略,以平衡CPU利用率和线程切换开销。
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
|
2月前
|
存储 算法 Java
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?