ES6学习笔记

ES6学习笔记

变量

var

1. 可以重复声明
2. 无法限制修改
3. 没有块级作用域

let

1. 不能重复声明
2. 变量-可以修改
3. 块级作用域

const

1. 不能重复声明
2. 常量-不可以修改
3. 块级作用域

函数-箭头函数

//原来写法：
function 名字(){
}

//箭头函数
()=>{
}

• 如果只有一个参数，()可以省
• 如果只有一个return(只有一行代码，是return），{}可以省

函数-参数

参数扩展

1. 收集剩余参数

function show(a,b,...args){

​	/**...args被称为：Rest parameter，且必须是最后一个参数**/

}

2. 展开数组
   展开后的效果，跟直接把数组的内容写在这儿一样

let arr=[1,2,3]
console.log(1,2,3);
//1,2,3

console.log(...arr);
//1,2,3

解构赋值

1. 左右两边结构必须一样
2. 右边必须是个东西
3. 声明和赋值不能分开（必须在一句话里完成）

let [a,b,c] = [1,2,3]； //正确
let {a,b,c} = {a:12,b:5,c:18}；//正确
let {a,b,c} = {1,2,3}； //错误（左边为对象，右边不是对象）

数组

Es6数组新增方法	用处	结果
map	映射	一个对一个
reduce	汇总	一堆数据出来一个
filter	过滤器	过滤出符合条件的数据
forEach	循环（迭代）	取出所有的数

map列子

let score = [19,86,99,25,90];
let result = score.map(function(item){
	return item >=60?'及格':'不及格';
})
//es6箭头函数写法
/*
	let result = score.map(item=>item >=60?'及格':'不及格')
*/
alert(result)

reduce例子

//通过reduce方法计算数组的和
let arr = [12,69,180,8763]
let result = arr.reduce(function(tmp,item,index){
	//alert(tmp + ',' + item + ',' + index)
	return tmp + item;
})
console.log(result);//9024
//通过reduce方法计算数组的平均数
let arr = [12,69,180,8763]
let result = arr.reduce((tmp,item,index)=>{
	if(index!=arr.length-1){
	    return tmp + item;
	}else{
    	return (tmp + item)/arr.length;
	}
})
console.log(result);//2256

filter例子

//过滤出数组中所有能被3整除的元素
let arr=[12,5,8,99,28,11];
let result = arr.filter(item=>{
	return item%3==0;
})
//es6箭头函数写法
/*
	let result = arr.filter(item=>item%3==0)
*/
console.log(result)

forEach例子

//循环遍历取出每个元素
let arr = [14,8,9,91,78];
arr.forEach(function(item,index){
	alert(index + ':'+ item)
})
//es6箭头函数写法
/*
    arr.forEach((item,index)=>{
        alert(index + ':'+ item)
    })
*/

字符串

1. 新增两个新方法
   • startsWith
   • endsWith

//starstWith 字符串以什么开头
let url = 'https://www.baidu.com';
if(url.startsWith('http')){
	alert('普通网址');
}else if(url.startsWith('https://')){
	alert('加密网址');
}

//endsWith 字符串以什么结尾
let img = '123feasdfaewr.png';
if(img.endsWith('png')){
	alert('该文件是png图片')
}else if(img.endsWith('html')){
	alert('该文件是html文件')
}

2. 字符串模板(反单引号 ``)
   • 直接把东西塞到字符串里面 ${}
   • 可以自由换行,``内的内容都算一行

let title = '标题';
let content = '内容';
let str1 = '<div>
        <h1>'+title+'</h1>
        <p>'+content+'</p>
	</div>';

let str2 = `<div>
        <h1>'+${title}+'</h1>
        <p>'+${content}+'</p>
    </div>`;
console.log(str1);
console.log(str2);

Es6的面向对象

1. 增加了class关键字,构造器和类分开了
2. class里面直接写方法

未完待续…