知らなかったJavaScript機能が存在した

先日、MDNに関する資料を読んで、かなり興味深いJavaScriptの機能とAPIを見つけましたが、その存在は知りませんでした。 今日はそれらについてお話したいと思います。



それらが誰にとっても有用であるかどうかを判断することは想定していませんが、これはすべて言語であるため、少なくともそれについて知ることは有益だと思います。

タグ

for



JS… ? — . break



continue



for



, 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('this log will not be executed');
}
console.log('two');

/*
 * # 
 * one
 * two
 */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

void

, JavaScript void, , , JS 1996- . , . MDN:

void undefined.

, , IIFE:

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

//  –   ,  ...

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

void



, , … void (undefined)



!

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

// word   "undefined"

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

// word   "hello"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

void



async



, :

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; //  true  
console.log(y); // false (  )

z = (false, true); //  true  
console.log(z); // true (  )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

«»

«» . . 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

— , , , , , JS 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
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

,

▍

, .



. , , , , -.



Java. , JS, - , .

▍ Array.prototype.reduceRight

, - 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);
}, []);

//   [4, 5, 2, 3, 0, 1]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

▍ setTimeout()

, , .bind(…)



, setTimeout(), , , JS .

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

data-*



HTML-, , API, . ( ), , , JS. data-birth-planet



JS birthPlanet



.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

JS:

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

//      
personEl.dataset.foo = 'bar';
console.log(personEl.dataset.foo); // bar
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, JavaScript - .



! - JS, ? — .