菜鸟的ES6学习笔记

let,const,var

• var变量的局限
  1.可以重复声明变量
  2.无法限制修改
  3.没有块级作用域

• let:不能重复声明，变量，可以修改，有块级作用域

  const:不能重复声明，常量，不能修改，有块级作用域

//例子：html
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
//js(第一种情况，将i用var定义，这种会输出三个3，因为var没有块级作用域)
window.onload = function(){
			var btns = document.getElementsByTagName("button");
			for (var i=0;i<btns.length;i++) {
				btns[i].onclick = function(){
					alert(i);
				}
			}
		}
//js(第二种情况，将i用let定义，这样就会正常输出)
window.onload = function(){
			var btns = document.getElementsByTagName("button");
			for (let i=0;i<btns.length;i++) {
				btns[i].onclick = function(){
					alert(i);
				}
			}
		}

函数

• 函数写法(箭头函数)
  如果没有参数或者只有一个参数，（）可以省略；

function abc(i){			abc=i=>{
	alert("123")  等价于		alert("123")
}							}

• 参数的展开

  • 收集参数

function show(a,b,...Array){
	alert(a);//1
	alert(b);//2
	alert(Array);//3,4,5,6,7
}
show(1,2,3,4,5,6,7);

• 展开数组

function show(a,b,c,...arr){
	let arr1=[1,2,3];
	let arr2=[4,5,6];
	let arr[...arr1,...ar2];
	alert(arr);//1,2,3,4,5,6
}

function show(...arr){//接受参数
	fn(...arr);//展开数组
}
function fn(a,b){
	alert(a+b);
}
show(5,15);//20

解构赋值

• 1.左右两边结构必须一样
  2.右边必须是个东西
  3.声明和赋值不能分开

//栗子1：数组
let [a,b,c]=[1,2,3];
console(a,b,c)//1,2,3
//左右结构是一样的，右边是数，声明和赋值在同一句话中。
//栗子2：JSON对象
let {a,b,c}={a:1,b:2,c:3};

数组

• map
  映射，一对一

let arr=[1,2,3];
let result=arr.map(function(item){
//如果参数只有一个，在箭头函数中可以吧括号省去
//如果函数主体只有一个语句，那么括号也可以省略
	return item;
})
alert(result);
//等价于：
let arr=[1,2,3];
let result=arr.map(item=>item*2)
alert(result);
===========================================
let score=[19,80,99,20,90];
let result=score.map(score=>score>=60?"及格":"不及格");
alert(result);

• reduce
  汇总，一堆东西之中出来一个数

let arr=[12,69,180,8763];
//reduce三个参数含义：(临时结果，当前变量，当前位置)
let result = arr.reduce(function(tmp,item,index){
	if(index!=arr.length-1){
			return tmp+item;
		}else{
			return (tmp+item)/arr.length;
		}
	});
alert(result);

• filter
  过滤器

let arr=[12,11,5,8,7];
let result = arr.filter(function(item){
	if(item%3==0){
		ruturn true;
	}else{
		return false;
	}
})
alert(result);//12
//等价于：
let arr=[12,11,5,8,7];
let result = arr.filter(item=>item%3==0);
alert(result);//12

• forEach
  遍历迭代

//相当于for循环，index下标可加可不加
let arr=[2,5,8];
let result=arr.forEach(function(item,index){
	alert(index+":"+item);
})

字符串

• 多了两个新的方法：①startsWith②endsWith

//starsWith
let str = 'git://it.kaikeba.com';
if(str.startsWith('https://')){
	alert("普通网址");
}else if(str.startsWith("http://")){
	alert("加密网址");
}else if(str.startsWith("git://")){
	alert("git地址");
}
//endsWith
let str="img.png";
if(str.endsWith(".png")){
	alert("图片")
}else if(str.endsWith(".txt")){
	alert("文本");
}

• 模板字符串
  多用于字符串连接
  ①直接把东西塞到字符串中 ${东西}

let str = `123`;
let str2 = `a${str}bc`
alert(str2);//a123bc

②可以折行

let str = `<div>
			<h1></h1>
			<p></p>
			</div>`

ES6面向对象

• ES6面向对象与之前的区别
  1.class关键字、构造器和类分开了
  2.class里面直接加方法

//原来的写法				
function User(name,pass){
	this.name = name;
	this.pass = pass;
}
User.prototype.showName = function(){
	alert(this.name);
}
User.prototype.showPass = function(){
	alert(this.pass);
}
var u1 = new User("123","456")
u1.showName();
u1.showPass();
/*==================================*/
//**新的写法**
class User{
	//constructor:构造器
	constructor(name,pass){
		this.name = name;
		this.pass = pass;
	}
	showName(){
		alert(this.name);
	}
	showPass(){
		alert(this.pass);
	}
}
var u1 = new User("132","45646");
u1.showName();
u1.showPass();

…没想到吧，我也没想到0.0