Heim  >  Artikel  >  Web-Frontend  >  Allgemeine JavaScript-Definitionen und -Methoden

Allgemeine JavaScript-Definitionen und -Methoden

巴扎黑
巴扎黑Original
2017-06-26 15:02:011312Durchsuche

1. Einige gängige Zeichenfolgenmethoden. Beachten Sie, dass der Aufruf dieser Methoden den Inhalt der ursprünglichen Zeichenfolge nicht ändert, sondern eine neue Zeichenfolge zurückgibt.
toUpperCase()
Konvertieren Sie eine Zeichenfolge vollständig in Großbuchstaben:

var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'


toLowerCase()
Konvertieren Sie eine Zeichenfolge ausschließlich in Kleinbuchstaben:

var s = 'Hello';var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lowerlower; // 'hello'


indexOf()
sucht nach der Position, an der die angegebene Zeichenfolge erscheint:

var s = 'hello, world';
s.indexOf('world'); // 返回7s.indexOf('World'); // 没有找到指定的子串,返回-1


substring()
gibt den Teilstring des angegebenen Indexbereichs zurück:

var s = 'hello, world's.substring(0, 5); // 从索引0开始到5(不包括5),返回'hello's.substring(7); // 从索引7开始到结束,返回'world'


2. Gemeinsame Array-Methoden
indexOf()
zum Durchsuchen Position eines angegebenen Elements

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0arr.indexOf(20); // 元素20的索引为1arr.indexOf(30); // 元素30没有找到,返回-1arr.indexOf('30'); // 元素'30'的索引为2


slice()
fängt einige Elemente des Arrays ab und gibt dann ein neues Array zurück:

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C']arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

Beachten Sie, dass die Start- und Endparameter von Slice() den Startindex und nicht den Endindex enthalten.
Wenn Sie an Slice() keine Parameter übergeben, werden alle Elemente vom Anfang bis zum Ende abgefangen. Dies nutzen wir, um ein Array einfach zu kopieren.

push and pop
push() fügt mehrere Elemente am Ende des Arrays hinzu und pop() löscht das letzte Element des Arrays:

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4arr; // [1, 2, 'A', 'B']arr.pop(); // pop()返回'B'arr; // [1, 2, 'A']arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次arr; // []arr.pop(); // 空数组继续pop不会报错,而是返回undefinedarr; // []


Unshift und Shift

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4arr; // ['A', 'B', 1, 2]arr.shift(); // 'A'arr; // ['B', 1, 2]arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次arr; // []arr.shift(); // 空数组继续shift不会报错,而是返回undefinedarr; // []

sortiert das aktuelle Array. Es ändert direkt die Elementposition des aktuellen Arrays. Wenn es direkt aufgerufen wird, wird es sortiert in der Standardreihenfolge. :

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']
umkehren

Alle Elemente des gesamten Arrays entfernen, also umkehren:

var arr = ['one', 'two', 'three'];
arr.reverse();
arr; // ['three', 'two', 'one']

spleißen
Ändern Sie die „universelle Methode“ von Array, die mehrere Elemente beginnend am angegebenen Index löschen und dann mehrere Elemente an dieser Position hinzufügen kann

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];// 从索引2开始删除3个元素,然后再添加两个元素:arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']// 只删除,不添加:arr.splice(2, 2); // ['Google', 'Facebook']arr; // ['Microsoft', 'Apple', 'Oracle']// 只添加,不删除:arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat
verkettet das aktuelle Array mit einem anderen Array und gibt ein neues Array zurück

var arr = ['A', 'B', 'C'];var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]arr; // ['A', 'B', 'C']

join

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

3. Objekt
Da JavaScript-Objekte dynamisch typisiert werden, können Sie Attribute zu einem Objekt frei hinzufügen oder löschen:

var xiaoming = {
    name: '小明'};
xiaoming.age; // undefinedxiaoming.age = 18; // 新增一个age属性xiaoming.age; // 18delete xiaoming.age; // 删除age属性xiaoming.age; // undefineddelete xiaoming['name']; // 删除name属性xiaoming.name; // undefineddelete xiaoming.school; // 删除一个不存在的school属性也不会报错

Um festzustellen, ob Xiaoming ein bestimmtes Attribut hat, können Sie den in-Operator verwenden:

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null};'name' in xiaoming; // true'grade' in xiaoming; // false
Aber seien Sie vorsichtig, wenn in feststellt, dass ein Attribut vorhanden ist, ist dieses Attribut nicht unbedingt vorhanden xiaoming Ja, es kann von Xiaoming geerbt werden:

Um festzustellen, ob eine Eigenschaft Xiaoming selbst gehört und nicht geerbt wurde, können Sie die Methode hasOwnProperty() verwenden:

var xiaoming = {
    name: '小明'};
xiaoming.hasOwnProperty('name'); // truexiaoming.hasOwnProperty('toString'); // false

Der ES6-Standard führt einen neuen Datentyp Map, Set ein

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95var s1 = new Set(); // 空Setvar s2 = new Set([1, 2, 3]); // 含1, 2, 3

Der ES6-Standard führt einen neuen iterierbaren Typ ein (kann ersetzt werden)
Array , Map und Set gehören alle zum iterierbaren Typ.
Traverse

var a = ['A', 'B', 'C'];var s = new Set(['A', 'B', 'C']);var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);for (var x of a) { // 遍历Array    alert(x);
}for (var x of s) { // 遍历Set    alert(x);
}for (var x of m) { // 遍历Mapalert(x[0] + '=' + x[1]);
}

