สร้างวัตถุว่างเปล่าใน JavaScript ด้วย {} หรือวัตถุใหม่ ()?

มีสองวิธีในการสร้างวัตถุว่างใน JavaScript:

var objectA = {}
var objectB = new Object()

มีความแตกต่างในวิธีการที่โปรแกรมสคริปต์จัดการกับพวกเขา? มีเหตุผลที่จะใช้อย่างใดอย่างหนึ่งมากกว่าที่อื่น ๆ ?

ในทำนองเดียวกันก็เป็นไปได้ที่จะสร้างอาร์เรย์ว่างโดยใช้ไวยากรณ์ที่แตกต่างกัน:

var arrayA = []
var arrayB = new Array()

วัตถุ

ไม่มีประโยชน์ในการใช้งานnew Object();- ในขณะที่{};สามารถทำให้โค้ดของคุณมีขนาดเล็กลงและอ่านได้ง่ายขึ้น

สำหรับการกำหนดวัตถุเปล่าพวกมันมีเทคนิคเหมือนกัน {}ไวยากรณ์สั้น neater (น้อย Java-ish) และช่วยให้คุณได้ทันทีเติมอินไลน์วัตถุ - ชอบโดย:

var myObject = {
        title:  'Frog',
        url:    '/img/picture.jpg',
        width:  300,
        height: 200
      };

อาร์เรย์

สำหรับอาร์เรย์มีประโยชน์แทบจะไม่เหมือนกันเลยที่ใช้new Array();เกิน[];- โดยมีข้อยกเว้นเล็กน้อยหนึ่งข้อ:

var emptyArray = new Array(100);

สร้างอาร์เรย์ยาว 100 ไอเท็มพร้อมช่องทั้งหมดที่มีundefined- ซึ่งอาจดี / มีประโยชน์ในบางสถานการณ์ (เช่น(new Array(9)).join('Na-Na ') + 'Batman!')

คำแนะนำของฉัน

1. ไม่ใช้new Object();- มันยิ่งใหญ่กว่า{};และดูงี่เง่า
2. ใช้เสมอ[];- ยกเว้นเมื่อคุณต้องการสร้างอาร์เรย์ "ว่าง" อย่างรวดเร็วด้วยความยาวที่กำหนดไว้ล่วงหน้า

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

var objectA = {} //This is an object literal

var objectB = new Object() //This is the object constructor

ใน JS ทุกอย่างเป็นวัตถุ แต่คุณควรระวังเกี่ยวกับสิ่งต่อไปนี้ด้วย Object ใหม่ (): มันสามารถรับพารามิเตอร์และขึ้นอยู่กับพารามิเตอร์นั้นมันจะสร้างสตริงตัวเลขหรือวัตถุว่างเปล่า

ตัวอย่างเช่น: new Object(1)จะส่งคืนหมายเลข new Object("hello")จะส่งคืนสตริงหมายความว่าตัวสร้างวัตถุสามารถมอบหมาย - ขึ้นอยู่กับพารามิเตอร์ - การสร้างวัตถุให้กับตัวสร้างอื่น ๆ เช่นสตริงจำนวน ฯลฯ ... สิ่งสำคัญคือต้องคำนึงถึงเรื่องนี้เมื่อคุณจัดการข้อมูลแบบไดนามิกเพื่อ สร้างวัตถุ ..

ผู้เขียนหลายคนแนะนำไม่ให้ใช้ตัวสร้างวัตถุเมื่อคุณสามารถใช้สัญกรณ์ตัวอักษรแทนซึ่งคุณจะมั่นใจได้ว่าสิ่งที่คุณกำลังสร้างคือสิ่งที่คุณคาดหวังว่าจะมีในรหัสของคุณ

ฉันแนะนำให้คุณอ่านเพิ่มเติมเกี่ยวกับความแตกต่างระหว่างสัญกรณ์ตามตัวอักษรและตัวสร้างบนจาวาสคริปต์เพื่อค้นหารายละเอียดเพิ่มเติม

สิ่งเหล่านี้มีผลลัพธ์ที่เหมือนกัน แต่ฉันเพียงแค่เพิ่มว่าการใช้ไวยากรณ์ตามตัวอักษรสามารถช่วยให้คุ้นเคยกับไวยากรณ์ของ JSON (ชุดย่อย string-ified ของไวยากรณ์ตัวอักษรวัตถุ JavaScript) ดังนั้นจึงอาจเป็นวิธีที่ดีในการเข้าใช้ .

อีกอย่างหนึ่ง: คุณอาจมีข้อผิดพลาดเล็กน้อยหากคุณลืมใช้newโอเปอเรเตอร์ ดังนั้นการใช้ตัวอักษรจะช่วยให้คุณหลีกเลี่ยงปัญหานั้นได้

ในท้ายที่สุดมันจะขึ้นอยู่กับสถานการณ์เช่นเดียวกับการตั้งค่า

ไวยากรณ์และตัวอักษรอาร์เรย์ {} / [] ถูกนำมาใช้ใน JavaScript 1.2 ดังนั้นจึงไม่พร้อมใช้งาน (และจะสร้างข้อผิดพลาดทางไวยากรณ์) ในเวอร์ชันของ Netscape Navigator ก่อนหน้า 4.0

