ES6 Map、 Set 、For of、Symbol、类 、call 、apply、 bind的用法

ES6 Map、 Set 、For of、Symbol、类的用法

1.Map用法
map 有序 key 可以为任意值
添加 add()
删除 delete()
长度size
获取get
遍历 for of
set (k,v)
has()是否有
clear()

<script>
       var obj={
      "b":100,"a":"mm","2":"good","1":"best"}
			console.log(obj)
			var map=new Map([["b",100],["a","mm"],[2,"good"],[1,"best"]])
			console.log(map)
			console.log(map.size)
			map.add(12)
			console.log(map)
			map.delete(12)
			console.log(map)
			for(let s of map){
      
				console.log(s)
			}
script>

2.Set用法
初始化 new Set()
添加 add()
删除 delete()
获取长度 size
遍历 for of
has()检测
clear()

<script>
       var s=new Set([1,3,1,3,2,4,53,5])
			console.log(s)
			console.log("size:",s.size);
			console.log("是否有:",s.has(3))
			//
			s.add(12)
			console.log(s)
			s.delete(3)
			console.log(s)
			for(let i of s){
      
				console.log(i)
			}
script>

3.for of 用法
值类型:string字符串 number数字 bollean 布尔 undefined 未定义 symbol符号
引用类型:function函数 object 对象 Array数组 set集合 map键值对 weakmap weakset
可以迭代类型:for of 遍历 string array set map
for of 遍历类型
1)默认遍历value

<script>
          for(let item of arr){
      
				console.log(item)
			}
script>

2)key键名的集合

<script>
          for(let key of arr.keys()){
      
				console.log(key)
			}
script>

3)value值的集合

<script>
            for(let val of arr.values()){
      
				console.log(val)
			}
script>

4)entries键与值的结合

<script>
           for(let [key,val] of arr.entries()){
      
				console.log(key,val)
			}
script>

4.symbol用法
symbol 符号 唯一
常用于左右对象的key
初始化

<script>
          var s1=Symbol('blue')
		  var obj={
      [s1]:"mm"}
		  Symbol.for("blue") == Symbol.for("blue") 
		  Symbol("bule")==Symbol("blue") 

script>

5.类
类:创建对象一个模板
初始化
继承
方法
属性
访问控制
构造函数
静态方法
静态属性
实例:是被类创建的对象,一个类可以创建多个实例

<script>
			//类:创建对象一个模板 初始化 继承 方法 属性 访问控制 构造函数 静态方法 静态属性
			//实例:是被类创建的对象,一个类可以创建多个实例
			//狗
			class Animal{
      
				constructor(name) {
      
				    this.name=name;
				}
				runing(){
      
					console.log("会走路")
				}
			}
			class Dog extends Animal{
      
				constructor(name) {
      
				    super(name)
				}
				back(){
      
					console.log("旺旺")
				}
			}
			var d1 = new Dog("大黄");
			var d2 = new Dog("旺财");
			
			class Cat extends Animal{
      
				constructor(name,age=2) {
      
				    super(name)
					this.age=age;
					Cat.num++
					
				}
				static num = 0;
				static saylog(){
      
					console.log('hello')
				}
				back(){
      
					console.log("喵喵")
				}
				set Age(val){
      
					if(val>0){
      
						this.age=val;
					}else{
      
						console.log("不正常")
					}
				}
				get Age(){
      
					console.log("被get到了")
					return this.age;
				}
			}
			var c1=new Cat("旺财",3)
			//set get 当我们去设置或者获取的对数据额外的操作,隐藏原本的数据直接操作
script>

call用法 和 apply用法
call:执行函数 对象冒充 参数单个
apply :执行函数 对象冒充 参数数组

<script>
        //call和apply
			//apply传参数,数组的形式
			var arr=[2,4,6,90,54];
			var min=Math.min(...arr)
			alert(min)
			var max=Math.max.apply(null,arr)
			alert(max)
			
			function say(a,b){
      
				//默认函数中的this指向window
				console.log(this)
				console.log(a+b);
			}
			say.apply(null,[10,8])
			say.call({
      name:"zql"},9,7)
script>

bind用法
创建函数 对象冒充 参数默认值

<script>
         //bind 创建爱你一个新的函数并传入this
			var name="mm";
			var age=18;
			function say(a,b){
      
				console.log(`大家好,我的名字${
        this.name},${
        this.age}岁了`)
				console.log(a,b,a+b)
			}
			//say();
			var nasy=say.bind({
      name:"nn",age:30},10);
			//say 通过bind创建一个新的函数this为bind第一个参数,a 的值是10
			nasy(7)
script>

你可能感兴趣的:(前端,es6/es7,类)