Rumah  >  Artikel  >  hujung hadapan web  >  Adakah ahli peta es6 unik?

Adakah ahli peta es6 unik?

青灯夜游
青灯夜游asal
2022-10-31 18:43:521679semak imbas

ahli peta es6 adalah unik. Struktur data Peta baharu ES6 adalah serupa dengan objek Nilai utama tidak terhad kepada rentetan dan nilai ahli adalah unik. Struktur Peta menyediakan surat-menyurat "nilai-nilai" dan merupakan pelaksanaan struktur Hash yang lebih lengkap. Objek peta menyimpan pasangan nilai kunci dan ingat susunan sisipan kunci yang asal; sebarang nilai (objek atau primitif) boleh digunakan sebagai kunci atau nilai.

Adakah ahli peta es6 unik?

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Peta dan Set ialah kedua-dua struktur data baharu dalam ES6

  • Peta serupa dengan objek, nilai kunci tidak terhad kepada rentetan dan nilai ahli adalah unik .

  • Set adalah serupa dengan tatasusunan, dengan nilai ahli yang unik.

Konsep Asas Peta

ES6 menyediakan struktur data Peta. Ia serupa dengan objek dan juga merupakan koleksi pasangan nilai kunci, tetapi skop "kunci" tidak terhad kepada rentetan Pelbagai jenis nilai (termasuk objek) boleh digunakan sebagai kunci. Dalam erti kata lain, struktur Objek menyediakan surat-menyurat "nilai-rentetan", dan struktur Peta menyediakan surat-menyurat "nilai-nilai", yang merupakan pelaksanaan yang lebih lengkap bagi struktur Hash. Jika anda memerlukan struktur data "nilai-kunci", Map adalah lebih sesuai daripada Object.

Ciri Peta

  • Objek peta menyimpan pasangan nilai kunci dan dapat mengingati susunan sisipan kunci yang asal.

  • Sebarang nilai (objek atau primitif) boleh digunakan sebagai kunci atau nilai.

  • Peta ialah struktur data baharu yang diperkenalkan dalam ES6, sila rujuk Peta dan Set ES6.

Perbezaan antara Peta dan Objek

  • Kunci Objek hanya boleh berupa rentetan atau Simbol, tetapi kekunci Peta Kekunci boleh berupa sebarang nilai.

  • Nilai utama dalam Peta disusun (prinsip FIFO), tetapi kunci yang ditambahkan pada objek tidak.

    Penjelasan rasmi tentang objek yang tidak tertib: 1. Objek ialah ahli jenis Objek Ia adalah koleksi sifat tidak tertib yang setiap satunya mengandungi nilai primitif, objek, atau fungsi Fungsi yang disimpan dalam sifat objek ialah dipanggil kaedah. 2. Enjin penghuraian JavaScript Chrome Opera mengikut spesifikasi edisi kelima ECMA-262 baharu. Oleh itu, apabila menggunakan penyataan untuk-masuk untuk mengulangi sifat objek, susunan traversal bukanlah susunan pembinaan harta. Dan JavaScript untuk IE6 IE7 IE8 Firefox Safari Enjin parsing mengikut spesifikasi edisi ketiga ECMA-262 yang lebih lama, dan susunan traversal atribut ditentukan mengikut susunan atribut dibina.

  • Bilangan pasangan nilai kunci Peta boleh diperolehi daripada atribut saiz, manakala bilangan pasangan nilai kunci Objek hanya boleh dikira secara manual.

  • Objek mempunyai prototaip sendiri, dan nama kunci pada rantai prototaip mungkin bercanggah dengan nama kunci yang anda tetapkan pada objek.

Harta peta

  • Map.prototype.size – Mengembalikan bilangan pasangan kunci/nilai objek Peta.

Kaedah operasi peta

  • Map.prototype.clear() – Alih keluar semua pasangan kunci/nilai objek Peta.
  • Map.prototype.set() – Tetapkan pasangan nilai kunci dan kembalikan objek Peta.
  • Map.prototype.get() – Mengembalikan nilai yang sepadan dengan kunci, atau tidak ditentukan jika ia tidak wujud.
  • Map.prototype.has() – Mengembalikan nilai Boolean yang digunakan untuk menentukan sama ada Peta mengandungi nilai yang sepadan dengan kunci.
  • Map.prototype.delete() – Padamkan elemen dalam Peta Ia mengembalikan benar jika pemadaman berjaya dan palsu jika gagal.

Kaedah gelung peta

Tertib lintasan Peta ialah tertib sisipan.

  • Map.prototype.keys(): Mengembalikan penyeberang nama kunci.
  • Map.prototype.values(): Mengembalikan penyeberang nilai utama.
  • Map.prototype.entries(): Mengembalikan penyeberang semua ahli.
  • Map.prototype.forEach(): Lintas semua ahli Map.

