ECMAScript 6 入门

ECMAScript 6 入门

1. 变量声明const和let

在ES6之前，我们都是用var关键字声明变量。无论生命在何处
变量就 let
常量就 const

2. 字符串

1. 占位符 ${变量} 字符串拼接

   // 记得是反引号   （``）
   var name = "小梁"
   var add = `哈哈哈${name}`
   console.log(`${add}`)
   console.log(`hello,${name}`)
   

2. 跨行 `` 跨行作用

   var her = `
   	<p>hello</p>
   	<p>hello</p>
   	<p>hello</p>
   	<p>hello</p>
   	<p>hello</p>
   `
   

3. 字符串 判断
   includes（）判断是否包含字符串
   repeat（）重复显示
   startsWith （）判断字符串是否以什么什么开头
   endsWith（）判断字符串是否以什么什么结尾

   var name = "hello word";
   console.log(name.includes("w"))
   console.log(name.repeat(3))
   console.log(name.startsWith ("h"))
   console.log(name.endsWith("o"))
   

3.默认参数

function test(num=100){
	return num+200;
}
consoloe.log(test())
consoloe.log(test(200))

4.不定参数 就是参数不定义参数 可长可短

// 通过...变量来
function test(...num){
		for(let item of num){
			console.log(item)
		}
}
	
	test(100,200,300,400,500)
	

5.箭头函数

不需要function 关键字 创建函数

// 箭头函数  实例参考
var test = (num1,num2) =>{
		return num1+num2;
	}
	console.log(test(10,10))



//箭头函数  自定义参数列表
var test = (...num) =>{
	for(let item of num){
			console.log(item)
	}
}
	console.log(test(1,2,3,4,5))

5.拓展对象功能

5.1 对象中的属性赋值

// 对象参考
	var test = (name,age) =>{
		return {
			name:name,
			age:age
		};
	}
	let obj = test("小小梁",18);
	console.log(obj.name)
	console.log(obj.age)
	


//如果参数名称和对象属性名称一致就不用:属性了   		简写
	var test = (name,age) =>{
		return {
			name,
			age
		};
	}
	let obj = test("小小梁",18);
	console.log(obj.name)
	console.log(obj.age)

5.2 对象中的方法

// 以前的方法
	let obj = {
		sname:"小梁",
		getSname:function(){
			console.log(obj.sname)
		}
	}
	obj.getSname()
//简化写法
	let obj = {
		sname:"小梁",
		getSname(){
			console.log(obj.sname)
		}
	}
	obj.getSname()

6.解构 对象给变量赋值

//以前的变量赋值
	let obj = {
		sname:"小小梁",
		sage:18
	}
	let sname = obj.sname;
	let sage = obj.sage;
	console.log(sage+"====="+sage)
	
//通过解构 简写
	let obj = {
		sname:"小小梁",
		sage:18
	}
	//变量名字要和对象属性一致
	let {sanme,sage} = obj;
	console.log(sage+"====="+sage)

7.展开运算符 类似于合并起来

//类似于合并字符   或者  是合并数组之类的
	let student = ["小梁1","小梁2","小梁3"]
	//通过  ...来展开
	let test = [...student,"小梁5","小梁6"]
	for(let item of test){
		console.log(item)
	}

8.for of 和 for in的区别

	let student = ["小梁1","小梁2","小梁3"]
//for of
	//输出的是元素本身
	for(let item of student){
		console.log(item)
	}
	
//for in
	//输出的是下标索引
	for(let item in student){
		console.log(item)//下标
		console.log(student[item])//获取值
	}

9.类的支持

//父类
	class People{
		
		//构造函数
		constructor(name,age) {
		    this.name = name;
			this.age = age;
		}
		PeopleShow(){
			console.log("我是父类------------")
		}
	}
//子类
	class Student extends People{
		//继承父类 子类的构造方法的参数必须在父类的构造方法中存在才可以
		constructor(name,age) {
		    super(name,age);//调用父类的构造函数
		}
		StudentShow(){
			console.log(this.name)
			console.log(this.age)
		}
	}
//创建对象
	let stu = new Student("小小梁",18);
	stu.StudentShow();
	stu.PeopleShow()

10.iterable 类型

	var a = ['a','b','c']//创建数组
	var b = new Set(['a','b','c']);//创建Set集合
	var c = new Map([[1,'x'],[2,'y'],[3,'z']])//创建Map集合
	
	for(var x of a){//遍历数组
		console.log(x)
	}
	
	for(var x of b){//遍历Set
		console.log(x)
	}
	
	for(var x of c){//遍历Map
		console.log(x[0]+"===="+x[1])
	}