zoukankan      html  css  js  c++  java
  • es6的新增方法和es5数组的一些方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            // 大多数情况下,es5的数组方法接受的第一个参数为一个函数,并且对数组的每个元素调用一次该函数。
            // 该函数有三个参数:数组元素,元素的索引和数组本身。
            // 如果有第二个参数,则第一个参数中的this指向第二个参数。
    
            var arr= [1,2,3,4,5];
            var result;
            //forEach()=============================
            //从头到尾遍历数组,为每个元素调用指定的函数。
            //返回值:undefined 无
            //原数组不改变
            //计算和
            // var sum =0;
            // arr.forEach(function(val,index,a){
            //     sum+=val;
            //     console.log(val,index,a)
            // })
            // console.log(sum,arr);
                
            // //每个数组元素值+1
            // result=arr.forEach(function(val,i){
            //     arr[i]=val+1;
            //     // break;  //直接break会报错,forEach中没法终止遍历
            // })
            // console.log(arr);
            // console.log(result);  //undefined 
    
            //map()======================================
            //将调用的数组的每个元素传递给指定的函数,并返回一个数组,它包含该函数的返回值
            //原数组不改变,而会返回一个新数组
            // result = arr.map(function(x){
            //     return x*x;   //一定要有return,否则返回undefined
            // })
            // console.log(result,arr);
    
            //filter()====================================
            //filter方法返回的数组元素是调用的数组的一个子集。传递的函数是用来逻辑判定的。该函数返回true或false。
            //原数组不改变
            // var result1 = arr.filter(function(v,i,a){
            //     return v>3;
            // })   // [4, 5]
            // console.log(result1)
            // var result2= arr.filter(function(v){
            //     return v%2;
            // })   //[1, 3, 5]
            // console.log(arr,result2);
    
            // // filter方法可以把稀疏数组中的空元素筛出去
            // var result3 = arr.filter(function(v){
            //     return v!=undefined &&v!=null;
            // });
            // console.log(arr,result3);
    
            // every()和some()============================
            //every和some是数组的逻辑判定:他们对数组元素应用指定的函数进行判定,返回true或false
            // every()方法就像数学中的“针对所有”的量词:当且仅当针对数组中的所有元素调用判定函数都返回true,它才返回true
            // result = arr.every(function(x){
            //     return x<10;
            // })
            // console.log(result);
            // result = arr.every(function(x){
            //     return x%2===0;
            // })
            // console.log(result);
            // some()方法就像数学中的“存在”的量词:当数组中至少有一个元素调用判定函数返回true,它就返回true,并且当且仅当数值中的所有元素调用判定函数都返回false,它才返回false
            // result = arr.some(function(v){
            //     return v%2===0;
            // })
            // console.log(result);
    
            //一旦every()和some()确认该返回什么值他们就会停止遍历数组元素
            // some在判定第一个元素返回true就停止遍历返回true,否则遍历整个数组直到遇到true
            // every在判定第一个元素返回false就停止遍历,否知就一直遍历直到遇到false为止
    
            //reduce()和reduceRight()=====================
            //reduce()和reduceReight()方法使用指定的函数将数组元素进行组合,生成单个值。这在函数式编程中是常见的操作,也可以称为“注入”和“折叠”
            //返回值为化简函数最后一次返回的结果
            //数组求积
            // var product = arr.reduce(function(x,y,z,a){
            //     console.log(x,y,z,a);
            //     return x*y;
            // })  
            // console.log(product);
            // //数组求和
            // var sum = arr.reduce(function(x,y,z,a){
            //     console.log(x,y,z,a);
            //     return x+y;
            // });
            // console.log(sum);
            // //数组求最大值
            // var max = arr.reduce(function(x,y){
            //     return x>y?x:y;
            // })
            // console.log(max);
            // reduce()需要两个参数。第一个是执行化简操作的函数。化简函数的任务就是用某种方法把两个值组合或化简为一个值,并返回化简后的值。
            //化简函数function(初始值或者上一次化简函数的返回值,数组元素,元素的索引,数组本身)
            // 第二个参数是一个传递给函数的初始值,当不指定初始值时,他将数组元素的第一个值作为其初始值
    
            // reduceRight()=====================
            // reduceRight()的工作原理和reduce()一样,不同的是它按照数组索引从高到低(从右到左)处理数组。
            // var product = arr.reduceRight(function(x,y,z,a){
            //     console.log(x,y,z,a);
            //     return x*y;
            // },1)  
            // console.log(product);
           
            
    
            //indexOf()和lastIndexOf()=====================
        </script>
    </body>
    </html>
    1.let 
    块作用域
    const
    常量,不能二次赋值
    
    2.箭头函数
    (参数)=>{逻辑代码}
    
    参数为1时
    参数=>{}
    
    参数不为一时
    ()=>{}
    
    返回值为值类型
    ()=>1
    返回值为对象时
    ()=>({a:a})
    其他情况
    ()=>{}
    
    箭头函数中的this跟包裹他的代码共享this,通常用在回调函数中
    setTimeout(()={},1000)
    
    3.增强的对象字面量
    var o={ 
        __proto__:parent,   //继承
        name,            //属性简写
        fun(){            //方法简写
            super.fun();     //调用父级对象上的方法
        },
        ["prpp"+(()=>10)]:110    //动态属性
    }
    
    
    4.类
    class extends constructor super static
    
    class 类名{
          constructor(构造函数的参数){
        this.属性名=“”
    
        
        }
        //公有方法
        fun(参数){
            //逻辑代码
            return 
        }
        //静态方法的定义
        static fun(){}
    
    }
    
    var a = new 类名();
    静态方法的调用
    类名.方法名();
    
    子类
    
    class 子类 extends 父类,父类{
        constructor(){
            super();   //继承父类上的属性方法以及静态方法
            this.子类的属性
        }
        //子类的方法
        fun(){
            super.fun()
    
        }
    
    }
    
    5.模板字符串
    var str = `
        ${变量名}
    
    `
    
    6.解构
    
    es6按照一定的模式从数组和对象中提取值,
    
    7.默认参数
    function f(x,y=10){
        
    
    }
    不定参数
    function  fun(x,...y){
    
    
    }
    
    fun(1,1,2,3)
    
    扩展运算符...
    function fun(x,y,z){
    
    
    }
    fun(...arr)
  • 相关阅读:
    google浏览器切换成中文
    Python 进阶篇
    Linux 命令
    Linux
    Linux
    Linux
    Linux--shell脚本之文本处理工具
    Linux--shell脚本之正则表达式
    Linux
    Linux
  • 原文地址:https://www.cnblogs.com/bao2333/p/10195217.html
Copyright © 2011-2022 走看看