แนวทางปฏิบัติที่ดีที่สุดที่ควรปฏิบัติเมื่อประกาศอาร์เรย์ใน Javascript คืออะไร


176

เมื่อฉันต้องการประกาศอาร์เรย์ใหม่ฉันใช้สัญลักษณ์นี้

var arr = new Array();

แต่เมื่อทดสอบออนไลน์เช่น jsbinคำเตือนจะส่งสัญญาณให้ฉัน "ใช้สัญกรณ์ตัวอักษรของอาร์เรย์ []"

ฉันไม่พบเหตุผลที่จะหลีกเลี่ยงการใช้ตัวสร้าง มีประสิทธิภาพน้อยกว่าการใช้งาน[]หรือไม่? หรือมันเป็นการปฏิบัติที่ไม่ดี?

มีเหตุผลที่ดีที่จะใช้var arr = [];แทนvar arr = new Array();หรือไม่


5
ทั้งคู่ก็โอเค คุณเพียงแค่บันทึกไบต์ในการส่ง
Sirko

13
มีความแตกต่างแน่นอน ดูโพสต์นี้: stackoverflow.com/q/2280285/921204
techfoobar

หมายเหตุ: มีความแตกต่างถ้า Array ถูกเขียนทับเท่านั้น
crdx

@apkd บนเบราว์เซอร์บางตัวมีความแตกต่างด้านประสิทธิภาพที่สำคัญ
Alnitak

ยุติธรรมพอสมควร ฉันไม่เห็นคำถามที่เชื่อมโยง
crdx

คำตอบ:


260

คนส่วนใหญ่ใช้var a = []เพราะDouglas Crockford พูดอย่างนั้น

เหตุผลของเขารวมถึงพฤติกรรมที่ไม่ใช้งานง่ายและไม่สอดคล้องกันของnew Array():

var a = new Array(5);     // an array pre-sized to 5 elements long
var b = new Array(5, 10); // an array with two elements in it

โปรดทราบว่าไม่มีวิธีที่new Array()จะสร้างอาร์เรย์ที่มีเพียงหนึ่งเดียวองค์ประกอบตัวเลขที่ระบุไว้ล่วงหน้า !

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

ส่วนตัวผมมักจะใช้[]ไวยากรณ์และในทำนองเดียวกันมักจะใช้ไวยากรณ์ในสถานที่ของ{}new Object()


5
"คุณไม่สามารถเขียนทับพฤติกรรมของ []" คุณแน่ใจเกี่ยวกับเรื่องนี้? ฉันคิดว่าคุณสามารถเขียนทับอาเรย์คอนสตรัคเตอร์เพื่อส่งผลกระทบต่อ [] และตัวสร้างออบเจ็กต์มีผลต่อ {} อย่างน้อยในการปรับใช้บางอย่าง
Random832

11
@ Random832 อาจจะอยู่ในเบราว์เซอร์รุ่นเก่า แต่ไม่ใช่ในการติดตั้งใช้งาน ES5 โดยที่ spec ระบุว่าจะ[]เรียกตัวสร้างภายในไม่ใช่ค่าใด ๆ ที่Array.constructorเกิดขึ้นในเวลานั้น
Alnitak

5
โบนัส:ตัวอักษรแถวลำดับเร็วกว่าการสร้างอาร์เรย์ใหม่โดยใช้ตัวArrayสร้าง: jsperf.com/new-array
Mathias Bynens

@MathiasBynens บางครั้งเท่านั้น
OrangeDog

Ew @ the [] ทำงานแตกต่างไปจากตัวสร้างภายใน ความไม่ลงรอยกันจะทำให้เกิดความสับสนมากกว่าที่บันทึกไว้ แก้ไข: อากังวลเรื่องความปลอดภัย ฉันเข้าใจแล้ว
Erik Reppen

48

หนึ่งความแตกต่างอย่างมีนัยสำคัญคือการที่[]จะเสมอยกตัวอย่างอาร์เรย์ใหม่ในขณะที่new Arrayอาจจะมีการแย่งชิงเพื่อสร้างวัตถุที่แตกต่างกัน

(function () {
    "use strict";
    var foo,
        bar;
    //don't do this, it's a bad idea
    function Array() {
        alert('foo');
    }
    foo = new Array();
    bar = [];
}());​

