(JSベース)変数宣言、アンチエイジ、展開演算子

14535 ワード
変数を宣言
var、let、constを使ってすべて変数を声明することができます.varは私達の熟知しているものです.他の二つを検討します.
let
ES 6の前のJavaScriptはブロックレベルのスコープがない.letの誕生ももたらしたブロックレベルの作用領域です.例を挙げます
function fn1() {
  for (let i of [1, 3, 2, 4, 5, 9]) { }
  console.log(i)
}
function fn2() {
  for (var i of [1, 3, 2, 4, 5, 9]) { }
  console.log(i)
}
fn1();    //   ，  let           
fn2();    // 9
また、let「修復」はvarの変数アップグレード(変数アップとは、関数および変数の宣言が関数の最上部に引き上げられます)、つまりlet宣言の変数には変数アップグレードがありません.次の例を見てください
console.log(b);    // undefined
var b = 10;
console.log(a);    //   
let a = 10;
この他に、letはまた、一時的なデッドゾーン(すなわち、ブロックレベルのスコープ内にletコマンドが存在する限り、その宣言された変数が「バインディング」(binding)という領域については、外部の影響を受けない)をもたらす.例:
var a = 1;
{
  //   。    "c"         ，       
  console.log(a);   
  let a = 2;
  //                
  var a = 3;
}
コンサート
constは実質的にletと一致していますが、唯一の違いは、const声明の時に必ず割り当てられます.const宣言の変数は変更できません.
const a = 1;
a = 2;    //   ，
割り当て値
一定のパターンに従って、配列とオブジェクトから値を抽出し、変数を割り当てます.これを構造解除といいます.
基本文法
let { foo, baz } = { foo: 'a', bar: 'b' };  // foo='a' baz=undefined
let { foo: bar } = { foo: 'a', bar: 'b' };  // bar='a'      
let [one, two] = [100, 200, 300];           // one=100 two=200
オブジェクトの構造割当値のうち、等号左のオブジェクトのkeyはとりあえず「マッチング器」、等号左のオブジェクトの「value」はとりあえず「命名器」と呼び、両者が同時に「命名キー」を省略することができます.
コンストラクタを実行するときは、等号の右側のオブジェクトの「key」から「マッチング器」に該当する属性を探し、値を見つけます.そうでないとundefinedです.「ネータ」は新しい変数の名前として使用されます.上記の例の2行目に、「foo」がオブジェクトの「foo」属性にマッチし、「bar」変数にコピーすると、「bar='a'」があります.
配列は特殊なオブジェクトであり、配列毎の「key」は0からインクリメントされる整数ですので、常に順番に割り当て値にマッチします.
次のオブジェクトの構成値について詳しく説明します.配列は同じです.
ネスト割り当て
let obj = { p: ['Hello', { y: 'World' }] };
let { p, p: [x, { y }] } = obj;
x  // "Hello"
y  // "World"
p  // ["Hello", {y: "World"}]

const node = { loc: { start: { line: 1, column: 5 } } };
let { loc, loc: { start }, loc: { start: { line } } } = node;
line    // 1
loc     // Object {start: Object}
start   // Object {line: 1, column: 5}

let arr = [], obj = {};
[arr[0], obj.prop] = [1, 2];
// arr = [1] obj = {prop: 2}
デフォルトの設定を解除
var { x, y = 3 } = { x: 1 };         // x = 1 y = 3
var { x, y = 3 } = { x: 1, y=2 };    // x = 1 y = 2
//   "   "        
var { x, y:a = 3 } = { x: 1 };       // x = 1 a = 3
関数パラメータ
本質的には[x,y,...] = argumentsの解像力値である.上の構文のデフォルト値とネストの割当値は同じです.
//     {x,y}=arguments[0]      
function fn({x, y}) { }
いくつかの常用用途
  • 関数の参照(上で説明しました).
  • 交換賦課値:
  • let x = 1, y = 2;
[x, y] = [y, x];
    • JSONオブジェクトからデータを抽出します.
  • let jsonData = { id: 12, name: 'lisi', data: '...' }
let { id, name, data: num } = jsonData;
    • mapオブジェクトを巡回:
  • const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
  console.log(key + " is " + value);
}
    • requireモジュールをロードする時、エイリアスを指定します.
  • const { SourceMapConsumer, SourceNode } = require("source-map");
    • 演算子を展開(…)
    展開演算子は3つの点です.例えば対象の「{}」を取り除くと、配列は[]を削除します.
    基本文法
    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };    // x=1 y=2 z={a:3,b:4}
let arr = [...[1, 2, 3], 4];                        // arr=[1,2,3,4]
let obj = { ...{ x: 1, y: 2 }, z: 3 }               // obj={x:1,y:2,z:3}
    配列内の適用
  • 浅いコピー:(配列内に配列が含まれている場合は、内部配列のポインタのみをコピーする)
  • const arr = [1, 2, 3];
const newArr = [...arr];    // newArr=[1,2,3]
    • 結合配列:
  • const
  arr1 = ['a', 'b'],
  arr2 = ['c'],
  arr3 = ['d', 'e'];
let arr = [...arr1, ...arr2, ...arr3];    // arr=['a','b','c','d','e']
    • 構成値と結合します.
    展開演算子を使用するオブジェクトは最後でなければなりません.
  • const [first, ...rest] = [1, 2, 3, 4, 5];    // first=1 rest=[2,3,4,5]
const [first, ...rest] = ["foo"];            // first=1 rest=[]
const [...rest, first] = ["foo"];            //
    • 文字列:
  • let strs = [...'hello'];    // strs=["h","e","l","l","o"]
//        
let newStr = [...'hello'].reverse().join();    // "olleh"
    • クラス行列は行列に変換されます.
  • //         （Iterator）     ，                。
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
    • オブジェクトへの適用
  • 浅いコピー:(配列と同じで、オブジェクト内のオブジェクトはポインタのみコピーできます)
  • let obj1 = { a: 3, b: 4 };
let obj2 = { ...obj1 };    // obj2={a:3,b:4}
    • 文字列:
  • let strs = {...'hello'}    // strs={0:"h",1:"e",2:"l",3:"l",4:"o"}
    • 配列用:
  • let foo = { ...['a', 'b', 'c'] };    // foo={0:"a",1:"b",2:"c"}
    • オブジェクトのマージ:(オブジェクトの結合のみ可能です.
    列挙可能な、継承されていない属性.
    後者は同じ名前の属性を上書きします)
  • let
  a = { x: 1, y: 2 },
  b = { y: 3, z: 4 };
let ab = { ...a, ...b };            // ab={ x:1,y:3,z:4}
//    
let ab1 = Object.assign({}, a, b);  // ab={ x:1,y:3,z:4}
    • 転載先:https://juejin.im/post/5ca6f5fe51882543d43f40ee
    Anglar.jsのコマンド——分かりやすく、全解析