ฉันไม่เคยเห็นไวยากรณ์นี้มาก่อนและฉันสงสัยว่ามันเกี่ยวกับอะไร

var { Navigation } = require('react-router');

วงเล็บด้านซ้ายแสดงข้อผิดพลาดทางไวยากรณ์:

โทเค็นที่ไม่คาดคิด {

ฉันไม่แน่ใจว่าส่วนใดของการกำหนดค่า webpack กำลังเปลี่ยนแปลงหรือวัตถุประสงค์ของไวยากรณ์คืออะไร มันเป็นความสามัคคี? มีใครสามารถสอนฉันได้บ้าง?

มันเรียกว่าได้รับมอบหมาย destructuringและมันเป็นส่วนหนึ่งของมาตรฐาน ES2015

ไวยากรณ์การกำหนดการทำลายคือนิพจน์ JavaScript ที่ทำให้สามารถดึงข้อมูลจากอาร์เรย์หรืออ็อบเจ็กต์โดยใช้ไวยากรณ์ที่สะท้อนการสร้างอาร์เรย์และอ็อบเจ็กต์ลิเทอรัล

ที่มา: การอ้างอิงการกำหนดโครงสร้างการทำลายบน MDN

การทำลายโครงสร้างวัตถุ

 var o = {p: 42, q: true};
 var {p, q} = o;

 console.log(p); // 42
 console.log(q); // true 

 // Assign new variable names
 var {p: foo, q: bar} = o;

 console.log(foo); // 42
 console.log(bar); // true

การทำลายโครงสร้างอาร์เรย์

var foo = ["one", "two", "three"];

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

นี่คือการกำหนด destructuring เป็นคุณลักษณะใหม่ของ ECMAScript 2015

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

เทียบเท่ากับ:

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;

var { Navigation } = require('react-router');

... ใช้การทำลายล้างเพื่อให้บรรลุสิ่งเดียวกับ ...

var Navigation = require('react-router').Navigation;

... แต่อ่านได้ไกลกว่า

เป็นคุณสมบัติใหม่ใน ES6 ในการทำลายโครงสร้างวัตถุ

อย่างที่เราทราบกันดีว่ามีการดำเนินการมอบหมายที่นี่ซึ่งหมายความว่าค่าด้านขวาจะถูกกำหนดให้กับตัวแปรด้านซ้าย

var { Navigation } = require('react-router');

ในกรณีนี้require('react-router')วิธีการส่งคืนวัตถุที่มีค่าคีย์จับคู่บางอย่างเช่น

{ Navigation: function a(){}, Example1: function b(){}, Example2: function c(){} }.

และถ้าเราต้องการใช้คีย์หนึ่งในอ็อบเจ็กต์ที่ส่งคืนนั้นพูดNavigationกับตัวแปรเราสามารถใช้Object ทำลายสำหรับสิ่งนั้นได้

สิ่งนี้จะเกิดขึ้นได้ก็ต่อเมื่อเรามีกุญแจอยู่ในมือ

ดังนั้นหลังจากคำสั่งมอบหมายตัวแปรท้องถิ่นNavigationจะมีfunction a(){}

อีกตัวอย่างหนึ่งมีลักษณะเช่นนี้

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;