ในโค้ดตัวอย่างของฉันฉันเก็บArrayฟังก์ชันที่ซ่อนไว้จากส่วนที่เหลือของขอบเขตเอกสารอย่างไรก็ตามเป็นไปได้มากว่าถ้าคุณเคยเจอปัญหาแบบนี้ว่าโค้ดจะไม่ถูกปิดอย่างดีและจะ อาจเป็นเรื่องยากที่จะค้นหา

คำเตือน : มันไม่ใช่ความคิดที่ดีที่จะจี้ตัวArrayสร้าง


7
IIRC ในเบราว์เซอร์รุ่นเก่าที่ใช้ตัวสร้าง Array จะทำให้ตัวแปลถูกตีความผิดอย่างไม่ถูกต้อง มีช่องโหว่ของ GMail CSRF เมื่อไม่นานมานี้ผู้ที่เกี่ยวข้องกับตัวสร้างอาร์เรย์และเบราว์เซอร์ใหม่ไม่สนใจการโหลดตัวอักษรมากเกินไปด้วยเหตุผลที่แม่นยำนี้
hugomg

การปฏิเสธความรับผิดชอบ: มันมีประโยชน์และเป็นประโยชน์อย่างมากในการปรับปรุงตัวสร้างอาร์เรย์ในช่วงหลายปี
Erik Reppen

26

สำหรับการบำรุงรักษาใช้ []

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

สำหรับอาร์เรย์ว่างให้ใช้ []

var ns = [];
var names = [ 'john', 'brian' ];

ดังที่แสดงไว้ที่นี่การใช้ตัวอักษรสำหรับองค์ประกอบที่ว่างเปล่าและองค์ประกอบที่รู้จักสองอย่างคือ fatster กว่าตัวสร้างอาร์เรย์

สำหรับอาร์เรย์ที่มีขนาดที่รู้จักให้ใช้ new Array(size)

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

ดังที่แสดงไว้ที่นี่

// fill an array with 100 numbers
var ns = new Array( 100 );
for ( var i = 0; i < 100; i++ ) {
    ns[i] = i;
}

ยังใช้งานได้กับอาร์เรย์ขนาดเล็กมากเช่นกัน


12

ไม่จริง ๆ แล้วไม่มีเหตุผลที่จะใช้สัญกรณ์หนึ่งกับอีกอันหนึ่งสำหรับ Array ที่ว่างเปล่า

อย่างไรก็ตามเบราว์เซอร์ส่วนใหญ่จะแสดงประสิทธิภาพที่ดีกว่าการใช้การx = [];เรียกConstructorเล็กน้อย

หากคุณต้องการสร้าง Array ที่มีขนาดเฉพาะคุณต้องใช้x = new Array(10);Array ซึ่งจะสร้าง Array ที่มี 10 undefinedช่อง


@Alnitak: ซึ่งคุณพูดไปแล้วนั้นไม่ได้ใช้งานง่ายและรัดกุม
jAndy

7
ฉันใส่กัน jsperf เพื่อเปรียบเทียบประสิทธิภาพการทำงาน: jsperf.com/array-constructor-versus-literal อย่างน้อยสำหรับฉันใน Chrome 20 บน Ubuntu ตัวอักษรนั้นเร็วกว่าตัวสร้าง
Steven

1
@jAndy, ฉันสามารถคิดหนึ่งความแตกต่างสำหรับอาร์เรย์ที่ว่างเปล่า
zzzzBov

ใช่แล้วทำไมคุณต้องการอาร์เรย์ที่มี "10 ช่องว่าง" ใน JavaScript ในความเป็นจริงคุณสามารถทำสิ่งเดียวกันกับ: var arr = []; arr [9] = "โอเมก้า"; 1. อาร์เรย์ใน JS เป็นแบบไดนามิกโดยสิ้นเชิงคุณสามารถอ้างอิงดัชนีใด ๆ ที่คุณต้องการและมันจะเป็น "undefined" นี่เป็นความจริงเช่นเดียวกับถ้าคุณจะพูดว่า: var arr = new Array (10); ARR [23]; 2. ความยาวของอาร์เรย์จะถูกกำหนดเป็นค่าสูงสุดที่มีอยู่ในนั้นโดยไม่คำนึงถึงจำนวนสล็อตที่ไม่ได้กำหนดซึ่งอยู่ระหว่างนั้น หรือคุณสามารถตั้งค่าด้วยตัวคุณเอง [] อาจไม่สามารถรักษามะเร็งได้ แต่จะดีกว่าเล็กน้อย
Norguard