นิ้วของฉันยังคงเป็นค่าเริ่มต้นที่จะพูดว่า Array () ใหม่ แต่ฉันเป็นคนแก่มาก โชคดีที่ Netscape 3 ไม่ใช่เบราว์เซอร์ที่หลายคนต้องพิจารณาในวันนี้ ...

var objectA = {}

มันเร็วกว่ามากและจากประสบการณ์ของฉันใช้งานบ่อยกว่าดังนั้นจึงน่าจะดีที่สุดที่จะใช้ 'มาตรฐาน' และบันทึกการพิมพ์บางอย่าง

ฉันเชื่อว่า{}ถูกแนะนำในหนึ่งใน vids Javascript ที่นี่เป็นแบบแผนการเข้ารหัสที่ดี newเป็นสิ่งจำเป็นสำหรับการสืบทอด pseudoclassical var obj = {};วิธีที่จะช่วยให้การเตือนคุณว่านี้ไม่ได้เป็นเชิงวัตถุภาษาคลาสสิก แต่ prototypal หนึ่ง ดังนั้นเวลาเดียวที่คุณจะต้องการจริงๆnewคือเมื่อคุณใช้ฟังก์ชั่นคอนสตรัคเตอร์ ตัวอย่างเช่น:

var Mammal = function (name) {
  this.name = name;
};

Mammal.prototype.get_name = function () {
  return this.name;
}

Mammal.prototype.says = function() {
  return this.saying || '';
}

จากนั้นจะถูกใช้เช่น:

var aMammal = new Mammal('Me warm-blooded');
var name = aMammal.get_name();

ข้อดีอีกอย่างที่จะใช้{}เมื่อเทียบกับnew Objectคือคุณสามารถใช้มันเพื่อทำตัวอักษรวัตถุสไตล์ JSON

ประสิทธิภาพของอินสแตนซ์อาร์เรย์

หากคุณต้องการสร้างอาร์เรย์ที่ไม่มีความยาว:

var arr = []; เร็วกว่า var arr = new Array();

หากคุณต้องการสร้างอาร์เรย์ว่างเปล่าที่มีความยาวที่แน่นอน:

var arr = new Array(x);จะเร็วกว่าvar arr = []; arr[x-1] = undefined;

สำหรับการวัดประสิทธิภาพให้คลิกที่ต่อไปนี้: https://jsfiddle.net/basickarl/ktbbry5b/

อย่างไรก็ตามฉันไม่ทราบว่ารอยเท้าหน่วยความจำของทั้งสองฉันสามารถจินตนาการที่new Array()ใช้พื้นที่มากขึ้น

นี่คือสิ่งเดียวกัน ใช้สิ่งที่คุณสะดวกกว่า

ตกลงมีเพียง 2 วิธีในการทำสิ่งเดียวกัน! หนึ่งที่เรียกว่าobject literalและอีกคนหนึ่งคือฟังก์ชั่นconstructor!

แต่อ่านต่อมีสองสิ่งที่ฉันต้องการแบ่งปัน:

การใช้{}ทำให้โค้ดของคุณอ่านง่ายขึ้นในขณะที่สร้างอินสแตนซ์ของObjectหรือฟังก์ชันในตัวอื่น ๆ ที่ไม่แนะนำ ...

นอกจากนี้ฟังก์ชัน Object ยังได้รับพารามิเตอร์เนื่องจากเป็นฟังก์ชันเช่นObject(params)... แต่{}เป็นวิธีที่บริสุทธิ์ในการเริ่มต้นวัตถุใน JavaScript ...

การใช้ออบเจกต์ตามตัวอักษรทำให้โค้ดของคุณดูสะอาดตาและอ่านง่ายขึ้นสำหรับผู้พัฒนารายอื่นและสอดคล้องกับแนวทางปฏิบัติที่ดีที่สุดใน JavaScript ...

ในขณะที่ Object ใน Javascript สามารถเป็นเกือบทุกอย่าง{}เพียงชี้ไปที่วัตถุ javascript สำหรับการทดสอบวิธีการทำงานให้ทำด้านล่างในรหัสหรือคอนโซล JavaScript ของคุณ:

var n = new Object(1); //Number {[[PrimitiveValue]]: 1}

น่าแปลกที่มันสร้างตัวเลขขึ้นมา!

var a = new Object([1,2,3]); //[1, 2, 3]

และนี่คือการสร้างอาร์เรย์!

var s = new Object('alireza'); //String {0: "a", 1: "l", 2: "i", 3: "r", 4: "e", 5: "z", 6: "a", length: 7, [[PrimitiveValue]]: "alireza"}

และผลลัพธ์แปลก ๆ สำหรับString!

ดังนั้นถ้าคุณกำลังสร้างวัตถุก็แนะนำให้ใช้วัตถุที่แท้จริงจะมีรหัสมาตรฐานและหลีกเลี่ยงการเกิดอุบัติเหตุใด ๆ เช่นรหัสข้างต้นยังประสิทธิภาพการทำงานที่ชาญฉลาดใช้{}จะดีกว่าในประสบการณ์ของฉัน!