你的位置:首页 > Java教程

[Java教程]( 译、持续更新 ) JavaScript 上分小技巧(四)


后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址:

第一篇地址:( 译、持续更新 ) JavaScript 上分小技巧(一)

第二篇地址:( 译、持续更新 ) JavaScript 上分小技巧(二)

第三篇地址:( 译、持续更新 ) JavaScript 上分小技巧(三)

#48 - 内置函数reduce的用法
正如文档所写,reduce()方法应用一个函数以针对数组的值(从左到右),以减至一个值。
reduce()
reduce()方法接收两个参数(M:mandatory,O:options):
 (M)一个回调函数,用于处理与先前的计算结果和下一个元素。
 (O)被作为回调函数的第一个调用的参数的初始值。
所以,我们来看看普通用法,后面再来一个更先进的。
常见的用法(积累,连接)
假如我们在购物,并且购物车足够满,让我们计算价格总和:

// 现在的价格var items = [{price: 10}, {price: 120}, {price: 1000}];// reducer函数var reducer = function add(sumSoFar, nextPrice) { return sumSoFar + nextPrice.price; };// 处理...var total = items.reduce(reducer, 0);console.log(total); // 1130

函数的可选参数在一般情况下是0,它可以是个对象,也可以是个数组。
现在,我们获得一张20元的代金券:

var total = items.reduce(reducer,-20);console.log(total); // 1110

高端用法(组合)
落后的思想是将reducers分别写成单独的功能,并最终计算出一个新的reducers的功能。
为了说明这一点,让我们创建一个对象与一些能够计算不同货币美元的总价格的reducers功能。

var reducers = { totalInDollar: function(state, item) {  state.dollars += item.price;  return state; }, totalInEuros : function(state, item) {  state.euros += item.price * 0.897424392;  return state; }, totalInYen : function(state, item) {  state.yens += item.price * 113.852;  return state; }, totalInPounds : function(state, item) {  state.pounds += item.price * 0.692688671;  return state; } // 更多...};

然后,我们创建一个新的功能:
 · 负责应用reduce的各部分功能。
 · 将返回一个新的回调函数。

var combineTotalPriceReducers = function(reducers) { return function(state, item) {  return Object.keys(reducers).reduce(   function(nextState, key) {    reducers[key](state, item);    return state;   },   {}     ); }};

现在,让我们看看怎么使用这个:

var bigTotalPriceReducer = combineTotalPriceReducers(reducers);var initialState = {dollars: 0, euros:0, yens: 0, pounds: 0};var totals = items.reduce(bigTotalPriceReducer, initialState);console.log(totals);/*Object {dollars: 1130, euros: 1015.11531904, yens: 127524.24, pounds: 785.81131152}*/

我希望这个方法能够在你所需要的时候给你提供一个reduce使用的思路。
#47 - 基本声明
下面是javascript中声明变量的不同方式。console.log能够很好的解释这里将发生什么。

var y, x = y = 1 //== var x; var y; x = y = 1console.log('_> 1:', `x = ${x}, y = ${y}`)// 将会打印//_> 1: x = 1, y = 1

首先,我们设置两个变量,在这里没更多的操作。

;(() => {  var x = y = 2 // == var x; y = 2; console.log('2.0:', `x = ${x}, y = ${y}`)})()console.log('_> 2.1:', `x = ${x}, y = ${y}`)// 将会打印//2.0: x = 2, y = 2//_> 2.1: x = 1, y = 2

正如你所见的,这里的代码只改变了全局的y,因为我们没有在闭包中声明变量。

;(() => {  var x, y = 3 // == var x; var y = 3; console.log('3.0:', `x = ${x}, y = ${y}`)})()console.log('_> 3.1:', `x = ${x}, y = ${y}`)// 将会打印//3.0: x = undefined, y = 3//_> 3.1: x = 1, y = 2

现在我们通过var来声明变量。这意味着他们只存在封闭的语境中。

;(() => {  var y, x = y = 4 // == var x; var y; x = y = 4 console.log('4.0:', `x = ${x}, y = ${y}`)})()console.log('_> 4.1:', `x = ${x}, y = ${y}`)// 将会打印//4.0: x = 4, y = 4//_> 4.1: x = 1, y = 2

这两个变量都通过var声明并且只会给定了值。因为local>global,所以x和y在本地封闭语境中,意味着全局的x和y没做改变。

x = 5 // x = 5console.log('_> 5:', `x = ${x}, y = ${y}`)// 将会打印//_> 5: x = 5, y = 2

这最后一行是明确的。
更多的变量相关信息:MDN
#46 - js纯粹的检测文档加载完毕
使用readyState以跨浏览器的方式来检测javascript文档是否加载。

if (document.readyState === 'complete') {  // 页面已经完全加载}

你能够检查文档是否加载...

let stateCheck = setInterval(() => {  if (document.readyState === 'complete') {  clearInterval(stateCheck);   // document ready }}, 100);

或者使用onreadystatechange...

document.onreadystatechange = () => { if (document.readyState === 'complete') {  // document ready }};

使用document.readyState === 'interactive'检测DOM是否ready。
### 2016-02-18 更新 ###