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

秒客网

ES6.0简单了解

Case 1:let、const

Case 2：箭头函数

Case 3：函数参数

Case 4：解构赋值

Case 5：数组

Case 6：字符串

Case 7：对象

case 8：json

Case 9：Promise

Case 10：generator

相关文章