ฉันจะแปลงวัตถุ“ อาร์กิวเมนต์” เป็นอาร์เรย์ใน JavaScript ได้อย่างไร

argumentsวัตถุใน JavaScript เป็นหูดว่ามันแปลกทำหน้าที่เช่นเดียวกับอาร์เรย์ในสถานการณ์ส่วนใหญ่ แต่ก็ไม่จริงวัตถุอาร์เรย์ ตั้งแต่มันจริงๆสิ่งอื่นทั้งหมดก็ไม่ได้มีฟังก์ชั่นที่มีประโยชน์จากArray.prototypeเช่นforEach, sort, และfiltermap

มันง่ายมากที่จะสร้างอาร์เรย์ใหม่จากอ็อบเจกต์อาร์กิวเมนต์ด้วยลูป ตัวอย่างเช่นฟังก์ชันนี้เรียงลำดับอาร์กิวเมนต์:

function sortArgs() {
    var args = [];
    for (var i = 0; i < arguments.length; i++)
        args[i] = arguments[i];
    return args.sort();
}

อย่างไรก็ตามนี่เป็นสิ่งที่น่าสมเพชที่ต้องทำเพื่อเข้าถึงฟังก์ชันอาร์เรย์ JavaScript ที่มีประโยชน์อย่างยิ่ง มีวิธีการในตัวที่จะใช้ไลบรารีมาตรฐานหรือไม่?

ES6 โดยใช้พารามิเตอร์ที่เหลือ

หากคุณสามารถใช้ ES6 คุณสามารถใช้:

พารามิเตอร์ที่เหลือ

function sortArgs(...args) {
  return args.sort(function (a, b) { return a - b; });
}

document.body.innerHTML = sortArgs(12, 4, 6, 8).toString();

ตามที่คุณสามารถอ่านได้ในลิงค์

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

หากคุณอยากรู้เกี่ยวกับ...ไวยากรณ์ก็จะเรียกว่าการแพร่กระจายผู้ประกอบการและคุณสามารถอ่านเพิ่มเติมที่นี่

ES6 ใช้ Array.from ()

ใช้Array.from :

function sortArgs() {
  return Array.from(arguments).sort(function (a, b) { return a - b; });
}

document.body.innerHTML = sortArgs(12, 4, 6, 8).toString();

Array.from เพียงแค่แปลง Array-like หรือ Iterable objects เป็น Array อินสแตนซ์

ES5

คุณสามารถจริงเพียงแค่ใช้Arrayของsliceฟังก์ชั่นในวัตถุข้อโต้แย้งและมันจะแปลงเป็นอาร์เรย์ JavaScript มาตรฐาน คุณเพียงแค่ต้องอ้างอิงด้วยตนเองผ่านทางต้นแบบของ Array:

function sortArgs() {
    var args = Array.prototype.slice.call(arguments);
    return args.sort();
}

ทำไมจึงใช้งานได้ นี่คือข้อความที่ตัดตอนมาจากเอกสาร ECMAScript 5 เอง :

หมายเหตุ : sliceฟังก์ชั่นทั่วไปโดยเจตนา; ไม่ต้องการให้ค่านี้เป็นวัตถุ Array ดังนั้นจึงสามารถถ่ายโอนไปยังวัตถุประเภทอื่นเพื่อใช้เป็นวิธีการ ไม่ว่าจะเป็นsliceฟังก์ชั่นสามารถนำมาใช้ประสบความสำเร็จกับวัตถุโฮสต์คือการดำเนินการขึ้นอยู่กับ

ดังนั้นsliceทำงานกับทุกสิ่งที่มีlengthคุณสมบัติซึ่งargumentsจะสะดวก

หากArray.prototype.sliceคุณมีคำหนึ่งคำมากเกินไปคุณสามารถย่อได้เล็กน้อยโดยใช้ตัวอักษรแถวลำดับ:

var args = [].slice.call(arguments);

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

นอกจากนี้ยังเป็นการคุ้มค่าที่จะอ้างอิงถึงหน้า Bluebird ของสัญญาห้องสมุดที่แสดงวิธีการจัดการargumentsวัตถุให้เป็นอาร์เรย์ด้วยวิธีที่ทำให้ฟังก์ชั่นปรับให้เหมาะสมภายใต้เอนจิ้น V8 JavaScript :

function doesntLeakArguments() {
    var args = new Array(arguments.length);
    for(var i = 0; i < args.length; ++i) {
        args[i] = arguments[i];
    }
    return args;
}

var args = [].slice.call(arguments);วิธีนี้จะใช้ในความโปรดปรานของ ผู้เขียนยังแสดงให้เห็นว่าขั้นตอนการสร้างสามารถช่วยลดความฟุ่มเฟื่อยได้อย่างไร

