js学习笔记02

By | 2019年9月9日

js学习笔记02

回调函数用作更宏观逻辑的一部分

对于 js 而言,由于其弱类型的特点,其中一些内置函数(如 Array.sort() ),可能会因为对数据类型推断错误而出现的结果错误原因

[10, 20, 2, 1].sort();  // result:[1, 10, 2, 20]

这种情况下,可以使用回调函数对比较过程进行定制

var arr=[10, 20, 2, 1];
arr.sort(function(x, y) {   // 该匿名函数即包含定制比较逻辑的函数,用作比较器
    if(x<y) {
        return 1;
    }
    if(x>y) {
        return -1;
    }
    return 0;
})
console.log(arr);
// result: [1, 2, 10, 20]

自定义过滤器:

var arr=[1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function(x) {
    return x%2 != 0;    // 自定义的过滤规则
})
// filter所做的,就是一个个遍历数组中的成员,每次读一个值,就调
// 用一次回调函数。回调函数返回true则元素放入返回数组,否则丢弃。

map/reduce

原数组通过map,会生成一个新的数组。map做的事情类似于上文中的过滤器,一个一个元素进行遍历,遍历到的每一个数组中的元素值都会被作为参数来回调函数,再把回调函数的返回值放入新的数组中(如果没有返回值就不放东西了。。)

function pow(x) {
    return x*x;
}
var arr=[1, 2, 4, 5, 6, 9];
var results = arr.map(pow); 
// map每次取到一个值,都将这个值作为参数调用一次pow,值放入返回的数组中
// result: [1, 4, 16, 25, 36, 81]

reduce:

var arr=[1, 3, 5, 7, 9];
arr.reduce(fucntion(x, y) {
    return x+y;
})  
// result: 25
// reduce 做的事情:对原数组进行遍历,讲原数组缩小成一个单值。
// 先拿第一个元素,再拿第二个元素,将这两个元素作为参数一起调用回调函数
// 这个回调函数会将输入的两个值 “reduce” 成为一个值返回来,如此往复直
// 到只剩下一个值

// 如果要找到数组中的最大值,只需要将回调函数写成进行比较的逻辑即可,
// 把符合要求的留下,不符合要求的直接抛弃

扩展:这类方式为什么高效?

map是分配任务,reduce是收缩任务。

这类使用map的方式,可以让框架在不影响具体应用逻辑的情况下,使用一些对于开发者透明的方式进行优化。

比如map,在底层的实现可以是将参数数组平分为数份,每份独立执行,实现效率提升。

回调函数用于实现异步操作

例如微信小程序中的

wx.onSocketOpen(function(res) { // 这个就是使用回调函数的例子。在握手成功后进行调用。
    ...                         // 这个回调函数是异步执行的,当onSocketOpen执行成功
                                // 后进行调用。
})

再如

wx.request({
    url: ...
    data: {
        ...
    },
    header: {
        ...
    },
    success (res) {
        ...     // 回调函数
    }
}) 
// 这个函数被调用之后马上就会返回,但是其实并没有执行完。
// 需要等到 request 函数获得响应后,框架才会调用这个 success 函数

框架 + 插件

框架,绝非简单的工具集合和粗略定义的项目结构。

它帮助形成宏观又不太变化的工作流程。

插件,是宏观工作流程中的局部动作。

我们在使用框架时,就是将自己写的小逻辑是插入到整体框架中。

框架,定义了整体的宏观工作流程。

箭头函数

匿名函数的另一种简洁的写法,箭头左边写参数,右边写花括号

Wechat.auth(scope, state, (response)=>{ // 这个 response 就是回调函数的参数
    console.log(JSON.stringify(response).toString());
    this.getAuthcode(JSON.stringify(response));
}, function (reason) {                  // 经典的写法
    //alert("Failed: " + reason);
});

this指针

【函数】是指全局的东西,【方法】是嵌入到类中的。

var xiaoming = {
    name: 'xiaoming',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;  // 就相当于是 xiaoming.birth
    }
}

在函数中嵌套定义函数

var xiaoming = {
    name: 'xiaoming',
    birth: 1990,
    age: function () {
        fucntion getAgeFromBirth() {
            ... // 这里就没法用this了。
                // 若嵌套函数用箭头函数,则this会保留下来
        }
        return getAgeFromBirth();
    }
}

// 解决方案
var xiaoming = {
    name: 'xiaoming',
    birth: 1990,
    age: function () {
        var that = this;
        fucntion getAgeFromBirth() {
            ... // 可以用that了
        }
        return getAgeFromBirth();
    }
}

JSON 标准对象

网络应用都使用HTTP协议进行通信,HTTP 传输的是文本,即【可打印的字符串】。

HTTP 是一问一答无状态的协议。

当前扩展出了 WebSocket 技术,可以一直保持连接,服务器也可以主动向客户端推送消息。

格式参考

{
    "name":"xiaoming",
    "age": 21,
    "isMarried": false,
    "skills":[
        "abc",
        "def",
        "ccc",
        "aaa"
    ]
}

解析 json (反序列化):

JSON.parse();

点击量:578

发表评论

邮箱地址不会被公开。 必填项已用*标注