ประกาศหลายตัวแปรใน JavaScript

ใน JavaScript เป็นไปได้ที่จะประกาศตัวแปรหลายอย่างดังนี้:

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

... หรือเช่นนี้

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

วิธีหนึ่งดีกว่า / เร็วกว่าวิธีอื่นหรือไม่?

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

ด้วยวิธีที่สองมันน่ารำคาญที่จะลบการประกาศครั้งแรกหรือครั้งสุดท้ายเพราะมันมีvarคำหลักและอัฒภาค และทุกครั้งที่คุณเพิ่มการประกาศใหม่คุณต้องเปลี่ยนเครื่องหมายอัฒภาคในบรรทัดเก่าเป็นเครื่องหมายจุลภาค

นอกเหนือจากการบำรุงรักษาวิธีแรกที่ช่วยลดความเป็นไปได้ของการเกิดตัวแปรทั่วโลกของอุบัติเหตุ:

(function () {
var variable1 = "Hello World!" // semicolon is missed out accidently
var variable2 = "Testing..."; // still a local variable
var variable3 = 42;
}());

ในขณะที่วิธีที่สองให้อภัยน้อยกว่า:

(function () {
var variable1 = "Hello World!" // comma is missed out accidently
    variable2 = "Testing...", // becomes a global variable
    variable3 = 42; // a global variable as well
}());

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

สามารถอ่านได้มากขึ้นเมื่อทำเช่นนี้:

var hey = 23;
var hi = 3;
var howdy 4;

แต่ใช้พื้นที่และบรรทัดของรหัสน้อยลงด้วยวิธีนี้:

var hey=23,hi=3,howdy=4;

มันเหมาะสำหรับการประหยัดพื้นที่ แต่ให้ตัวบีบอัด JavaScript จัดการให้คุณ

อาจจะเป็นเช่นนี้

var variable1 = "hello world"
, variable2 = 2
, variable3 = "how are you doing"
, variable4 = 42;

ยกเว้นเมื่อเปลี่ยนตัวแปรตัวแรกหรือตัวสุดท้ายมันง่ายต่อการบำรุงรักษาและอ่าน

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

ECMAScript6 การมอบหมายการทำลายล้างเบื้องต้นซึ่งทำได้ดีทีเดียว:

[a, b] = [1, 2] aจะเท่ากับ1และจะเท่ากับb2

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

สามารถอ่านได้มากกว่า:

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

แต่พวกเขาทำสิ่งเดียวกัน

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

let [variable1 , variable2, variable3] = 
["Hello World!", "Testing...", 42];

console.log(variable1); // Hello World!
console.log(variable2); // Testing...
console.log(variable3); // 42

การใช้เครื่องหมายจุลภาค แต่ที่สำคัญของฉันอยู่ในการ for for loop:

for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}

ฉันไปที่นี่เพื่อค้นหาว่าตกลงใน JavaScript หรือไม่

แม้จะเห็นว่ามันใช้งานได้คำถามก็ยังคงอยู่ว่า n เป็นฟังก์ชันของท้องถิ่นหรือไม่

สิ่งนี้ยืนยันว่า n เป็นโลคัล:

a=[3,5,7,11];
(function l () { for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}}) ();
console.log(typeof n == "undefined" ?
  "as expected, n was local" : "oops, n was global");

สักครู่ฉันก็ไม่แน่ใจสลับไปมาระหว่างภาษา

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

ฉันรู้สึกว่าการแลกเปลี่ยนมีความคุ้มค่าถ้ามันหมายถึงการหย่านมนักพัฒนาออกจากการวาง 'var' ทุกที่ที่พวกเขารู้สึกเหมือน

ผู้คนอาจบ่นเกี่ยวกับ JSLint ฉันก็ทำได้เช่นกัน แต่ส่วนมากมันไม่ได้มุ่งไปที่การแก้ไขปัญหาเกี่ยวกับภาษา แต่ในการแก้ไขนิสัยที่ไม่ดีของโคเดอร์จึงป้องกันปัญหาในโค้ดที่พวกเขาเขียน ดังนั้น:

"ในภาษาที่มีขอบเขตบล็อกมักแนะนำให้มีการประกาศตัวแปรที่ไซต์ที่ใช้ครั้งแรก แต่เนื่องจาก JavaScript ไม่มีขอบเขตบล็อกจึงฉลาดที่จะประกาศตัวแปรทั้งหมดของฟังก์ชันที่ด้านบนของฟังก์ชัน แนะนำให้ใช้คำสั่ง var เดียวสำหรับแต่ละฟังก์ชัน " - http://www.jslint.com/lint.html#scope

ฉันคิดว่ามันเป็นเรื่องของการตั้งค่าส่วนตัว ฉันชอบที่จะทำในวิธีต่อไปนี้:

   var /* Vars */
            me = this, that = scope,
            temp, tempUri, tempUrl,
            videoId = getQueryString()["id"],
            host = location.protocol + '//' + location.host,
            baseUrl = "localhost",
            str = "Visit W3Schools",
            n = str.search(/w3schools/i),
            x = 5,
            y = 6,
            z = x + y
   /* End Vars */;

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