function sortArgs(){ return [].slice.call(arguments).sort() }

// Returns the arguments object itself
function sortArgs(){ return [].sort.call(arguments) }

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

[].sort.call({0:1, 1:0, length:2}) // => ({0:0, 1:1, length:2})

ใช้:

function sortArguments() {
  return arguments.length === 1 ? [arguments[0]] :
                 Array.apply(null, arguments).sort();
}

Array(arg1, arg2, ...) ผลตอบแทน [arg1, arg2, ...]

Array(str1) ผลตอบแทน [str1]

Array(num1)ส่งคืนอาร์เรย์ที่มีnum1องค์ประกอบ

คุณต้องตรวจสอบจำนวนข้อโต้แย้ง!

Array.slice รุ่น (ช้ากว่า):

function sortArguments() {
  return Array.prototype.slice.call(arguments).sort();
}

Array.push รุ่น (ช้ากว่าเร็วกว่าชิ้น):

function sortArguments() {
  var args = [];
  Array.prototype.push.apply(args, arguments);
  return args.sort();
}

ย้ายเวอร์ชัน (ช้ากว่า แต่เล็กกว่าเร็วกว่า):

function sortArguments() {
  var args = [];
  for (var i = 0; i < arguments.length; ++i)
    args[i] = arguments[i];
  return args.sort();
}

Array.concat เวอร์ชัน (ช้าที่สุด):

function sortArguments() {
  return Array.prototype.concat.apply([], arguments).sort();
}

หากคุณกำลังใช้ jQuery ต่อไปนี้เป็นข้อตกลงที่ดีกว่าในความคิดของฉัน:

function sortArgs(){
  return $.makeArray(arguments).sort();
}

ใน ECMAScript 6 ไม่มีความจำเป็นต้องใช้ hacks Array.prototype.slice()น่าเกลียดเช่น คุณสามารถใช้แทนไวยากรณ์การแพร่กระจาย (... )

(function() {
  console.log([...arguments]);
}(1, 2, 3))

มันอาจดูแปลก แต่ก็ค่อนข้างง่าย มันแค่แยกargumentsองค์ประกอบและใส่กลับเข้าไปในอาร์เรย์ หากคุณยังไม่เข้าใจให้ดูตัวอย่างนี้:

console.log([1, ...[2, 3], 4]);
console.log([...[1, 2, 3]]);
console.log([...[...[...[1]]]]);

หมายเหตุว่ามันไม่ได้ทำงานในเบราว์เซอร์รุ่นเก่าบางรุ่นเช่น IE 11 ดังนั้นหากคุณต้องการที่จะสนับสนุนเบราว์เซอร์เหล่านี้คุณควรใช้Babel

นี่คือเกณฑ์มาตรฐานของวิธีการหลายแปลงอาร์กิวเมนต์เป็นอาร์เรย์

สำหรับฉันแล้วทางออกที่ดีที่สุดสำหรับข้อโต้แย้งเล็กน้อยคือ:

function sortArgs (){
  var q = [];
  for (var k = 0, l = arguments.length; k < l; k++){
    q[k] = arguments[k];
  }
  return q.sort();
}

สำหรับกรณีอื่น ๆ :

function sortArgs (){ return Array.apply(null, arguments).sort(); }

ฉันขอแนะนำให้ใช้ตัวดำเนินการสเปรด ECMAScript 6 ซึ่งจะผูกพารามิเตอร์การติดตามลงในอาร์เรย์ ด้วยวิธีนี้คุณไม่จำเป็นต้องสัมผัสargumentsวัตถุและรหัสของคุณจะง่ายขึ้น ข้อเสียของโซลูชันนี้คือมันไม่สามารถใช้ได้กับเบราว์เซอร์ส่วนใหญ่ดังนั้นคุณจะต้องใช้คอมไพเลอร์ JS เช่น Babel ภายใต้ประทุน Babel เปลี่ยนargumentsเป็น Array พร้อมห่วง for

function sortArgs(...args) {
  return args.sort();
}

หากคุณไม่สามารถใช้ ECMAScript 6 ได้ฉันขอแนะนำให้ดูคำตอบอื่น ๆ เช่น @Jonathan Fingland

function sortArgs() {
    var args = Array.prototype.slice.call(arguments);
    return args.sort();
}

Lodash:

var args = _.toArray(arguments);

ในการดำเนินการ:

(function(){ console.log(_.toArray(arguments).splice(1)); })(1, 2, 3)

ผลิต:

[2,3]

ใช้Array.from()ซึ่งใช้วัตถุคล้ายอาร์เรย์ (เช่นarguments) เป็นอาร์กิวเมนต์และแปลงเป็นอาร์เรย์:

(function() {
  console.log(Array.from(arguments));
}(1, 2, 3));

