Возможности JS, которых я раньше не видел

внешний интерфейс JavaScript API Программа перевода самородков

Возможности JS, которых я раньше не видел

На днях я читал документацию MDN и нашел некоторые функции и API, о которых даже не подозревал, что они существуют в JS. Здесь я перечислил некоторые из них, независимо от того, полезны они или нет, изучение JS никогда не заканчивается.

помеченное заявление

Как многие знают, что в JS можно датьforИменование блоков циклов и операторов? Я все равно не знаю ... после того, как вы назовете новое имя, вы можетеforв петлеbreakа такжеcontinueПосле этого в блоке операторовbreakПосле этого используйте новое имя.

loop1: // 标记 "loop1" 
for (let i = 0; i < 3; i++) { // "loop1"
   loop2: // 标记 "loop2"
   for (let j = 0; j < 3; j++) { // "loop2"
      if (i === 1) {
         continue loop1; // 继续外层的 "loop1" 循环
         // break loop1; // 中止外层的 "loop1" 循环
      }
      console.log(`i = ${i}, j = ${j}`);
   }
}

/* 
 * # 输出
 * 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('这句打印不会被执行');
}
console.log('two');

/*
 * # 输出
 * one
 * two
 */

"пустой" оператор

Я думал, что знал всех операторов какое-то время, пока не увидел этого. это из1996 г.Он существует в JS с самого начала. Его поддерживают все браузеры, и его легко понять, цитата из MDN:

Оператор void оценивает данное выражение и возвращает значение undefined.

Используя его, вы можете написать выражение немедленно вызываемой функции (IIFE) по-другому, например так:

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

// 和下面等效

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

использоватьvoidОдно предостережение заключается в том, что независимо от того, что возвращает данное выражение, общий результат оператора void не определен!

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

// word 是 `undefined`

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

// word 是 "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);
    }
}()

// 或者保持下面的写法

(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); // 等价于 return ++x;
}

y = false, true; // console 中得到 true
console.log(y); // false，逗号优先级低于赋值

z = (false, true); // console 中得到 true
console.log(z); // true，括号中整体返回 true

Сотрудничатьусловный оператор

Последнее значение в операторе запятой используется как значение, возвращаемое условному оператору, поэтому вы можете поместить столько выражений, сколько хотите, перед последним значением. В приведенном ниже примере я помещаю операторы печати перед возвращаемым логическим значением.

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 уже естьПредложение плагина. Похоже, он должен быть вдохновлен bash, и я думаю, что это здорово!

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

// 不使用管道操作符
square(increment(square(2))); // 25

// 使用管道操作符
2 |> square |> increment |> square; // 25

Стоит поговорить о

Atomics

Когда данные совместно используются несколькими потоками, атомарные операции гарантируют, что считываемые и записываемые данные соответствуют ожиданиям, то есть следующая атомарная операция не должна начинаться до тех пор, пока не завершится предыдущая атомарная операция. Это удобно для синхронизации данных между различными потоками (например, основным потоком и другим потоком WebWorker).

Я люблю атомарность в других языках, таких как Java. У меня есть подозрение, что атомарные операции станут более широко использоваться, поскольку все больше и больше людей используют WebWorkers для отделения операций от основного потока.

Array.prototype.reduceRight

Ну, я никогда не видел этого раньше, потому что это в основном эквивалентноArray.prototype.reduce() + Array.prototype.reverse()И редко нужно. Но если вам это нужно,reduceRightэто лучший выбор!

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

/*
 * # alert 输出
 * Hello World!
 */

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

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

/*
 * # 输出
 * Hello World! And Mars!
 */

HTMLElement.dataset

До сих пор я использовал пользовательские атрибуты данных для элементов HTML.data-*, потому что я не знал, что существует API для простого запроса к ним. Помимо отдельных ограничений на имена (см. ссылку выше), он в основном позволяет вам использовать camelCase для запроса свойств «тире-регистр» при запросе в JS. Итак, имя свойстваdata-birth-planetВ JS это становитсяbirthPlanet.

<div id='person' data-name='john' data-birth-planet='earth'></div>

Спросите:

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

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

// 你也可以在程序中添加属性
personEl.dataset.foo = 'bar';
console.log(personEl.dataset.foo); // bar

заключительные замечания

Надеюсь, вы узнали здесь что-то новое, как и я. Также большое спасибо новому сайту Mozila MDN, он выглядит великолепно, я потратил больше времени на чтение документации, чем думал.

Редакция: Исправлено несколько имен и добавленоasyncфункция добавитьtry, catch. Спасибо Реддит!

С Новым 2018 годом!

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории