js中api是什么意思

集合只是一个将多个元素组合成一个单元的对象。它也被称为容器。本章详细介绍了集合 API。

配置API

可以使用以下脚本配置 API。


集合 API 方法

集合 API 包含对象、映射、集合和嵌套。以下是最常用的集合 API 方法。

  • Objects API
  • Maps API
  • Sets API
  • Nests API

让我们详细介绍每个 API。


Object API

Object API 是重要的数据类型之一。它支持以下方法 -

  • d3.keys(object) - 此方法包含对象属性键并返回属性名称数组。
  • d3.values(object) - 此方法包含对象值并返回一个属性值数组。
  • d3.entries(object) - 此方法用于返回包含指定对象的键和值的数组。每个条目都是一个具有键和值的对象。

让我们考虑以下代码。

d3.entries({one: 1})

这里,key 为 one,value 为 1。

D3 collection APIvar month = {"jan": 1, "Feb": 2, "mar": 3, "apr": 4};
         console.log(d3.keys(month));
         console.log(d3.values(month));
         console.log(d3.entries(month));

在浏览器控制台中显示结果如下


Map Api

映射包含基于键值对的值。每个键值对都称为一个条目。Map 仅包含唯一键。基于键搜索、更新或删除元素很有用。让我们详细了解各种 Maps API 方法。

  • d3.map([object[, key]]) - 此方法用于创建新地图。对象用于复制所有可枚举的属性。
  • map.has(key) - 此方法用于检查地图是否具有指定键字符串的条目。
  • map.get(key) - 此方法用于返回指定键字符串的值。
  • map.set(key, value) - 此方法用于设置指定键字符串的值。如果映射先前具有相同键字符串的条目,则旧条目将替换为新值。
  • map.remove(key) - 用于删除地图条目。如果未指定键,则返回 false。
  • map.clear() - 从此地图中删除所有条目。
  • map.keys() - 返回此映射中每个条目的字符串键数组。
  • map.values() - 返回此地图中每个条目的值数组。
  • map.entries() - 返回此映射中每个条目的键值对象数组。
  • (x) map.each(function) - 此方法用于为地图中的每个条目调用指定的函数。
  • (xi) map.empty() - 当且仅当此地图具有零个条目时才返回 true。
  • (xii) map.size() - 返回此地图中的条目数。
D3 collection APIvar month = d3.map([{name: "jan"}, {name: "feb"}], 
            function(d) { return d.name; });
         console.log(month.get("jan")); // {"name": "jan"}
         console.log(month.get("apr")); // undefined
         console.log(month.has("feb")); // true
         
         var map =  d3.map().set("fruit", "mango");
         console.log(map.get("fruit")); // mango
         console.log(map.remove("fruit")); // remove key and return true.
         console.log(map.size());    // size is 0 because key removed.
         console.log(map.empty());   // true

同样,您也可以执行其他操作。


Sets API

Set 是一个不能包含重复元素的集合。它对数学集合抽象进行建模。让我们详细了解各种 Sets API 方法。

  • d3.set([array[, accessor]]) - 此方法用于创建一个新集合。数组用于添加字符串值。访问器是可选的。
  • set.has(value) - 此方法用于检查集合是否具有指定值字符串的条目。
  • set.add(value) - 用于将指定的值字符串添加到集合中。
  • set.remove(value) - 用于删除包含指定值字符串的集合。
  • set.clear() - 从此集合中删除所有值。
  • set.values() - 此方法用于将值数组返回到集合。
  • set.empty() - 当且仅当此集合具有零值时才返回 true。
  • set.size() - 返回此集合中值的数量。
D3 collection APIvar fruits =  d3.set().add("mango")
          .add("apple").add("orange");
         console.log(fruits.has("grapes")); // return false.
         console.log(fruits.remove("apple")); //true
         console.log(fruits.size());    // size is 2
         console.log(fruits.empty());   // true

同样,我们也可以执行其他操作。


Nested Api

