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

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

字符串扩展

	 //扩展
     //字符串扩展
    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)

数值扩展

	//数值扩展
    //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