ES6基础3（扩展）-学习笔记

分手后的思念是犯贱 2022-10-19 04:15 173阅读 0赞

### 文章目录 ###

*   *  ES6基础3（扩展）-学习笔记
     *   *  字符串扩展
         *  数值扩展
         *  函数扩展
         *  扩展运算符

## ES6基础3（扩展）-学习笔记 ##

### 字符串扩展 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

//扩展
         //字符串扩展
        charAt();       //返回指定索引位置的字符 
        //var str = "hello world"; str.charAt(2) //l
        indexOf();    //返回字符串中检索指定字符第一次出现的位置 
        //var str = "hello world"; str.indexOf('o') //l
        lastIndexOf();//返回字符串中检索指定字符最后一次出现的位置 
        slice()           // 提取字符串的片断，并在新的字符串中返回被提取的部分 
        //var str = "hello world"; str.slice(2,6) //"llo "
        split()          //把字符串分割为子字符串数组 
        //var str = "hello world"; str.split('')
        toLowerCase()// 把字符串转换为小写
        toUpperCase() //把字符串转换为大写 
        substr(start,length)         // 从起始索引号提取字符串中指定数目的字符
        //var str = "hello world"; str.substr(1,4)
        substring(start,stop)    //提取字符串中两个指定的索引号之间的字符
    
        //es6
        includes()  //返回布尔值，表示是否找到了参数字符串。
        //var str = "hello world"; if(str.includes('h'))
    
        //数据匹配查询---模糊匹配
        var arr = ['abcde','red','blue','orange','dfag','agabeiy']; //列表数据
        var a = 'e';  //输入的值
        var f = arr.filter(function(item){ 
            //return item.indexOf(a) !=-1; //==-1不匹配 !=-1 匹配
            return item.includes(a);
        });
        console.log(f);
    
        startsWith()  //返回布尔值，表示参数字符串是否在原字符串的头部。 区分 大小写
        //var str = "hello world"; str.startsWith('h')
        //var str = "hello world"; str.startsWith('h',3) //3表示位置
        endsWith()  //返回布尔值，表示参数字符串是否在原字符串的尾部
        repeat()  //返回一个新字符串,表示将原字符串重复n次。
        'x'.repeat(3); //'xxx' repeat(n) n重复的次数
        padStart()  //用于头部补全
        'x'.padStart(4,'ab')  // 'x'.padStart(指定长度,补全的内容) 
        padEnd()  //用于尾部补全。
        'x'.padEnd(4,'ab')  // 'x'.padStart(指定长度,补全的内容) 
    
    
        //指数运算符（**)
        2**2 //4
        2**3 //8
    
        var a = 3;
        a**=3;  //a=a*a*a a**=2 ==>a=a*a
        console.log(a)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]

### 数值扩展 ###

//数值扩展
        //ES5
        parseInt('10.05');
        parseFloat('10.05');
        //es6
        Number.parseInt('10.05');
        Number.parseFloat('10.05');
    
        //Number.isInteger()用来判断一个数值是否为整数。
        //25 25.1
        Number.isInteger(25)  //true
        Number.isInteger(25.0)  //true
        Number.isInteger(25.1)  //false
    
        Number.isInteger('10')  //false
        Number.isInteger(null)  //false
        Number.isInteger(true)  //false
        Number.isInteger()  //false
    
        //Math对象
        Math.round(3.6);  //四舍五入 4
        Math.ceil(3.1);  //向上 =4
        Math.floor(3.9);  //向下 3
    
        //Math.trunc() 用于去除一个数的小数部分，返回整数部分。
        Math.trunc(3.1)  // 3
        Math.trunc('3.9')    //3
        Math.trunc(-3.9)    //-3
    
        //Math.sign()方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。
        //会返回五种值：
        //1 参数为正数 返回+1
        //2 参数为负数 返回-1
        //3 参数为0 返回0
        //4 参数为-0 返回-0
        //5 参数为其它值 是非数值 会自动转为数值，无法转换 会返回NAN
        Math.sign(10)
        Math.sign(-10)
        Math.sign(0)
        Math.sign(-0)
        Math.sign('10')
        Math.sign(true)
        Math.sign(false)
        Math.sign('abc')

### 函数扩展 ###

