[訳]8つの実用的なJavaScript技術

14059 ワード

原文の住所:8 Useful JavaScript Tricks

原作者:Milos Prottic

訳文:掘削金翻訳計画

本文の永久リンク:github.com/xitu/gold-m…

翻訳者:Xuyuey

校正者:twang 1727、smile uffie

紹介する
それぞれのプログラミング言語は独特の技術です.多くは開発者として知られていますが、中にはかなりのhackishがあります.こちらの文章の中で、私が役に立つと思うテクニックを紹介します.その中のいくつかは実践の中で使ったことがあります.もう一つは古い問題を解決する新しい方法です.Enjoy
1.配列の長さを確保する
このような状況に遭遇したことがあるかどうかは分かりませんが、グリッド構造を処理する時、元のデータの各行の長さが等しくない場合、データを再作成する必要があります.はい、会ったことがあります.各行のデータ長が同じであることを確認するために、Array.fill方法を使用することができます.

let array = Array(5).fill('');
console.log(array); //   （5）["", "", "", "", ""]

2.配列の消去
ES 6は非常に簡潔な配列の重い除去方法をいくつか提供しています.残念なことに、それらは非基本型の配列を処理するのに適していない.後で苦手な行列でもう一つの文を読み返すことができます.ここでは基本タイプの配列のみに注目します.

const cars = [
    'Mazda', 
    'Ford', 
    'Renault', 
    'Opel', 
    'Mazda'
]
const uniqueWithArrayFrom = Array.from(new Set(cars));
console.log(uniqueWithArrayFrom); //    ["Mazda", "Ford", "Renault", "Opel"]

const uniqueWithSpreadOperator = [...new Set(cars)];
console.log(uniqueWithSpreadOperator);//    ["Mazda", "Ford", "Renault", "Opel"]

3.拡張演算子でオブジェクトとオブジェクト配列を結合する
合併対象は珍しい問題ではありません.すでにこの問題に遭遇したかもしれません.近い未来にまた会うかもしれません.違いは、過去にほとんどの作業を手動で完了しましたが、今からES 6の新しい機能を使用します.

//     
const product = { name: 'Milk', packaging: 'Plastic', price: '5$' }
const manufacturer = { name: 'Company Name', address: 'The Company Address' }

const productManufacturer = { ...product, ...manufacturer };
console.log(productManufacturer); 
//    { name: "Company Name", packaging: "Plastic", price: "5$", address: "The Company Address" }

//             
const cities = [
    { name: 'Paris', visited: 'no' },
    { name: 'Lyon', visited: 'no' },
    { name: 'Marseille', visited: 'yes' },
    { name: 'Rome', visited: 'yes' },
    { name: 'Milan', visited: 'no' },
    { name: 'Palermo', visited: 'yes' },
    { name: 'Genoa', visited: 'yes' },
    { name: 'Berlin', visited: 'no' },
    { name: 'Hamburg', visited: 'yes' },
    { name: 'New York', visited: 'yes' }
];

const result = cities.reduce((accumulator, item) => {
  return {
    ...accumulator,
    [item.name]: item.visited
  }
}, {});

console.log(result);
/*   
Berlin: "no"
Genoa: "yes"
Hamburg: "yes"
Lyon: "no"
Marseille: "yes"
Milan: "no"
New York: "yes"
Palermo: "yes"
Paris: "no"
Rome: "yes"
*/

4.配列マッピング(Array.mapを使用しない)
ここにはArray.mapを使用せずに配列マッピングを実現できる別の方法があると知っていますか?分からないなら、続けて見てください.

const cities = [
    { name: 'Paris', visited: 'no' },
    { name: 'Lyon', visited: 'no' },
    { name: 'Marseille', visited: 'yes' },
    { name: 'Rome', visited: 'yes' },
    { name: 'Milan', visited: 'no' },
    { name: 'Palermo', visited: 'yes' },
    { name: 'Genoa', visited: 'yes' },
    { name: 'Berlin', visited: 'no' },
    { name: 'Hamburg', visited: 'yes' },
    { name: 'New York', visited: 'yes' }
];

