js

let obj = {
     
      1:'zjh',
      name:'zhengjh',
      2:'shenzhen'
    }
    console.log(obj[2]);// shenzhen 不能使用obj.2

<script>
    // map的键名可以是各种类型，而对象的键名只能是字符串类型
    let map = new Map()
    map.set('name','zjh')
    map.set(function(){
     },'hh') 
    map.set({
     },'pp')
    map.set(1,'xxx')
    console.log(map);
  </script>

let map = new Map([['name','zjh'],['age',23]])
    console.log(map) //{"name" => "zjh", "age" => 23}
    //链式操作
    map.set('site','sina').set('home','shenzhen')

let obj = {
     
      name:'zjh'
    }
let map = new Map()
map.set(obj,'shenzhen')
console.log(map.get(obj)); //get()获取元素  shenzhen
console.log(map.delete(obj)); //delete()删除成功时返回true
console.log(map.clear()); //清空所有元素clear() 不会有返回值
console.log(map.has(obj)); //has() 返回是否有该元素

    let map = new Map([['name', 'zjh'], ['age', 23]])
    map.set('site', 'sina').set('home', 'shenzhen')
    // console.log(map.keys()); //keys() 获取所有键MapIterator {"name", "age", "site", "home"}
    // console.log(map.values()); //values() 获取所有值MapIterator {"zjh", 23, "sina", "shenzhen"}
    // console.log(map.entries()); //entries() 获取所有键值对

    //遍历键
    // for (const key of map.keys()) {
     
    //   console.log(key);
    // }

    // for (const [key,value] of map.entries()) {  //遍历entries时，元素为数组，可以用解构
    //   console.log(key,value);
    // }

    map.forEach((value,key) => {
     
      console.log(value,key);
    })

 let map = new Map([['name', 'zjh'], ['age', 23]])
 map.set('site', 'sina').set('home', 'shenzhen')
 // map转化为数组
 // console.log(...map)
 console.log([...map]);
 // let arr = map.arr

   let map = new Map([['name', 'zjh'], ['age', '23']])
    map.set('site', 'sina').set('home', 'shenzhen')
    // map转化为数组
    // console.log(...map)
    // console.log([...map]);
    // console.log([...map.entries()]);
    // let arr = map.arr
    // console.log([...map.keys()])
    // console.log([...map.values()]);
    
    //获取值带有shenzhen的元素
    let newArr = [...map].filter(item => {
     
      return item[1].includes('shenzhe')  
    })
    console.log(newArr); // [["home", "shenzhen"]]

    let res = new Map(newArr)
    console.log(...res.values());
    

 <div name='zz'>
    zheng
  </div>
  <div name='jj'>jia</div>
  <script>
    let map = new Map()
    document.querySelectorAll('div').forEach(item => {
     
      map.set(item,{
     content:item.getAttribute('name')})
    })
    // console.log(map);
    // console.log(...map);
    
    //给每个div添加点击事件，点击就显示name内容
    map.forEach((value, key) => {
     
      // console.log(key); //div DOM元素
      // console.log(value); {content:'zz'}
      key.onclick = () => {
     
        alert(value.content)
      }
    })

<form action="https://www.baidu.com" onsubmit="return post()">
    接受协议<input type="checkbox" name='agreement' error="请接受协议">
    我是学生<input type="checkbox" name='student' error="网站只对学生开放">
    <input type="submit" value="提交">
  </form>

  <script>
    let map = new Map()

    function post() {
     
      let inputs = document.querySelectorAll('[error]')
      // console.log(inputs);  //NodeList(2) [input, input]
      inputs.forEach(item => {
     
        map.set(item, {
     
          error: item.getAttribute("error"), //获取表单属性
          status: item.checked     //是否选中
        })
      })
      // console.log(...map);// [input, {…}]  [input, {…}]
      // let res = [...map].every( (item) => {
     
      //   console.log(item);
      //   return true
      // })
        // 使用解构改进上面的方式
        return [...map].every(([elem,config]) => {
     
          // console.log(config);
          config.status || alert(config.error)
          return config.status
        }) 
    }

• WeakMap里面的键只能是对象 ，比如引用类型，数组，
• WeakMap 不可遍历

  <div>zheng</div>
  <div>jia</div>
  <script>
    // let divs = document.querySelectorAll('div')
    // let map = new WeakMap()
    // divs.forEach(element => {
     
    //   map.set(element,element.innerHTML) //键是DOM元素对象
    // });
    // console.log(map);
    
    // let arr = [] //键
    // let map = new WeakMap()
    // map.set(arr, 'hello.com')
    // map.delete(arr)
    // console.log(map.has(arr));
    // console.log(map);

• WeakMap弱引用

let x = {
     name:'zjh'} //{name:'zjh'} 的引用次数1
    another = x        //{name:'zjh'} 的引用次数2

    let map = new WeakMap()
    map.set(x,'平凡人')   //{name:'zjh'} 的引用次数还是2，弱引用不会加1
    
    x = null   //{name:'zjh'} 的引用次数1
    another = null  //{name:'zjh'} 的引用次数0， 即将回收{name:'zjh'} 
    console.log(map);
    // setInterval(()=>{
     
    //   console.log(map);  //设置为null,垃圾回收机制不会立即执行，每隔1秒查看
    // },1000)

• 找到父元素 event.target.parentElement 不用加括号哦
• 添加style a.style.backgroundColor = ‘red’
• 箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。
• 同步任务–> 微任务（Promise里面的then就是微任务） --> 宏任务（setTimeout,setInterval）

    setTimeout(()=>{
     
      console.log('setTimeout');
    },0) //》宏任务
    new Promise( resolve => {
     
      resolve()  //调用resolve才会把then放入微任务队列中
      console.log('promise');  //同步任务
    }).then(value => {
     
      console.log('then');
    })
    console.log('后盾人');   //同步任务
    //输出顺序按：同步任务--》微任务--》宏任务
    // promise-->后盾人-->then--> setTimeout

new Promise((resolve,reject) => {
     
      resolve('fulfilled')  //微任务
      console.log('11');   //同步任务
    }).then(
      msg =>{
     
        console.log("---"+msg);
      },
      error =>{
     
        console.log(error);
      })
    console.log('hh'); //同步任务
    // 11 hh ---fulfilled

• 只有是keepalive里面的缓存组件，activated() 和 deactivated()才能调用，不缓存的组件可以用destroyed() 代替

• 在哪里才能获取到正确的offsetTop
  1.created 肯定不行，压根不能获取元素
  2.mounted也不行，数据还没获取到
  3.获取到数据的回调中也不行，DOM还没有渲染完
  4.$nextTick也不行，因为图片的高度没有被计算在内
  5.在图片加载完成后，获取的高度才是正确的

• background : position/size

• mutations唯一的目的就是修改state中状态

• mutations中的每个方法尽可能完成的事件比较单一一点

• mutations – commit

• actions – dispatch