关键词搜索

全站搜索×
密码登录在这里
×
注册会员

已有账号? 请点击

使用其他方式登录

es6对数组操作方法总结

发布2022-06-16浏览346次

详情内容

es6数组方法总结,es6对数组操作是非常方便的,当你掌握ES6操作数组方法后,对于处理数据是非常快的。

Set方法返回类数组对象( 伪数组) Set方法不允许有重复的值

   var arr = [1, 2, 1, 2, 3];
    let set = new Set(arr);
    console.log([...set]); // [1, 2, 3]
    console.log(set); //Set(3) {1, 2, 3} 类数组
    set.add(4) //添加一个
    console.log(set); //Set(4) {1, 2, 3, 4}多增加一个4
    console.log(set.has(5)); //判断是否有5  false
    // set.clear() 清空
    // set.delete(4) //删除
    console.log([...set]); // [1, 2, 3, 4] 数组形式
    //引用数据类型去重不起作用
    let arr = [{
      name: '张三'
    }, {
      name: '张三'
    }]

    let set = new Set(arr)
    console.log(set);


Map数据 key可以指定为对象也可以dom

<div id="div"></div>


 let obj = {

      name: '张三',

      age: 156

    }

    let el = document.getElementById('div')

    let map = new Map()

    console.log(map); //Map(0) {size: 0}

    map.set(obj, "aaa") //指定key为对象

    console.log(map); //Map(1) {{…} *=>* 'aaa'}

    map.set(el, 'div') //指定key为dom

    console.log(map); //Map(2) {{…} => 'aaa', div#div => 'div'}


Symbol是es6提供一种新的基础类型数据 他声明的是一个唯一的数据 Symbol不是一个构造函数 所以不能写new Symbol

//用Symbol声明一个唯一值等下往obj里面添加

let a = Symbol('a')

let s = Symbol('s')

// console.log(a == s);false

var obj = {}

obj[a] = "德玛西亚"

obj[s] = "诺克萨斯"

console.log(obj);

//{Symbol(a): '德玛西亚', Symbol(s): '诺克萨斯'}

obj.a = "德玛西亚"

obj.a = "诺克萨斯" //只填加一个 下覆盖上面的

console.log(obj); //{a: '诺克萨斯', Symbol(a): '德玛西亚', Symbol(s): '诺克萨斯'}


startsWith方法检测字符串中是否以某个片段开头 如果包含返回true 否则返回false

var str = 'hello world'

let bool = str.startsWith('h')

console.log(bool); //true


endsWith方法检测字符串中是否以某个片段结束 如果包含返回true 否则返回false

    var str = 'hello world'

    let bool = str.endsWith('world')

    console.log(bool); //true


repeat方法返回一个新字符串,表示将原字符串重复n次

   var str = 'hello'

    let str2 = str.repeat(2)

    console.log(str2); //hellohello


padStart将字符串从前面补全到某个长度 第一个参数是要补全到的长度 第二个是要用什么片段补全 返回值是补全后的字符串

   var str = 'abc'

    let str2 = str.padStart(5, 'ad')

    console.log(str2); //adabc


padEnd将字符串从后面补全到某个长度 第一个参数是要补全到的长度 第二个是要用什么片段补全 返回值是补全后的字符串

 var str = 'abc'

    let str2 = str.padEnd(5, 'de')

    console.log(str2); //abcde


.trim清除字符串前后的空格

 let str = '  德玛西亚  '

    console.log(str); //  德玛西亚  前后都有空格

    let str2 = str.trim()

    console.log(str2); //德玛西亚


trimStart清除字符串前面的空格

let str = '  德玛西亚'

    console.log(str); //  德玛西亚 前面有空格

    let str2 = str.trimStart()

    console.log(str2); //德玛西亚


trimEnd清除字符串后面的空格

 let str = '德玛西亚    '

    console.log(str); //德玛西亚  后面有空格

    let str2 = str.trimEnd()

    console.log(str2); //德玛西亚


matchAll()遍历指定的值,要使用正则/xxx/g,它返回一个迭代器,用for of遍历


 let str = "abcasa"
 
    let match = str.matchAll(/a/g)

    console.log(match); //Iterator 返回一个迭代器

    for (let a of match) {

      console.log(a);

    }

 /*

    使用for of 将包含'a'遍历出来

    ['a', index: 0, input: 'abcasa', groups: undefined]

    ['a', index: 3, input: 'abcasa', groups: undefined]

    ['a', index: 5, input: 'abcasa', groups: undefined] */