หมายเหตุว่ามันไม่ได้ทำงานในเบราว์เซอร์รุ่นเก่าบางรุ่นเช่น IE 11 ดังนั้นหากคุณต้องการที่จะสนับสนุนเบราว์เซอร์เหล่านี้คุณควรใช้Babel

function sortArg(){
var args = Array.from(arguments); return args.sort();
}

 function sortArg(){
    var args = Array.from(arguments); 
    return args.sort();
    }
 
 console.log(sortArg('a', 'b', 1, 2, '34', 88, 20, '19', 39, 'd', 'z', 'ak', 'bu', 90));

คำตอบอื่น

ใช้คาถามนต์ดำ:

function sortArguments() {
  arguments.__proto__ = Array.prototype;
  return arguments.slice().sort();
}

Firefox, Chrome, Node.js, IE11 ก็โอเค

ลองใช้ดู Object.setPrototypeOf()

คำอธิบาย: การตั้งค่าprototypeของargumentsการArray.prototype

function toArray() {
  return Object.setPrototypeOf(arguments, Array.prototype)
} 

console.log(toArray("abc", 123, {def:456}, [0,[7,[14]]]))

คำอธิบาย: นำแต่ละดัชนีของargumentsวางรายการลงในอาร์เรย์ที่ดัชนีที่สอดคล้องกันของอาร์เรย์

สามารถใช้อีกทางเลือกหนึ่ง Array.prototype.map()

function toArray() {
  return [].map.call(arguments, (_,k,a) => a[k])
} 

console.log(toArray("abc", 123, {def:456}, [0,[7,[14]]]))

คำอธิบาย: นำแต่ละดัชนีของargumentsวางรายการลงในอาร์เรย์ที่ดัชนีที่สอดคล้องกันของอาร์เรย์

for..of ห่วง

function toArray() {
 let arr = []; for (let prop of arguments) arr.push(prop); return arr
} 

console.log(toArray("abc", 123, {def:456}, [0,[7,[14]]]))

หรือ Object.create()

คำอธิบาย: สร้างวัตถุตั้งค่าคุณสมบัติของวัตถุไปยังรายการที่ดัชนีของแต่ละarguments; ชุดprototypeของวัตถุที่สร้างขึ้นเพื่อArray.prototype

function toArray() {
  var obj = {};
  for (var prop in arguments) {
    obj[prop] = {
      value: arguments[prop],
      writable: true,
      enumerable: true,
      configurable: true
    }
  } 
  return Object.create(Array.prototype, obj);
}

console.log(toArray("abc", 123, {def: 456}, [0, [7, [14]]]))

นี่คือโซลูชันที่สะอาดและรัดกุม:

function argsToArray() {
  return Object.values(arguments);
}

// example usage
console.log(
  argsToArray(1, 2, 3, 4, 5)
  .map(arg => arg*11)
);

Object.values( )จะกลับค่าของวัตถุเป็นอาร์เรย์และตั้งแต่argumentsเป็นวัตถุเป็นหลักจะแปลงargumentsเป็นอาร์เรย์จึงให้คุณด้วยทั้งหมดของอาร์เรย์ฟังก์ชั่นผู้ช่วยเช่นmap, forEach, filterฯลฯ

Benshmarck 3 วิธี:

function test()
{
  console.log(arguments.length + ' Argument(s)');

  var i = 0;
  var loop = 1000000;
  var t = Date.now();
  while(i < loop)
  {
      Array.prototype.slice.call(arguments, 0); 
      i++;
  }
  console.log(Date.now() - t);


  i = 0,
  t = Date.now();
  while(i < loop)
  {
      Array.apply(null, arguments);
      i++;
  }
  console.log(Date.now() - t);

  i = 0,
  t = Date.now();
  while(i < loop)
  {
      arguments.length == 1 ? [arguments[0]] : Array.apply(null, arguments);
      i++;
  }
  console.log(Date.now() - t);
}

test();
test(42);
test(42, 44);
test(42, 44, 88, 64, 10, 64, 700, 15615156, 4654, 9);
test(42, 'truc', 44, '47', 454, 88, 64, '@ehuehe', 10, 64, 700, 15615156, 4654, 9,97,4,94,56,8,456,156,1,456,867,5,152489,74,5,48479,89,897,894,894,8989,489,489,4,489,488989,498498);

ผลลัพธ์?

0 Argument(s)
256
329
332
1 Argument(s)
307
418
4
2 Argument(s)
375
364
367
10 Argument(s)
962
601
604
40 Argument(s)
3095
1264
1260

สนุก !

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

function sortArgs() {
  return [...arguments].sort()
}

[...arguments]ถือได้ว่าเป็นทางเลือกประเภทหนึ่งArray.from(arguments)ซึ่งยังใช้งานได้อย่างสมบูรณ์แบบ

