Map和Set

1.作业讲解

2.ES6字符串方法

2.1 新方法

• includes()：返回布尔值，判断是否找到参数字符串。
• startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。
• repeat()：返回新的字符串，表示将字符串重复指定次数返回。
• padStart(length,newStr)：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
• padEnd(length,newStr)：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。
• 模板字符串

2.2 练习题

• 字符串转化成驼峰式写法

   原字符串：xiaoshuo-ss-sfff-fe       ===>效果：Xiaoshuo-Ss-Sfff-Fe

• 字符串去重

  var str2 = "asdasdfghajgh";

  代码

   /**
       * 给字符串去重
       * str="北京你好你好北京"
      */
      str = "北京你好你好北京"
  
  	/*****方法1：原始写法******/
      var mySet = new Set(str)          //字符串转集合（集合中元素没有重复）
      
      // var arr=Array.from(mySet)      //集合转数组
      var arr = [...mySet]            //集合转数组
  
      str = arr.join("")            //数组转字符串
      // console.log(str)
  
      /**方法2：简化写法***/
      str = [...new Set(str)].join("")
      console.log(str)
  

• 统计字符串中最多的字符

   var str2 = "asdasdfghajghg";

• 字符串反序

  var str="qwertyu";

3. 可迭代数据类型

Array

String

NodeList 节点列表

Set 集合

4. ES6数组方法

4.1新增方法

• forEach
• map
• filter
• some every
• reduce
• find
• findIndex
• includes
• arr.keys
• arr.values
• arr.toString()
• Array.from

4.2 练习题

1.将数组中数字的每一项相加求和

let arr = [1,5,89,5] 

2.要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组

let arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0]

3.数组去重

let arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5]

4.数组中求最大值

let  arr = [1,5,56,6,1,1,21,45,4]

5.数组中求最小值

let  arr = [1,5,56,6,1,1,21,45,4]

6.数组从小到大排序

let  arr = [1,5,56,6,1,1,21,45,4]

8.二维数组转化一维数组

  var arr=[9,[1,2],7,[2,3],1,[3,4],[4,5]];
  
  
  // [9, 1, 2, 7, 2, 3, 1, 3, 4, 4, 5]

5. Set数据类型

集合：里面的元素不能重复

 var mySet = new Set()

    //添加元素
    mySet.add("中国")
    mySet.add("美国")

    //获取元素数量
    console.log(mySet.size)

    //删除元素
    mySet.delete("中国")
    // console.log(mySet)

    //添加复杂数据类型
    mySet.add({ uname: "张三" })
    // console.log(mySet)

    //set是可遍历的（可迭代 iterater）
    for (item of mySet) {
      console.log(item)
    }

    //判断某元素是否存在
    var result = mySet.has("中国北京")
    console.log(result)


    //清除set
    mySet.clear()
    // console.log(mySet)

    //forEach循环
    mySet.forEach(item => {
      console.log(item)
    })


    /*判断数据是否可迭代*/
    var arr = ["北京", "上海", "广州", "深圳"]
    console.log(arr)

    //迭代器
    // var iterator = arr[Symbol.iterator]()
    // // console.log(result)
    console.log(iterator.next())
    console.log(iterator.next())
    console.log(iterator.next())
    console.log(iterator.next())
    console.log(iterator.next())

6. Map数据类型

• map与Object非常类似
• map与Object的最大区别是：map的key可以是任何数据类型，object的可以只能是字符串

6.1 创建空map

  //创建空map
  let dic = new Map()

  // //map的key可以是任何数据类型
  dic.set("uname", "张三")
  dic.set("age", 21)
  dic.set({}, "个人信心")
  dic.set(function () { }, "我会说话")
  dic.set(true, "是否考试通过")
  console.log(dic)


  // // console.log(dic.size)

  // //添加
  dic.set("uname", "张三")
  dic.set("address", "北京")


  //获取
  console.log(dic.get("uname"))
  console.log(dic)

  //删除
  dic.delete("uname")
  console.log(dic)

  //清空
  dic.clear()
  console.log(dic)

  //遍历
  dic.forEach((item, index) => {
    console.log(item, index)
  })

  console.log(dic)
  for (v of dic) {
    console.log(v)
  }

6.2 初始化map

传入一个二维数组

  // var obj = { "uname": "张三", "age": 21 }
  // console.log(obj)


  //初始化map的时候，里面有值
  // let dic =new Map({uname:"张三"})
  // let dic = new Map([{ uname: "张三" }])
  let dic = new Map([["uname", "张三"], ["age", 21]])
  // console.log(dic)

7. 模块化编程

注意：

1.html文件中，script标签的type设置成module

2.用live-server访问html文件，不能用绝对路径访问html文件

7.1代码

./js/m1.js

//分别暴露
export let uname = "张三"
export let age = 21

js/m2.js

//统一暴露
let uname = "张三"
let age = 21;

let say = function () {
  return "我能说话"
}

export { uname, age, say }

js/m3.js

//统一暴露
let uname = "张三"
let age = 21;

let say = function () {
  return "我能说话"
}

export { uname, age, say }

index.html

  <script type="module">
    import * as a from "./js/m1.js"
    // console.log(a)
    // console.log(a.uname, a.age)


    // import * as b from "./js/m2.js"
     console.log(b.age, b.uname, b.say())

    import * as c from "./js/m3.js"
    // 

    console.log(c.default.uname,c.default.age)



  </script>

8.async和await

function middle() {

    //用Promise把函数逻辑包裹起来（包一个壳）
    return new Promise((resolve, reject) => {

        setTimeout(() => {
            // console.log(200)
            resolve(200)
        }, 1000);

    })
}

//async:表示main这个函数里面有异步编程
async function main() {

    //第1步：打印100
    console.log("100")

    //第2步：等待1秒钟，打印200
    //await表示：遇到异步编程，得等一等
    await middle().then(res => {
        console.log(res)
    })

    //第3步：打印300
    console.log("300")
}

//调用main函数
main()