过滤替换字符

var str = '15305869472'

    let str2 = str.replace(/0586/g, '****')

    console.log(str2); //153****9472


  es6分页怎么切割数组和this指向问题

        1 es6 rest参数可以将剩余参数全部接受

        function fn(name, ...rest) {
            console.log(name); //张三
            console.log(rest); // [16, '男']
        }
        fn('张三', 16, "男")


2 对象属性添加和删除

let obj = {
            name: '张三',
            age: 15
        }
        delete obj.age; //在对象里删除一个
        obj.sex = '男' //给对象增加一个 如果对象里面没有就是添加,有就是赋值
        console.log(obj);


3 在使用了严格模式的作用域内使用不声明是不允许的

       'use strict'
        a = 2;
        console.log(a); //不写严格'use strict' 模式可以使用不声明,是全局变量在window上


4 name属性可以用来获取函数的名字

        function fn() {}
        console.log(fn.name); //fn

        function fn666() {}
        console.log(fn666.name); //fn666


5 this的指向问题

         function fn() {
           console.log(this); //普通函数this指向window
        }
         fn()


5.1 箭头函数的this永远指向箭头函数声明时所在的对象

       let obj = {
            info: {
                name: '张三',
                fn() {
           //this指向调用函数的对象 谁调用的fn() //是info 打印出来里面有name fn()
                    console.log(this); 
                    // setTimeout(function() {
                    //     console.log(this); //不使用箭头函数 function 指向window
                    //     obj.name = '李四'
                    //     console.log(this); //function 指向window
                    // }, 1000)
          //箭头函数的this永远指向箭头函数声明时所在的对象 //是info 
                    setTimeout(() => { 
                        console.log(this);
                        obj.name = '李四'
                        console.log(this);
                    }, 1000)
                }
            }
        }
        obj.info.fn() //指向调用函数的对象 //info 里面有name fn()


 6 切割数组 //splice 会改变原数据  // slice 不会改变原数组

