ES6字符串的新增函数、新增数据类型、class概念

一、字符串的新增函数

1.startswith() 检测是否以什么开头 ,返回布尔值

         let web="WEB前端" 
         let w1=web.startsWith("WE")
         console.log(w1)//true

2.endswith() 检测是否以什么结尾 ,返回布尔值

         let web="WEB前端" 
         let w2=web.endsWith("Java")
         console.log(w2)//false

3.trim() 清除字符串前后空格的

        let str=" hello world"
		console.log(str)                        // hello world
		console.log(str.trim())                 //hello world
        console.log(str.trim()=="hello world")  //true

二、新增数据类型

1.map数据类型:

map类型: object对象的升级版(不过现在的object也升级了 map的功能也能用 所以map没啥用了)
原始object对象:key:value,  key只能是字符串格式 也能使用特殊作为key
map类型:将任意类型的数据做为key   例如下面的代码:

        var bt1=document.getElementById("bt1")
        let m1=new Map()//创建一个map对象
        m1.name="王一"
        //可以将特殊的内容,设置key  bt1:4
        //用set方法进行特殊定义方式
        m1.set(bt1,4)
        //get方法来获取
        console.log(m1.get(bt1))//4
        console.log(m1.name)//王一

现在map没啥大用 就这点作用 知道就行。

2.symbol数据类型:创建一个独一无二的值, 防止出现命名冲突,属性的覆盖问题,通常用于对象的属性。如果你封装好一个代码  有个人非得修改你的属性 那么就可以用symbol方法避免  

        let name=Symbol("name") //创建一个独一无二的值
        let result=Symbol("name")
		console.log(name)//Symbol(name)
		console.log(name==result)//false

三、class概念

之前使用构造函数模式来模拟 class,现在ES6更新了   class具有正式定义类的能力。类(class)虽然ECMAScript 6类表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的仍然是原型和构造函数的概念。

举个栗子!利用class来定义学生类:

        class Student{
            constructor(name,age){
                this.name=name
                this.age=age
            }
            eat(){
                console.log(this.name+'正在吃')
            }
        }
        let s1=new Student("王一",21)
        let s2=new Student("王二",22)
        console.log(s1)
        console.log(s1.eat==s2.eat)

再举个栗子:基于人类 创建一个学生类 继承所有内容

        class People{
            constructor(name,age){
                this.name=name
                this.age=age
            }
            eat(){
                console.log(this.name+'正在吃')
            }
        }
        //class 子类 extends 继承  父类{}
        //super() 方法 在子类中 调用父类的构造函数
        class Student extends People{
            constructor(name,age,score){
                super(name,age) //必须写在子类的最上方
                this.score=score
            }
        }
        let s1=new Student("王一",22,80)
        console.log(s1)

下面用两个例子来实现一下class类!!!

第一个例子(之前发表的文章 面向对象的继承性举例的学生类老师类校长类,现在用class来实现):

 1、创建一个人类

class People{
   constructor(name,age,gender){
         this.name=name
         this.age=age
         this.gender=gender
   }
   eat(){
      console.log(this.name+'正在用餐')
   }
   study(){
      console.log(this.name+'正在学习')
   }
   reflection(){
      console.log(this.name+'正在思考')
   }
}

2.基于人类创建一个学生类  继承所有内容

代码中的:class 子类 extends 继承  父类{}
                  super() 方法 在子类中 调用父类的构造函数


			class Student extends People{
			    constructor(name,age,score){
			        super(name,age,"男") //必须写在子类的最上方
			        this.score=score+"分考试成绩"
			    }
			}
			let s1=new Student("臧胜杰",22,99)
			console.log(s1)//Student {name: '臧胜杰', age: 22, gender: '男', score: '99分考试成绩'}
			console.log(s1.name+s1.score)//臧胜杰99分考试成绩
			s1.eat()//臧胜杰正在用餐
			s1.reflection()//臧胜杰正在思考

创建一个教师类和校长类 :

			class Teacher extends People{
				constructor(name,age,teach ){
				    super(name,age,"男") 
				    this.teach =teach
				}
			}
			let t1=new Teacher("张老师",30,"正在讲课")
			console.log(t1)
			console.log(t1.name+t1.teach)//张老师正在讲课
			
			//创建一个校长类
			class Principal extends People{
				constructor(name,age,tea ){
				    super(name,age,"女") 
				    this.tea=tea
				}
			}
			let p1=new Principal("王校长",45,"正在品茶")
			console.log(p1)
			console.log(p1.name+p1.tea)//王校长正在品茶
			p1.study()//王校长正在学习

第二个例子:实现一个 交换牌和展示牌功能 

创建一个用户对象,使用抓牌功能,然后展示牌,再交换牌,再展示牌 

1.第一步创建一个用户对象

        class User{  
			constructor(name){
				this.name=name
				this.leftHand=null
				this.rightHand=null
			}
			//第二步抓牌方法
			grab(){
				//抓两张牌 分别的赋值给 左手 和右手    牌:花色 大小
				var c1=new Card()
				this.leftHand=c1.color+c1.size
				var c2=new Card()
				while(true){
				    //如果相等c2重新赋值
				    if(c1.color+c1.size==c2.color+c2.size){
				         //
				        c2=new Card()
				    }else{
				        break   //如果不相等就停止循环
				    }
				}
				this.rightHand=c2.color+c2.size
			}
			//第三步展示牌
			show(){
				console.log("左手"+this.leftHand+";右手"+this.rightHand)
			}
			//第四步交换牌
			change(){
				var t=this.leftHand
				this.leftHand=this.rightHand
				this.rightHand=t
			}
        }

2.创建一个牌的构造函数   牌的花色大小   颜色随机

       class Card{
			constructor(){
				var colors=["黑桃","红桃","梅花","方片"]
				var sizes=["A","2","3","4","5","6","7","8","9","10","J","Q","K"]
				//根据下标产生随机数 0-3的随机数
				this.color=colors[parseInt(Math.random()*colors.length)]
				this.size=sizes[parseInt(Math.random()*sizes.length)]
			}
		}

3.实现结果

        var u1=new User('赌神')
		//展示牌
        u1.show()//左手null;右手null
		//抓牌
        u1.grab()
		//展示牌
        u1.show()//左手梅花10;右手红桃7
		//两手换牌
        u1.change()
		//展示
		u1.show()//左手红桃7;右手梅花10
        console.log(u1.name)//赌神

其实class它背后使用的仍然是原型和构造函数的概念,在之前的文章里我举例和说明了面向对象中的继承性  等等..,只要那个文章理解了  class就非常容易明白了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RORONOA~ZORO

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值