• ES6常用方法(字符串,数字,数组,对象)


    ES6常用方法

    1、字符串

    1、模版字符串

    反引号包裹 ``

        var name = '张三';
        var age = 18;
    
        function fn(arr, v1, v2) {
            console.log(arr); // ["他叫", ",今年", "岁了。", raw: Array(3)]
            console.log(v1); //张三
            console.log(v2); //18
        }
        fn `他叫${name},今年${age}岁了。` //标签模版字符串
    

    2、repeat()  重复

        var name = 'zs';
        var res = name.repeat(4)
        console.log(name)
        console.log(res)
    

      

    3、includes()  表示是否包含某一项,有就返回true 没有就返回false,同时支持第二个参数,代表从第几项开始查找(从索引值开始计算)

        var r = 'hello';
        console.log(r.includes('w'));
        console.log(r.includes('e'));
        console.log(r.includes('e',2));
    

      

    4、.startsWith() 表示是否是开始位置,同时支持第二个参数,代表从第几项开始查找(从索引值开始计算) 返回结果是true或者false

        var m = 'welcome';
        console.log(m.startsWith('l',2));
    

      

    5、endsWith() 表示是否是结束位置,同时支持第二个参数,针对前N个字符 返回结果是true或者false

        var m = 'welcome';
        console.log(m.endsWith('o',5));
    

      

    6.String.raw()  未加工  换行

        console.log('hellow
    world')
        console.log(String.raw`hellow
    world`)  
    

      

    2、数字的常用方法

     
        1、isNaN window 下判断,如果是一个数 返回false 否则返回true
        
       console.log(Number.isNaN("abc"));
        console.log(Number('abc'));//NaN
     //注意:number.isNaN 返回结果为false时,不一定代表该值一定时数字,字符串可以返回false

        2、isFinite() 判断一个值是否是无限的
        console.log(Number.isFinite(3));//true 有限的也是非无穷
        console.log(Number.isFinite(Infinity))//false 无穷的
        3、parseInt parseFloat 
        console.log(Number.parseInt("12.3abc"));
        console.log(Number.parseFloat("12.3df"));
    

      

      4、isInteger 函数判断是否是整数。是为true 否则false
        console.log(Number.isInteger(3));//true
        console.log(Number.isInteger(3.2));//false
    

       5、 Math.trunc函数:用于去除一个数的小数部分,返回整数部分。
       
     console.log(Math.trunc(3.1))//3
       6、Math.sign函数:用来判断一个数到底是正数、负数、还是零。
       
         console.log(Math.sign(3))//1
        console.log(Math.sign(-3))//-1
        console.log(Math.sign(0))//0
        console.log(Math.sign('aaa'))//NaN

      7、toFixed()保留几位小数
       
         var num = 111.22423;
        console.log(num.toFixed(2));//111.22
    

    3、数组的常用方法

     
        1、Array.of() 将任意一组值,转换成数组。
        var str = 'abcdef';
        console.log(Array.of(str));
      
          console.log(Array.of('abcdef'));
          console.log(Array.of('[18,20]', 's', 'b'));

      

     
       2、Array.from() 可以将类似数组的对象或者可遍历的对象转换成真正的数组。
        var btn = document.getElementsByTagName('button');
        console.log(btn instanceof Array);//false
        console.log(btn instanceof Object);//true
    
        console.log(Array.from(btn) instanceof Array);
        var res = Array.from(btn);
        console.log(res);
    

      


       3、find() 找出数组中符合条件的第一个元素 找不到返回undefined
     
        var arr = [1, 2, 3, 4, 5]
        console.log(arr.find(function (val) {
            return val > 2;
        }))
    

      


        4、 findIndex() 找出数组中符合条件的第一个元素位置(索引) 找不到返回-1

        console.log(arr.findIndex(function (val) {
            return val > 2;
        }))
    

     


       5、fill() 填充数组中的每一项或某一项
        fill(x) 用x填充数组的所有内容
        fill(x,y,z) x是填充内容,y是起始的索引值,z是结束的索引值,不包括该值
        var arr1 = [1, 2, 3, 4];
    
        var res = arr1.fill('a');
        console.log(res);
        var res1 = arr1.fill('b', 1, 3);
        console.log(res1);
    

      



        6、entries() 遍历器返回键值对 k:v
        for (let [i, v] of ['a', 'b'].entries()) {
            console.log(i, v);
        }
    

     

     
        7、keys 对数组的索引键进行遍历,返回一个遍历器
        for (let index of ['a', 'b'].keys) {
            console.log(index);
        }
    

      

        8、values()  对数组的元素进行遍历,返回一个遍历器。
        for (let value of ['a','b'].values()) {
            console.log(value1);
        }
    

      

      

    4、对象的常用方法

        1、ES6 对象写法的更新
        var student = {
            say:function(){
                console.log("说话")
            }
        }
        student.say();
        var student1 = {
            say(){
                console.log('说话')
            }
        }
        student1.say();
    

      


        2、自定义变量名的更新
        var f = "first";
        var n = "name";
        var s = "say";
        var h = "Hello";
    
        var person = {
            [f + n]: 'zhang',
            [s + h]() {
                return "你好吗?";
            }
        };
        console.log(person.firstname);
        console.log(person.sayHello());
    

      



        3、Object.is  作用是全等比较 ===
        var str = '12';
        var str2 = 12;
        var str3 = 12;
        console.log(str2 === str3);
        console.log(Object.is(str2, str3));
    

      


        4、Object.assign 函数 将源对象的属性赋值到目标对象上。(assign [əˈsaɪn] :分派、指派、委派)
        //目标对象
        var target = { "a": 1 };
        //源对象
        var origin = { "b": 2, "c": 3 };
        Object.assign(target, origin);
        console.log(target);//{a:1,b:2,c:3}
    

      


       5、Object.getPrototypeOf函数  作用:获取一个对象的prototype属性。
    function Person() {
    
        }
        Person.prototype = {
            name: 'zs',
            say() {
                console.log('我是old');
            }
        }
        let allen = new Person();
        allen.say();
        Object.getPrototypeOf(allen);//{name: 'zs',say() {console.log('我是old');}
    
    }

      


       6、Object.setPrototypeOf函数 作用:设置一个对象的prototype属性。

        Object.setPrototypeOf(
            allen, {
            say() { console.log('hi') }
        }
        )
        allen.say();//hi
    

      

  • 相关阅读:
    ant design vue模态框中下拉滚动样式分离解决方法
    vue+element处理前端分页
    vue中引入图片报Error: Can't resolve '../../assets/xx.png' in 'xxxx' 无法解析错误记录
    同页面多个echarts饼图组件封装
    后台报错"Optional int parameter 'page' is present but cannot be translated into a null value due to being declared as a primitive type"
    ant design vue中table动态合并列
    vuex数据持久化
    ant design vue中使用TreeSelect懒加载
    vue报错You are using the runtime-only build of Vue where the template compiler
    ant design vue中表格自带分页
  • 原文地址:https://www.cnblogs.com/wenaq/p/13592339.html
Copyright © 2020-2023  润新知