目次
5、 toggle(*class,* true\|false)
4. Object.assign( ) オブジェクトをマージする
1. 地図データ構造の設定
1. データ構造の設定
ES6 は新しいデータ構造 Set を提供します。配列に似ていますが、メンバーの値はすべて一意であり、重複する値はありません。
// 1 set定义与初始化数据
const set = new Set([1,2,3,4,4]);
set.add(5).add(6);//set加一个值
set.delete(6);//删除指定的值
console.log(set.has(6));//has判断有没有指定的值，有返回true 反之为false
set.clear();//清除所有的值
console.log(set);
//数据遍历：forEach方法，用于对每个成员执行某种操作，没有返回值。
//set遍历
set.forEach(item=>console.log(item));2. 地図データ構造
JavaScript オブジェクト (オブジェクト) は本質的にキーと値のペア (ハッシュ構造) のコレクションですが、従来は文字列のみがキーとして使用できました。マップのキーは文字列に限定されず、オブジェクトをキーと呼ぶこともできます。
// 2:map数据结构
const Info = {height:190,major:"计算机"};
const map = new Map([["sex",1],["weight",180]]);
//设置map的值 key->value
map.set("realname","张三");
map.set("age",18);
map.set(Info,"个人详细信息");
//get得到map的值 参数：key
console.log(map.get("realname"));
//删除map的值 参数：key
map.delete("age");
//获取map的长度
console.log(map.size);
console.log("age是否存在：" + map.has("age"));
//获取map的所有的key
// const keys = map.keys();
map.clear();
//遍历
for(let v of person){
console.log(v);
}2. DOM クラスリスト属性
1、追加(クラス1,クラス2)
クラスを追加します。クラスが存在しない場合は追加しません。
document.getElementById("mydiv").classList.add("demodiv","demodiv1");2、 (クラス)を含む
要素内にクラスが存在するかどうかを判断します。存在する場合は true を返し、存在しない場合は false を返します。
let x = document.getElementById("mydiv").classList.contains("demodiv");
console.log(x);3、項目(インデックス)
要素内のインデックス値に対応するクラス名を返します。インデックス値は 0 から始まります。インデックス値が範囲外の場合は *null* を返します
document.getElementById("mydiv").classList.item(0);4、削除(クラス1,クラス2)
要素内の 1 つ以上のクラス名を削除し、存在しないクラス名を削除しても、エラーは報告されません。
let mydom = document.getElementById("mydiv");
mydom.classList.add("demodiv");
console.log(mydom.classList.contains("demodiv")); // true
mydom.classList.remove("demodiv");
console.log(mydom.classList.contains("demodiv"));//false5、 toggle(*class,* true\|false)
要素内のクラス名を切り替えます。最初のパラメータは要素から削除されるクラスの名前であり、false を返します。クラス名が存在しない場合は、クラス名が要素に追加され、true が返されます。2 番目はオプションのパラメーターで、クラス名が存在するかどうかに関係なく、要素にクラスの追加または削除を強制するかどうかを設定するために使用されるブール値です。
let mydom = document.getElementById("mydiv");
mydom.classList.toggle("demodiv");
console.log(mydom.classList.contains("demodiv"));
mydom.classList.toggle("demodiv");
console.log(mydom.classList.contains("demodiv"))例：
<body>
<div id="demo">我是一个容器</div>
<button id="btn1">控制颜色</button>
<button id="btn2">控制字体大小</button>
<button id="btn3">判断是否有颜色样式</button>
<button id="btn4">判断索引1的类名</button><br />
<button id="btn5">删除颜色样式</button>
<button id="btn6">控制字体toggle方式</button>
<script>
let Demo = document.getElementById("demo");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let btn3 = document.getElementById("btn3");
btn1.addEventListener('click', () => {
//classlist 添加多个样式
Demo.classList.add("class1", "class2");
});
btn2.addEventListener('click', () => {
Demo.classList.add("class3")
});
// classList.contains 判断是否存在某个样式
btn3.addEventListener('click', () => {
console.log(Demo.classList.contains("class1") ? "存在class1的样式" : "不存在class1的样式");
});
// classList.item 判断指定下标的类名
btn4.addEventListener('click', () => {
console.log(Demo.classList.item(1));
});
// classList.remove 删除样式
btn5.addEventListener('click', () => {
Demo.classList.remove("class1", "class2");
});
btn6.addEventListener('click', () => {
Demo.classList.toggle("class3");
//第二个参数 不管样式存在与否 true就强制加上 false就强制移除
Demo.classList.toggle("class3", false);
});
</script>
</body>3. オブジェクトの作成
1. ES6 がオブジェクトを作成する
ES6 では、宣言された変数をオブジェクトに直接割り当てることができます。
let name='张三';
let age=19;
let person = {name,age};
console.log(person);2. キー値の構築
キー値がフォアグラウンドで定義されておらず、バックグラウンドから取得する必要がある場合は、Key を使用して構築できます。
let key="name";
let obj = {
[key]:'web'
}
console.log(obj);3. カスタムオブジェクトメソッド
オブジェクト メソッドは、(以前の) 匿名関数の形式でオブジェクト内のプロパティをプログラムすることです。
var person={
say:function(a,b){
return a+b;
}
}
console.log(person.say(4,5));4. Object.assign( ) オブジェクトをマージする
let a = {name:"张三"},b = {age:19};
let c = Object.assign(a,b);
console.log(c);
//展开运算符方式
let d = {...a,...b};
console.log(d);4. シンボルの適用
ES6 では、一意の値を表す新しいプリミティブ データ型 Symbol が導入されています。JavaScript 言語の 7 番目のデータ型であり、文字列に似たデータ型です。
1. シンボルの作成
特徴1：Symbolデータ型の特徴は、同じ変数から生成される値であっても同一ではない一意性です。
let a = Symbol("a");//a为symbol的描述
let b = Symbol("a");
console.log(a===b);//false2次作成方法（独自の値を作成可能）
let s3 = Symbol.for('bb');
let s4 = Symbol.for('bb');
console.log(s3===s4) //true`特徴2：シンボルデータ型は他のデータ型と演算できません。
Let c = a+100;//シンボル値を数値に変換できません
特徴 3 : Symbol で定義されたオブジェクト プロパティは、for...in ループを使用して走査することはできませんが、Reflect.ownKeys を使用してオブジェクトのすべてのキー名を取得できます。
2. シンボル組み込み値
ES6 で使用される Symbol 値の定義に加えて、ES6 は言語によって内部的に使用されるメソッドを指す 11 個の組み込み Symbol 値も提供します。
1：Symbol.hasInstance
このメソッドは、他のオブジェクトが instanceof 演算子を使用して、それらがオブジェクトのインスタンスであるかどうかを判断するときに呼び出されます。
class Person{
static [Symbol.hasInstance](param){
console.log('param----', param)
console.log('检测类型')
}
}
let o = {}
console.log(o instanceof Person)2：記号。isConcatSpreadable
オブジェクトの Symbol.isConcatSpreadable プロパティは bool 値と等しく、Array.prototype() で使用されるときにオブジェクトを展開できるかどうかを示します。
const arr1 = [1,2,3]
const arr2 = [4,5,6]
arr2[Symbol.isConcatSpreadable] = false // arr2不可展开
const arr = arr1.concat(arr2)
console.log(arr) // [1,2,3,[4,5,6]]3：シンボル.unscopables
このオブジェクトは、with キーワードを使用するときに with 環境から除外するプロパティを指定します。
const object1 = {
property1: 42
};
object1[Symbol.unscopables] = {
property1: true
};
with (object1) {
console.log(property1);
// expected output: Error: property1 is not defined
}4：シンボル一致
str.match(myObject) を実行すると、プロパティが存在する場合はそのプロパティが呼び出され、メソッドの戻り値が返されます。
5：シンボル.置換
オブジェクトが str.replace(myObject) メソッドによって呼び出された場合、メソッドの戻り値が返されます。
6：シンボル検索
オブジェクトが str.search(myObject) メソッドによって呼び出された場合、メソッドの戻り値が返されます。
7：シンボル.分割
オブジェクトが str.split(myObject) メソッドによって呼び出された場合、メソッドの戻り値が返されます。
8：シンボル.イテレータ
オブジェクトが for ... of ループを実行すると、Symbol.iterator メソッドが呼び出され、オブジェクトのデフォルトのイテレータが返されます。
9：シンボルからプリミティブへ
オブジェクトが元の型の値に変換されると、このメソッドが呼び出され、オブジェクトに対応する元の型の値が返されます。
10：Symbol.toStringTag
このオブジェクトに対して toString メソッドが呼び出されると、そのメソッドの戻り値が返されます。
11：記号・種
派生オブジェクトを作成するときに、このプロパティが使用されます
3. シンボルの使用シナリオ
オブジェクトの属性と競合することなくメソッドをオブジェクトに追加します。
let person = {
name: '张三',
age: 18
}
let methods = {
say: Symbol(),
paly: Symbol()
}
person[methods.say] = function () {
console.log("say hi");
}
person[methods.paly] = function () {
console.log("paly game");
}
console.log(Object.getOwnPropertySymbols(person)); // 获得所有的[Symbol()]
console.log(Reflect.ownKeys(person));//返回所有属性key
// 调用
person[methods.say]();
let demo = Object.getOwnPropertySymbols(person);
person[demo[0]]();