Kaedah lain

  • for of Memandangkan ia boleh diubah, anda juga boleh menggunakan kaedah ini

Mula mencipta

Gunakan jenis Peta dan kata kunci baharu untuk mencipta Peta:

Bukan sekadar tatasusunan, apa-apa sahaja dengan antara muka Iterator dan setiap ahli ialah susunan dua elemen struktur data Jadi Set Tatasusunan Peta boleh mencipta Peta

untuk mencipta peta kosong dan kemudian menambah

let map1 = new Map();
map1.set('123',123)

tatasusunan untuk mencipta Peta

const m2 = new Map([['baz', 3]]);

set mencipta Peta

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);

const m3 = new Map(set);

peta mencipta peta baharu

Nota m3 === m2 //salah

const m3 = new Map(m2);

Contoh: Apa yang boleh dilakukan Perbezaan terbesar antara

dan objek: Kekunci berbilang jenis

字符串

var myMap = new Map(); 
var keyString = "a string"; 
myMap.set(keyString, "和键'a string'关联的值");

对象

var myMap = new Map(); 
var keyObj = {}
myMap.set(keyObj, "和键 keyObj 关联的值");

函数

var myMap = new Map(); 
var keyFunc = function () {} // 函数 
myMap.set(keyFunc, "和键 keyFunc 关联的值");

NaN

var myMap = new Map(); 
myMap.set(NaN, "not a number");

Map 遍历成员方法

keys() , values() , entries()Map 的遍历顺序就是插入顺序

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}

使用扩展运算符可以快速转数组

const map = new Map([  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

转为数组后,可以使用数组的map,filter方法

const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => &#39;a&#39;, 2 => &#39;b&#39;}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, &#39;_&#39; + v])
    );
// 产生 Map 结构 {2 => &#39;_a&#39;, 4 => &#39;_b&#39;, 6 => &#39;_c&#39;}

Map 增 删 查 清空

const m = new Map();
const o = {p: &#39;Hello World&#39;};

m.set(o, &#39;content&#39;)
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false
m.clear()

与其他数据结构的互相转换

(1)Map 转为数组

前面已经提过,Map 转为数组最方便的方法,就是使用扩展运算符(...)。

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, [&#39;abc&#39;]);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ &#39;abc&#39; ] ] ]

var outArray = Array.from(myMap);

(2)数组 转为 Map

将数组传入 Map 构造函数,就可以转为 Map。

new Map([
  [true, 7],
  [{foo: 3}, [&#39;abc&#39;]]
])
// Map {
//   true => 7,
//   Object {foo: 3} => [&#39;abc&#39;]
// }

(3)Map 转为对象

如果所有 Map 的键都是字符串,它可以无损地转为对象。

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set(&#39;yes&#39;, true)
  .set(&#39;no&#39;, false);
strMapToObj(myMap)
// { yes: true, no: false }

如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。

(4)对象转为 Map

对象转为 Map 可以通过Object.entries()

let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj));

此外,也可以自己实现一个转换函数。

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}

(5)Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set(&#39;yes&#39;, true).set(&#39;no&#39;, false);
strMapToJson(myMap)
// &#39;{"yes":true,"no":false}&#39;

另一种情况是,Map 的键名有非字符串,这时可以选择转为数组 JSON。

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, [&#39;abc&#39;]);
mapToArrayJson(myMap)
// &#39;[[true,7],[{"foo":3},["abc"]]]&#39;

(6)JSON 转为 Map

JSON 转为 Map,正常情况下,所有键名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap(&#39;{"yes": true, "no": false}&#39;)
// Map {&#39;yes&#39; => true, &#39;no&#39; => false}

但是,有一种特殊情况,整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap(&#39;[[true,7],[{"foo":3},["abc"]]]&#39;)
// Map {true => 7, Object {foo: 3} => [&#39;abc&#39;]}

其他

Map 的合并

var first = new Map([[1, &#39;one&#39;], [2, &#39;two&#39;], [3, &#39;three&#39;],]); 
var second = new Map([[1, &#39;uno&#39;], [2, &#39;dos&#39;]]); // 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的,对应值即 uno,dos, three 
var merged = new Map([...first, ...second]);

Map 的克隆

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]); 
var myMap2 = new Map(myMap1); 
console.log(original === clone); // 打印 false。 Map 对象构造函数生成实例,迭代出新的对象。

注意事项

注意,只有对同一个对象的引用,Map 结构才将其视为同一个键。这一点要非常小心。

const map = new Map();

map.set([&#39;a&#39;], 555);
map.get([&#39;a&#39;]) // undefined

虽然NaN不严格相等于自身,但 Map 将其视为同一个键。

let map = new Map();
map.set(NaN, 123);
map.get(NaN) // 123

【相关推荐:javascript视频教程编程视频

Atas ialah kandungan terperinci Adakah ahli peta es6 unik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn