JS8.20 ES6语法,箭头函数,class

一.对象

ES6中在编写对象的时候有了新的方法,我们通过代码来看看:

			var name="karen"
			var rank="_cd"
			var grand=100
			var arr=["userid","1234"]
			var obj={
				name,//可以通过变量赋值来给对象的key添加value值
				age:"100",//一般的写法
				["hyqj"+rank]:"成都中心",//key可以是拼接的字符串
				[grand>60?"P":"F"]:"result",//可以是判断式
				[0&&"h5"]:100,//同上
				[arr[0]]:arr[1],//也可以通过读取数组中的数据来赋值
				say(){console.log(666)},//这里相当于say: f say()
				say2(name){console.log(name)},
				say3({name,age}){console.log(name,age)},
				say4:function () {console.log(444)},
				say5:(num1,num2)=>{console.log(num1+num2)},
				["say"+6](){console.log(666)},
				["say7"]:function () {console.log(444)},
				["say8"]:(num1,num2)=>{console.log(num1+num2)},
			}
			console.log(obj)
			obj.say()
			obj.say2(100)
			obj.say3({name:"jack",xxx:18,sing:100})
			obj.say4()
			obj.say5(100,90)

打印结果如图:

ES6中还有部分对象的方法:

			let person = {name: "Amy", age: 15};
			let someone = { ...person };
			let arr1=Array.from(person)//[...person]  把person这个对象转成数组
			let s1=new Set(...person)
			console.log(someone,arr1);  //{name: "Amy", age: 15}



			let person = {name: "Amy", age: 15};
			// let someone = { ...person, name: "Mike", age: 17};//先赋值的key会被后续赋值的覆盖
			let someone = { name: "Mike",...person, age: 17};//这里Mike就被amy覆盖了
			console.log(someone);


			    console.log(+0===-0)
			var re=Object.is(+0,-0)
			console.log(re)
			Object.is()相当于===判断
			var re = NaN === NaN //false  注意
			console.log(re)
			var re = Object.is(NaN, NaN)//这里为true 可以理解为 NaN和NaN这两个单词一样
			console.log(re)

二.数组

通过代码来看:

			var arr=[]
			console.log(arr)
			var re=new Array(10)
			var re=new Array(10,20)
			console.log(re)//[10,20]
			
			
			var re=Array.of(10,20)//也是为数组添加了10,20
			console.log(re)
			

Array.from()把一个可枚举的对象转为数组

			var str="hello华清远见"
			var re=Array.from(str)
			console.log(re)

更多的ES6的数组的方法:

find()来寻找数组中符合判断的值返回他
let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3

findindex()找到符合判断的值返回他的下标
let arr = Array.of(1, 2, 1, 3);
console.log(arr.findIndex(item => item = 1)); // 0


fill()将一定范围索引的数组元素内容填充为单个指定的值。
let arr = Array.of(1, 2, 3, 4);
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]

includes()判断数组中是否有()中的值,返回布尔值

三.箭头函数

箭头函数的基础语法:

			var fn1=(num)=>{
				console.log(num)
				console.log(6666)
			}//num为形参  {}内的为函数里的内容
			fn1(100)//100 6666

			var fn2=num=>console.log(num)//只有一行代码省略了{}
			fn2(100)

	
			 var fn4=n=>n*n//省略大括号时,return值就为执行的值
			 var re=fn4(1000)
			 console.log(re)//所以这里打印1000000
			

箭头函数+解构赋值:

			var fn5=(userid,pwd)=>[userid,pwd]//({userid:userid,pwd:pwd});
			var re=fn5("karen","1234")
			console.log(re)

函数中使用箭头函数:

function fn() {



				var obj = {

					say: () => {

						console.log(this)
					}
				}
				
				
				
				obj.say()

			}

箭头函数常用使用场景:

			function fn (cb) {
				cb("jack")
			}
			
			var obj={
				name:"karen",
				say:function() {
					// var that=this
					fn((data)=>{
						this.name=data
						// that.name=data//这里使用that保存一次后替换this也可以
					})
				}
			}
			
			obj.say()
			
			
			console.log(obj)

四.class

ES6中构建函数中用到了constructor方法,对象的原型对象的constructor属性指向了这个对象的构造函数
构造函数的意义:①创建对象②对象类型划分

class Person {				
				constructor(name,age) {   //通过constructor 给新建的对象内部添加key
				    this.name=name;
					this.age=age;
					this.say=function() {						
					};
					this.say2=()=>{
						console.log(this.name)
					};					
				};
				father(){};
				// a=20;//api里没有这个语法==>浏览器做了这个功能
				static father(){console.log(66666)}
			}			
			class Student extends Person {  
				constructor(arg) {
					super("jack",18)//先调用Person的constructor 生成Person类型的对象,然后在这个对象上扩展空间
					//super()会把父级的内部属性继承过来
					this.id="120"
					this.sonsay1=function () {
						console.log(this.id)
					}
				}
				son1(){};
				static son1(){console.log(66666)}//这里给son1添加了静态方法
			}
	
			// console.log(typeof Person)
			// console.log(Person())
			var p1=new Person("karen","18")
			console.log(p1)
			p1.say2()
			Person.father()
			
			var s1=new Student()
			console.log(s1)
			s1.sonsay1()
			s1.son1()
			Student.son1()
			
			console.log(s1.__proto__.constructor)