ES6中数组的用法及代码实例

数组

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