programing

어레이에 개체를 추가하는 방법

bestcode 2023. 1. 12. 22:13
반응형

어레이에 개체를 추가하는 방법

오브젝트를 어레이에 추가하려면 어떻게 해야 하나요(javascript 또는 jquery)?예를 들어, 이 코드의 문제는 무엇입니까?

function() {
  var a = new array();
  var b = new object();
  a[0] = b;
}

이 코드를 사용하여 function1과 call function2의 배열에 많은 객체를 저장하고 배열 내의 객체를 사용합니다.

  1. 개체를 배열에 저장하려면 어떻게 해야 합니까?
  2. 개체를 배열에 넣고 변수에 저장하려면 어떻게 해야 합니까?

Array.push()를 사용하여 어레이에 임의의 것을 배치합니다.

var a=[], b={};
a.push(b);    
// a[0] === b;

어레이에 관한 추가 정보

항목을 한 번에 두 개 이상 추가

var x = ['a'];
x.push('b', 'c');
// x = ['a', 'b', 'c']

배열 선두에 항목 추가

var x = ['c', 'd'];
x.unshift('a', 'b');
// x = ['a', 'b', 'c', 'd']

한 어레이의 내용을 다른 어레이에 추가합니다.

var x = ['a', 'b', 'c'];
var y = ['d', 'e', 'f'];
x.push.apply(x, y);
// x = ['a', 'b', 'c', 'd', 'e', 'f']
// y = ['d', 'e', 'f']  (remains unchanged)

2개의 어레이의 내용에서 새로운 어레이를 만듭니다.

var x = ['a', 'b', 'c'];
var y = ['d', 'e', 'f'];
var z = x.concat(y);
// x = ['a', 'b', 'c']  (remains unchanged)
// y = ['d', 'e', 'f']  (remains unchanged)
// z = ['a', 'b', 'c', 'd', 'e', 'f']
var years = [];
for (i= 2015;i<=2030;i=i+1){
    years.push({operator : i})
}

여기서 어레이 년이란 다음과 같은 가치를 갖는 것입니다.

years[0]={operator:2015}
years[1]={operator:2016}

이런 식으로 계속됩니다.

, 없다, 없다, 없다, 없다, 없다, 없다, 없다, 없다.object ★★★★★★★★★★★★★★★★★」arrayObject ★★★★★★★★★★★★★★★★★」Array두 번째로, 다음과 같이 할 수 있습니다.

a = new Array();
b = new Object();
a[0] = b;

, 이제a와의 배열이 됩니다.b유일한 요소로서.

「」를 사용합니다.ES6표기법에서는 다음과 같은 작업을 수행할 수 있습니다.

추가할 경우 다음과 같이 확산 연산자를 사용할 수 있습니다.

var arr1 = [1,2,3]
var obj = 4
var newData = [...arr1, obj] // [1,2,3,4]
console.log(newData);

  • JavaScript는 대소문자를 구분합니다.부르기new array() ★★★★★★★★★★★★★★★★★」new object()ReferenceError재하존
  • 것이new Array()오류가 발생하기 쉬운 동작 때문입니다.
    새 하십시오.= [val1, val2, val_n] 「」를 사용합니다.= {}.
  • (John의 답변에 나타난 바와 같이) 어레이를 확장하는 방법은 여러 가지가 있지만, 가장 안전한 방법은 다음과 같이 사용하는 것입니다.pushconcat는 원래 어레이를 변경하지 않고 새 어레이를 반환합니다. push는 특히 어레이가 글로벌하게 정의되어 있는 경우 회피할 필요가 있는 콜 배열을 변환합니다.
  • 의도하지 않은 돌연변이를 피하기 위해 오브젝트와 새로운 어레이를 정지시키는 도 좋은 방법입니다.프리즈 오브젝트는 변경도 확장도 할 수 없습니다(명확하게).

이러한 점을 적용하여 두 가지 질문에 답변하면 다음과 같은 함수를 정의할 수 있습니다.

function appendObjTo(thatArray, newObj) {
  const frozenObj = Object.freeze(newObj);
  return Object.freeze(thatArray.concat(frozenObj));
}

사용방법:

// Given
const myArray = ["A", "B"];
// "save it to a variable"
const newArray = appendObjTo(myArray, {hello: "world!"});
// returns: ["A", "B", {hello: "world!"}]. myArray did not change.

/* array literal */
var aData = [];

/* object constructur */
function Person(firstname, lastname) {
  this.firstname = firstname;
  this.lastname = lastname;
  this.fullname = function() {
    // return (this.firstname + " " + this.lastname);
    return (`${this.firstname} ${this.lastname}`); // es6 template string
  };
}

/* store object into array */
aData[aData.length] = new Person("Java", "Script"); // aData[0]

aData.push(new Person("John", "Doe"));
aData.push(new Person("Anna", "Smith"));
aData.push(new Person("Black", "Pearl"));

aData[aData.length] = new Person("stack", "overflow"); // aData[4]

/* loop array */
for (var i in aData) {
  alert(aData[i].fullname());
}

/* convert array of object into string json */
var jsonString = JSON.stringify(aData);
document.write(jsonString);

개체를 배열에 푸시합니다.

