ES6.0简单了解

Case 1:let、const

var的缺陷

1、可以重复声明变量

2、无法限制修改（没有常量）

3、没有块级作用域

 

let和const可以弥补var的缺陷

let：　　不能重复声明，用来声明变量，声明的变量的值可以修改，支持块级作用域

const：  不能重复声明，用来声明常量，声明的常量的值不能改变，支持块级作用域

 

Case 2：箭头函数

()=>{   /*  code  */   }

前提：

1、如果有且只有一个参数，那么圆括号（）可以省，参数保留

2、如果有且只有一个语句，并且是return语句，那么花括号{  } 和 return关键字 可以省

　　示例_1：

let compute = function(a,b){
	alert(a+b);
}
compute(10,20);

//等价于
compute = (a,b)=>{
	alert(a+b);
}
compute(20,30);

　　

　　示例_2

let compute = function(a){
	if(a>10){
		return a*2;
	} else {
		return a/2;
	}
}
alert(compute(10));

//如果有且只有一个参数，那么圆括号（）可以省
//等价于
compute = a =>{
	if(a>10){
		return a*2;
	} else {
		return a/2;
	}
}
alert(compute(10));

　　

　　示例_3

let compute = function(a,b){
	return a + b;
}
alert(compute(10,20));

//如果有且只有一个语句，并且是return语句，那么花括号{  } 和 return关键字 可以省
//等价于
compute = (a,b) => a + b;

alert(compute(10,30));

　　

　　综上：

let compute = function(a){
	return a*2;
}
alert(compute(10));

//如果有且只有一个参数，那么圆括号（）可以省，参数保留
//如果有且只有一个语句，并且是return语句，那么花括号{  } 和 return关键字 可以省
//等价于
compute = a => a*2;
alert(compute(20));

　　

Case 3：函数参数

调用函数的时候，传递的参数个数可能和定义的时候不同，那么可以使用"...args"来获取剩余参数，args随意命名。

使用 ...array可以展开数组，类似于将数组元素排列显示

　　示例_1

function compute(a,b,...args){
	alert(args);
}
compute(1,2,3,4,5);//3,4,5

　　

　　示例_2

function compute(a,b,c){
	alert(a);
	alert(b);
	alert(c);
}
compute(1,2,3);//1,2,3

let arr = [4,5,6];
compute(...arr);//4,5,6
//  ...arr的作用的是展开数组
//  ...arr == 4,5,6

　　

　　示例_3

let arr = [4,5,6];
let arr2 = [7,8,9];
let arr3 = [...arr,...arr2];
console.log(arr3);//4,5,6,7,8,9

　　

Case 4：解构赋值

 左右两边结构必须一样，右边是数组，左边也得是数组；右边是json，左边也得是json。

声明和赋值不能分开，必须在一条语句内完成。

使用json格式时，左右两边的key必须是相同的，但是位置可以不用一一对应，以key为准。

　　示例_1

//左右两边结构必须一样
let [a,b,c] = [1,2,3];
console.log(a,b,c);//1,2,3

//注意key的名称要相同，但位置不用一一对应。
let {name,sex,age} = {name:"abc",age:20,sex:"male"};
console.log(name,sex,age);//abc male 20

//综上
let [{v1,v2},[v3,v4],v5] = [{v1:"abc",v2:"xyz"},[123,456],"demo"];
console.log(v1,v2,v3,v4,v5);//abc xyz 123 456 demo

//拓展
let [json,arr,v] = [{v1:"abc",v2:"xyz"},[123,456],"demo"];
console.log(json,arr,v);//{v1: "abc", v2: "xyz"} [123, 456] "demo"

　　

Case 5：数组

map　　映射：数组中有几个元素，那么返回的结果一定是有那么多个元素的数组，没有返回的item为undefined

reduce　汇总：数组中有多个元素，但是结果只有一个结果。

filter　　过滤器：只保留在filter中返回true的元素，返回的结果是一个数组

foreach　循环，没有返回值

 

map和forEach的区别，都会循环一遍数组，但是map有返回值，为一个数组，forEach没有返回值。

 

　　示例——map

let arr = [50,60,70];

//map会每次从数组中取一个元素，赋值给item，值传递
let res_1 = arr.map(function(item){
	return item > 60 ? "及格" : "不及格";
});
console.log(res_1);//["不及格", "不及格", "及格"]

