자바스크립트에서 객체의 속성을 삭제하는 방법

js에서는 delete 키워드를 사용하여 객체의 속성을 삭제할 수 있으며 구문 형식은 "delete object.attribute"입니다. 삭제 연산자는 객체의 속성을 삭제할 때 사용됩니다. 삭제 연산자가 true를 반환하면 삭제할 수 있다는 의미이고, false를 반환하면 삭제할 수 없다는 의미입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

객체에서 속성을 삭제하는 의미상 올바른 방법은 delete 키워드를 사용하는 것입니다.

객체

const car = {
  color: 'blue',
  brand: 'Ford'
}

가 주어지면 다음 명령을 사용하여 이 객체에서 속성을 제거할 수 있습니다.

delete car.brand

작동 방식은 다음과 같이 표현됩니다.

delete car['brand']
delete car.brand
delete newCar['brand']

속성을 정의되지 않음으로 설정

최적화가 필요한 경우 루프에서 많은 수의 개체를 작업할 때와 같이 이를 수행하기 위한 또 다른 옵션은 속성을 정의되지 않음으로 설정하는 것입니다.

특성상 삭제 성능은 단순히 undef로 재할당하는 것보다 최대 50배까지 느립니다.

단, 속성은 개체에서 제거되지 않는다는 점을 명심하세요. 해당 값은 지워지지만 여전히 존재하는 개체를 반복하는 경우:

삭제를 사용하는 것은 여전히 ​​매우 빠르므로 그렇게 해야 할 합당한 이유가 있는 경우에만 이와 같은 성능 문제를 조사해야 합니다. 그렇지 않으면 항상 선호됩니다. 더 명확한 의미와 기능을 갖기 위해.

객체를 변경하지 않고 속성 삭제

확장 정보:

삭제 연산자는 객체의 속성을 삭제하는 데 사용됩니다.

구문:

삭제 연산자를 직접 사용

delete object.property 或 delete object['property']

예:

var person = {
    name: 'abc'
    age: 18
}

delete person.name

console.log(person) // {age: 18}

반환 값:

delete 연산자에는 반환 값이 있으며, 반환 값은 부울 값이며, 이는 삭제하더라도 모든 경우에 적용됩니다. 존재하지 않는 것 속성도 true를 반환하거나 위의 코드를 반환합니다. 반환 값을 인쇄하고

console.log(delete person.name) //true
console.log(delete person.job) //即使删除对象不存在的属性依然返回true

를 참조하세요. 그러나 속성이 구성할 수 없는 속성인 경우(개념에 대해) 예외가 있습니다(false 반환). 구성할 수 없는 속성의 경우 Object.defineProperty를 참조할 수 있습니다. (이 개념을 처음 들었을 때 약간 혼란스러웠습니다.) 비엄격 모드에서는 false가 반환되고, 엄격 모드에서는 구문 오류 예외가 발생합니다.

특정 용도

1. 개체 속성이 존재하지 않습니다

위에서 언급한 것처럼 개체에 존재하지 않는 속성을 삭제하면 삭제가 유효하지 않지만 반환 값은 여전히 ​​true입니다

2. 동일한 이름의 속성이 프로토타입 체인에 존재합니다

삭제하는 경우 연산자가 속성을 성공적으로 삭제하면 해당 속성은 존재하지 않습니다. 그러나 객체의 프로토타입 체인에 동일한 이름의 속성이 존재하는 경우 해당 객체는 해당 속성을 상속받습니다. 프로토타입 체인의 동일한 이름을 가진 속성입니다. 그러나 메모리 관리는 삭제 연산자가 수행할 수 있는 작업이 아니며 전혀 관련이 없습니다. 메모리 관리에서는 이 MDN 기사를 추천합니다

// 构造函数
function Person() {
    this.name = "张三",
    this.job = "工程师"
}

Person.prototype.name = "李四"
// 创建实例对象
var p = new Person();
// 只删除p实例的name属性
delete p.name;
console.log(p) => // 通过打印如下图，name属性成功删除

接下来看: 
console.log(p.name) => // '李四' 依然可以访问到

따라서 삭제 작업은 자체 속성에서만 작동하는 것을 볼 수 있습니다. 여기서는 범위 체인이 작동하지 않는 이유인 'Zhang San'을 콘솔할 수 있습니다. 이 속성이 있으면 프로토타입에 동일한 이름의 속성이 있는지 검색합니다.

3. var 선언 사용

var를 사용하여 선언된 속성(함수 포함)은 전역 범위 또는 함수 범위에서 삭제할 수 없습니다.

