ES6中数组的用法及代码实例
程序员文章站
2022-08-10 12:21:43
数组
//json数组格式
let json={
'0':'jspang',
'1':'jish...
数组
//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('哈哈哈');
上一篇: 笑段子集4个极度脑残瞬间
推荐阅读
-
Android Listview中显示不同的视图布局详解及实例代码
-
Vue中的组件及路由使用实例代码详解
-
iOS中UIActivityIndicatorView的用法及齿轮等待动画实例
-
Python中asyncore异步模块的用法及实现httpclient的实例
-
Python中asyncore异步模块的用法及实现httpclient的实例
-
iOS中UIActivityIndicatorView的用法及齿轮等待动画实例
-
Android中的Selector的用法详解及实例
-
JAVA中数组插入与删除指定元素的实例代码
-
vue.js中toast用法及使用toast弹框的实例代码
-
Android中的Selector的用法详解及实例