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


相关文章
|
8天前
|
算法 前端开发 安全
面试官:前端加密怎么做?这,这,这不是后端的活儿吗?
前端加密技术概述: 前端加密主要用来保护数据在传输过程中的安全,但因浏览器环境开放性,仅能提供有限的安全性,真正安全策略需结合服务器端加密和安全协议。
|
8天前
|
前端开发 API 数据库
面试官问:如何防止重复提交请求,99%的前端能说出来!
如何防止接口重复提交是一个常见的系统设计问题,主要目的是确保关键操作的原子性和一致性。以下是简化的摘要: 这些方法可以单独或组合使用,取决于系统规模和业务需求。例如,对于低流量系统,简单的请求唯一ID和数据库唯一索引可能足够;而对于高并发场景,可能需要结合前端禁用和后端分布式锁来提高可靠性。幂等性设计是确保接口安全的一种通用策略,适用于各种场景。
|
1月前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
14 1
|
1月前
|
存储 缓存 前端开发
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
|
1月前
|
移动开发 前端开发 JavaScript
【前端面试】前端面试题300道~~熬夜吐血整理,2024年最新大厂面试经验分享稿
【前端面试】前端面试题300道~~熬夜吐血整理,2024年最新大厂面试经验分享稿
|
1月前
|
前端开发 JavaScript
【前端面试】this的指向_不爱吃糖的程序媛夏天,web前端面试项目中的问题包括
【前端面试】this的指向_不爱吃糖的程序媛夏天,web前端面试项目中的问题包括
|
1月前
|
前端开发 JavaScript 中间件
Vue3整合VxeTable,2024大厂前端面试
Vue3整合VxeTable,2024大厂前端面试
|
1月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效(1),头条前端面试节奏
10款精美的web前端源码的特效(1),头条前端面试节奏
|
1月前
|
移动开发 前端开发 JavaScript
Java和web前端,IT新人该如何选择?,2024年最新Web前端内存优化面试
Java和web前端,IT新人该如何选择?,2024年最新Web前端内存优化面试
|
1月前
|
移动开发 前端开发 JavaScript
Web前端开发之面试题全解析 一(3),前端面试题背不下来怎么办
Web前端开发之面试题全解析 一(3),前端面试题背不下来怎么办