JavaScript学习(五)闭包与封装set结构

JavaScript学习(五)闭包与封装set结构

闭包

什么是闭包?闭包有什么作用?这是我遇到闭包时的第一反应。

闭包在JavaScript高级程序设计(第3版)中是这样描述:闭包是指有权访问另一个函数作用域中的变量的函数

 function outerFn() {
      var i = 0;

      function innerFn() {
        i++;
        console.log(i);
      }
      return innerFn;
    }
    var inner = outerFn(); //每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同,都会重新创建一个新的地址
    inner();
    inner();
    inner();
    var inner2 = outerFn();
    inner2();
    inner2();
    inner2();
    //1 2 3 1 2 3

闭包案例

起步里程为3公里,起步费13元;
超过3公里以上的部分,每公里5元;
营运过程中,因路阻及乘客要求临时停车的,加收10元

 let car = (function () {
            let start = 13,
                total = 0;
            return {
                price: function (n) {
                    if (n < 3) {
                        total = start;
                    } else {
                        total = 13 + (n - 3) * 5
                    }
                    return total
                },
                yd: function (flag) {
                    return flag ? total + 10 : total
                }
            }
        })()
        console.log(car.price(5));
        console.log(car.yd(true));
        console.log(car.price(1));

 

set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set 本身是一个构造函数,用来生成 Set 数据结构。

Set 结构的实例有以下属性


Set.prototype.constructor:构造函数,默认就是Set函数。
Set.prototype.size:返回Set实例的成员总数。
四个操作方法。
add(value):添加某个值,返回Set结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。


Set的遍历


Set 结构的实例有四个遍历方法,可以用于遍历成员。

keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员
由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。
Set结构的实例的forEach方法,用于对每个成员执行某种操作,没有返回值。

 

封装Set结构

     /* 字典常见的操作
      set(key,value):向字典中添加新元素。
      remove(key):通过使用键值来从字典中移除键值对应的数据值。
      has(key):如果某个键值存在于这个字典中,则返回true,反之则返回false。
      get(key):通过键值查找特定的数值并返回。
      clear():将这个字典中的所有元素全部删除。
      size():返回字典所包含元素的数量。与数组的length属性类似。
      keys():将字典所包含的所有键名以数组形式返回。
      values():将字典所包含的所有数值以数组形式返回。 */


      // 创建字典的构造函数
      function Dictionay() {
        // 字典属性
        this.items = {}

        // 字典操作方法
        // 在字典中添加键值对
        Dictionay.prototype.set = function(key, value) {
          this.items[key] = value
        }

        // 判断字典中是否有某个key
        Dictionay.prototype.has = function(key) {
          return this.items.hasOwnProperty(key)
        }

        // 从字典中移除元素
        Dictionay.prototype.remove = function(key) {
          // 1.判断字典中是否有这个key
          if (!this.has(key)) return false

          // 2.从字典中删除key
          delete this.items[key]
          return true
        }

        // 根据key去获取value
        Dictionay.prototype.get = function(key) {
          return this.has(key) ? this.items[key] : undefined
        }

        // 获取所有的keys
        Dictionay.prototype.keys = function() {
          return Object.keys(this.items)
        }

        // 获取所有的value
        Dictionay.prototype.values = function() {
          return Object.values(this.items)
        }

        // size方法
        Dictionay.prototype.size = function() {
          return this.keys().length
        }

        // clear方法
        Dictionay.prototype.clear = function() {
          this.items = {}
        }
      }


      // 创建字典对象
      var dict = new Dictionay()

      // 在字典中添加元素
      dict.set("age", 18)
      dict.set("name", "Coderwhy")
      dict.set("height", 1.88)
      dict.set("address", "广州市")

      // 获取字典的信息
      alert(dict.keys()) // age,name,height,address
      alert(dict.values()) // 18,Coderwhy,1.88,广州市
      alert(dict.size()) // 4
      alert(dict.get("name")) // Coderwhy

      // 字典的删除方法
      dict.remove("height")
      alert(dict.keys()) // age,name,address

      // 清空字典
      dict.clear()

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读