es6技术培训文档
第一阶段:
1.let与const用法
2.变量的解构赋值
3.字符串的扩展
4.正则的扩展
5.数组的扩展
6.函数的扩展
7.对象的扩展
8.Symbol
9.Set和Map数据结构
第二阶段:
1.Reflect
2.Promise对象
3.Iteractor和for..of遍历
4.Generator函数的异步应用
5.async函数
6.Class的基本的语法
7.Decorator
8.Module的加载实现
--------------------------------------------------
第一课:
环境配置:
--------------------------
第一步:
cnpm install -g babel-cli
第二步:
cnpm install --save-dev babel-preset-es2015 babel-cli
第三步:
在pack.json同级目录中建立.babelrc文件,并在文件中写入
{
"presets": ["es2015"], //转换成es5的定法
"plugins": [] //定义一个组件数组
}
第四步:执行
babel ./src/index.js -o dist/index.js
第五步:查看结果:
"use strict";
var name = "zhilei";
console.log(name);
第六步:如果不想用上面的命令的话,想自定义的一个命令,则可以在pack.json中配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"babel ./src/index.js -o dist/index.js"
},
这样的话,我们就可以执行cnpm run build
----------------------------------------------------------------------
第二课:
变量的声明方式:
let
//局部声明
const
//声明常量
var
//全局的声明
第三课:解构赋值
----------------------------------------------------------------------
//给一个默认的值 这个相当于php中的索引数组 即下标为数字的
let [a,b=100]=[1000,undefined];
//也可以给一个初始值
let {username,age="1000"} ={username:"志雷教育",age:undefined}
//数组之间一定要一一对象
let [aa,[c,d]]=[1,[3,3]];
console.log(aa);
console.log(c);
console.log(d);
第四课:扩展运算符与rest运算符
----------------------------------------------------------------------
1.扩展运算符:(相当于python中的*args,**kwargs)
let a1=["one",'two'];
let a2=[...a1]; //将a1数组内的数组一一的遍历给a2
a2.push("three");
console.log(a1);
console.log(a2);
2.rest(剩余运算符)
function one(a,...two) {
console.log(a);
console.log(two.length);
}
//王传给a
one("王",1,2,3);
3.for in 与for of
1)for in用法
let arr=["殷超","志雷","宗斌"];
for (let i in arr){
//只能取数组的key
console.log(arr[i]);
}
2)for of 用法相当于php中 foreach()
第五课:新增字符串的功能
----------------------------------------------------------------------
1)字符中模板``
let a=10;
let b=100;
let content=`我的名字是:"${a+b}"我是一个帅哥!!!"`;
alert(content);
2)字符串查找
includes()
startsWith()
endsWith()
repeat()
1、includes()
let a ="志雷教育".includes("志雷");
alert(a);
2.startsWith();
let a ="志雷教育".startsWith("志雷");
alert(a);
3.endsWith()
let a ="志雷教育".endsWith("志雷");
alert(a);
4.repeat()
let a ="S".repeat(10);
document.write(a);
------------------------------------------------------------
Symbol()用法
let key="username";
let key1=Symbol("age");
let json={
[key]:"zhilei",
[key1]:10
};
console.log(json);
console.log(json[key1]);
------------------------------------------------------------
set增删改查
//将集合中的元素转为数组
var s=new Set(["one","two","three","one"]);
// var arr=[...s];
// console.log(arr);
var arr=[1,2,3,];
var new_arr=arr.map((x)=>{
return x*10;
});
console.log(new_arr);
console.log("-".repeat(100));
//将其转换为数组,只用数组用map使用
var new_s=Array.from(s).map(x=>{
return x+"111";
});
console.log(new_s);
/*
1.求交集
2.求并集
*/
var a=new Set([1,2,3,4]);
var b=new Set([1,2,5,4]);
var c=new Set([...a,...b]);
console.log(c); //求并集
var inter=new Set([...a].filter(x=>b.has(x)));
console.log(inter);
//求差集
var cha=new Set([...a].filter(x=>!b.has(x)));
console.log(cha);
weekSet()用法
--------------------------------------------------------
let weekSet = new WeakSet();
//不能直接将对象,只能声明好对实例,然后再加对象
let json={username:"zhilei",age:10};
//虽然值是相同的,但是却是生存在两个不同的内存空间
let json1={username:"zhilei",age:10};
weekSet.add(json1);
weekSet.add(json);
console.log(weekSet);
map对象
--------------------------------------------------------
//第一步:声明一个map实例
let map = new Map();
//第二步:给这个实例赋key,value值
map.set("username","zhilei");
map.set("age",10);
map.set("content",{bookname:"php",price:10,count:10});
//第三步:取值:get()方法
console.log(map.get("username"));
//第四步:删除 delete clear
map.delete('age');
//清空
// map.clear();
//查看长度
console.log(map.size);
//判断是否一个key
console.log(map.has('content'));
/*
总结:
增加 set
取: get
查: has
删除 :delete clear
长度: size
*/
proxy()用法
--------------------------------------------------
let pro = new Proxy({
name:"zhilei"
},{
get:function (target,key,property) {
console.log("come in get");
return target[key]; //要将结果返回出去
},
set(target,key,value,receiver){
console.log(`${key}= ${value}`);
return target[key]=value; //必须返回,否则的话,就没有结果
//vulue是新的值
}
});
console.log(pro.name);
pro.name="志雷";
proxy apply用法
----------------------------------------------
let target=function () {
return 'hello ';
};
let handler={
apply(target,ctx,args){
console.log("aaaaaaaaaa");
return Reflect.apply(...arguments);
}
};
let pro= new Proxy(target,handler);
console.log(pro());
promise对象:
----------------------------------------------------------
let state=1;
function step1(resolve,reject) {
console.log("开始做饭");
if (state==1){
resolve("做饭完成!!!")
}else{
reject("做饭失败!!!");
}
}
function step2(resolve,reject) {
console.log("坐下来吃饭");
if (state==1){
resolve("吃饭完成!!!")
}else{
reject("无法吃饭!!!");
}
}
function step3(resolve,reject) {
console.log("开始收拾桌子");
if (state==1){
resolve("收拾完成!!!")
}else{
reject("收拾失败!!!");
}
}
new Promise(step1).then(function (val) {
console.log(val);
return new Promise(step2);
}).then(function (val) {
console.log(val);
return new Promise(step3)
}).then(function (val) {
console.log(val);
});
数组遍历的几种方法:
-----------------------------------------------------
<!--数组的遍历-->
arr=["one","two","three","four"];
//第一种的遍历的方法
for(i in arr){
console.log(arr[i]);
}
console.log("-".repeat(100));
// 第二种遍历的方法
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}
console.log("-".repeat(100));
//第三咱遍历的方法
for([value,key] of arr.entries()){
console.log(value,key);
}
console.log("-".repeat(100));
//第四种逐个遍历的方法
var all=arr.entries();
console.log(all.next().value);
console.log("-".repeat(100));
var all=arr.entries();
console.log(all.next().value);
console.log("-".repeat(100));
var all=arr.entries();
console.log(all.next().value);
console.log("-".repeat(100));
json转为数组
-------------------------------------------------
//如果想将json转为数组的话,则json的key只能是一个数字
let json={
0:"zhilek",
1:10,
2:"male",
length:3
};
// let arr= Array.from(json);
// console.log(arr);
//将数组转为字符串
let arr=["one","two","three"];
//第一种方法 直接转字符串
console.log(arr.toString());
//第二种方法 ,自定义连接号
console.log(arr.join("-"));
对象扩展:
<script>
//如果提前定义好的话 ,则可以直接的调用
var age=100;
var one={
username:"zhilei",
one(){
alert(1111111)
},
age,
two() {
console.log("2222222222222")
}
};
console.log(one.username);
one.one();
console.log(one.age);
one.two();
function getPoint() {
var x = 1;
var y = 10;
return {x, y};
}
console.log(getPoint().x)
console.log(getPoint().y)
</script>
对象赋值:
---------------------------------------------------
<script>
<!--es6对象-->
let username="zhilei";
let age=10;
//es5的用法
// let a={username:usernmae,age:age};
//es6的用法
let b={username,age};
console.log(b);
</script>
key值构建
-----------------------------------------------------
<meta charset="utf-8">
<script>
//key值构建
let key="username";
//如果用key值来构建的话,则要加[]号来使用
let one={
[key]:"志雷"
};
console.log(one);
</script>
自定义构建对象:
-------------------------------------------------------
<meta charset="utf-8">
<script>
//自定义构建对象
let one={
aa(a,b) {
return a+b;
}
};
console.log(one.aa(100,200));
</script>
Object.is()用法
----------------------------------------------------
<script>
// is方法
//同值相等
console.log(-0===+0); true
console.log(NaN===NaN); //false
//严格相等
console.log(Object.is(-0,+0)); //false
console.log(Object.is(NaN,NaN)); //true
</script>
Object.assign()对象的合并
-----------------------------------------------------
<script>
//对象合并
let one={username:"zhilei"};
let two={age:10};
let three={sex:"male"};
let four=Object.assign(one,two,three);
console.log(four);
</script>
class运用(与php一样)
export import用法(与python的一样)