欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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('哈哈哈');