let list = [{
            "uid": 1539789,
            "mobile": "18761800011",
            "avatar": "https:\/\/baijiayun-wangxiao.oss-cn-beijing.aliyuncs.com\/uploads\/avatar.jpg",
            "nickname": "121z",
            "status": 1,
            "created_at": "1592223461",
            "updated_at": "1592224051"
        }, {
            "uid": 1539786,
            "mobile": "18761800012",
            "avatar": "https:\/\/baijiayun-wangxiao.oss-cn-beijing.aliyuncs.com\/uploads\/avatar.jpg",
            "nickname": "121",
            "status": 1,
            "created_at": "1592223031",
            "updated_at": "1592224058"
        }, {
            "uid": 1539785,
            "mobile": "16598745622",
            "avatar": "https:\/\/baijiayun-wangxiao.oss-cn-beijing.aliyuncs.com\/uploads\/avatar.jpg",
            "nickname": "\u5565\u4e8b",
            "status": 1,
            "created_at": "1592222732",
            "updated_at": "1592224082"
        }, {
            "uid": 1539784,
            "mobile": "18761800000",
            "avatar": "https:\/\/baijiayun-wangxiao.oss-cn-beijing.aliyuncs.com\/uploads\/avatar.jpg",
            "nickname": "\u5f20\u4e09\u75af",
            "status": 1,
            "created_at": "1592222732",
            "updated_at": "0"
        }, {
            "uid": 1539768,
            "mobile": "18435790000",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/FbVbPSmw9yKm5rhn8OUx3Av2HLlFuUFCzNWZD3WB.png",
            "nickname": "pipi",
            "status": 1,
            "created_at": "1592215722",
            "updated_at": "1592223738"
        }, {
            "uid": 1539767,
            "mobile": "13233333333",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/avatar.jpg",
            "nickname": "123",
            "status": 0,
            "created_at": "1592215623",
            "updated_at": "1592223746"
        }, {
            "uid": 1539766,
            "mobile": "12345678901",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/avatar.jpg",
            "nickname": "123323",
            "status": 1,
            "created_at": "1592215568",
            "updated_at": "1592219482"
        }, {
            "uid": 1539765,
            "mobile": "11781781231",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/avatar.jpg",
            "nickname": "hia",
            "status": 0,
            "created_at": "1592215567",
            "updated_at": "1592223751"
        }, {
            "uid": 1539764,
            "mobile": "13698545698",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/jDRI8OIeqtcKcwtx37re4NC2or4ARGNXcticUiq6.png",
            "nickname": "212",
            "status": 1,
            "created_at": "1592215546",
            "updated_at": "1592217842"
        }, {
            "uid": 1539763,
            "mobile": "13526978456",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/XdQsU85SZCnakZBaJn0TjC5DFS87dPzFUj3JohL2.png",
            "nickname": "1212",
            "status": 1,
            "created_at": "1592215422",
            "updated_at": "1592215422"
        }, {
            "uid": 1539754,
            "mobile": "15697856212",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/EuMTfekVXYCkFp1gIwsvgMYX3Uj9sZsnwwRZNnOj.png",
            "nickname": "121333",
            "status": 0,
            "created_at": "1592212853",
            "updated_at": "1592213495"
        }, {
            "uid": 1539753,
            "mobile": "18888888888",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/PbaW7AwkOQV8OQrGR6Wa6lkv8vbdPxaJ3BGOSQ5I.jpeg",
            "nickname": "ZhuZhuXia",
            "status": 0,
            "created_at": "1592212196",
            "updated_at": "1592215708"
        }, {
            "uid": 1539751,
            "mobile": "16455895622",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/BcAZREdBiudJa5yP3qBf4fb7qA9LAcCk0AmvGgWn.png",
            "nickname": "sgdhs",
            "status": 0,
            "created_at": "1592211471",
            "updated_at": "1592211856"
        }, {
            "uid": 1539749,
            "mobile": "16854695765",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/avatar.jpg",
            "nickname": "qwqw",
            "status": 1,
            "created_at": "1592211134",
            "updated_at": "1592211134"
        }, {
            "uid": 1539747,
            "mobile": "13556544589",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/avatar.jpg",
            "nickname": "dhs",
            "status": 1,
            "created_at": "1592210639",
            "updated_at": "1592210639"
        }, {
            "uid": 1539745,
            "mobile": "13592659843",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/SYFiU4ynHjnph2mO70TU47LiDs5l8rRqHmZBG292.png",
            "nickname": "\u5b59\u6684\u660e",
            "status": 1,
            "created_at": "1592203037",
            "updated_at": "1592209832"
        }, {
            "uid": 1539744,
            "mobile": "18555555555",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/qPLUfwlDqSExyFcZmP3cnQQKW8xMUN0kcND10n5n.png",
            "nickname": "???",
            "status": 0,
            "created_at": "1592201979",
            "updated_at": "1592207529"
        }, {
            "uid": 1539743,
            "mobile": "13786456732",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/Llt2dKz9hIhoTPtfSY863QEvk3dYnll4UlfOxSFc.png",
            "nickname": "\u6f02\u4eae\u56fd",
            "status": 0,
            "created_at": "1592201929",
            "updated_at": "1592204762"
        }, {
            "uid": 1539742,
            "mobile": "16532488596",
            "avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/YHsyO4j0a8bXtfVWD5DsgeeXcUlKfTeNULzD0X2F.png",
            "nickname": "lop",
            "status": 0,
            "created_at": "1592200528",
            "updated_at": "1592223701"
        }]


 function subList(pageNum = 0, pagesize = 10) {
             // 1 splice会改变原数据 用法(从下标位置开始删,删除几个),
             //这里是删除10条,总数据就剩9条了,list一共是19条数据
            // return list.splice(pageNum, pagesize)

            // 2  slice 不会改变原数组 就单纯截取数组用 用法(从下标哪里开始截取,截取几个)
            return list.slice(pageNum, pagesize)
        }
        // let s = subList(); //这里实参可以传参,假如不传参,按照形参的默认值0-10
        // console.log(s); //10条
        // console.log(list); // 还是总数19条

        // -----------------------------------

        let s = subList(0, 5); //这里实参可以传参
        console.log(s); //5条
        console.log(list); // 还是总数19条


 Array.from

