es6学习笔记(1)

1.es6的历史

1996年11月，Netscape公司将JS提交给ECMA组织，ES正式出现
2009年12月，ES 5.0正式发布，同时公布了JavaScript.next也就是后来的ES6
2011年6月，ES 5.1成为了ISO国际标准
2015年6月，ES 6.0预计发布正式版，JavaScript.next开始指向ES 7.0

ECMAScript和JavaScript

• ECMA是标准，JS是实现
  • 类似于HTNL5标准，JS是实现
  • 换句话说，将来也可能有其他的xxxScript来实现ECMA
• ECMAScript简称ECMA或者ES
• 目前版本
  • 低级浏览器主要支持ES 3.1
  • 高级浏览器正在从ES5 过渡到 ES6

2.es6的兼容性

• ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, NodeJS

• 解决不兼容办法，编译、转换

  • 在线转换
  • 提前编译

• Babel 中文网

  • Babel 入门教程 阮一峰
  • Babel 是一个 JavaScript 编译器
  • 一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
  • 现在就用 ES6 编写程序，而不用担心现有环境是否支持

3.let与const

1. javascript中var变量的缺点:
   (1)可以重复声明
   (2)无法限制修改
   (3)没有块级作用域 例如:if(){}以及for(){}
2. let: 不能重复声明，变量—可以修改，块级作用域
3. const: 不能重复声明，常量—不能修改，块级作用域
4. 一个小例子:
   let可以解决javascript中的闭包问题。

4.箭头函数

注意事项:
(1).一个参数，箭头可以省
(2)如果只有一个return,花括号可以省
用法:

var arr=[1,11,5,6,9,2,3];
arr.sort((n1,n2)=>n1-n2);
alert(arr);

与以下函数同义：

var arr=[1,11,5,6,9,2,3];
arr.sort((n1,n2)=>{
		return n1-n2;
	})
alert(arr);

与以下函数同义：

var arr=[1,11,5,6,9,2,3];
arr.sort(function(n1,n2){
	return n1-n2;
})
alert(arr);

5.函数的参数

1.参数的扩展/数组展开
用处:
1)收集参数
functioon(a,b,...args){}
Rest Parameter必须是最后一个
举例一:

function show(a,b,...args){
    alert(a);       //输出12
	alert(b);       //输出15
	alert(args);    //输出8,9,11
}
show(12,15,8,9,11);

2)展开数组
展开后的效果，跟直接把数组的内容写在这儿一样
也就是说var arr=[1,2,3];;...arr就相当于1,2,3
一个例外的例子:

var arr=[1,2,3];
var a=...arr;
console.log(a);

上述代码执行会出现语法错误。
但是以下代码可以正常执行:

var a=1,2,3;
console.log(a);

综合使用:

function show(...args){   //收集参数
   fn(...args);           //展开数组
}
function fn(a,b){        
  console.log(a+b);
}
show(5,12);

2.默认参数

6.解构赋值

1)左右两边结构必须一样
反例:不一样就会报错
let [a,b]={a,b};
2)右边必须是个东西
反例:右边既不是对象也不是数组会报错
let {a,b}={1,2};
3)声明和赋值不能分开(必须在一句话里完成)
反例:分开就会报错
let [a,b];
[a,b]=[1,2];

数组的解构赋值
var [a,b,c]=[1,2,3];
对象解构赋值
let {a,c,d}={a:1,c:2,d:3}

7.数组

1.四个重要的数组实例方法

map           映射:一个对一个
reduce       汇总,一堆对一个
filter           过滤器,保留一部分
forEach      循环(迭代）

1)map
可以用来:
根据每个人的分数判断每个人是否及格[11,80,56,90] =>["不及格","及格","不及格","及格"]等
举例一:

var arr=[12,5,10];
let res=arr.map(item=>item*2);
console.log(res);

打印输出24,10,20
2)reduce
可以用来:
算总数[1,2,3,4,5,6] =>21
算平均数[1,2,3,4,5,6,7,8] =>4.5等
举例二:计算总和

var arr=[12,69,180,8763];
let res=arr.reduce(function(tmp,item,index){
	return tmp+item;
})
alert(res);

打印输出9024
举例三:计算平均数

var arr=[12,69,180,8763];
let res=arr.reduce(function(tmp,item,index){
	if(index!==arr.length-1){
		return tmp+item;
	}else{
		return (tmp+item)/arr.length;
	}
})
alert(res);

打印输出2256
3)filter
举例四:输出数组中所有能被三整除的数

var arr=[3,12,88,94,55];
var res=arr.filter(item=>{
	if(item%3==0){
		return true;
	}else{
		return false;
	}
})
console.log(res);

同样可以写成

var arr=[3,12,88,94,55];
var res=arr.filter(item=>{
		return item%3==0;
})
console.log(res);

同样可以写成

var arr=[3,12,88,94,55];
var res=arr.filter(item=>item%3==0)
console.log(res);

4)forEach
举例五:

var arr=[12,3,4,5,6];
arr.forEach((v,i)=>{
	console.log(i+": "+v);
})

8.字符串

1.多了两个方法
startsWith
endsWith
举例一:

var a="https://www.a.html";
if(a.startsWith('http://')){
	console.log('普通网址');
}else if(a.startsWith('https://')){
	console.log('加密网址');
}else if(a.startsWith('git://')){
	console.log('git网址');
}else if(a.startsWith('svn://')){
	console.log('svn网址');
}else{
	console.log('其它网址');
}

打印输出为加密网址
举例二:

var b="a.txt";
if(b.endsWith('.txt')){
	console.log("txt文件");
}else if(b.endsWith('.jpg')){
	console.log('jpg文件');
}else if(b.endsWith('.png')){
	console.log('png文件');
}else if(b.endsWith('.doc')){
	console.log('doc文件');
}else if(b.endsWith('.zip')){
	console.log('zip文件');
}else{
	console.log('其它文件');
}

打印输出为txt文件
2.字符串模板
有一对反单引号组成的字符串。
可以用来做字符串连接。
特点:
i)直接把东西塞到字符串里     ${东西}
ii)可以折行

9.面向对象

一.基本写法
之前的写法存在的问题:
1.类和构造函数其实为一体
2.散开的类
之前写法的例子:

function User(name,pass){
this.name=name;
	this.pass=pass;
}
User.prototype.showname=function(){
	console.log(this.name);
}
User.prototype.showpass=function(){
	console.log(this.pass);
}
var user=new User('zhu','123456');
user.showname();
user.showpass();

es6中的新写法改进:
1.class关键字，构造器和类分开了
2.class里面直接加方法
es6的例子:

class User{
	constructor(name,pass) {
		this.name=name;
		this.pass=pass;
	}
	showname(){
		console.log(this.name);
	}
	showpass(){
		console.log(this.pass);
	}
}
var user=new User('zhu','123456');
user.showname();
user.showpass();

二.继承
之前的写法:

function vipUser(name,pass,level){
	User.call(this,name,pass);
	this.level=level;
}
vipUser.prototype=new User();
vipUser.prototype.constructor=vipUser;
vipUser.prototype.showlevel=function(){
    console.log(this.level);	
}
var v1=new vipUser('zhu','123456',3);
v1.showname();
v1.showpass();
v1.showlevel();

现在的写法:
1.super—超类,父类
2.extends

class vipUser extends User{
	constructor(name,pass,level){
		super(name,pass);
		this.level=level;
	}
	showlevel(){
		console.log(this.level);
	}
}
var user=new vipUser('zhu','123456',3);
user.showname();
user.showpass();
user.showlevel();