ES6 箭头函数、函数扩展
ES5:
function add(a,b){
return a+b;
}
console.log(add(1,2));
主动抛出错误:throw new Error(xxxx)
function add(a,b){
if(a==0){
throw new Error("这是错误的")
}
return a+b;
}
console.log(add(0));
严谨模式:
function add(a,b){
'use strict'
return a+b;
}
console.log(add(1,2);
但注意参数不要有默认值,否则会报错
//传递参数的个数,length
function add(a,b){
return a+b;
}
console.log(add(add.length);
箭头函数:
var add =(a,b=1)=>a+b;
console.log(add(a));
ES6 中的函数和数组补漏
对象的函数解构json形式的对象:
let json={
a:'jspang',
b:'胖籽'
}
function fun({a,b="web"}){
console.log(a,b)
}
//对象的函数调用
fun(json);
结果:jspang 胖籽
数组的解构:
let arr=['jspang','jspamng','wowow'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr)
结果:jspang jspamng wowow
in 的用法:
对判断对象是否存在某个值
let obj ={
a:'技术胖',
b:'jspang',
}
console.log('c' in obj);
结果:false
对数组是否存在某个值:
let arr =[,,,];
console.log(arr.length);
结果:3
//数组的空位判断
let arr =['jspang',,,];
console.log(1 in arr);
结果:false
数组遍历的方法:
forEach遍历方法
let arr = ['js','jq','vue','react'];
arr.forEach((val,index)=>console.log(index,val));
结果:
0 'js'
1 'jq'
2 'vue'
3 'react'
filter遍历方法:
let arr = ['js','jq','vue','react'];
arr.filter(x =>console.log(x));
结果:
js
jq
vue
rect
some遍历方法
let arr = ['js','jq','vue','react'];
arr.some(x =>console.log(x));
结果:
js
jq
vue
rect
false
map遍历 方法:
let arr=['jspang','技术胖','前端视频'];
console.log(arr.map(x=>'web'));
console.log(arr55.toString());
结果:
['web','web','web']
jspang,技术胖,前端视频
转化的实例方法:
toString()
join()
例子:
let arry =['js','jq','angular'];
console.log(arry.join('|'));
结果:
js|jq|angular
ES6中的对象:
对象赋值
ES5:
let name = 'js';
let skill = 'jq';
let obj ={name:name,skill:skill};
console.log(obj);
结果:
{name:'js',skill:'jq'}
ES6:
let name = 'js';
let skill = 'jq';
let obj ={name,skill};
console.log(obj);
结果:
{name:'js',skill:'jq'}
key值得构建:
let key="skill";
var obj={
[key]:'web'
}
console.log(obj);
结果:
{skill:"web"}
自定义对象方法:
let obj={
add:function(a,b){
return a+b;
}
}
console.log(obj,add(1,2));
结果3
is()的方法:
let obj1={name:"js"};
let obj2={name:"js"};
console.log(obj1.name===obj2.name);
//注意Object一定要大写才是window自带的方法
console.log(Object.is(obj1.name,obj2.name))
结果:
true
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 a ={a:'js'};
let b ={b:'jq'};
let c ={c:'vue'};
let d =Object.assign(a,b,c);
console.log(d)
结果:
{a:"js",b:'jq',c:'vue'}
ES6 Symbol在对象中的作用
//数据类型:
let a =new String;
let b =new Number;
let c =new Boolean;
let d = new Array;
let e = new Object;
let f =Symbol()
console.log(typeof(f))//symbol
例子:
let js = Symbol("wo");
console.log(js);
console.lof(js.toString());
结果:
Symbol(wo)//类型
Symbol(wo)字符串
symbol在对象中的作用:
let js = Symbol();
let obj={
[js]:"wowo"
}
//注意在symgbol类型里面没有.这个用法,直接使用[]
console.log(obj[js]);
obj[js]='web';
console.log(obj[js]);
结果:
wowo
web
对对象元素的保护作用:
let obj ={name:'js',skill:'wb',age:18};
for(let item in obj){
console.log(obj[item]);
}
结果:
js
wb
18
//symbol的使用例子:
//没有显示symbol里面的年龄18
let obj ={name:'js',skill:'wb'};
let age =Symbol();
obj[age]=18;
console.log(obj);
for(let item in obj){
console.log(obj[item]);
}
结果:
js
wb
let obj ={name:'js',skill:'wb'};
let age =Symbol();
obj[age]=18;
console.log(obj);
for(let item in obj){
console.log(obj[item]);
}
//直接显示你想要的年龄18
console.log(obj[age]);
结果:
js
wb
18
ES6 Set 和 WeakSet数据结构
set 里面放的是数组,Set的数据结构是以数组的形式构建的,不是数组哦
Set 方法去重:
let setArr = new Set(['js','jq','web','js']);
console.log(setArr);
结果:
Set{'js','jq','web'}
Has 方法查找,返回false/true
let setArr = new Set(['js','jq','web','js']);
console.log(setArr.has('web'));
删除的方法:
let setArr = new Set(['js','jq','web','js']);
console.log(setArr.clear('web'));
结果:
Set{}
删除里面的某个值
let setArr = new Set(['js','jq','web','js']);
console.log(setArr.delete('jq'));
输出的方法(循环方法):
for...of
forEach
WeakSet:可以放入对象,但是里面的值是不允许重复的
let weakObj= new WeakSet();
let obj ={a:'js',b:'jq'};
//不能直接赋值要通过add进行赋值
weakObj.add(obj);
console.log(weakObj);
结果:
WeakSet {{…}}
注意:
let weakObj = new WeakSet();
let obj ={a:'js',b:'jq'};
let obj1 ={a:'js',b:'jq'};
weakobj.add(obj);
weakobj.add(obj1);
console.log(weakObj);
结果:
WeakSet {{…}, {…}}
ES6 map 数据结构:
map 数据类型使用广泛
使用map方法:
var json ={
name:'js',
age:'jq'
}
var map = new Map();
map.set(json,'iam')
console.log(map);
结果:
Map(1) {{…} => "iam"}
map 增删查
get/delete/clear(全部删除)/size(剩下个数)/has
ES6 proxy 代理 增强 对象和函数(方法)
生命周期,钩子函数、预处理
在执行方法之前做一些预处理
let pro = new Proxy({
add:function(val){
return val+100;
},
name:'I am Js'
},{
get:function(target,key,property){
console.log('come in Get');
return target[key];
},
set:function(target,key,value,receiver){
console.log(`setting ${key}=${value}`);
}
});
console.log(pro.name)
pro.name = '技术胖'
ES6 promise 对象的使用
promise es5 回调地狱
直接使用结构化的then
ES6 Class 类
Class Coder{
name(val){
console.log(val);
//需要返回值
return val;
}
//注意多方法时不需要逗号,直接往下打代码就好
skill(val){
console.log(this.name('技术胖'))
}
}
let js = new Coder;
js.name('胖籽');
结果:
胖籽
ES6 模块化操作
export可以让我们把变量、函数、对象进行模块化,提供外部调用接口,让外部进行引用
//export 输出 一个页面可以使用多个
export default 一个页面才有一个
//import 引入 需要{ }