전역 범위에서 속성 선언:

// 声明属性
var a = 1; // 等同于window.a
delete a  // 严格模式下抛出语法异常 SyntaxError
console.log(a); // 1 非严格模式下
console.log(delete a); // 非严格模式下false

// 声明函数
var fn = function () {
    console.log(1);
}
delete fn // 严格模式下抛出语法异常  SyntaxError
fn() // 1 非严格模式下delete失效, 函数依然存在

// 另外， 除字面量定义外，匿名函数定义函数效果也是一样

함수 범위에서 속성을 선언합니다(효과는 전역 범위와 동일):

// 局部作用域声明属性
funtion fn() {
    var a = 1;
    delete a; // 严格模式下抛出语法异常 SyntaxError
    console.log(a); // 1
    console.log(delete a); // 非严格模式下false
}

fn();

// 局部作用域声明函数
var fn = function() {
    var fn2 = function() {
        console.log(1);
    };
    delete fn2 // 严格模式下抛出语法异常 SyntaxError 
    console.log(delete fn2); // false 非严格模式下
    fn2(); // 1
}
fn();

또한

var person = {
    name: '张三',
    showName: function () {
        console.log(this.name);
    }
}
delete person.showName
console.log(person.showName) // undefined

4와 같은 속성과 마찬가지로 객체에 정의된 함수가 삭제될 수 있다는 점에 유의해야 합니다. let 및 const

선언된 모든 속성. let이나 const를 사용하면 선언된 범위에서 삭제할 수 없습니다. 시도해 보니 var와 동일한 효과가 있습니다. 이 내용을 아시는 분은 조언을 부탁드립니다. . 설정 불가능한 속성

Math, Array, Object 및 기타 내장 객체 속성은 삭제할 수 없습니다

console.log(Array.length); // 1
delete Array.length
console.log(Array.from); 0

delete Array.prototype //严格模式下抛出异常
console.log(Array.prototype) // 非严格模式下，prototype依然存在, 可以自己试试了，自己动手，丰衣足食
console.log(Array.prototype.join); // 非严格模式下，join方法依然存在

이러한 내장 객체의 속성만 삭제할 수 없으며 내장 객체의 메소드는 삭제할 수 있습니다.

console.log(Array.forEach); // 内置函数
delete Array.forEach // 不用区分严格模式与否
console.log(Array.forEach); // undefined

Object.defineProperty()는 설정 불가능한 속성으로 설정되어 삭제할 수 없습니다.

var person = {};
Object.defineProperty(person, 'name', {
    value: '张三',
    configurable: false
})
delete person.name // 严格模式下，抛出异常
console.log(person.name); // 张三
console.log(delete person.name); // 非严格模式false

var, let 및 const에 의해 생성된 설정 불가능한 속성은 삭제 작업으로 삭제할 수 없습니다

var a = 'abc'; // 属于window 等同于window.a
var aVal = Object.getOwnPropertyDescriptor(window, 'a'); 
console.log(aVal);
//  aVal输入如下   
//    {
//       value: 2,
//         writable: true, 
//         enumerable: true, 
//         configurable: false // 由于是var声明的属性，所以为false
//     }

var a = 'abc'; // 属于window 等同于window.a
delete a // 严格模式下抛出异常
var aVal = Object.getOwnPropertyDescriptor(window, 'a'); 
console.log(aVal);
console.log(delete a); //false
//  非严格模式下，aVal输入如下   
//    {
//       value: 2,
//         writable: true, 
//         enumerable: true, 
//         configurable: false // 由于是var声明的属性，所以为false
//     }

If you have' 처음에는 읽지 말고 Object.defineProperty를 살펴보세요. 이해하셨다면 바로 건너뛰셔도 됩니다.

6. 배열 삭제

배열의 요소를 삭제하기 위해 삭제 연산자를 사용하면 삭제된 요소는 배열에서 삭제되지만 배열의 길이는 변경되지 않습니다

var arr = [1, 2, 3];
delete arr[1]
console.log(arr); // [1, undefined × 1, 2]
console.log(delete arr[1]) // true
console.log(arr[1]); // undefined

하지만 문제가 있습니다. here

console.log(1 in arr) // false

따라서 배열의 항목을 정의되지 않음으로 할당하려면 삭제 연산자를 사용하지 말고 다음 할당을 직접 사용해야 합니다

arr[1] = undefined;
// 这样就可以解决上面的问题 
console.log(1 in arr) // true

[추천 학습:

javascript 고급 튜토리얼

]

위 내용은 자바스크립트에서 객체의 속성을 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!