const cityNames = Array.from(cities, ({ name}) => name);
console.log(cityNames);
//    ["Paris", "Lyon", "Marseille", "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]

5.条件に応じてオブジェクトの属性を追加する
今は、条件によって2つの異なるオブジェクトを作成する必要はありません.特定の属性を持つようにします.拡張操作は完璧な選択となります.

const getUser = (emailIncluded) => {
  return {
    name: 'John',
    surname: 'Doe',
    ...(emailIncluded ? { email : '[email protected]' } : null)
  }
}

const user = getUser(true);
console.log(user); //    { name: "John", surname: "Doe", email: "[email protected]" }

const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); //    { name: "John", surname: "Doe" }

6.元のデータを構成する
非常に多くの属性を持つ対象を扱ったことがありますか?きっとあったと思います.最も一般的な場合は、すべてのデータと詳細が含まれているユーザーオブジェクトがあります.ここでは、この大きなトラブルを解決するために新しいES解凍方法を呼び出すことができます.次の例を見てみましょう.

const rawUser = {
   name: 'John',
   surname: 'Doe',
   email: '[email protected]',
   displayName: 'SuperCoolJohn',
   joined: '2016-05-05',
   image: 'path-to-the-image',
   followers: 45
   ...
}

上のオブジェクトを二つに分けることで、このオブジェクトをより文脈的な意味で表現することができます.

let user = {}, userDetails = {};
({ name: user.name, surname: user.surname, ...userDetails } = rawUser);

console.log(user); //    { name: "John", surname: "Doe" }
console.log(userDetails); //    { email: "[email protected]", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45 }

7.オブジェクト属性名を動的に設定する
過去においては、オブジェクトの属性名を動的に設定する必要がある場合、まずオブジェクトを宣言してから属性を割り当てる必要があります.これは単純な声明では実現できない.今は以前と違って、ES 6の機能でこの目標を達成できます.

const dynamic = 'email';
let user = {
    name: 'John',
    [dynamic]: '[email protected]'
}
console.log(user); //    { name: "John", email: "[email protected]" }

8.文字列補間
最後に重要なのは文字列をつなぎ合わせる新しい方法です.補助プログラムでテンプレート文字列を構築したいなら、これは非常に有用です.動的接続文字列のモデルがより簡単になりました.

const user = {
  name: 'John',
  surname: 'Doe',
  details: {
    email: '[email protected]',
    displayName: 'SuperCoolJohn',
    joined: '2016-05-05',
    image: 'path-to-the-image',
    followers: 45
  }
}

const printUserInfo = (user) => { 
  const text = `The user is ${user.name} ${user.surname}. Email: ${user.details.email}. Display Name: ${user.details.displayName}. ${user.name} has ${user.details.followers} followers.`
  console.log(text);
}

printUserInfo(user);
//    'The user is John Doe. Email: [email protected]. Display Name: SuperCoolJohn. John has 45 followers.'

締め括りをつける
JavaScriptの世界は急速に広がっています.ここにはかっこいい機能がたくさんあります.いつでも使えます.手を焼いたり、時間がかかったりする問題はだんだん過去にフェードアウトしています.また、ES 6の新しい機能を利用して、開梱して使う新しい解決策がたくさんあります.
これが今日共有したい内容の全部です.もしあなたもこの文章が好きなら、転送してください.
読んでくれてありがとうございます.また会いましょう.
翻訳文に誤りがあったり、他の改善が必要なところがあれば、翻訳文を訂正してPRすることもできます.冒頭の本文の永久リンクは本稿のGitHub上のMarkDownリンクである.
金を掘り起こす翻訳計画は優良品質のインターネット技術の文章を翻訳するコミュニティで、文章の出所は金の上の英文を掘り起こして文章を分かち合うためです.Android、iOS、フロントエンド、バックエンド、ブロックチェーン、製品、デザイン、人工知能などの分野をカバーしています.より良い訳文を見たいです.引き続き、キング翻訳計画、公式微博、知乎コラムに注目してください.
転載先:https://juejin.im/post/5cff97276fb9a07ea420749f

中国語文字のチェック