es6的新增方法和es5数组的一些方法

最新推荐文章于 2022-07-18 21:21:28 发布

weixin_30632089

最新推荐文章于 2022-07-18 21:21:28 发布

阅读量116

点赞数

原文链接：http://www.cnblogs.com/bao2333/p/10195217.html

版权

<!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)

转载于:https://www.cnblogs.com/bao2333/p/10195217.html

weixin_30632089

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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-equ...
复制链接

扫一扫