let res_2 = arr.map(item =>item > 60 ? "及格" : "不及格");
console.log(res_2);//["不及格", "不及格", "及格"]

let res_3 = arr.map(function(item){
	if(item > 60){
		return item > 60 ? "及格" : "不及格";
	}
});
console.log(res_3);//[undefined, undefined, "及格"]
//没有return的item对应的值为undefined。 

　　

　　示例——reduce

let arr = [50,60,70];

//reduce会每次从数组中取一个元素，赋值给item，item的下表赋值给index，是以1开始，而非0
//第一次tmp没有值，所以用数组的第一个元素。item为第二个元素，所以index为1
//tmp为上一次计算的结果。最后返回的结果是计算的总结果
let result = arr.reduce(function(tmp, item, index){
	console.log(tmp,item,index);
	return tmp + item;
});

//输出：
//50 60 1
//110 70 2
console.log(result);//180

　　

　　示例——forEach

let arr = [50,60,70];

arr.forEach((item,index)=>{
	console.log(index + " => " + item);
});
//输出
//0 => 50
//1 => 60
//2 => 70

　　

 

Case 6：字符串

增加了两个方法

　　1、startsWith("prefix")

　　2、endsWdith("suffix")

字符串模板

　　使用反单引号`  `，在中间可以使用${变量名}来加入变量值

　　

 

　　示例_1

let str = "this is abc";
console.log(str.startsWith("this"));//true
console.log(str.startsWith("that"));//false
console.log(str.startsWith("This"));//false   区分大小写

console.log(str.endsWith("abc"));//true
console.log(str.endsWith("Abc"));//false

　　

　　示例_2

let name = "abc";
let info = `your name is ${name}`;
console.log(info);//your name is abc

let html = `
	<table>
		<tr><td>姓名</td></tr>
		<tr><td>${name}</td></tr>
	</table>`;
document.write(html);

　　

Case 7：对象

更像Java了

　　

　　示例_1

class User{
	constructor(name){
		this.name = name;
	}
	showName(){
		return this.name;
	}
}

let u1 = new User("abc");
console.log(u1.showName());//abc

class Teacher extends User{
	constructor(name,age){
		super(name);
		this.age = age;
	}
	showAge(){
		return this.age;
	}
}
let t1 = new Teacher("xyz",30);
console.log(t1.showName()); //xyz
console.log(t1.showAge()); //30

　　

case 8：json

JSON.stringify(jsonObj)，将json对象转换成字符串

JSON.parse(jsonString)，将一个json格式的字符串转换为json对象。

json在key和value是一样的时候，可以简写　　

json中的方法可以简写，和class中的方法一样

 

　　示例_1

let a = 12,b = 5;
let json = {a:a, b:b};
console.log(json);//{a: 12, b: 5}

let json_1 = {a,b};
console.log(json_1);//{a: 12, b: 5}

　　

　　示例_2

let user = {
	name:"abc",
	showName(){
		return this.name;
	}
}

console.log(user.showName());//abc

　　

Case 9：Promise

消除异步，以同步方式来处理代码，但是内部仍旧使用异步

 

　　

　　示例

Promise.all([
	$.ajax1
	$.ajax2
]).then(result=>{
	console.log("成功了");
},err=>{
	console.log("失败了");
})

　　

 

Case 10：generator

普通函数一旦执行，必须执行结束，或者遇到return才停

generator函数中间可以暂停，然后继续执行。

使用next()方法继续执行函数，会获得一个返回值，即yield后面的值。

yield语句可以赋值给一个变量，形式上是赋值，其实是在调用next()方法传递的参数。

 

　　示例：

function *show(){
	alert("aaaaa");

	let str = yield alert("xxxxx");

	alert("bbbbb");
	alert(str);
	
	let ss = yield;

	alert("cccccc");
	alert(ss);
}

// show()不能直接执行
let generatorObj = show();
generatorObj.next("xyz"); //aaaaa
					 		//xxxxx
//第一次调用next()传递的参数没有用
generatorObj.next("abc"); //bbbbb
							//abc
generatorObj.next("ufo"); //ccccc
							//ufo

　　

　　

　　

updating

转载于:https://www.cnblogs.com/-beyond/p/8432121.html