이 기사는 JavaScript의 객체에 대한 관련 지식을 제공합니다. JavaScript의 객체도 변수이지만 객체에는 이 기사를 읽은 후 도움이 되기를 바랍니다.
JavaScript에는 6가지 주요 언어 유형이 있습니다:
string, number, boolean, undefine, null, object
기본 유형: string, number, boolean, undefine, null; 기본 유형 자체는 객체가 아닙니다.
그러나 null은 때때로 객체로 간주되며 typeof null은 객체를 반환합니다. 실제로 null은 기본 유형입니다. 그 이유는 하위 레벨에서는 서로 다른 객체가 바이너리로 표현되기 때문입니다. 자바스크립트에서는 바이너리의 처음 세 자리가 모두 0이면 객체 유형으로 판단하고, null은 모두 0을 의미하므로 typeof는 객체를 반환합니다. .
배열도 몇 가지 추가 동작이 있는 개체 유형입니다. 배열의 구성은 일반 객체보다 더 복잡합니다.
Function은 호출할 수 있다는 점을 제외하면 기본적으로 일반 함수와 동일하므로 객체처럼 함수를 조작할 수 있습니다.
String
Number
Date
Boolean
Object
Function
Array
.a를 속성 액세스, ['a']를 연산자 액세스라고 합니다.
//对象中的属性名始终是字符串
myobj={}
myobj[myobj]='bar'//赋值
myobj['[object object]'] //'bar'es6 계산 가능한 속성 이름이 추가되었습니다. 텍스트 형식에서 []를 사용하여 표현식을 속성 이름으로 래핑할 수 있습니다.
var perfix = 'foo'
var myobj={
[perfix + 'bar'] :'hello'
}
myobj['foobar']//helloes5부터 모든 속성에는 속성이 포함됩니다. 예를 들어 디스크립터를 사용하면 속성이 읽고 쓸 수 있는지 여부를 직접 확인할 수 있습니다.
/* * 重要函数： * Object.getOwnPropertyDescriptor(..) //获取属性描述符 * Object.defineProperty(..) //设置属性描述符 */ writeble（可读性） configurable（可配置性） enumerable （可枚举性）
for in은 객체의 열거 가능한 속성 목록([[Prototype]] 체인 포함)을 탐색하는 데 사용할 수 있으며 속성 값을 수동으로 가져와야 합니다. 배열 및 일반 개체를 순회할 수 있습니다.
es6은 새로운 기능이며 배열의 속성 값을 순회하는 데 사용할 수 있습니다. for of 루프는 먼저 액세스된 개체에서 반복자 개체를 요청한 후 next를 호출합니다. (반복자 객체의) 메서드를 사용하여 모든 반환 값을 반복합니다.
배열에는 @@iterator가 내장되어 있습니다.
var arr = [1, 2, 3]
var it = arr[Symbol.iterator]()//迭代器对象
console.log(it.next());//{value: 1, done: false}
console.log(it.next());//{value: 2, done: false}
console.log(it.next());//{value: 3, done: false}
console.log(it.next());//{value: undefined, done: true}
/*
* 用es6 的Symbol.iterator 来获取对象的迭代器内部属性。
* @@iterator本身并不是一个迭代器对象，而是一个返回迭代器对象的函数。
*/객체에 @@iterator가 내장되어 있지 않기 때문에 for...of 순회가 자동으로 완료될 수 없습니다. 그러나 탐색하려는 모든 객체에 대해 @@iterator를 정의할 수 있습니다. 예:
var obj={
a:1,b:2
}
Object.defineProperty(obj, Symbol.iterator, {
enumerable: false,
writable: false,
configurable: true,
value: function () {
var self = this
var idx = 0
var ks = Object.keys(self)
return {
next: function () {
return {
value: self[ks[idx++]],
done: (idx > ks.length)
}
}
}
}
})
//手动遍历
var it = obj[Symbol.iterator]()//迭代器对象
console.log(it.next());//{value: 1, done: false}
console.log(it.next());//{value: 2, done: false}
console.log(it.next());//{value: undefined, done: true}
//for of 遍历
for (const v of obj) {
console.log(v);
}
//2
//3/* forEach：会遍历所有并忽略返回值 some：会一直运行到回调函数返回 true（或者"真"值） every：会一直运行到回调函数返回 false（或者"假"值） map： filter：返回满足条件的值 reduce： some和every 和for的break语句类似，会提前终止遍历 */
힙: 동적 할당 메모리의 크기는 다음과 같습니다. 변수이며 자동으로 해제되지 않습니다. 참조 유형 값이 저장됩니다
얕은 복사본: 개체의 얕은 복사본은 '기본' 개체를 복사하지만 개체 내부의 개체는 복사하지 않습니다. '내부 개체'는 원본 개체와 복사본 간에 공유됩니다.
Deep copy: 객체의 전체 복사는 원본 객체의 각 속성을 하나씩 복사할 뿐만 아니라, 깊은 복사를 사용하여 원본 객체의 각 속성에 포함된 객체를 새 객체에 반복적으로 복사합니다. 메서드를 사용하므로 한 개체를 수정해도 다른 개체에는 영향을 미치지 않습니다.
예:
var anotherObject={
b:"b"
}
var anotherArray=[]
var myObject={
a:'a',
b:anotherObject, //引用，不是副本
c:anotherArray //另外一个引用
}
anotherArray.push(anotherObject,myObject)
/*
如何准确的复制 myObject?
浅复制 myObject，就是复制出 新对象中的 a 的值会复制出对象中a 的值，也就是 'a'，
但是对象中的 b、c两个属性其实只是三个引用，新对象的b、c属性和旧对象的是一样的。
深复制 myObject，除了复制 myObject 以外还会复制 anotherObject 和 anotherArray。
但是这里深复制 myObject会出现一个问题，anotherArray 引用 anotherObject 和 myObject，
所以又需要复制 myObject，这样就会由于循环引用导致死循环。
后面会介绍如何处理这种情况。
*/var obj1 = {x: 1, y: 2}
var obj2 = Object.assign({}, obj1);
console.log(obj1) //{x: 1, y: 2}
console.log(obj2) //{x: 1, y: 2}
obj2.x = 2; //修改obj2.x
console.log(obj1) //{x: 1, y: 2}
console.log(obj2) //{x: 2, y: 2}
var obj1 = {
x: 1,
y: {
m: 1
}
};
var obj2 = Object.assign({}, obj1);
console.log(obj1) //{x: 1, y: {m: 1}}
console.log(obj2) //{x: 1, y: {m: 1}}
obj2.y.m = 2; //修改obj2.y.m
console.log(obj1) //{x: 1, y: {m: 2}}
console.log(obj2) //{x: 2, y: {m: 2}}var arr1 = [1, 2, [3, 4]], arr2 = arr1.slice(); console.log(arr1); //[1, 2, [3, 4]] console.log(arr2); //[1, 2, [3, 4]] arr2[0] = 2 arr2[2][1] = 5; console.log(arr1); //[1, 2, [3, 5]] console.log(arr2); //[2, 2, [3, 5]]
var obj1 = {
x: 1,
y: {
m: 1
},
a:undefined,
b:function(a,b){
return a+b
},
c:Symbol("foo")
};
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1) //{x: 1, y: {m: 1}, a: undefined, b: ƒ, c: Symbol(foo)}
console.log(obj2) //{x: 1, y: {m: 1}}
obj2.y.m = 2; //修改obj2.y.m
console.log(obj1) //{x: 1, y: {m: 1}, a: undefined, b: ƒ, c: Symbol(foo)}
console.log(obj2) //{x: 2, y: {m: 2}}function deepClone(obj){
let result = Array.isArray(obj)?[]:{};
if(obj && typeof obj === "object"){
for(let key in obj){
if(obj.hasOwnProperty(key)){
if(obj[key] && typeof obj[key] === "object"){
result[key] = deepClone(obj[key]);
}else{
result[key] = obj[key];
}
}
}
}
return result;
}
var obj1 = {
x: {
m: 1
},
y: undefined,
z: function add(z1, z2) {
return z1 + z2
},
a: Symbol("foo"),
b: [1,2,3,4,5],
c: null
};
var obj2 = deepClone(obj1);
obj2.x.m = 2;
obj2.b[0] = 2;
console.log(obj1);
console.log(obj2);
//obj1
{
a: Symbol(foo)
b: (5) [1, 2, 3, 4, 5]
c: null
x: {m: 1}
y: undefined
z: ƒ add(z1, z2)
}
//obj2
{
a: Symbol(foo)
b: (5) [2, 2, 3, 4, 5]
c: null
x: {m: 2}
y: undefined
z: ƒ add(z1, z2)
}function deepClone(obj, parent = null){ // 改进（1）
let result = Array.isArray(obj)?[]:{};
let _parent = parent; // 改进（2）
while(_parent){ // 改进（3）
if(_parent.originalParent === obj){
return _parent.currentParent;
}
_parent = _parent.parent;
}
if(obj && typeof obj === "object"){
for(let key in obj){
if(obj.hasOwnProperty(key)){
if(obj[key] && typeof obj[key] === "object"){
result[key] = deepClone(obj[key],{ // 改进（4）
originalParent: obj,
currentParent: result,
parent: parent
});
}else{
result[key] = obj[key];
}
}
}
}
return result;
}
// 调试用
var obj1 = {
x: 1,
y: 2
};
obj1.z = obj1;
var obj2 = deepClone(obj1);
console.log(obj1);
console.log(obj2);function deepClone(obj, parent = null){
let result; // 最后的返回结果
let _parent = parent; // 防止循环引用
while(_parent){
if(_parent.originalParent === obj){
return _parent.currentParent;
}
_parent = _parent.parent;
}
if(obj && typeof obj === "object"){ // 返回引用数据类型(null已被判断条件排除))
if(obj instanceof RegExp){ // RegExp类型
result = new RegExp(obj.source, obj.flags)
}else if(obj instanceof Date){ // Date类型
result = new Date(obj.getTime());
}else{
if(obj instanceof Array){ // Array类型
result = []
}else{ // Object类型，继承原型链
let proto = Object.getPrototypeOf(obj);
result = Object.create(proto);
}
for(let key in obj){ // Array类型 与 Object类型 的深拷贝
if(obj.hasOwnProperty(key)){
if(obj[key] && typeof obj[key] === "object"){
result[key] = deepClone(obj[key],{
originalParent: obj,
currentParent: result,
parent: parent
});
}else{
result[key] = obj[key];
}
}
}
}
}else{ // 返回基本数据类型与Function类型,因为Function不需要深拷贝
return obj
}
return result;
}
// 调试用
function construct(){
this.a = 1,
this.b = {
x:2,
y:3,
z:[4,5,[6]]
},
this.c = [7,8,[9,10]],
this.d = new Date(),
this.e = /abc/ig,
this.f = function(a,b){
return a+b
},
this.g = null,
this.h = undefined,
this.i = "hello",
this.j = Symbol("foo")
}
construct.prototype.str = "I'm prototype"
var obj1 = new construct()
obj1.k = obj1
obj2 = deepClone(obj1)
obj2.b.x = 999
obj2.c[0] = 666
console.log(obj1)
console.log(obj2)
console.log(obj1.str)
console.log(obj2.str)bind(): 함수의 전체 복사본을 만들려면 fn.bind()를 사용하지만 이 포인터의 문제로 인해 사용할 수 없습니다.
eval(fn.toString()): 화살표 함수만 지원합니다. function fn() {}은 적용할 수 없습니다.
new Function(arg1, arg2,…,function_body): 매개변수와 함수 본문을 추출해야 합니다.
PS: 일반적으로 함수를 깊이 복사할 필요가 없습니다.
【관련 권장 사항: javascript 학습 튜토리얼】
위 내용은 JavaScript 기본 객체(구성 및 공유)에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
