ES6语法-箭头函数-this-高阶函数

江城路-

已于 2022-12-08 23:38:27 修改

阅读量514

点赞数

文章标签： es6 前端 ecmascript

于 2022-12-08 23:37:51 首次发布

本文链接：https://blog.csdn.net/m0_67212141/article/details/128244815

版权

箭头函数

匿名函数语法: function(){ }

箭头函数语法: ()=>{}

目的: 为了简化传统的匿名函数格式

作者为箭头函数设计了两种语法糖, 提供最大化的简化操作

下面来看代码片段:

var a = function(x){
    return x * 2
}
console.log(a(10));

这是匿名函数写法, 下面再来看箭头函数简化版:

var b = y => y * 20
console.log(b(10))

而这就是箭头函数最简化版的写法, 它是如何做到的呢?我们来看一下

var b = (y) => {
    return y * 20
}
console.log(b(20))
// 糖1: 形参只有1个时, 可以省略()
// 糖2: 函数体仅有一行时, 可以省略 { return }

于是就有了上面简化版的写法

下面再来看一下这段代码:

var b = function (x, y) {
    return { x: x, y: y };
};

var b = (x, y) => ({ x, y });

console.log(b(11, 22));

巧合: {属性名: 值} 如果值是变量, 变量和属性名恰好相同, 则可以合并书写

这段代码是有一个坑的: 对象类型的 { } 会被当做箭头函数的{ }进行解析, 所以在简化时函数体要用( )大括号括起来, 要不然会报错的;

this

this: 非常灵活的关键词, 在不同场景中有不同的表现

function中

对象.函数() : this就是前方对象

函数() : this就是window; 如果严格模式下则是undefined

new 函数() : this就是构造出来的实例对象

箭头函数 : 没有this, 按照作用域链的原则, 从上层作用域查找

var emp = {
    ename: '小明',
    // 糖 :function 可以省略
    // show: function(){}
    show(){
        console.log('我是 小明!');
        var x = 10

            const a = ()=>{
                // 箭头函数本身没有this, 所以使用上层作用域的this
                console.log('this:', this);
                // 函数中没有声明 x, 则使用上层作用域的x
                console.log(x);
             }
             a()

             console.dir(a);
        }
    }

emp.show()

通过打印结果来看:

this指向的就是emp

高阶函数 - every

高阶函数: 函数中使用了其它函数, 就叫高阶函数

例如带有回调函数的

every: 每个, 每一;

作用: 自动遍历数组, 检测每个元素是否符合条件

var nums = [12, 43, 5, 657, 87, 8]
        
    // 需求: 判断是否每个元素都是正数
    var x = nums.every((value, index, array)=>{
        console.log('value:', value); //我是谁
        console.log('index:', index); //序号
        console.log('array:', array); //来自哪里
        // 3者的关系 array[index] == value

    return value > 0 //返回判断结果: 合格与否
})
console.log(x?'都是正数' : '非都是正数');

通过打印结果来看, value就是数组中的值, index就是下标, array就是当前这个数组, 通过判断来返回结果, 有一项不正确就是false;

高阶函数 - some

some: 有些, 一部分;

作用: 判断数组中的元素, 是否存在一些满足条件的

类似逻辑或 || 有真则真

var nums = [1, 454, -42, 16, 87, 66]
    var x = nums.some((value, index, array)=>{
        console.log(value);
        console.log(index);
        console.log(array);
        return value < 0    //判定的结果
    })

var x = nums.some(v => v <0)

console.log(x?'有负数':'没负数');

通过打印结果来看, some判断的就是某一个为true那就是true, 而every判断的是每个元素都要满足条件

高阶函数 - filter

filter: 过滤;

作用: 把数组中满足条件的元素找出来, 组成新的数组;

var nums = [12, 34, 45, 26, 87, 78, 45, 67, 33]

    // 找出所有的偶数
    var x = nums.filter((value, index, array)=>{
        return value % 2===0
    })
var x = nums.filter(v => v % 2 == 0)
console.log(x);

filter就是把符合条件的过滤出来然后打印出来, 上方代码是找出所有偶数, 能被2取余为0的那就是偶数, 就会把结果输出在控制台形成新的数组

高阶函数 - map

map: 映射

作用: 数组中的元素按照某些规则进行转换, 得到新的数组

var nums = [12, 234, 465, 33, 66, 77, 88]

    var x = nums.map((value, index, array)=>{
        return value * 2
})
var x = nums.map(v => v * 2)
console.log(x);

上方代码就是把数组里面的值翻倍

但是一般map都是用来把数组转为 HTML 代码, 然后配合ajax请求显示在页面上的, 下面来举个栗子:

<body>
    <ul id="box"></ul>
    <script>
        var emps = ['华为', '苹果', '三星', '小米']
        var x = emps.map((value, index, array)=>{
            return `<li>${value}</li>`
        })
        console.log(x);

        box.innerHTML = x.join('')
    </script>
</body>

上方代码就是简单的写了一个类似请求到来的数据, 通过映射来转换, 最终通过innerHTML来显示在页面上