const inp = document.querySelector('#inp')
// console.log(inp)
// inp.addEventListener('click',(e)=>{
// console.log(e.target)
// })
//监听input事件，获取事件
// multiple html属性支持多文件
// inp.oninput =(e)=>{
// console.log(e.target.files)
// }
//onchange事件也可以监听到
// inp.onchange =(e)=>{
// console.log(e.target.files)
// let res = e.target.files[0]
// let size = res.size / 1024
// // console.log(parseInt(size/1024))
// const formdata = new FormData()
// formdata.append('file',res)
// console.log(formdata)
// }
// 数组的遍历
// const arr = [1,2,3,4,5]
// arr.forEach(item=>{
// console.log(item)
// })
// arr.map(item=>{
// console.log(item)
// })
// for(let a in arr){
// console.log(arr[a])
// }
// for(let a of arr){
// console.log(arr[a])
// }
// let a = new Map()
// a.set({a:1})
// a.set(['v'])
// console.log(a)
// if(a.has({a:1})){
// console.log(1)
// }
// let a = new Array(5) //创建5个空数组，还可以数组的长度来创建
// let arr = [1,2,5,1,2,4,11,3]
// arr.forEach((item,index)=>{
// // a.push(item) 不能使用push会使数组长度增加
// a[index] = item
// })
// console.log(a)
// let arr = [{id:1},{id:2},{id:13},{id:14},{id:15}]
// let aa = arr.map(item=>item.id)
// console.log(aa) //[1, 2, 13, 14, 15]
// var phone = '17655436789'
// phone = phone.replace(/(\d{3})\d{4}(\d{4})/,'$1****$2') //手机号替换
// console.log(phone)
// // const reg = /^1(7|5|9|3|2)\d{9}$/
// const reg = /^1[7,8,5,6,4,9]\d{9}$/
// console.log(reg.test(phone))
// 定位
/**
* position:relative absolute sticky fixed static
*
*/
// 三元运算符
// :class ="isShow ? 'active' : ''"
// :style="color: isShow ? 'red' : ''"
// ?. 操作符的运用
// let obj = {name:'aaa'}
// console.log(obj?.a?.l)
//switch case break 的使用
// let index = 2
// switch(index){
// case 1:
// console.log(1)
// break
// case 2 :
// console.log(2)
// case 3:
// console.log(3)
// break //跳出循环
// default :
// console.log(3)
// }
// let toDay = ''
// switch(new Date().getDay()){
// case 0 :
// text = '周末'
// break;
// case 1:
// text = '周一'
// break;
// case 2:
// text = '周二'
// break;
// case 3 :
// text = '周三'
// break;
// case 4 :
// text = '周四'
// break;
// case 5 :
// text = '周五'
// break
// case 6 :
// text = '周六'
// break
// default :
// text = '期待周末'
// }
// // console.log('今天是' + text)
// console.log(`今天是${text}`) //字符串模板拼接
//while 循环的使用
// let i = 0
// while( i < 10){
// i++
// console.log(i)
// }
// for(let i=0;i<10;i++){
// if(i>5) break
// console.log(i)
// }
//for ... in 和 for ... of 的使用
// let arr = [{b:3},{b:4}]
// for(let i of arr){
// console.log(i.b) //3 4
// }
// for(let i in arr){
// console.log(arr[i].b) // 3 4
// }
// for(let i in arr){
// console.log(i) // 0 1
// }
// for(let i in arr){
// console.log(arr[i]) // {b:3} {b:4}
// }
//解构取值
// let obj = {name:'小雷',age:19}
// const {name} = obj
// console.log(name)
// set 的使用
// add(value)：新增，相当于 array里的push。
// delete(value)：存在即删除集合中value。
// has(value)：判断集合中是否存在 value。
// clear()：清空集合。
// 遍历方法：遍历方法（遍历顺序为插入顺序）
// keys()：返回一个包含集合中所有键的迭代器。
// values()：返回一个包含集合中所有值得迭代器。
// entries()：返回一个包含Set对象中所有元素得键值对迭代器。
// forEach(callbackFn, thisArg)：用于对集合成员执行callbackFn操作，如果提供了 thisArg 参数，回调中的this会是这个参数，没有返回值。
let a = new Set()
let arr = [1,2,3,4,1,2,3,4]
a.add(arr)
// arr.map(item=>a.add(item))
// console.log(a.has(1)) //true
console.log(a) //
// a.delete(2)
// map的使用
const m = new Map()
const key = {p: 'haha'}
m.set(key, 'content')
console.log(m)
m.get(key) // content
//let b = new Map()
// b.set('key',{a:1}) //以key和value的形式存储
// b.get('key') //{a:1}
// b.has('key') //true
// m.has(o) // true
// m.delete(o) // true
// m.has(o) // false
// 操作方法：
// set(key, value)：向字典中添加新元素。
// get(key)：通过键查找特定的数值并返回。
// has(key)：判断字典中是否存在键key。
// delete(key)：通过键 key 从字典中移除对应的数据。
// clear()：将这个字典中的所有元素删除。
// 遍历方法：
// Keys()：将字典中包含的所有键名以迭代器形式返回。
// values()：将字典中包含的所有数值以迭代器形式返回。
// entries()：返回所有成员的迭代器。
// forEach()：遍历字典的所有成员
// vuex的使用
// import vue from 'vue'
// import vuex from 'vuex'
// vue.use(vuex)
// export default new vuex.store({
// modules:{ //模块化，对多个模块进行拆分
// user,
// mall
// }
// })
// main.js
// import store from '@/store'
// new vue({
// router,
// store
// render:h=>h('App')
// })
// user.js
// const state = {
// count:0
// }
// const getters = {
// count:state=>state.count
// }
// const mutations = {
// setCount(state,number){
// state.count += number
// }
// }
// const actions = {
// addCount({commit},number){
// setTimeout(()=>{
// commit('setCount',number)
// },2000)
// }
// }
// export default { state,getters,mutations,actions}
// 手机号隐藏处理
// let phone = '17633726190'
// phone = phone.replace(/(\d{3})\d{4}(\d{4})/,'$1****$2')
// 输出 '176****6190'
// 封装一个步进器
// https://codesandbox.io/s/fervent-grass-nnnryd?file=/src/App.vue
<input id="inp" type="file" @input="onChange" placeholder="选择" multiple="multiple" >