//函数扩展
        //ES5
        function fun(x,y){ 
            y = y || 10;
            console.log(x,y);
        };
        fun(100);
    
        ES6
        function fun(x,y=10){ 
            console.log(x,y);
        };
        fun(100);
    
        //rest参数 表现形式(...变量名) arguments对象
        //rest参数和arguments对象的区别：arguments对象并不是一个数组，无法使用数组中的方法和属性，rest参数是一个数组
        function fun(){ 
            console.log(arguments[2])   //{}
        }
        fun(1,2,3,4,2,3,5,2,6,234,3);
        //es6
        function fun(...value){ 
            console.log(value)   
        }
        fun(1,2,3,4,2,3,5,2,6,234,3);
    
        //对比
        function fun(x,y,...value){ 
            value.push(10);
            console.log(value)   
        }
        fun(1,2,3,5,7,9);
    
        //箭头函数
        var f = v => v;    //函数名 =参数 => 函数体
        var f = function(v) { 
            return v;
        };
        //参数为空
        var f =() => 123;
        //多个参数
        var f = (a,b) =>a+b;
        //返回的是一个对象
        var f = function(v) { 
            return { id:1,name:v}
        };
        var f = v => ({ id:1,name:v});
        f('abc');
    
        //传默认值
        var f = (x,y=10)=>{ 
            console.log(x,y);
        };
        f(100);
    
        //解构
        var f = ({ x=0,y=0}={ })=> [x,y];
        f({ x:10,y:8});
    
        //箭头函数 注意点！！！
        //1、箭头函数不能当作构造函数，不可以使用new命令 
        var Fun = ()=>{ 
            this.name = 'a';
        };
        var f1 = new Fun();  //Fun is not a constructor
    
        //2、箭头函数没有原型属性
        //每一个函数对象都有prototype属性，普通对象没有，prototype里面有一个constructor,指向这个函数；
        function a(){ }
        a.prototype; // constructor: ƒ a()
        //es6
        var a2 = ()=>{ }
        a2.prototype;
    
        //3、不可以使用arguments对象，该对象在函数体内不存在 替代 rest参数
        var fun = ()=>{ 
            console.log(arguments[2])   //{}
        }
        fun(1,2,3,4,2,3,5,2,6,234,3); //arguments is not defined
    
        //es6
        var fun = (x,y,...value)=>{ 
            value.push(10);
            console.log(value)   
        }
        fun(1,2,3,5,7,9);
    
        //4、this指向 定义时所在的对象 并不是调用者 this指向外层调用者
        var name = 'abc';
        var obj = { 
            name:'xyz',
            f:function(){ 
                console.log(this.name)  //this = obj
            },
            f2:()=>{ 
                console.log(this.name)    //this = window
            },
            f3:function(){ 
                var f4 = ()=>{ console.log(this) }  //this = obj
                return f4();
            }
        };
        obj.f();
        obj.f2();    //window.obj.f2() f2函数是在obj对象中，而obj是全局的 ，f2固定在全局了
    
        //定时器 this
        function Fun(){ 
           // this.name = 'abc';
            setTimeout(function(){ 
                console.log(this)   //this = window
            },2000)
        };
        var f = new Fun();
    
        function Fun(){ 
            // this.name = 'abc';
             setTimeout(()=>{ 
                 console.log(this)   //this = Fun()
             },2000)
         };
         var f = new Fun();
    
    
         //作用域
         var x = 1;
         function f(x,y = x) { 
             console.log(y)
         };
         f(10);  //10
    
         var x = 1;
         function f(y = x) { 
             let x = 20;
             console.log(y)
         };
         f();  //1
    
         function f(y = x) { 
             let x = 20;
             console.log(y)
         };
         f();   //x is not defined

### 扩展运算符 ###

//扩展运算符 ... 将一个数组对象转为用逗号分参数序列
         //数组合并
         //es5
         var a1 = [1,2,3];   //1,2,3
         var a2 = [4,5,6];
         a1 = a1.concat(a2);  //a1.push(...a2)
         console.log(a1);
         //es6
         a1 = [...a1,...a2,...[7,8],9];
         a1.push(...a2);
        //[1,2,3,4,5,6,7,8,9]
    
        //深拷贝 浅拷贝
        var a3 = [1,2,3];
        var a4 = [...a3];
        a4[1] = 10;
        console.log(a3);  //[1,2,3];
    
        var a3 = [1,{ id:2},3];
        var a4 = [...a3];
        a4[1].id = 10;
        console.log(a3);  // 浅拷贝 [1,{id:10},3];
    
        //扩展运算与rest的结合
        function add(x,y){ 
            return x+y
        };
        var n = [10,20];
        add(...n);
        //rest
        function add2(...rest){ 
            return rest
        };
        add2(...n);
    
        //demo
        var arr = [1,2];
        function f(...item){   //rest参数
            console.log(item);   //[0 1 2 3 4 5]
            console.log(...item); // 0 1 2 3 4 5 扩展运算符
        };
        f(0,...arr,3,4,...[5])   //扩展运算符
    
        //扩展运算符与解构结合
        var [a,...b] = [1,2,3,4,5];
    
        var [a,...b] = [];
    
        var [a,...b] = ['a'];
    
        //注意 产生错误 只能放在参数的最后一位，否则报错
        var [...a,b] = [1,2,3,4,5];  //error
    
        var [a,...b,c] = [1,2,3,4,5]; //error

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/a4b7612bc7b24ffbafdcbe1e56e5b701.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/98f2efaadd28440fb46bf53172f70fa1.png