durch eine neue for...of-Schleife 4. Funktion
Freie Schlüsselwortargumente, die nur innerhalb der Funktion vorhanden sind. Funktioniert und immer zeigt auf alle Parameter, die vom Aufrufer der aktuellen Funktion übergeben wurden. arguments ist wie Array, aber es ist kein Array.

function foo(x) {
    alert(x); // 10for (var i=0; i<arguments.length; i++) {
        alert(arguments[i]); // 10, 20, 30    }
}
foo(10, 20, 30);

Max ist ein JavaScript-Neuling. Er hat eine max()-Funktion geschrieben, die die größere der beiden Zahlen zurückgibt:

document.write(Math.max(7.25,7.30));

5. Variablenbereich
ES6 führt das neue Schlüsselwort let anstelle von var ein, um eine Variable auf Blockebene zu deklarieren

&#39;use strict&#39;;function foo() {var sum = 0;for (let i=0; i<100; i++) {
        sum += i;
    }
    i += 1; // SyntaxError}

Der ES6-Standard führt das neue Schlüsselwort const ein, um Konstanten zu definieren.

const PI = 3.14;
PI = 3; // 某些浏览器不报错,但是无效果!PI; // 3.14

6 .Erweiterte Funktion
Die Karte( )-Methode ist im JavaScript-Array definiert. Wir rufen die map()-Methode von Array auf, übergeben unsere eigene Funktion und erhalten als Ergebnis ein neues Array.

function pow(x) {return x * x;
}var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

reduce() wendet eine Funktion auf [x1, x2, x3...] dieses Arrays an. Diese Funktion muss zwei Parameter empfangen, Reduce() Weiter Die kumulative Berechnung des Ergebnisses mit dem nächsten Element der Sequenz ist:

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {return x + y;
}); // 25

Filter ist auch eine häufig verwendete Operation, die zum Konvertieren von Arrays verwendet wird Bestimmte Elemente werden herausgefiltert und die verbleibenden Elemente werden zurückgegeben.
Wenden Sie die übergebene Funktion nacheinander auf jedes Element an und entscheiden Sie dann, ob das Element beibehalten oder verworfen werden soll, basierend darauf, ob der Rückgabewert wahr oder falsch ist.
Löschen Sie beispielsweise in einem Array gerade Zahlen und behalten Sie nur ungerade Zahlen bei

var arr = [1, 2, 4, 5, 6, 9, 10, 15];var r = arr.filter(function (x) {return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

Um leere Zeichenfolgen in einem Array zu löschen, können Sie schreiben:

var arr = [&#39;A&#39;, &#39;&#39;, &#39;B&#39;, null, undefined, &#39;C&#39;, &#39;  &#39;];var r = arr.filter(function (s) {return s && s.trim(); // 注意:IE9以下的版本没有trim()方法});
r; // [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;]

Anonyme Funktion (Funktion ohne Funktionsnamen)

var friends = ["Mike", "Stacy", "Andy", "Rick"];

friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick});

Sortieralgorithmus sortieren

// 看上去正常的结果:[&#39;Google&#39;, &#39;Apple&#39;, &#39;Microsoft&#39;].sort(); // [&#39;Apple&#39;, &#39;Google&#39;, &#39;Microsoft&#39;];// apple排在了最后:[&#39;Google&#39;, &#39;apple&#39;, &#39;Microsoft&#39;].sort(); // [&#39;Google&#39;, &#39;Microsoft", &#39;apple&#39;]// 无法理解的结果:[10, 20, 1, 2].sort(); // [1, 10, 2, 20]


第二个排序把apple排在了最后,是因为字符串根据ASCII码进行排序,而小写字母a的ASCII码在大写字母之后。
第三个排序结果是什么鬼?简单的数字排序都能错?
这是因为Array的sort()方法默认把所有元素先转换为String再排序,结果'10'排在了'2'的前面,因为字符'1'比字符'2'的ASCII码小。

7闭包
高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回

function lazy_sum(arr) {var sum = function () {return arr.reduce(function (x, y) {return x + y;
        });
    }return sum;
}


当我们调用lazy_sum()时,返回的并不是求和结果,而是求和函数:

var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()

调用函数f时,才真正计算求和的结果:

f(); // 15


在函数lazy_sum中又定义了函数sum,并且,内部函数sum可以引用外部函数lazy_sum的参数和局部变量,当lazy_sum返回函数sum时,相关参数和变量都保存在返回的函数中,这种称为“闭包(Closure)”的程序结构拥有极大的威力。

请再注意一点,当我们调用lazy_sum()时,每次调用都会返回一个新的函数,即使传入相同的参数:

var f1 = lazy_sum([1, 2, 3, 4, 5]);var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false

f1()和f2()的调用结果互不影响。

8.箭头函数
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。
为什么叫Arrow Function?因为它的定义用的就是一个箭头:
x => x * x
上面的箭头函数相当于:

function (x) {return x * x;
}


generator(生成器)是ES6标准引入的新的数据类型。一个generator看上去像一个函数,但可以返回多次。

function* foo(x) {
    yield x + 1;
    yield x + 2;return x + 3;
}

函数在执行过程中,如果没有遇到return语句(函数末尾如果没有return,就是隐含的return undefined;),控制权无法交回被调用的代码。









Das obige ist der detaillierte Inhalt vonAllgemeine JavaScript-Definitionen und -Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn