ES6新增特性Map/WeakMap和Set/WeakSet

一省：HTML

20. html标签的tabindex属性？

1. tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。除此之外，大屏项目或者需要用遥控器操控的页面，tabindex都是必不可少的属性。

<style>
  ul {
    display: flex;
  }
  li {
    width: 100px;
    height: 50px;
  }
</style>
<ul>
  <li tabindex="1">1</li>
  <li tabindex="2">2</li>
  <li tabindex="6">3</li>
  <li tabindex="4">4</li>
  <li tabindex="5">5</li>
  <li tabindex="6">6</li>
</ul>

二省： CSS

20. css变量和js更改变量？

定义全局变量，用var()方法使用，方便设置修改统一的颜色等。

<style>
  :root {
    --color: #ffffff;
    --bgColor: #000000;
  }
  ul {
    display: flex;
  }
  li {
    width: 100px;
    height: 50px;
    margin-right: 50px;
    list-style: none;
    color: var(--color);
    background: var(--bgColor);
  }
  button {
    margin-right: 30px;
  }
</style>
<ul>
  <li>导航1</li>
  <li>导航2</li>
  <li>导航3</li>
</ul>
<button onclick="changColor()">改变文字颜色</button>
<button onclick="changebgColor()">改变背景颜色</button>

<script>
  // 改变root文字颜色
  function changColor() {
    let root = document.querySelector(":root");
    console.log(root.style);
    root.style.setProperty("--color", "tomato")
  }
  // 改变root背景颜色
  function changebgColor() {
    let root = document.querySelector(":root")
    root.style.setProperty("--bgColor", "skyblue")
  }
</script>

三省：JavaScript

20. ES6新增特性Map/WeakMap和Set/WeakSet

1. Map: Map对象中保存键值对，任何数据类型(包括对象)都可以作为键/值。

// Map
// 初始化1
let map1 = new Map([["key1", "val1"],["key2", "val2"]])
console.log(map1);//Map(2) {'key1' => 'val1', 'key2' => 'val2'}
// 初始化
let obj = { name: "Jack" }
let map = new Map()
// set() 方法
map.set("str", "hello world")
map.set(obj, "abc")
map.set(1, 123)
console.log(map);//{'str' => 'hello world', {…} => 'abc', 1 => 123}

// has() 方法
console.log(map.has(obj));//true
console.log(map.has(1));//true
console.log(map.has(2));//false

// get() 方法
console.log(map.get(obj));//abc
console.log(map.get(1));//123
console.log(map.get("str"));//hello world
// size 属性
console.log(map.size);//3
// delete() 方法
// map.delete("str")
console.log(map.has("str"));//false
console.log(map.size);//2
// clear() 方法
// map.clear()
console.log(map.has(obj));//false
console.log(map.size);//0

// 遍历
map.forEach((item, key) => {
  console.log(item, key);
})

for(const item of map) {
  console.log(item[0], item[1]);
}

for(const [key, value] of map) {
  console.log(key, value);
}

2. WeakMap: WeakMap是Map的兄弟类型，与Map类型不同的地方是WeakMap只能用对象当做键，值可以是任意类型。还有就是WeakMap对象不可迭代。

// WeakMap
let obj = {name: "Jack"}
let weakmap = new WeakMap()
weakmap.set(obj, "abc");//WeakMap {{…} => 'abc'}
weakmap.set(2, "321");//报错 Uncaught TypeError: Invalid value used as weak map key
console.log(weakmap);

3. Set: Set对象是值的集合且 Set 中的元素只会出现一次，即 Set 中的元素是唯一的，所以Set可以用于数组去重。

// Set 
// 初始化1
let set1 = new Set(["val1", "val2", "val3"])
console.log(set1);//Set(3) {'val1', 'val2', 'val3'}
// 初始化
let set = new Set()
// add() 方法
set.add(1);
set.add(2);
set.add(3).add(4);
console.log(set);//Set(4) {1, 2, 3, 4}
// has() 方法
set.has(2);//true
// size 属性
console.log(set.size);//4
// delete() 方法
set.delete(1)
console.log(set);//Set(3) {2, 3, 4}
console.log(set.size);//3
// clear() 方法
set.clear();
console.log(set.has(2));//fasle
console.log(set.size);//0
// 迭代
set.forEach((item) => {
  console.log(item);
})
for(const item of set) {
  console.log(item);
}
// 去重
let arr = [1,1,2,3,2,3,4,5]
console.log([...new Set(arr)]);//[1, 2, 3, 4, 5]

4. WeakSet: WeakSet是Set的兄弟类型，与Set类型不同的地方是WeakSet中存的值只能是对象。还有就是WeakSet对象不可迭代。

// WeakSet
let weakset = new WeakSet()
let obj = {name: "Jack"}
weakset.add(obj);//WeakSet {name: 'Jack'}
weakset.add(2);//报错 Uncaught TypeError: Invalid value used in weak set
console.log(weakset);