ทางเลือก ES7 คือความเข้าใจอาร์เรย์:

[for (i of arguments) i].sort()

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

[for (i of arguments) if (i % 2) Math.log(i)].sort()

 function x(){
   var rest = [...arguments]; console.log(rest);return     
   rest.constructor;
 };
 x(1,2,3)

ฉันลองใช้เทคนิคการทำลายล้างอย่างง่าย

วัตถุอากิวเมนต์มีให้ใช้งานภายในร่างกายของฟังก์ชันเท่านั้น แม้ว่าคุณสามารถจัดทำดัชนีวัตถุอาร์กิวเมนต์เช่นอาร์เรย์ได้ แต่ก็ไม่ใช่อาร์เรย์ มันไม่มีคุณสมบัติของอาเรย์ใด ๆ นอกจากความยาว

// function arguments length 5
function properties(a,b,c,d,e){
var function_name= arguments.callee.name
var arguments_length= arguments.length;
var properties_length=  properties.length; 
var function_from= properties.caller.name;
console.log('I am the function name: '+ function_name);
console.log('I am the function length, I am function spacific: '+ properties_length); 
console.log('I am the arguments length, I am context/excution spacific: '+ arguments_length);
console.log('I am being called From: '+  function_from );
}

// arguments 3
function parent(){
properties(1,2,3);
}

//arguments length 3 because execution spacific
parent();

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

function add(){

var sum=0;

for(var i=0; i< arguments.length;i++){

sum = sum + arguments[i];

}

return sum;

}

console.log(add(1,2,3));

อย่างไรก็ตามวัตถุอาร์กิวเมนต์ไม่ใช่อาร์เรย์และไม่มีคุณสมบัติอื่นใดนอกจากความยาว

คุณสามารถแปลงวัตถุอาร์กิวเมนต์เป็นอาร์เรย์ที่จุดที่คุณสามารถเข้าถึงวัตถุอาร์กิวเมนต์

มีหลายวิธีที่คุณสามารถเข้าถึงอ็อบเจ็กต์อาร์กิวเมนต์ภายในเนื้อความฟังก์ชันและสิ่งเหล่านี้รวมถึง:

1. คุณสามารถเรียกใช้วิธีการ Array.prototoype.slice.call

Array.prototype.slice.call (อาร์กิวเมนต์)

function giveMeArgs(arg1,arg2){

var args = Array.prototype.slice.call(arguments);
return args
}

console.log( giveMeArgs(1,2));

2. คุณสามารถใช้อาร์เรย์ตัวอักษร

[] .slice.call (อาร์กิวเมนต์)

function giveMeArgs(arg1,arg2){

var args = [].slice.call(arguments);

return args;

}

console.log( giveMeArgs(1,2) );

3. คุณสามารถใช้ส่วนที่เหลือ ...

function giveMeArgs(...args){

return args;

}

console.log(giveMeArgs(1,2))

4. คุณสามารถใช้สเปรด [... ]

function giveMeArgs(){

var args = [...arguments];
return args;

}

console.log(giveMeArgs(1,2));

5. คุณสามารถใช้ Array.from ()

function giveMeArgs(){

var args = Array.from(arguments);

return args;

}

console.log(giveMeArgs(1,2));

คุณสามารถสร้างฟังก์ชั่นที่ใช้ซ้ำได้เพื่อทำกับอาร์กิวเมนต์ใด ๆ ฟังก์ชันที่ง่ายที่สุดคืออะไร:

function sortArgs() {
  return [...arguments].sort();
}

sortArgs('ali', 'reza', 1, 2, 'a'); //[1, 2, "a", "ali", "reza"];

ไวยากรณ์สเปรดสามารถใช้ในES6ขึ้นไป ...

แต่ถ้าคุณต้องการใช้สิ่งที่เข้ากันได้กับES5และด้านล่างคุณสามารถใช้Array.prototype.slice.callเพื่อให้รหัสของคุณมีลักษณะดังนี้:

function sortArgs() {
  return Array.prototype.slice.call(arguments).sort();
}

sortArgs('ali', 'reza', 1, 2, 'a'); //[1, 2, "a", "ali", "reza"];

นอกจากนี้ยังมีวิธีการอื่น ๆ อีกสองสามตัวอย่างเช่นการใช้Array.fromหรือวนรอบอาร์กิวเมนต์และกำหนดให้กับอาร์เรย์ใหม่ ...

นี่เป็นคำถามที่เก่ามาก แต่ฉันคิดว่าฉันมีโซลูชันที่พิมพ์ได้ง่ายกว่าโซลูชันก่อนหน้าเล็กน้อยและไม่พึ่งพาไลบรารีภายนอก:

function sortArguments() {
  return Array.apply(null, arguments).sort();
}