js Array 얕 은 복사 깊이 복사

3960 단어
참고 로 P57 배열 은 선형 으로 분 배 된 메모리 로 정수 로 오프셋 을 계산 하고 그 중의 요 소 를 방문 합 니 다.배열 은 성능 이 뛰어난 데이터 구조 이다.불 행 히 도 JS 는 이런 배열 과 같은 데이터 구조 가 없다.
대신 JS 는 클래스 배열 특성 을 가 진 대상 을 제공 합 니 다.그것 은 배열 의 아래 표 시 를 문자열 로 바 꾸 어 속성 으로 한다.그것 은 분명히 진정한 배열 보다 느 리 지만 사용 하기에 더욱 편리 하 다.그것 의 속성 검색 과 업데이트 방식 은 대상 과 똑 같 지만 정수 로 속성 명 을 만 들 수 있 는 특성 이 하나 더 있 을 뿐이다.배열 은 자신의 글자 형식 과 내 장 된 방법 이 있다.내장 방법 은 모두 Array. prototype 에 있 습 니 다.
주의해 야 할 것 은 대부분의 언어 에서 배열 의 모든 요 소 는 같은 유형 을 요구한다.JS 배열 은 임의의 혼합 형식의 값 을 포함 할 수 있 습 니 다.
1. 각 배열 은 length 속성 이 있 고 상계 가 없습니다.현재 length 보다 크 거나 같은 숫자 를 아래 표 로 저장 하면 length 값 은 새로운 요 소 를 수용 하기 위해 커지 고 배열 의 크로스 오 버 가 발생 하지 않 습 니 다.2. JS 의 배열 은 사실상 대상 이기 때문에 delete 로 대상 을 제거 할 수 있 지만, 이렇게 하면 배열 에 구멍 이 하나 남는다.메 우려 면 splice 방법 을 사용 해도 된다. 물론 대형 배열 에 서 는 효율 이 높 지 않다.3. JS 배열 은 실제 적 으로 대상 이기 때문에 for in 은 한 배열 의 모든 속성 을 옮 겨 다 닐 수 있 습 니 다. 다만 속성 순 서 를 보장 할 수 없습니다. 또한 원형 체인 에서 의외 의 속성 을 얻 을 수 있 는 문제 가 여전히 존재 합 니 다.대신 for 문 구 를 사용 할 수 있 습 니 다.4.every() some() filter() map() forEach()
every              ,        true   true。
some       true,   true
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
   return (item > 2);
});
var someResult = numbers.some(function(item,index,array){
   return (item > 2);
});

//[3,4,5,4,3]     true       
var filterResult = numbers.filter(function(item,index,array){
   return (item > 2);
});

map       ,             。
//[2,4,6,8,10,8,6,4,2]
var mapResult = numbers.map(function(item,index,array){
   return (item * 2);
});

forEach              ,         ,      For    
numbers.forEach(function(item,index,array){
   //      
});


5. slice splice slice 는 시작 과 끝 위치 사이 의 항목 을 되 돌려 주지 만 끝 위치 항목 은 포함 되 지 않 습 니 다.slice 는 원래 의 배열 에 영향 을 주지 않 습 니 다.
var colors = ["r","g","b","y","p"];
var colors1 = colors.slice(1);//[g,b,y,p]
var colors2 = colors.slice(1,r);//[g,b,y]


splice(start,deleteCount,item...)
var colors = [r,g,b];
var removed = colors.splice(0,1);//removed:[r]
//colors:[g,b]
colors.splice(1,0,y,o);//removed:[]   
//colors:[g,y,o,b]
removed = colors.splice(1,1,r,p);//removed:[y]
//colors:[g,r,p,o,b]

6. push 하나의 Object 는 같은 메모리 주소, 즉 얕 은 복사 입 니 다.
var obj:Object = {"age":10};
var arr:Object[] = [];
arr.push(obj);
obj["age"] = 20;
console.log("obj age",obj["age"]);//20
//     obj,                ,     
console.log("arr obj age:",arr[0]["age"]);//20
//  ,      ,          
arr[0]["age"] = 30;
console.log("second obj age",obj["age"]);//30
//         ,          
obj = null;
console.log("second arr obj age:",arr[0]["age"]);//30

딥 복사 에 관 해 서 는 자바 스 크 립 트 를 참고 하여 깊이 있 는 클론 대상 을 어떻게 완전 하 게 실현 합 니까?javascript 의 깊 은 복사 와 얕 은 복사?자 바스 크 립 트 의 깊 은 복 제 를 깊이 분석 하 다.
심 복 제 를 실현 하려 면 여러 가지 방법 이 있다. 예 를 들 어 가장 간단 한 방법 은 다음 과 같다.
function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });

위의 방법 은 매우 간단 하고 사용 하기 쉽다 는 것 이 장점 이지 만 나 쁜 점도 분명 하 다. 이것 은 대상 의 constructor, 즉 깊이 복사 한 후에 이 대상 의 원래 구조 함수 가 무엇 이 든 깊이 복사 한 후에 Object 가 된다.또한 RegExp 와 같은 대상 은 이런 방식 으로 깊이 복사 할 수 없다.그것 이 정확하게 처리 할 수 있 는 대상 은 Number, String, Boolean, Array, 편평 한 대상, 즉 json 이 직접 표시 할 수 있 는 데이터 구조 뿐이다.또한, 이러한 방법의 클 라 이언 트 는 클 라 이언 트 대상 내부 의 함수 포인터 가 되 지 않 습 니 다. 만약 a{ b:1 ,c:function(e){} } 함수 c 는 복사 되 지 않 습 니 다. 클 라 이언 트 다음 a{ b:1 } 입 니 다.
대부분의 경우 deep clone 의 사례 는 데이터 구조의 지속 화 에 있 습 니 다. 다시 말 하면 직렬 화 / 반 직렬 화 될 수 있 는 데이터 일 것 입 니 다.대부분의 경우 deepClone 이 필요 하지 않 고 deepClone 은 피해 야 합 니 다. 프로그램 상태 에서 여러 개의 source of truth 를 만들어 reasoning 에 영향 을 주 고 performance 에 도 큰 영향 을 미 치기 때 문 입 니 다.대상 이 크 고 등급 도 많 으 면 심 복 제 는 성능 상의 문 제 를 가 져 올 수 있다.깊이 복사 해 야 할 장면 을 만 났 을 때 다른 대체 방안 이 있 는 지 고려 할 수 있다.실제 응용 장면 에서 도 얕 은 복사 가 더욱 자주 사용 된다.
end

좋은 웹페이지 즐겨찾기