核心提示：数组//json数组格式let json={0:jspang,1:jishu,2:技术胖,length:3//json的数组格式必须由length}let arr=Array.form(json);c...
数组
//json数组格式
let json={
'0':'jspang',
'1':'jishu',
'2':'技术胖',
length:3//json的数组格式必须由length
}
let arr=Array.form(json);
console.log(arr);//['jspang','jishu','技术胖']
//array.of方法
let arr2=Array.of('12','23');
console.log(arr2);
//find()实例方法
//value 当前查找的值 index查找值的索引 arr 返回第一个符合条件的值 如果没有找到 则返回undefined
let arr3=[1,2,3,4,5,6,7,8,9];
console.log(arr3.find(function(value,index,arr){
return value>10;
}))
let arr4=['jspang','几十欧','lll'];
console.log(arr4.find(function(value,index,arr){
return value=='几十欧';//true
}))
//fill()实例方法 替换数组中的元素
let arr5=['jspang','十只狼','123'];
arr5.fill('web',1,2);//三个参数 第一个标识替换内容，第二个为替换的起始位置，第三个为替换的结束位置
console.log(arr5);
//数组循环for...of
for(let [index,val] of arr5.entries()){
console.log(index+':'+val);
}
//entries()实例方法
let arr6=['1','2','3'];
let list=arr6.entries();//ArrayIterator
console.log(list.next().value);//ArrayIterator适合手动输出
console.log('---------------');
console.log(list.next().value);
console.log('**********');
console.log(list.next().value);
function add(a,b=1){
return a+b;
}
console.log(add.length); //1 add.length是必须传递的参数，也就是除过默认参数的所有参数
//严谨模式'use strict'可以写在函数体内
//箭头函数
var add1=(a,b=1) => a+b;
console.log(add1(1));
var add2=(a,b) => {
console.log('jspang');
return a+b;//当返回的值需要分行写的时候，需要加上return以及花括号
}
console.log(add2(1,4));
//对象的函数解构 json形式的对象
let json={
a:'jspang',
b:'abc'
}
function fun({a,b='web'}){
console.log(a,b);
}
fun(json);//jspang,abc
//数组的函数解构
let arr=['abc','jspang','前端'];
function fun1(a,b,c){
console.log(a,b,c);
}
fun1(...arr);
//in 的用法 判断对象和数组中是否存在某个值
let obj={
a:'abc',
b:'jspang'
}
console.log('a' in obj);//true
console.log('c' in obj);//false
let arr7=['abc',,,];
console.log(0 in arr7);//true
console.log(1 in arr7);//false
//遍历数组的方法
//一 forEach
let arr8=['abc','jspang','哈哈'];
arr8.forEach((val,index)=>console.log(index,val));
//二 filter
let arr9=['abc','jspang','哈哈'];
arr9.filter(x=>console.log(x));
//三 some
let arr10=['abc','jspang','哈哈'];
arr10.some(x=>console.log(x));
//四 map
let arr11=['abc','jspang','哈哈'];
console.log(arr11.map(x=>'web'));
//数组转换为字符串
console.log(arr11.toString());
console.log(arr11.join('|'));
//对象的赋值
let name='jspang';
let skill='web';
let obj={name,skill};
console.log(obj);
//使用key值构建对象
let key="hill";
var obj1={
[key]:'web'
}
console.log(obj1);//hill:web
//自定义对象方法
let obj2={
add:function(a,b){
return a+b;
}
}
console.log(obj2.add(1,2));//3
//object 对象新特性
// is()对两个对象进行比较 ===同值相等，is严格相等
let ob1={name:'jspang'};
let ob2={name:'jspang'};
console.log(ob1.name===ob2.name);//true
console.log(Object.is(ob1.name,ob2.name));//true
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:'jspang'};
let b={b:'lll'};
let c={c:'ll来了'};
let d=Object.assign(a,b,c);
console.log(d);
//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 jspang=Symbol('技术胖');
console.log(jspang);//红色表示是symbol类型
console.log(jspang.toString());//黑色表示是字符串
//symbol在对象中的应用，更多是在node.js中使用
//用于构建对象的key
let jsp=Symbol();
let obje={
[jsp]:'技术胖'
}
console.log(obje[jsp]);
obje[jsp]='wen';
console.log(obje[jsp]);
let obj3={name:'abc',skill:'web',age:18};
for(let item in obj3){
console.log(obj3[item]);//abc web 18
}
//如果想有一个对象属性不输出则使用symnol
let obj4={name:'abc',skill:'web'};
let age=Symbol();
obj4[age]=18;
console.log(obj4);//{name:'abc',skill:'web',Symbol():18}
for(let item in obj4){
console.log(obj4[item]);//abc web
}
//若想要输出
console.log(obj4[age]);//18
//Set 数据结构 去重 不能输出相同的元素 尽管有相同的也不算数
let setArr=new Set(['jspang','abc','web']);//里面放数组
console.log(setArr);//{'jspang','abc','web'}
setArr.add('hh');//追加 不允许重复的值
setArr.delete('abc');
console.log(setArr.has('xiao'));//查找 false
console.log(setArr);
//全部删除
setArr.clear();
console.log(setArr);
//循环输出 for...of
let setAr=new Set(['jspang','abc','web']);
for(let item of setAr){
console.log(item);
}
//forEach
setAr.forEach((value)=>console.log(value));
//用size属性查看有几个属性
console.log(setAr.size);
//WeakSet 里面只能放对象
//let weakObj=new WeakSet({a:'jspang',b:'abc'})不能实现
let weakObj=new WeakSet();
let objj={a:'jspang',b:'abc'};
let objk={a:'jspang',b:'abc'};
weakObj.add(objj);
weakObj.add(objk);
console.log(weakObj);
//两个都可以打印出来 尽管内容相同 但是所在的内存空间不同
Map
//map数据结构
let json={
name:'abc',
skill:'web'
};
console.log(json.name);//会遍历所有元素
//key => value 都可以是任意类型
var map=new Map();
map.set(json,'iam');//赋值用set
console.log(map);
map.set('jspang',json);
console.log(map);
//map的增 删 查 都是以key值为标准的
console.log(map.get(json));//取值用get 取的是value值
console.log(map.get('jspang'));
//delete 删除特定的值
map.delete(json);
console.log(map);
//全部删除map.clear()
console.log(map.size);
//查找 has 返回true false
console.log(map.has('jspang'));
//set get has delete clear size
Proxy
//Proxy 代理 在ES6中增强对象和方法 预处理 在真正的方法执行之前进行的函数
//get set apply 前两个用于对象 最后一个用于方法
let obj={
add:function(val){
return val+100;
},
name:'i am jsp'
}
let pro=new Proxy({
add:function(val){
return val+100;
},
name:'i am jsp'
},{
//get 在获取属性时进入 三个参数 第三个可以省略
get:function(target,key,property){
console.log('come in get');
console.log(target);//{add:f,name:'i am jsp'}
console.log(key);//name
return target[key];//'i am jsp'
},
//set 要改变属性值时所进行的预处理 四个参数
set:function(target,key,value,receiver){
console.log(target);//{add:f,name:'i am jsp'}
console.log(receiver);//Proxy {add: ?, name: "i am jsp"}
console.log(`setting ${key} =${value}`);//setting name =hello
// return target[key]=value;
}
})
console.log(pro.name);
pro.name='hello';
console.log(pro.name);//'i am jsp'坑 要真的改变 必须在预处理机制中进行return
//apply 直接（）没有function 三个参数 target ctx args
let target=function(){
return 'i am happy';
}
let handler={
apply(target,ctx,args){
console.log('do apply');
return Reflect.apply(...arguments);//记住
}
}
let pro2=new Proxy(target,handler);
console.log(pro2());
promise
//Promise es5 回调地狱
let state=1;
function step1(resolve,reject){
console.log('1.开始');
if(state==1){
resolve('1已经完成');
}else{
reject('1出错');
}
}
function step2(resolve,reject){
console.log('2.开始');
if(state==1){
resolve('2已经完成');
}else{
reject('2出错');
}
}
function step3(resolve,reject){
console.log('3.开始');
if(state==1){
resolve('3已经完成');
}else{
reject('3出错');
}
}
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);
})
//实现注册
Class
// class
class Coder{//声明
name(val){//val是类里面函数的参数
console.log(val);
return val;//必须要有返回值
}//坑 不能加逗号
skill(val){
console.log(this.name('jspang')+':'+'skill:'+val);
}//this调用类里的其他函数 this指coder
constructor(a,b){//类的参数设置
this.a=a;
this.b=b;
}
add(){
return this.a+this.b;
}
}
let jspang=new Coder(1,2);//实例化
jspang.skill('web');
console.log(jspang.add());
//类的继承
class htmler extends Coder{
}
let pang=new htmler;
pang.name('哈哈哈');
