ES6开发环境搭建：
1.新建dist 和src文件 index.html src下新建index.js文件
2.npm init -y 初始化生成 package.json文件 -y的意思是默认的 不用一步步回车确认
3.全局安装babel-cli npm install -g babel-cli
4.本地安装babel-preset-es2015 和bable-cli npm install bable-preset-es2015 babel-cli -D 将es6转化成es5
5.新建.babelrc文件 配置如下：
{
"presets":[
"es2015"
],
"plugins":[]
}
6.将src下的index.js(es6)打包成dist下的index.js(es5) babel src/index.js -o dist/index.js
7.通过npm run build 编译成es5 package.json配置如下:
"scripts": {
"build": "babel src/index.js -o dist/index.js"
}
8.var 全局声明 let局部声明 const常量声明 定义了之后不允许改变
9.解构赋值
数组解构:let[a,b,c]=[1,2,3] let[a,[b,c],d]=[1,[2,3],4];
默认值 let[fool=true]=[] let[a,b="ding"]=["westnbrook-"]; console.log(a+b) // westbrook-ding
undefined为空值 null 有值不为空
对象赋值：let{a,b}={a:"li",b:"si"};
字符串赋值:const[a,b,c,d]="west"; a="w" b="e" c="s" d="t";
10.扩展运算符 ...arg 函数 function(...arg) 数组赋值不同时改变 let arr2=[...arr1]
rest运算符 function(first,...arg)
11.字符串模板 全局安装live-server npm install -g live-server 热更新 运行本地服务器 live-server 相当于npm run dev
let name="dingge";
let dec=`es6是一门好用的课程,${name}正在学习改课程!`;
查找字符串
dec.includes(name); // true includes相当于indexOf 但是不需要判断是否大于-1
dec.startsWith(name); // 开头有没有
dec.endsWith(name); // 结尾有没有
复制字符串 document.write("json1".repeat(3)) .repeat(数量)
12 二进制声明 binary 以0B开头+二进制数
let binary=0B010101;
八进制声明 Octal 以0o开头+八进制数
let octal=0o666;
Number.isFinite(a); 判断是否为数字
Number.isNaN();判断是否为非数字
Number.isInteger(); 是否为整数
Number.parseInt();转换为整数
Number.parseFloat(); 转换成浮点数
Number.MAX_SAFE_INTEGER 最大安全整数
Number.MIN_SAFE_INTEGER 最小安全整数
Number.isSafeInteger() 是否是安全整数
13 数组的相关方法：a. json数组格式 let json={
"0":"westbrook",
"1":"george",
"2":"anthony"
}
将json数组格式转化为数组:let arr=Array.from(json);
b. 将以逗号分割的字符串转化成数组 Array of()
let str="westbrook,george,anthony";
let arr=Array.of(str); 或者 let arr=Array.of("westbrook","george","anthony");
c.数组实例的find()方法 查找数组中的元素
let arr=["1","2","3","4","westbrook","george","anthony"];
let res=arr.find(function(value,index,arr){
return index>5; // george 找到了就不执行了
})
d.fill(要替换成的元素,要替换的位置的起始下标,要替换的位置的结束下标) 替换数组元素 包含开始不包含结束
let arr=["a1","bc","df"];
let res=arr.fill("c",1,3) // ["a1","c","c"]
f.遍历数组 for of
item of arr item 为数组元素
item of arr.keys() item 为数组的下标
item of arr.entries() item 为单个[下标,元素]
[index,val] of arr.entries() index 为下标 val为元素
g. entries 条目
let arr=["a","b","c"];
let list=arr.entries();
console.log(list.next().value) // [0,"a"]
console.log(list.next().value) // [1,"b"]
console.log(list.next().value) // [2,"c"]
14.throw new Error("a is error") 抛出异常
use strict 严格模式 可以在函数里使用
add.length 函数形参的长度默认参数除外 add为函数名
箭头函数: 一行代码不需要加{}
let add=(a,b=1)=>a+b;
console.log(add(1))
15.对象的函数解构:
let json={
a:"westbrook",
b:"george",
c:"anthony"
}
let jiegou=({a,b,c})=>{
console.log(a,b,c);
}
jiegou(json) // westbrook george anthony
数组的解构 展开运算符
let arr=[4,5,6];
let jie=(a,b,c)=>console.log(a+b+c);
jie(...arr);
in的用法：
判断属性是否存在于对象中 返回true 或false key in obj
判断数组对应下标位置是否有值 返回true 或false i in arr
let obj={
a:"1",
b:"2"
}
console.log("a" in obj) // true
console.log("c" in obj) // false
let arr=["west",,""];
console.log(0 in arr); // true
console.log(1 in arr); // false
console.log(2 in arr); // true
遍历数组的方法：
1.forEach()
let arr=["ge","an","west"];
arr.forEach((val,index)=>console.log(index,val)) // 0 ge 1 an 2 west
2.filter() some()
arr.filter(x=>console.log(x)) // ge an west
arr.some(x=>console.log(x))
3.map() 替换
arr.map(x=>"web") // ["web","web","web"];
toString()方法 arr.toString() // ge,an,west
join() 方法 arr.join("-") // ge-an-west
16.对象的赋值
let name="westbrook-ding";
let skill="es6";
let obj={name,skill};
console.log(obj); // {name:"westbrook",skill:"es6"}
key值的构建
let key="skill";
let obj={
[key]:"es6"
}
console.log(obj); // {skill:"es6"};
对象的is() 方法 严格相等
let obj4={name:"west"};
let obj5={name:"west"};
console.log(Object.is(obj4.name,obj5.name)); // true
// === 同值相等 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
对象的assign() 方法 合并几个对象的属性 如果有相同属性则覆盖
let a1={b:"west",c:"brook"};
let b1={c:"-",e:"ding"};
let c1={e:"perfect",g:"good"};
let d1=Object.assign(a1,b1,c1);
console.log(d1);
// Symbol的用法:对对象属性的保护 循环时不输出
let obj6={name:"dingge",skill:"web"};
// 将对象的属性定义成Symbol类型进行保护
let age=Symbol();
obj6[age]=18;
console.log(obj6)
for(let item in obj6){
console.log(obj6[item]);
}
// 通过obj[age] 输出
console.log(obj6[age]);
16.Set 的用法 数组去重
let setArr=new Set(["west","george","anthony"]);
console.log(setArr); // Set(3){"west","george","anthony"} 跟json一样是一种数据结构
setArr.add("west");
console.log(setArr); //不允许数组中元素重复
setArr.add("ding"); // add() 类似数组的push方法
console.log(setArr);
// has()查找元素是否存在于数组中 返回true 或false
console.log(setArr.has("ding")); // true
console.log(setArr.has("li")); // false
// delete() 删除数组某个元素
setArr.delete("west");
console.log(setArr);
// clear() 删除数组所有元素
// setArr.clear();
console.log(setArr);
// 遍历 for of
for(let item of setArr){
console.log(item);
}
// forEach() 方法
setArr.forEach((val)=>console.log(val));
// size属性 等价于length属性
console.log(setArr.size);
// WeakSet() 添加对象 相同的内存地址不允许重复
let weakObj=new WeakSet();
let obj7={a:"westbrook",b:"georeg"};
let obj8={a:"westbrook",b:"georeg"};
weakObj.add(obj7);
weakObj.add(obj8);
console.log(weakObj); // obj7和obj8都存在 因为obj7和obj8是不同的内存地址
let obj9=obj7;
weakObj.add(obj9);
console.log(weakObj); // obj7存在 obj9不存在 因为obj7和obj9指向同一块内存空间
17 map数据结构 set() get() has() delete() clear() size
let map=new Map();
// map数据结构 key和value非常灵活 key和value可以设置任意值
let json1={
name:"jsding",
age:25
}
let map=new Map();
// set() 添加值
map.set(json,"wesbrook-ding");
map.set("person",json);
console.log(map);
// get() 通过key获取value
console.log(map.get(json));
console.log(map.get("person"));
// delete(key) 删除 clear() 清除所有
map.delete(json);
console.log(map);
// has()查找
console.log(map.has("person")); // true
console.log(map.has(json)); // false
// size 长度
18.proxy 代理 ES6增强 对象和函数(方法) 预处理 生命周期函数
let obj10={
add:function(a,b){
return a+b;
},
name:"ding"
}
let pro=new Proxy({
add:function(a,b){
return a+b;
},
name:"ding"
},{
get:function(target,key,property){
// 获取值前干些什么
console.log("获取值前干什么");
console.log(target); // target 为obj10
console.log(key);
return target[key];
},
// value 为新设置的值 receiver为旧值
set:function(target,key,value,receiver){
// 设置值前干点什么
console.log("设置之前干点什么");
console.log(`设置${key}=${value}`);
return target[key]=value;
}
})
console.log(pro.name);
pro.name="westbrook";
console.log(pro.name);
// apply()
let target1=()=>"I am westbrook-ding";
let handler={
apply(target,ctx,args){
// 调用函数前做些什么
console.log("do apply");
return Reflect.apply(...arguments);
}
}
let pro1=new Proxy(target1,handler);
console.log(pro1());
19.promise
// promise 回调地狱 1.洗菜做饭 2.坐下来吃饭 3.收拾桌子洗碗
let state=1;
function step1(resolve,reject){
console.log("1.开始-洗菜做饭");
if(state==1){
resolve("洗菜做饭完成");
} else{
reject("洗菜做饭错误");
}
}
function step2(resolve,reject){
console.log("2.开始-坐下来吃饭");
if(state==1){
resolve("吃饭完成");
} else{
reject("吃饭错误");
}
}
function step3(resolve,reject){
console.log("3.开始-收拾桌子洗碗");
if(state==1){
resolve("收拾桌子洗碗完成");
} else{
reject("收拾桌子洗碗错误");
}
}
new Promise(step1)
.then(function(val){
// 第一步完成时 打印第一步resolve信息
console.log(val);
// 执行第二步
return new Promise(step2);
})
.then(function(val){
console.log(val);
return new Promise(step3);
})
.then(function(val){
console.log(val);
});
20.class的用法： 注意class里面没有逗号
class People{
// constructor 传递类的参数
constructor(name,age){
this.name=name;
this.age=age;
}
eat(){
console.log(this.name+"吃大餐");
}
play(){
this.eat();
console.log(this.name+"环游世界");
}
}
let person=new People("dingge",25);
console.log(person.name);
console.log(person.age);
console.log(person.eat());
console.log(person.play());
//继承 extends
class Per extends People{
}
let p=new Per;
console.log(p.add());
21.模块化 export import
temp.js中 export val name="westbrook";
index.js中 导入 import {name} from "./temp.js"
temp.js中 导出多个变量 对象方法
let a="west";
let b="web";
let c=18;
export {a,b,c}
index.js 导入 import {a,b,c} from './temp.js'
temp.js中 导出函数
export function add(a,b){
return a+b;
}
index.js中导入 import {add} from './temp.js'
as的用法 重新定义一个语义化的名称
temp.js中 导出多个变量 对象方法
let a="west";
let b="web";
let c=18;
exprot {
name as a,
skill as b,
age as c
}
index.js中导入 import {name,skill,age} from "./temp.js"
export 可以有多个 import引入时 必须带{}
export default只能有一个 import 引入时 不带{} 名称可以自己定义
// 22 es6-yztc
// 01声明变量
// ES5 var
// ES6 var let const
// 01使用let声明的变量是一个块级作用域变量
{
console.log(a);
// console.log(b); 03 let关键字声明的变量，不存在"声明提升"
var a = 10;
// {}代表一个块级作用域。let声明的变量只在距离它最近的大括号内起作用。
let b = 100;
// let a = 20; 02 let 关键字声明的变量不允许变量名重复。
}
console.log(a);
// console.log(b);
// const 常量修饰符。使用const定义的变量，必须在声明的同时给他赋值，并且该变量中的值是不允许改变的
const PI = 3.14;
console.log(PI);
// 2 展开运算符...
console.log( ...[1,2,3] );
// 3.关于函数
// 01 设置函数形参的默认值
function fun(x=0,y=2){
console.log(x,y);
}
fun(1);
// 02 箭头函数
// function add(x,y){
// console.log(x+y);
// }
var add = (x,y)=>{console.log(x+y)};
add(2,3);
// 箭头函数最大特点是this指针指向问题。
// 普通函数中谁来调用函数，this指针就指向谁。
// 箭头函数中this指针取决外域中this指向。
var obj = {
fn:function(){
console.log(this);//obj
}
}
obj.fn();
var obj2 = {
fn2:()=>{
console.log(this);//window对象
}
}
obj2.fn2();
var obj3 = {
fn3:function(){
// this-->obj3
var test = ()=>{
console.log(this);//obj3
};
test();
}
}
obj3.fn3();
// 结构化赋值
var a,b,c,d;
/*a = 1;
b = 2;
c = 3;
d = 4;*/
[a,b,c,d] = [1,2,3,4];
console.log(a,b,c,d);
[[a,b],c,d] = [[10,20],30,40]
console.log(a,b,c,d);
var x = 10,y=20,z=30;
// 交换两个变量的值
[x,y,z] = [y,z,x];
console.log(x,y,z);//20 30 10
function fun(){
return [10,20,30];
}
var a,b,c;
[a,b,c] = fun();
console.log(a,b,c);
// Map key/value
var map = new Map();
// 01 map存数据
map.set("stu1","张三");
map.set("stu2",{name:"李四"});
console.log(map);
// 02 获取值 根据key获取
console.log( map.get("stu1") );
// 03 判断键值对是否存在
console.log( map.has("stu3") );
// 04 获取map中所有key值
console.log( map.keys() );
// 05 获取map中所有value
console.log( map.values() );
// 06遍历map集合for-of
for( var i of map.keys() ){
console.log(i, map.get(i) );
}