Inhaltsverzeichnis
1. Legen Sie die Kartendatenstruktur fest
5、 toggle(*class,* true\|false)
3. Benutzerdefinierte Objektmethode
4. Object.assign( ) führt Objekte zusammen
1. Legen Sie die Kartendatenstruktur fest
1. Datenstruktur festlegen
ES6 bietet einen neuen Datenstruktursatz. Es ähnelt einem Array, aber die Werte der Mitglieder sind alle eindeutig und es gibt keine doppelten Werte.
// 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. Kartendatenstruktur
JavaScript-Objekte (Object) sind im Wesentlichen eine Sammlung von Schlüssel-Wert-Paaren (Hash-Struktur), traditionell können jedoch nur Zeichenfolgen als Schlüssel verwendet werden. Dies bringt große Einschränkungen für die Verwendung mit sich. Die Schlüssel der Karte sind nicht auf Zeichenfolgen beschränkt, und Objekte können auch als Schlüssel bezeichnet werden.
// 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-Klassenlistenattribut
1、add(Klasse1,Klasse2)
Fügt eine Klasse hinzu oder fügt die Klasse nicht hinzu, wenn sie nicht vorhanden ist.
document.getElementById("mydiv").classList.add("demodiv","demodiv1");2、 enthält (Klasse)
Bestimmt, ob eine Klasse in einem Element vorhanden ist. Gibt „true“ zurück, wenn es existiert, andernfalls wird „false“ zurückgegeben.
let x = document.getElementById("mydiv").classList.contains("demodiv");
console.log(x);3. Artikel (Index)
Gibt den Klassennamen zurück, der dem Indexwert im Element entspricht. Indexwerte beginnen bei 0. Gibt *null* zurück, wenn der Indexwert außerhalb des Bereichs liegt
document.getElementById("mydiv").classList.item(0);4、 entfernen(Klasse1,Klasse2)
Entfernen Sie einen oder mehrere Klassennamen im Element und entfernen Sie nicht vorhandene Klassennamen. Es wird kein Fehler gemeldet.
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)
Schaltet Klassennamen in Elementen um. Der erste Parameter ist der Name der Klasse, die aus dem Element entfernt werden soll, und gibt false zurück. Wenn der Klassenname nicht vorhanden ist, wird der Klassenname dem Element hinzugefügt und gibt true zurück. Der zweite ist ein optionaler Parameter, ein boolescher Wert, mit dem festgelegt wird, ob das Element gezwungen wird, die Klasse hinzuzufügen oder zu entfernen, unabhängig davon, ob der Klassenname vorhanden ist oder nicht.
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"))Beispiel:
<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. Objekte erstellen
1. ES6 erstellt Objekte
ES6 ermöglicht die direkte Zuweisung deklarierter Variablen zu Objekten.
let name='张三';
let age=19;
let person = {name,age};
console.log(person);2. Schlüsselwertkonstruktion
Wenn der Schlüsselwert nicht im Vordergrund definiert ist und aus dem Hintergrund abgerufen werden muss, kann er mit Key erstellt werden.
let key="name";
let obj = {
[key]:'web'
}
console.log(obj);3. Benutzerdefinierte Objektmethode
Die Objektmethode besteht darin, die Eigenschaften im Objekt in Form anonymer Funktionen (zuvor) zu programmieren.
var person={
say:function(a,b){
return a+b;
}
}
console.log(person.say(4,5));4. Object.assign( ) führt Objekte zusammen
let a = {name:"张三"},b = {age:19};
let c = Object.assign(a,b);
console.log(c);
//展开运算符方式
let d = {...a,...b};
console.log(d);4. Symbolanwendung
ES6 führt einen neuen primitiven Datentyp Symbol ein, der einen eindeutigen Wert darstellt. Es ist der siebte Datentyp der JavaScript-Sprache und ein Datentyp, der Strings ähnelt.
1. Symbolerstellung
Merkmal 1 : Das Merkmal des Symboldatentyps ist die Einzigartigkeit . Selbst die von derselben Variablen generierten Werte sind nicht gleich.
let a = Symbol("a");//a为symbol的描述
let b = Symbol("a");
console.log(a===b);//falseDie zweite Erstellungsmethode (kann einen eindeutigen Wert erstellen)
let s3 = Symbol.for('bb');
let s4 = Symbol.for('bb');
console.log(s3===s4) //true`Funktion 2 : Der Symboldatentyp kann nicht mit anderen Datentypen verwendet werden.
Sei c = a+100;//Ein Symbolwert kann nicht in eine Zahl umgewandelt werden
Funktion 3 : Die durch Symbol definierten Objekteigenschaften können nicht mit der for...in-Schleife durchlaufen werden, aber Sie können Reflect.ownKeys verwenden, um alle Schlüsselnamen des Objekts abzurufen.
2. Integrierter Symbolwert
Zusätzlich zur Definition der von ES6 verwendeten Symbolwerte bietet ES6 auch 11 integrierte Symbolwerte, die auf die intern von der Sprache verwendeten Methoden verweisen.
1: Symbol.hasInstance
Diese Methode wird aufgerufen, wenn andere Objekte den Instanzoperator verwenden, um zu bestimmen, ob sie Instanzen des Objekts sind.
class Person{
static [Symbol.hasInstance](param){
console.log('param----', param)
console.log('检测类型')
}
}
let o = {}
console.log(o instanceof Person)2: Symbol. istConcatSpreadable
Die Symbol.isConcatSpreadable-Eigenschaft des Objekts entspricht einem Bool-Wert, der angibt, ob das Objekt erweitert werden kann, wenn es in Array.prototype() verwendet wird.
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: Symbol.unscopables
Dieses Objekt gibt an, welche Eigenschaften aus der with-Umgebung ausgeschlossen werden, wenn das Schlüsselwort with verwendet wird.
const object1 = {
property1: 42
};
object1[Symbol.unscopables] = {
property1: true
};
with (object1) {
console.log(property1);
// expected output: Error: property1 is not defined
}4: Symbol.match
Wenn str.match(myObject) ausgeführt wird und die Eigenschaft vorhanden ist, wird sie aufgerufen und der Rückgabewert der Methode zurückgegeben
5: Symbol.ersetzen
Wenn das Objekt von der Methode str.replace(myObject) aufgerufen wird, wird der Rückgabewert der Methode zurückgegeben
6: Symbolsuche
Wenn das Objekt von der Methode str.search(myObject) aufgerufen wird, wird der Rückgabewert der Methode zurückgegeben
7: Symbol.split
Wenn das Objekt von der Methode str.split(myObject) aufgerufen wird, wird der Rückgabewert der Methode zurückgegeben
8: Symbol.iterator
Wenn das Objekt eine for ... of-Schleife ausführt, wird die Methode Symbol.iterator aufgerufen, um den Standarditerator des Objekts zurückzugeben
9: Symbol.toPrimitive
Wenn das Objekt in einen Wert des ursprünglichen Typs konvertiert wird, wird diese Methode aufgerufen und der dem Objekt entsprechende ursprüngliche Typwert zurückgegeben
10: Symbol.toStringTag
Wenn die toString-Methode für dieses Objekt aufgerufen wird, wird der Rückgabewert dieser Methode zurückgegeben
11: Symbol.Arten
Beim Erstellen abgeleiteter Objekte wird diese Eigenschaft verwendet
3. Symbolverwendungsszenarien
Fügen Sie Methoden zu Objekten hinzu, ohne dass es zu Konflikten mit Objektattributen kommt.
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]]();