es6 symbol、迭代器(es6学习笔记03)

前言:本篇主要记下有关symbol的介绍和使用。还有关于迭代器的介绍和使用。

一、symbol的介绍和创建

1.1symbol的介绍

ES6引入了一种新的原始数据类型symbol,表示独一无二的值。它是js的第七种数据类型,是一种类似于字符串的数据类型。

特点

  • symbol的值是唯一的,用来解决命名冲突的问题
  • symbol值不能与其他数据进行运算
  • symbol定义的对象属性不能使用for…in 遍历循环,但是可以使用Reflect.ownKeys来获取对象的所有键名。

1.2symbol的创建

//创建symbol
let s = Symbol();
//这样是两种不一样的东西
let s2 = Symbol('大海');   //这样创建是个函数
let s3 = Symbol('大海');
console.log(s2===s3);     //结果输出是false

//Symbol.for 创建 (这样创建相当于对象)
let s4 = Symbol.for('大海');
let s5 = Symbol,for('大海');
console.log(s4===s5);     //结果输出是true

二、对象添加Symbol类型的属性

//向对象中添加方法 aaa  bbb
let name = {
    
    
    
}
//声明一个对象
let methods = {
    
    
    aaa:Symbol();
    bbb:Symbol();
};
name[methods.aaa] = function(){
    
    
    console.log("我是最美的aaa");
}
name[methods.bbb] = function(){
    
    
    console.log("我是最美的bbb");
}
console.log(name);

//第二种方法
let age = {
    
    
    name:'小花',
    [Symbol('girl')]:function(){
    
    
        console.log("我是女生");
    },
    [Symbol('boy')]:function(){
    
    
        console.log("我是男生");
    }
}

三、Symbol的内置属性

用于指向语言内部使用的方法

参考官方文档

或者参考一下这个博客

https://blog.csdn.net/ixygj197875/article/details/79165218

四、迭代器

迭代器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署迭代器接口,就可以完成遍历操作。

  1. ES6创造了一种新的遍历命令for…of循环,Iterator接口主要提供for…of消费
  2. 原生具备迭代器接口的数据(可用for of 遍历)
    • Array、Argument、Set、Map、String、TypedArray、NodeList
  3. 工作原理:
    • (1)创建一个指针对象,指向当前数据结构的起始位置
    • (2)第一次调用对象的next方法,指针自动指向数据结构的第一个成员
    • 接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员
    • 每调用next方法返回一个包含value和done属性的对象

注:需要自定义遍历数据的时候,要想到迭代器

(1)用迭代器遍历一个数组
//声明一个数组
const book = ['西游记','红楼梦','水浒传','三国演义'];
//使用for...of遍历数组
for(let a of book){
    
    
      console.log(a);  //输出的是键值
}
//使用for...in遍历数组
for(let a in book){
    
    
      console.log(a);  //输出的是键名,也就是数字下标
}
console.log(book);

(2)手动定义一个迭代器去遍历一个对象
//自定义手动实现迭代器
        //声明一个对像
        const people = {
    
    
            name:'红红',
            friends:[
                '红果果',
                '小熊维尼',
                '跳跳虎',
                '绿泡泡'
            ],
            [Symbol.iterator](){
    
    
                //索引变量
                let index = 0;
                let _this = this;  //找到this的作用域为people
                return{
    
    
                    next:function(){
    
    
                        if(index<_this.friends.length){
    
    
                            const result = {
    
    value:_this.friends[index],done:false};
                            index++;
                            return result;  //返回结果
                        }
                        else{
    
    
                            return {
    
    value:undefined,done:true}  //done为true遍历结束
                        }
                    }
                };
            }
        }

猜你喜欢

转载自blog.csdn.net/weixin_48931875/article/details/113198235