1  Array.from 是一个可以将类数组对象转化为真正的数组的方法

 <ul>
   <li></li>
   <li></li>
   <li></li>
  <li></li>
 </ul>


    // 1  Array.from 是一个可以将类数组对象转化为真正的数组的方法
        let list = document.getElementsByTagName("li"); //得到的是HTMLCollection合集伪数组
        console.log(list); //得到类数组,不可用数组方法 比如forEach循环会报错
        list.forEach((item) => {
            return console.log(item);//报错,因为是一个伪数组
        })
        console.log(list); //得到类数组,不可用数组方法 比如forEach循环会报错

        list = Array.from(list) //将类数组转化为真正的数组
        list.forEach(item => {
         console.log(item); //转化后我可以使用数组循环方法
        })


 2 使用es6的new Set()方法,得到的也是类数组,可以用Array.from()将其转化为真正的数组

        var arr = [1, 2, 1, 3, 2];
        console.log(new Set(arr[2])); //报错 不可以使用数组方法
        let setResult = Array.from(new Set(arr))
        console.log(setResult[2]); //3


3 自定义的数组也可以转化成真正的数组

      let obj = {
            0: 1,
            1: 2,
            2: 3,
            length: 3
        }
        let arr = Array.from(obj)
        console.log(arr);


 4 Array.of用来解决使用Array声明数组时 ,如果括号里参数只有一个,返回的是数组空数组长度,

  用Array.of声明数组,参数只有一个不会是空数组的长度个数

          //第1种声明数组方式        
           let arr = [1, 2, 3]; 

        //第2种声明数组方式,使用Array声明数组时 ,如果括号里参数只有一个,那么就表示数组空数组长度
           let arr1 = Array(1, 2, 3) 
           //例如:
          // let arr = Array(3)
         // console.log(arr); //[empty × 3]

       //第3种声明数组方式
           let arr2 = new Array(1, 2, 3) 
           
    
        //使用Array.of声明数组,参数只有一个不会是空数组的长度个数,这就是和Array的区别
        // let arr = Array.of(3); 
        // console.log(arr); //[3]


5 find方法能够找到第一个满足条件的数组数据 并返回这个数据,找不到返回undefined

        let arr = [1, 2, 3, 3]
        let a = arr.find((item, index, ar) => {
        return item > 2
        })
        console.log(a); //3


 5.1 找到元素返回下标,找不到返回-1

       let a = arr.findIndex((item, index, ar) => {
            return item > 1
        })
        console.log(a);


 5.2 fill填充替换数组 语法:(填充的值,从下标哪里开始,到下标哪里结束)

        let arr = ['a', 'b', 'c']
        arr.fill(7, 0, 2) //填充7,从0下标开始,到下标2接受,所以返回是77c
        console.log(arr);// 7 7 "c"


5.3 keys方法以数组的形式返回对象的所有的key

  var obj = {
            name: '张三',
            age: 16,
            sex: '男'
        }
        console.log(Object.entries(obj)) //打印key和value
        console.log(Object.keys(obj)); //['name', 'age', 'sex']
        console.log(Object.values(obj)) //['张三', 16, '男']


6 Math.trunc //返回数字的整数部分和parseInt的区别一个是es6的数组方法一个是js的

        let num = 12.123
        let num2 = Math.trunc(num)
        console.log(num2); //12
        console.log(parseInt(99.336));//99


7  sign方法 如果参数是正数则返回1 如果是负数则返回-1 如果参数是0返回值也是0 如果是-0返回值也是-0

        //如果参数不是数字 就会返回NaN 非数字的意思 not a number

        console.log(Math.sign(9)); //1
        console.log(Math.sign(-5)); //-1
        console.log(Math.sign(0)); //0
        console.log(Math.sign(-0)); //-0
        console.log(Math.sign('好好学es6')); //NaN


8 Ts编译的时候就会提示语法错误,不需要向js一样运行起来才知道错误,ts将数据类型定义好,如果和"="后面不一样就会报错

//前面的bool是变量:后面是类型  = 如果等号后面的和定义的类型不同代码直接报错,
let bool:boolean = false
//定义的类型和等号类型不一样就,代码就爆红
let str:string = '' 
let num:Number = 2



点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
  • 支付宝付款
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载