หากคุณมี 10 ตัวแปรที่ถูกกำหนดด้วยไวยากรณ์ของจุลภาคคุณจะไม่มีทางรู้ได้เลยว่าใครเป็นผู้กระทำผิด

เวอร์ชั่นแถลงการณ์แต่ละฉบับไม่ได้รับผลกระทบจากความกำกวมนี้

แนวคิดของ "การทำงานร่วมกันมากกว่าการเชื่อมต่อ" สามารถนำไปใช้โดยทั่วไปมากกว่าวัตถุ / โมดูล / ฟังก์ชั่น นอกจากนี้ยังสามารถให้บริการในสถานการณ์นี้:

ตัวอย่างที่สองที่ OP แนะนำได้รวมตัวแปรทั้งหมดไว้ในคำสั่งเดียวกันซึ่งทำให้ไม่สามารถที่จะรับหนึ่งบรรทัดและย้ายไปที่อื่นโดยไม่ทำลายเนื้อหา (การมีเพศสัมพันธ์สูง) ตัวอย่างแรกที่เขาให้ทำให้การมอบหมายตัวแปรเป็นอิสระจากกัน (การมีเพศสัมพันธ์ต่ำ)

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

http://en.wikipedia.org/wiki/Coupling_(computer_programming)

ดังนั้นเลือกอันแรก

ฉันรู้โพสต์เก่า แต่เพื่อเพิ่มรายละเอียดของมุมมองสำหรับเพื่อนชาว Google:

ปัญหาการบำรุงรักษาสามารถเอาชนะได้ง่ายด้วยการจัดรูปแบบเล็กน้อยเช่นนี้

let
  my_var1 = 'foo',
  my_var2 = 'bar',
  my_var3 = 'baz'
;

ฉันใช้การจัดรูปแบบนี้อย่างเคร่งครัดตามความชอบส่วนตัว ฉันข้ามรูปแบบนี้สำหรับการประกาศเดียวแน่นอนหรือที่มันเพียงรวบรวมผลงาน

ฉันเชื่อว่าก่อนที่เราจะเริ่มใช้ ES6 วิธีการที่มีการประกาศ var เดียวนั้นไม่ดีหรือไม่ดี (ในกรณีที่คุณมี linters และ'use strict'มันเป็นรสนิยมที่ดีจริงๆ แต่ตอนนี้ทุกอย่างเปลี่ยนไปสำหรับฉัน :

1. ตอนนี้เรามีตัวแปรสองชนิดใหม่และvarล้าสมัยแล้ว มันเป็นเรื่องดีที่จะใช้ทุกที่จนกว่าคุณต้องการจริงๆconst letบ่อยครั้งที่โค้ดของคุณจะมีการประกาศตัวแปรพร้อมการกำหนดที่อยู่ตรงกลางของโค้ดและเนื่องจากการกำหนดขอบเขตของบล็อกคุณมักจะย้ายตัวแปรระหว่างบล็อกในกรณีที่มีการเปลี่ยนแปลงเล็กน้อย ฉันคิดว่ามันเป็นเรื่องง่ายที่จะทำเช่นนั้นด้วยการประกาศหลายบรรทัด

2. ไวยากรณ์ ES6 มีความหลากหลายมากขึ้นเรามี destructors, สตริงเทมเพลต, ฟังก์ชั่นลูกศรและการเลือกเสริม เมื่อคุณใช้คุณลักษณะทั้งหมดด้วยประกาศ var เดียวมันเจ็บอ่านง่าย

ฉันคิดว่าวิธีแรก (หลาย vars) ดีที่สุดเพราะคุณสามารถจบลงด้วยสิ่งนี้ (จากแอปพลิเคชันที่ใช้การทำให้ล้มลง) ซึ่งอ่านยากในความคิดของฉัน:

    var categories = ko.observableArray(),
        keywordFilter = ko.observableArray(),
        omniFilter = ko.observable('').extend({ throttle: 300 }),
        filteredCategories = ko.computed(function () {
            var underlyingArray = categories();
            return ko.utils.arrayFilter(underlyingArray, function (n) {
                return n.FilteredSportCount() > 0;
            });
        }),
        favoriteSports = ko.computed(function () {
            var sports = ko.observableArray();
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        sports.push(a);
                    }
                });
            });
            return sports;
        }),
        toggleFavorite = function (sport, userId) {
            var isFavorite = sport.IsFavorite();

            var url = setfavouritesurl;

            var data = {
                userId: userId,
                sportId: sport.Id(),
                isFavourite: !isFavorite
            };

            var callback = function () {
                sport.IsFavorite(!isFavorite);
            };

            jQuery.support.cors = true;
            jQuery.ajax({
                url: url,
                type: "GET",
                data: data,
                success: callback
            });
        },
        hasfavoriteSports = ko.computed(function () {
            var result = false;
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        result = true;
                    }
                });
            });
            return result;
        });