JavaScript 일반 정의 및 방법

1. 일부 일반적인 문자열 메서드. 이러한 메서드를 호출하면 원래 문자열의 내용이 변경되지 않지만 새 문자열이 반환됩니다.
toUpperCase()
문자열을 모두 대문자로 변환:

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

toLowerCase()
문자열을 모두 소문자로 변환:

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

indexOf()
는 지정된 문자열의 발생을 검색합니다. 위치:

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

substring()
지정된 인덱스 범위의 하위 문자열을 반환합니다.

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

2. 지정된 요소의 위치를 ​​검색하는 일반적인 배열 메서드
indexOf()

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

슬라이스 ()
배열의 일부 요소를 가로채고 새 배열을 반환합니다.

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']

slice()의 시작 및 끝 매개변수에는 시작 인덱스가 포함되지만 끝 인덱스는 포함되지 않습니다.
slice()에 매개변수를 전달하지 않으면 처음부터 끝까지 모든 요소를 ​​가로챕니다. 이를 활용하면 Array를 쉽게 복사할 수 있습니다.

push 및 pop
push()는 배열 끝에 여러 요소를 추가하고 pop()은 배열의 마지막 요소를 삭제합니다. 현재에서

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 및 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; // []

sort
배열 정렬은 현재 배열의 요소 위치를 직접 수정합니다. 직접 호출하면 기본 순서로 정렬됩니다:

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

reverse
전체 배열의 요소 제거, 즉 역방향:

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

splice
지정된 인덱스에서 시작하여 여러 요소를 삭제한 다음 해당 위치에서 여러 요소를 추가할 수 있는 Array의 "범용 방법"을 수정합니다.

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
현재 Array를 다른 Array와 연결하고 새로운 배열을 반환하세요

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. Object
JavaScript 개체는 동적으로 유형이 지정되므로 개체에 속성을 자유롭게 추가하거나 제거할 수 있습니다.

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属性也不会报错

샤오밍에 해당 항목이 있는지 감지 특정 속성의 경우 in 연산자를 사용할 수 있습니다:

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

그러나 in에서 속성이 존재한다고 판단하는 경우 이 속성은 반드시 Xiaoming에 속할 필요는 없으며 Xiaoming에서 상속될 수 있습니다.
속성은 Xiaoming 상속되지 않고 직접 소유하며 hasOwnProperty() 메서드를 사용할 수 있습니다.

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

ES6 사양은 새로운 데이터 유형을 도입합니다. Map, Set

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

ES6 표준은 새로운 반복 가능한 유형을 도입합니다(can Yidai )
Array, Map 및 Set은 모두 반복 가능한 유형에 속합니다.
새로운 for...of 루프를 통과합니다

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]);
}

4. Function
함수 내부에서만 작동하고 항상 현재 함수의 호출자가 전달한 모든 매개변수를 가리키는 무료 키워드 인수입니다. 인수는 배열과 비슷하지만 배열이 아닙니다.

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

Max는 JavaScript 초보자입니다. 그는 두 숫자 중 더 큰 숫자를 반환하는 max() 함수를 작성했습니다.

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

5. 변수 범위
ES6에서는 var 대신 let을 사용하는 새로운 키워드를 도입했습니다. 블록 수준 범위 변수를 선언하기 위해

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

ES6 표준에는 상수를 정의하는 새로운 키워드 const가 도입되었습니다. const와 let 모두 블록 수준 범위를 갖습니다

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

6. 고급 기능
map() 메서드는 다음과 같습니다. JavaScript Array에 정의되어 있습니다. Array의 map() 메소드를 호출하고 자체 함수를 전달하고 결과로 새 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()는 이 배열의 [x1, x2, x3...]에 함수를 적용합니다. 이 함수는 두 개의 매개변수를 받아야 하며 결과를 시퀀스의 다음 요소로 계속합니다.

[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는 또한 일반적으로 사용되는 작업으로 배열의 특정 요소를 필터링한 다음 나머지 요소를 반환하는 데 사용됩니다.
전달된 함수를 각 요소에 차례로 적용한 후 반환 값이 true인지 false인지에 따라 요소를 유지할지, 삭제할지 결정합니다.
예를 들어 배열에서 짝수를 삭제하고 홀수만 유지합니다.

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]

배열에서 빈 문자열을 삭제하려면 다음과 같이 쓸 수 있습니다.

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

익명 함수(함수 이름 없음 함수)

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

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

정렬 정렬 알고리즘

// 看上去正常的结果:['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];// apple排在了最后:['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']// 无法理解的结果:[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;），控制权无法交回被调用的代码。