嵌套 API 包含数组中的元素并以分层树结构执行。让我们详细了解各种 Nests API 方法。

  • d3.nest() - 此方法用于创建一个新的嵌套。
  • nest.key(key) - 此方法用于初始化新的键函数。此函数用于调用输入数组中的每个元素并返回组中的元素。
  • nest.sortKeys(comparator) - 此方法用于对指定比较器中的键进行排序。函数定义为 d3.ascending 或 d3.descending。
  • nest.sortValues(comparator) - 此方法用于对指定比较器中的值进行排序。比较器函数对叶元素进行排序。
  • nest.map(array) - 此方法用于应用指定的数组并返回嵌套映射。返回映射中的每个条目对应于第一个键函数返回的不同键值。条目值取决于注册的键功能的数量。
  • nest.object(array) - 此方法用于将嵌套运算符应用于指定的数组并返回嵌套对象。
  • nest.entries(array) - 此方法用于将嵌套运算符应用于指定的数组并返回键值条目数组。
D3 Nest APIvar data = [
            {
               "color" : "red",
               "key" : 1
            },
            {
               "color" : "green",
               "key" : 2
            },
            {
               "color" : "blue",
               "key" : 75
            }
         ]
         var nest =  d3.nest()
            .key(function (d) { return d.color; })
            .entries(data);
         console.log(nest);
         var filter = nest.filter(function (d) { return d.key === 'red' })
         console.log(filter);

上述代码执行结果如下

(0)

相关推荐

  • js中的map 遍历方法

    js中的map方法 1)定义:map方法是通过循环的方式一个一个项的处理原来的数组,并返回新的数组,同时,不会改变原数组的值 2)格式:array1.map(function(item, index, ...

  • js中鼠标滑过显示内容,移出隐藏内容效果

    在做网页的时候这是经常会遇到的一个效果,鼠标滑过一个div的时候内容显示,鼠标移出div的时候内容隐藏.其实这在js中是个非常简单的效果,很好实现,下面我来给大家敲下代码看是如何一步步实现的,大家按照 ...

  • JS中 == 与 === 的区别?

    js代码中 == 与 === 的区别. 操作方法 01 今天聊聊js中 == 与 === 的区别? 02 1)."==="叫做严格运算符,"=="叫做相等运算符 ...

  • 如何在js中动态引入或加载js文件?

    一个网页加载时,js文件一般是通过html中的标签加载的,但有时也会有通过js代码动态引入js文件的需求.下面介绍具体做法. 原理 01 在js中动态引入js文件的核心原理是使用js在html界面上增 ...

  • js中substring和substr用法与区别

    javascript字符串操作获取子串的方法有好几种,本篇主要介绍substring和substr用法与区别 操作方法 01 在开始之前,先回顾下js中下标(数组元素/字符串中字符下标): 下标总是从 ...

  • javascript(js)中怎么对数组值从小到大的排序?

    在编写前端代码时经常会使用到javascript的数组,那么我们怎么来操作呢? 操作方法 01 首先创建一个js的数组,其中里面的值大小是不按顺序的: 02 接下来我们就用js的方法来进行从小到大的排 ...

  • js中数组怎么添加元素

    介绍JS中数组添加元素的方法. 操作方法 01 创建数组,例如:var a = [1,2,3,4,5]; 02 调用函数给数组添加元素即可 JavaScript数组元素添加函数 01 unshift: ...

  • js中的运算符详解

    在JS中,要对各种数据进行运算,必须使用相应的运算符.如:+ .-.*./.如何使用运算符来进行操作呢?下面我就带大家来熟悉一下. 操作方法 01 一.算术运算符:+.-.*./.%.++.--. 0 ...

  • javascript(js)中怎么获取下拉框option的值?

    javascript在我们编写前端页面时是必不可少的,那么我们怎么来使用它呢? 操作方法 01 首先我们先创建一个下拉框: 02 界面显示如下: 03 接下来我们用js来获取被选中的值: 04 首先我 ...

  • 在一个js中引用另一个js的方法

    js中引用另外一个js的方法主要有两种,实际上性质是一样的,这篇文章就来和大家分享一下这两种方法,与HTML编程的理念 操作方法 01 一个js调用另外一个js的方法,最简单的例子就是jquery的调 ...