푸시를 사용하면 어레이에 여러 개체를 추가할 수도 있습니다.

  let myArray = [];

   myArray.push(
              {name:"James", dataType:TYPES.VarChar, Value: body.Name},
              {name:"Boo", dataType:TYPES.VarChar, Value: body.Name},
              {name:"Alina", dataType:TYPES.VarChar, Value: body.Name}
             );

Gabi Purcaru의 답을 2번에 대한 답을 포함하도록 확장합니다.

a = new Array();
b = new Object();
a[0] = b;

var c = a[0]; // c is now the object we inserted into a...

obejct 둘 다 그렇다object ★★★★★★★★★★★★★★★★★」array문자가가필필필필

짧은 손을 사용해서new Array ★★★★★★★★★★★★★★★★★」new Object은 「」입니다.[] ★★★★★★★★★★★★★★★★★」{}

수 ..push.또는 데이터를 포함하도록 인덱스를 설정할 수 있습니다.

function saveToArray() {
    var o = {};
    o.foo = 42;
    var arr = [];
    arr.push(o);
    return arr;
}

function other() {
    var arr = saveToArray();
    alert(arr[0]);
}

other();

대안적인 대답은 이것이다.

다음과 같이 배치되어 있는 경우:var contacts = [bob, mary];

다른 어레이를 이 어레이에 배치하는 경우는, 다음과 같이 실시할 수 있습니다.

함수 생성자를 선언합니다.

function add (firstName,lastName,email,phoneNumber) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.phoneNumber = phoneNumber;
}

함수에서 객체를 만듭니다.

var add1 = new add("Alba","Fas","Des@gmail.com","[098] 654365364");

오브젝트를 어레이에 추가합니다.

contacts[contacts.length] = add1;

다음과 같이 스프레드 연산자(...)와 함께 사용할 수 있습니다.

let arr = [{num: 1, char: "a"}, {num: 2, char: "b"}];

arr = [...arr,{num: 3, char: "c"}];

//...arr --> spread operator
console.log(arr);

a=[];
a.push(['b','c','d','e','f']);

자동 목록을 사용하여 객체 생성기를 만드는 방법:

var list = [];

function saveToArray(x) {
    list.push(x);
};

function newObject () {
    saveToArray(this);
};

성능

오늘 2020.12.04 Chrome v86, Safari v13.1.2 및 Firefox v83에서 MacOs HighSierra 10.13.6에서 선택한 솔루션에 대한 테스트를 수행합니다.

결과.

모든 브라우저용

  • 기반으로 하는 임플레이스 솔루션length(B) 스몰 어레이가 가장 빠릅니다.또한 Firefox에서는 큰 어레이가 가장 빠릅니다.Chrome과 Safari의 경우도 빠릅니다.
  • 기반으로 하는 임플레이스 솔루션push(A) Chrome 및 Safari의 대형 어레이에서는 가장 빠르며 Firefox 및 소형 어레이에서는 가장 빠릅니다.
  • 임플레이스 솔루션 C는 대규모 어레이에서는 느리고 소규모 어레이에서는 중속
  • 대규모 어레이에서는 인플레이스 솔루션 D 및 E가 느리다
  • 인플레이스 이외의 솔루션 소규모 어레이에서는 E, F 및 D(Firefox 상)가 느리다

여기에 이미지 설명 입력

세부 사항

2가지 테스트 케이스를 수행합니다.

  • 10개의 요소를 갖춘 스몰 어레이의 경우 - 여기에서 실행할 수 있습니다.
  • 100만 요소를 갖춘 대규모 어레이용 - 여기에서 실행할 수 있습니다.

다음 스니펫은 솔루션 A, B, C, D, E, F의 차이를 나타내고 있습니다.

PS: 답변 B는 삭제되었습니다.실제로 이 기술을 사용한 첫 번째 답변이므로 확인하실 수 있다면 "삭제 해제"를 클릭해 주세요.

// https://stackoverflow.com/a/6254088/860099
function A(a,o) {
  a.push(o);
  return a;
} 

// https://stackoverflow.com/a/47506893/860099
function B(a,o) {
  a[a.length] = o;
  return a;
} 

// https://stackoverflow.com/a/6254088/860099
function C(a,o) {
  return a.concat(o);
}

// https://stackoverflow.com/a/50933891/860099
function D(a,o) {
  return [...a,o];
}

// https://stackoverflow.com/a/42428064/860099
function E(a,o) {
  const frozenObj = Object.freeze(o);
  return Object.freeze(a.concat(frozenObj));
}

// https://stackoverflow.com/a/6254088/860099
function F(a,o) {
  a.unshift(o);
  return a;
} 


// -------
// TEST
// -------


[A,B,C,D,E,F].map(f=> {
  console.log(`${f.name} ${JSON.stringify(f([1,2],{}))}`)
})
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"> </script>
  
This shippet only presents functions used in performance tests - it not perform tests itself!

다음은 Chrome의 예시 결과입니다.

여기에 이미지 설명 입력

코드를 사용하면 스코프의 문제가 발생합니다.함수 간에 사용할 계획(또는 호출할 경우 매개 변수로 전달)인 경우 함수 외부에 선언해야 합니다.

var a = new Array();
var b = new Object();

function first() {
a.push(b);
// Alternatively, a[a.length] = b
// both methods work fine
}

function second() {
var c = a[0];
}

// code
first();
// more code
second();
// even more code

언급URL : https://stackoverflow.com/questions/6254050/how-to-add-an-object-to-an-array

반응형