javascript オブジェクトのプロパティの拡張と削除が禁止されているかを判定する
- 作成日 2021.03.04
- 更新日 2022.08.08
- javascript
- javascript
javascriptで、isSealedを使用して、オブジェクトのプロパティの拡張と削除が禁止されているかを判定するサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 103.0.5060.134
isSealed使い方
「isSealed」を使用すると、オブジェクトのプロパティの拡張と削除が禁止されているかを判定することが可能です。
※「seal」メソッドを使用すると、オブジェクトのプロパティの追加と削除を不可にすることができます。
const site = {
name: 'mebee',
url: 'https://mebee.info/'
};
console.log( Object.isSealed(site) ); // false
Object.seal(site); // 追加と削除を不可
console.log( Object.isSealed(site) ); // true
配列に使用
配列に使用して判定することも可能です。
const arr = ["aaa","bbb"]
arr[2] = "ccc"
console.log(arr)
console.log( Object.isSealed(arr) ); // false
Object.seal(arr); // 追加と削除を不可
arr[3] = "ddd"
console.log(arr)
console.log( Object.isSealed(arr) ); // true
サンプルコード
以下は、
「実行」ボタンをクリックすると、0 と 1のランダムな整数を生成して「1」なら拡張・削除を禁止して、禁止されているかを判定する
サンプルコードとなります。
※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。関数はアロー関数を使用してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<style>
.main {
margin: 0 auto;
margin-top: 200px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 30px;
}
</style>
<script>
const hoge = () => {
const site = {
name: 'mebee',
url: 'https://mebee.info/'
};
// 0 と 1 のランダムな整数を生成して「1」なら拡張・削除を禁止
~~(Math.random() * 2) == 1 ? (() => { Object.isSealed(site); ex.innerHTML ='拡張・削除禁止'})() : ex.innerHTML ='拡張・削除可能'
// 結果を表示
result.innerHTML = Object.isSealed(site);
}
window.onload = () => {
// クリックイベントを登録
btn.onclick = () => { hoge(); }; // document.getElementById('btn');を省略
}
</script>
<body>
<div class="main container">
<h2><span id="result" class="badge bg-info">結果</span></h2>
<h2><span id="ex" class="badge bg-info">拡張・削除状態</span></h2>
<div class="row">
<button id="btn" type="button" class="btn btn-warning">
実行
</button>
</div>
</div>
</body>
</html>
判定されていることが確認できます。
-
前の記事
Ruby 指定した条件が続く限り配列の先頭から値を削除する 2021.03.03
-
次の記事
Ruby 配列から重複した値を除去する 2021.03.04
コメントを書く