javascript-es6学习笔记

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的一样)