我所不知的 JS

综合技术 众成翻译 (源链)

我所不知的 JS

几天前在阅读 MDN 文档时我发现了一些我从来不知道的 JS 特性和 API。 下面是一份简短的清单, 无论有用不有用 — 学习 JS 的道路似乎是没有尽头的。

标签语句

在 JS 中,你可以对 for
循环和代码块起名字… 谁知道呢(显然我不知道)! 稍后你可以在 for
循环中对该代码使用 break
continue
语句, 同时在代码块中也可以使用 break

loop1: // labeling "loop1" 
for (let i = 0; i < 3; i++) { // "loop1"
   loop2: // labeling "loop2"
   for (let j = 0; j < 3; j++) { // "loop2"
      if (i === 1) {
         continue loop1; // continues upper "loop1"
         // break loop1; // breaks out of upper "loop1"
      }
      console.log(`i = ${i}, j = ${j}`);
   }
}

/* 
 * # Output
 * i = 0, j = 0
 * i = 0, j = 1
 * i = 0, j = 2
 * i = 2, j = 0
 * i = 2, j = 1
 * i = 2, j = 2
 */

这是一个对代码块命名的例子,在代码块中只能使用 break

foo: {
  console.log('one');
  break foo;
  console.log('this log will not be executed');
}
console.log('two');

/*
 * # Output
 * one
 * two
 */

“void” 操作符

这之前我一直以为我掌握了所有的操作符,直到我看到了这个 从 1996 年就有
.的操作符。 所有浏览器都支持也非常的好理解, 用 MDN 的话:

void 操作符执行表达式之后同时返回 undefined

这样可以写出立即执行函数的另一种形式:

void function iife() {
  console.log('hello');
}();

// is the same as...

(function iife() {
    console.log('hello');
})()

对 void 的使用需要注意的是,表达式的执行结果是 空(undefined)!

const word = void function iife() {
  return 'hello';
}();

// word is "undefined"

const word = (function iife() {
  return 'hello';
})();

// word is "hello"

你可以将 async
void
相结合, 即可作为代码中的异步入口点:

void async function() { 
    try {
        const response = await fetch('air.ghost.io'); 
        const text = await response.text();
        console.log(text);
    } catch(e) {
        console.error(e);
    }
}()

// or just stick to this :)

(async () => {
    try {
        const response = await fetch('air.ghost.io'); 
        const text = await response.text();
        console.log(text);
    } catch(e) {
        console.error(e);
    }
})();

逗号操作符

在阅读完逗号表达式之后, 我并没有感到我完全理解了它是如何工作的。 引用 MDN 的话:

逗号操作符执行其所有的操作数(从左到右)并返回最后一个操作数的结果。

function myFunc() {
  let x = 0;
  return (x += 1, x); // same as return ++x;
}

y = false, true; // returns true in console
console.log(y); // false (left-most)

z = (false, true); // returns true in console
console.log(z); // true (right-most)

条件操作符
一起使用

逗号操作符的最后一个结果总是作为条件操作符的结果。 所以你可以在这之前放入任意数量的表达式, 在下面的例子中,我在返回的布尔值之前都放了一句 console log。

const type = 'man';

const isMale = type === 'man' ? (
    console.log('Hi Man!'),
    true
) : (
    console.log('Hi Lady!'),
    false
);

console.log(`isMale is "${isMale}"`);

国际化 API

在当前国际化要做好很难, 幸运的是,在大部门浏览器中都有 较好的 API 支持。
其中我所喜欢的其中一项就是日期格式化, 看下面的例子。

const date = new Date();

const options = {
  year: 'numeric', 
  month: 'long', 
  day: 'numeric'
};

const formatter1 = new Intl.DateTimeFormat('es-es', options);
console.log(formatter1.format(date)); // 22 de diciembre de 2017

const formatter2 = new Intl.DateTimeFormat('en-us', options);
console.log(formatter2.format(date)); // December 22, 2017

管道操作符

在撰写本篇文章时,此功能仅在 Firefox 58+ 使用参数开启, 然而在 Babel 中已经有一个针对此操作符提案的 插件
了。 看起来非常好,我很喜欢!

const square = (n) => n * n;
const increment = (n) => n + 1;

// without pipeline operator
square(increment(square(2))); // 25

// with pipeline operator
2 |> square |> increment |> square; // 25

值得注意的

原子性

原子操作带来了可预测的读写结果,特别是当数据在多个线程中共享时,下一个操作会等待其他操作完成之后才会被执行。 对于主线程和其他 WebWorker 之间保持数据同步来说非常有用。

我很喜欢其他编程语言中的原子特性,例如 Java 中。 我觉得在之后使用 WebWorker 将事务从主线程中转移出来之后会使用得更多。

Array.prototype.reduceRight

我之前从未见过其使用,因为基本上他就是 Array.prototype.reduce()
Array.prototype.reverse()
的结合,对于它的使用应该是比较少见的,如果你需要的话,那这个还是挺合适你的!

const flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
    return a.concat(b);
}, []);

// flattened array is [4, 5, 2, 3, 0, 1]

setTimeout() 参数

在了解到这个功能之后节省了 .bind()
的使用,这个特性从一开始就有了。

setTimeout(alert, 1000, 'Hello world!');

/*
 * # Output (alert)
 * Hello World!
 */

function log(text, textTwo) {
    console.log(text, textTwo);
}

setTimeout(log, 1000, 'Hello World!', 'And Mars!');

/*
 * # Output
 * Hello World! And Mars!
 */

HTMLElement.dataset

在之前我在 HTML 元素上使用自定义数据属性 data-*
,但我浑然不知有 API 能够轻松的做读取。 抛开一些特殊的命名限制(看标题链接),其基本上就是横线隔开在 JS 中使用时则用驼峰规则。 所以属性 data-birth-planet
在 JS 中会变成 birthPlanet

`

读取:

let personEl = document.querySelector('#person');

console.log(person.dataset) // DOMStringMap {name: "john", birthPlanet: "earth"}
console.log(personEl.dataset.name) // john
console.log(personEl.dataset.birthPlanet) // earth

// you can programmatically add more too
personEl.dataset.foo = 'bar';
console.log(personEl.dataset.foo); // bar

结语

希望你能在JS想我一样发现新东西。 同时为新的 MDN 网站给 Mozilla 打Call, 在我看来好多了 – 看完比我预期的时间要长。

Happy New 2018!

Nick

您可能感兴趣的

Enough is Enough… Promises are not better than cal... Enough is Enough… Promises are not better than callbacks If you are a JavaScript developer who thinks that Promises are the future of JavaScript or...
不冒泡事件总结 abort blur error focus load mouseenter mouseleave resize scroll unload 其中scroll比较特殊它只冒到特定的对象window所以它基本可不考虑 focus 可以用focusin 代替 ...
Android WebView playing audio with javascript I'm trying to very quickly port over an html application with plays sound (with soundmanager2) to a native android app using WebView. From my research...
Google maps javascript api return lat and lng Google Maps JavaScript API V3, lat / lon point table I'm trying to create a simple Google Map that will iterate through a multi-...
Brief Javascript ES6 Tutorial For Beginners Part I... Hello Friends. Today we will be looking at part 2 of the JavaScript ES6 Tutorial. Last week we talked about ES6 and the amelioration brought to it...
众成翻译责编内容来自:众成翻译 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 我所不知的 JS



专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录