7
  • var arr = [] ใช้อาร์เรย์ / วัตถุตามตัวอักษร
  • var arr = new Array () ใช้ตัวสร้างอาร์เรย์ / วัตถุ

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

var arr1 = new Array(1, 2, 3, 4);
var arr2 = [1, 2, 3, 4];

alert(arr1[0]); // 1
alert(arr2[0]); // 1

var arr3 = new Array(200);
var arr4 = [200];

alert(arr3[0]); // 'undefined'
alert(arr4[0]); // 200

2
สำหรับการอ้างอิงหลังฉากให้var arr = [];ใช้ตัวสร้างแบบลอจิคัลเช่นกัน มันเป็นเพียงแค่เสมอArrayในตัวคอนสตรัคอาร์เรย์มากกว่าฟังก์ชั่นสิ่งที่กำลังเกิดโดยชื่อ
cHao

6

ทั้งสองถูกต้องเท่านั้น แต่คนส่วนใหญ่ใช้var a = []

สามวิธีในการประกาศ Array ใน JavaScript

วิธีที่ 1 : เราสามารถประกาศอาร์เรย์อย่างชัดเจนด้วยคำหลัก "ใหม่" ของ JavaScript เพื่อยกตัวอย่างอาร์เรย์ในหน่วยความจำ (เช่นสร้างและทำให้พร้อมใช้งาน)

// Declare an array (using the array constructor)
var arlene1 = new Array();
var arlene2 = new Array("First element", "Second", "Last");

วิธีที่ 2 : เราใช้วิธีอื่นในการประกาศอาร์เรย์

// Declare an array (using literal notation)
var arlene1 = [];
var arlene2 = ["First element", "Second", "Last"];

วิธีที่ 3 : JavaScript ยังให้คุณสร้างอาร์เรย์ทางอ้อมด้วยการเรียกวิธีการเฉพาะ

// Create an array from a method's return value
var carter = "I-learn-JavaScript";
var arlene3 = carter.split("-");

4

มีข้อ จำกัด ที่ตัวสร้างสามารถใช้เป็นอาร์กิวเมนต์ได้

ในระบบส่วนใหญ่ฉันเข้ารหัสขีด จำกัด คือ 2 ^ 16 (2 ไบต์):

var myFreshArr = new Array(0,1,2,3 ..... 65536);

ที่จะทำให้เกิดข้อผิดพลาด (มีข้อโต้แย้งมากเกินไป .... )

เมื่อใช้ตัวอักษร [] คุณไม่มีปัญหาดังกล่าว

ในกรณีที่คุณไม่สนใจอาร์เรย์ขนาดใหญ่เช่นนี้ฉันคิดว่าคุณสามารถใช้สิ่งที่คุณต้องการ


2
คุณสามารถยกตัวอย่างว่าบุคคลใดที่ต้องการสร้างอาร์เรย์ที่มีค่า 70,000 ค่าล่วงหน้าได้หรือไม่? แม้ว่ามันจะอธิบายบางเว็บไซต์ที่น่ากลัวบางอย่างที่ฉันเคยเห็นที่ดูเหมือนจะไม่เสร็จสิ้นการโหลด ...
John O

2
John O ฉันเคยเห็นการใช้งาน SCON JSON ในเวลาของฉันเกี่ยวข้องกับอาร์เรย์ของ 2D / 3D Array ซึ่งมีรหัส IATA (สนามบิน) บริษัท สายการบิน บริษัท ทัวร์ผู้ประกอบการรีสอร์ทและอื่น ๆ ... เป็นหนึ่งอาร์เรย์ มันคือ ... ... 1MB + การดาวน์โหลด JSON ทำให้ฉันอยากร้องไห้
Norguard

4
var array = [ 1, 2, 3, 4];

เป็นน้ำตาล

var array = new Array(1, 2, 3, 4);

เป็นเกลือ


5
และสถานที่ที่จะใช้สำหรับกาแฟหรือพาสต้า
Aristos

น้ำตาลประโยคและเกลือ
linquize

3

เป็นเพราะnew Array()คลุมเครือ เหล่านี้เป็นตัวสร้างที่ถูกต้อง:

// Using brackets
[element0, element1, ..., elementN]

// Using new AND a list of elements
new Array(element0, element1, ..., elementN)

// Using new AND an integer specifying the array length
new Array(arrayLength)
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.