ES6后续补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6</title>
</head>
<body>
<script>
    //作用：生产一个独一无二的值
    //无值
    var str1= Symbol()
    var str2= Symbol()
    console.log(str1==str2)//false
    //有值
    var str3= Symbol("itcast")
    var str4= Symbol("itcast")
    console.log(str3==str4)//false
    /*
    Set
    概念：类似数组，成员唯一
    语法：s.add/delete/has(成员)&s.clear()
    场景：数组去重，代码[..new Set(arr)]
     */
    var set=new Set([1,3,3])//数组去重
    console.log(set.size)//2
    set.add(5)
    console.log(set.size)//3
    set.clear()
    console.log(set.size)//0

    var set=new Set([1,2,3])
    console.log(set.size)//3
    set.add(5)
    console.log(set.size)//4
    set.clear()
    console.log(set.size)//0

    /*
    Map
    概念：类似对象，但键不限于字符串（传统方式的对象一定是字符串）
     语法：m.set(键，值)&m.get/delete/has(键)&m.clear()
     */
    var map=new Map()
    map.set('a',111)
    console.log(map.get('a'))
    //对象不能直接写需要先赋值给变量才可以获取其值
     map.set(['b'],222)
     console.log(map.get(['b']))

    var tmp=['b']
    map.set(tmp,222)
    console.log(map.get(tmp))
    //获取所有键
    console.log(map.keys())
    //获取所有值
    console.log(map.values())


    var arr=['a','b','c']
    for(var i=0;i<arr.length;i++){
    
    
        console.log('键：',i,'值：',arr[i])
    }
    //数组。forEach  只能遍历数组
    arr.forEach(function (item,index) {
    
    
        console.log('键：',index,'值：',item)
    })
    //for...in  推荐遍历对象（因为数组时，下标字符串，可能会影响结果）
    var arr=['a','b','c'];
    for(var index in arr){
    
    
        console.log('键：',index,'值：',arr[index])
    }
    //在es6中，for...of 可以遍历数组，字符串，集合等数据结构
    var arr=['a','b','c'];
    for(var val of arr){
    
    
        console.log('值：',val)
    }
    var set=new Set([9,5,7,6,7])
    for(var val of set){
    
    
        console.log('值：',val)
    }
    //箭头函数
    var fn0=() =>console.log('函数没毛病')
    var fn1=(name) =>console.log('函数没毛病')
    var fn2=(name,age) =>console.log('函数没毛病')

    fn0()
    fn1('测试1')
    fn2('测试2',18)
    function fn4() {
    
    
        console.log(arguments)//获取所以实参，不获取实参个数
        for(var i=0;i<arguments.length;i++){
    
    
            console.log(arguments[i])
        }
    }
    //不加... 将第一个实参赋值给vals
    //加... 将所以值赋值给vals
    function fn3(...vals) {
    
    
        console.log(vals)
    }
    //rest参数更加灵活
    function fn5(val,...vals) {
    
    
        console.log(val)
        console.log(vals)
    }

    fn4(4,54,5,6)
    fn3(4,54,5,6)
    fn5(4,54,5,6)
   //repeat(重复)
    var str='itcast_'
    console.log(str.repeat(4))
    //模板字符串
    var name='你好'
    html=`${
      
      name}`
    console.log(html)

    //模块（module）
    //通过import和export实现导入导出功能（必须走HTTP协议访问）
    // import {age,fn7} from "./export.js";
    // console.log(age)
    // fn7()

  function stu(name,age) {
    
    
       
//this 公开的 var私有的
      this.name=name
      this.age=age
      this.sayName=function(){
    
    
          return this.name
      }
  }
    var stuObj=new stu('西门庆',78)
    console.log(stuObj)
    console.log(stuObj.name)
    console.log(stuObj.age)
    console.log(stuObj.sayName())

    //class
   class Stu{
    
    
        constructor(name,age) {
    
    
            this.name=name
            this.age=age
        }
        sayName(){
    
    
            return this.name
        }
   }
  var stuObj=new Stu('西门庆',78)
console.log(stuObj)
    console.log(stuObj.name)
    console.log(stuObj.age)
    console.log(stuObj.sayName())
    
</script>
</body>
</html>
猜你喜欢
