基础ES6笔记

认识ES6

什么是ES6

• ECMAScript是JavaScript的标准，JS是ES的实现；主流实现只有JS，所以很多时候JS就等同于ECMA
• 正式名称：ES2015，是ECMA标准的第6版
  为什么使用ES6
• 语言都在更新换代
• 支持更多语法、使用更方便
• 增强工程性

基础语法

变量

• let：不可重复声明、块级作用域
• const：常量

-> 解决重复声明、控制修改

解构赋值

• 两边的结构必须一样
• 右边必须是个东西
• 赋值和解构同时完成

let {a,b}={a:12,b:2,c:10};

箭头函数

• 简写：()=>{}
• 如果有且仅有一个参数，()也可以不写
• 如果有些仅有一个语句并且是return，{}也可以不写

function show(n,fn){
	alert(fn(n));
}
show(12,n=>n+5);

• this固定为当前环境

let json={
	a:12,
	fn:function(){
		console.log(this);
		alert(this.a);
	}
}
let oDate=new Date();
oDate.fn=json.fn;
oDate.fn(); //undefined
json.fn;//12

console.log(this);//window
let json={
	a:12,
	fn:()=>{
		console.log(this);//window
		alert(this.a);
	}
}
json.fn();//undefined

class Json{
	constructor(){
		this.a=12;
		this.fn=()=>{
			alert(this.a);
		}
	}
}
let json=new Json();
json.fn();//12
let oDate=new Date();
oDate.fn=json.fn;
oDate.fn();//12

• 参数扩展

//收集参数
function show(a,b,...c){
	console.log(a,b,c);
}
show(12,5,4,8,19,27,36);//12 5 Array[5]

//展开参数
//01
let arr1=[12,5,8];
function show(a,b,c){
	alert(a+b+c);
}
show(...arr1);
//02
let arr1=[1,2,3];
let arr2=[4,5,6];
let arr=[...arr1,...arr2];
console.log(arr);
//json合并
let json1={a:1,b:2,c:3};
let json2={
	...json1,
	d:4
};

原生对象扩张

• map —— 映射

let arr1=[68,52,12,98,65];
let arr2=arr1.map(item=>return item=>60?"及格":"不及格");

console.log(arr1);//[68,52,12,98,65]
console.log(arr2);//['及格','不及格','不及格','及格','及格']

• reduce —— n=>1

let arr1=[68,52,12,98,65];
let result=arr1.reduce(function(tmp,item,index){
	if(index==arr1.length-1){
		return (tmp+item)/arr1.length;
	}else{
		return tmp+item;
	}
})//index从1开始
alert(result);

• filter —— 过滤

//筛选偶数
let arr1=[68,52,12,98,65];
let arr2=arr1.filter(item=>return item%2==0);
console.log(arr1);//[68,52,12,98,65]
console.log(arr2);//[68,52,12,98]

• foreach —— 遍历

let arr1=[68,52,12,98,65];
arr1.forEach((item,index)=>{
	console.log(`第${index}个:${item}`);
})

• JSON写法

JSON.stringify({"a":12,"b":5}) => '{"a":12,"b":5}'  //序列化
JSON.parse('{"a":12,"b":5}') =>
{a:12,b:5}        //反序列化

Babel编译

• 方法1

1. 引入在线文件
2. type=text/babel

• 方法2

1. npm i @babel/core @babel/cli @babel/preset-env -D
2. 添加执行脚本

"script":{
	"build":"babel src -d dest"
}

3. 添加.babelrc配置文件

{
	"presents":["@babel/preset-env"]
}

4. npm run build

异步操作

• Promise

let p=new Promise(function(resolve,reject){
	$.ajax({
		url:"data/1.txt",
		dataType:"json",
		success(arr){
			resolve(arr);
		},
		error(res){
			reject(res);
		}
	})
});

p.then(function(arr){
	console.log(arr)
	},function(res){
		console.log("Error")
	})

Promise.all([
	$.ajax({url:"data/1.txt",dataType:"json"}),
	$.ajax({url:"data/2.txt",dataType:"json"}),
	$.ajax({url:"data/3.txt",dataType:"json"}),
]).then(arr=>console.log(arr),res=>console.log("失败"));

• Async/await

async function show(){
	let a=12;
	let b=5;
	let data=await $.ajax({url:"data/1.txt",dataType:"json"});
	alert(a+b+data[0]);
}

面向对象

• 语言发展简史
  机器语言 -> 汇编语言 -> 低级语言(面向过程) -> 高级语言(面向对象) -> 模块系统 -> 框架 -> 系统接口(API)
• ES5&6面向对象

1. class

//ES5
//以函数的形式来写对象
function Person(name,age){
	this.name=name;
	this.age=age;
}
//添加方法
Person.prototype.showName=function(){
	alert(this.name);
}
Person.prototype.showAge=function(){
	alert(this.age);
}

//ES6
//添加新关键词class
class Person{
	constructor(name,age){
		this.name=name;
		this.age=age;
	}

	showName(){
		alert(this.name);
	}

	showAge(){
		alert(this.age);
	}
}

2. constructor
3. extends

//ES5
function Person(name,age){
	this.name=name;
	this.age=age;
}
Person.prototype.showName=function(){
	alert(this.name);
}
Person.prototype.showAge=function(){
	alert(this.age);
}

function Worker(name,age,job){
	Person.call(this,name,age);
	this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;
Worker.prototype.showJob=function(){
	alert(this.job);
}

//ES6
class Person{
	constructor(name,age){
		this.name=name;
		this.age=age;
	}

	showName(){
		alert(this.name);
	}

	showAge(){
		alert(this.age);
	}
}

class Worker extends Person{
	constructor(name,age,job){
		super(name,age);
		this.job=job;
	}

	showJob(){
		alert(this.job);
	}
}

4. super

模块系统

• JS模块系统演化简史
  没有模块 -> CMD(Common Module Definition)(不支持异步加载) -> AMD(Asynchronous Module Definition)(支持异步加载)-> 语言提供模块支持
• 操作

1. 导入

//单个变量
export let a=1;
export let b=2;
export let c=3;
//一堆变量
export {a,b,c};
//函数
export function show(){}
//类
export class Person{}
//默认成员
export default 99;

2. 导入

//当浏览器不支持模块化时需要webpack编译
//路径‘./mod1'的'./'不可省略，遵循node路径原则
import * as mod from './mod1';

//导入默认成员语句
import mod from './mod1';

//name2可作为别名，按需导入a和b
import {a,b as name2} from 'mod1';

//只引入
import 'mod';

//异步引用
let p=await import('./mod1');

3. 配置webpack

//webpack.config.js
const path=require('path');

module.exports={
	mode:"development",//开发者模式
	entry:"./js/index.js",//编译文件入口
	output:{
		path:path.resolve(__dirname,"build"),//输出路径，定义绝对路径
		filename:"bundle.js"//输出文件名
	}
}