자바스크립트 팁-JS 튜토리얼-php.cn

배열은 JavaScript의 모든 곳에서 찾을 수 있으며 ECMAScript 6의 새로운 기능 확산 연산자를 사용하여 많은 훌륭한 작업을 수행할 수 있습니다.

1. 빈 배열 반복

JavaScript에서 직접 생성된 배열은 느슨하므로 함정이 많습니다. 배열 생성자를 사용하여 배열을 만들어 보면 즉시 이해하게 될 것입니다.

const arr = new Array(4);
[undefined, undefined, undefined, undefined]
// 谷歌浏览器中是 [empty x 4]

로그인 후 복사

느슨한 배열을 반복하고 일부 변환을 호출하는 것이 매우 어렵다는 것을 알게 될 것입니다.

const arr = new Array(4);
arr.map((elem, index) => index);
[undefined, undefined, undefined, undefined]

로그인 후 복사

이 문제를 해결하려면 새 배열을 만들 때 Array.apply를 사용할 수 있습니다.

const arr = Array.apply(null, new Array(4));
arr.map((elem, index) => index);
[0, 1, 2, 3]

로그인 후 복사

2. 빈 매개변수를 메소드에 전달합니다

메서드를 호출하고 매개변수 중 하나를 입력하지 않으면 JavaScript가 오류를 보고합니다.

method(&#39;parameter1&#39;, , &#39;parameter3&#39;); // Uncaught SyntaxError: Unexpected token ,

로그인 후 복사

우리가 사용하는 일반적인 솔루션은 null 또는 정의되지 않은 값을 전달하는 것입니다.

method(&#39;parameter1&#39;, null, &#39;parameter3&#39;) // or
method(&#39;parameter1&#39;, undefined, &#39;parameter3&#39;);

로그인 후 복사

ES6에 스프레드 연산자가 도입되면서 빈 인수를 메서드에 전달하는 더 깔끔한 방법이 있습니다. 위에서 언급했듯이 배열은 느슨하기 때문에 null 값을 전달해도 괜찮고 우리는 이를 활용합니다.

method(...[&#39;parameter1&#39;, , &#39;parameter3&#39;]); // 代码执行了...

로그인 후 복사

3. 어레이 중복 제거

왜 어레이가 중복 제거된 값을 쉽게 얻을 수 있는 내장 기능을 제공하지 않는지 이해가 되지 않습니다. Spread 연산자를 Set과 함께 사용하면 고유한 배열을 생성할 수 있습니다.

const arr = [...new Set([1, 2, 3, 3])];
// [1, 2, 3]

로그인 후 복사

4 뒤에서 앞으로 배열 요소 가져오기

배열 요소를 뒤에서 앞으로 가져오려면 다음과 같이 작성할 수 있습니다.

var arr = [1, 2, 3, 4]

console.log(arr.slice(-1)) // [4]
console.log(arr.slice(-2)) // [3, 4]
console.log(arr.slice(-3)) // [2, 3, 4]
console.log(arr.slice(-4)) // [1, 2, 3, 4]

로그인 후 복사

특정 조건부 논리값이 true인 경우 다음과 같이 함수를 실행합니다.

if (condition) {
  dosomething()
}

로그인 후 복사

이때 다음과 같이 단락을 사용할 수 있습니다.

condition && dosomething()

로그인 후 복사

6 연산자를 사용합니다. "를 사용하여 기본값을 설정합니다

변수에 기본값을 할당해야 하는 경우 다음과 같이 간단하게 작성할 수 있습니다.

var a

console.log(a) // undefined
a = a || &#39;default value&#39;
console.log(a) // default value
a = a || &#39;new value&#39;
console.log(a) // default value

로그인 후 복사

7. 동등 비교에 Object.is()를 사용하세요

우리는 JavaScript는 약한 형식이라는 것을 모두가 알고 있으며, 비교를 위해 ==를 사용할 때 어떤 경우에는 형식 변환이나 "두 피연산자 중 하나를 다른 피연산자로 변환한 다음 비교"로 인해 예상치 못한 결과가 발생할 수 있습니다.

0 == &#39; &#39; //true
null == undefined //true
[1] == true //true

로그인 후 복사

그래서 JavaScript는 부등 연산자보다 더 엄격하고 유형 변환을 발생시키지 않는 항등 연산자 ===를 제공합니다. 그러나 비교를 위해 ===를 사용하는 것이 최선의 해결책은 아닙니다. 다음을 얻을 수 있습니다:

NaN === NaN //false

로그인 후 복사

ES6은 ===의 일부 기능을 포함하고 더 우수하고 정확하며 일부 특수한 경우에 잘 수행되는 새로운 Object.is() 메서드를 제공합니다.

Object.is(0 , &#39; &#39;); //false
Object.is(null, undefined); //false
Object.is([1], true); //false
Object.is(NaN, NaN); //true

로그인 후 복사

8. 개체 바인딩

우리는 종종 개체를 메서드에 바인딩해야 합니다. JS에서 함수를 호출하고 this를 지정하려면 바인딩 메서드를 사용할 수 있습니다.

Bind 구문

fun.bind(thisArg[, arg1[, arg2[, ...]]])

로그인 후 복사

Parameters

thisArg

바인딩된 함수가 호출될 때 이 매개변수는 실행될 때 원래 함수의 this 포인터 역할을 합니다.

arg1, arg2, …

바운드 함수가 호출되면 이러한 매개변수는 실제 매개변수보다 먼저 바인딩된 메서드에 전달됩니다.

반환 값

const myCar = {
 brand: &#39;Ford&#39;,
 type: &#39;Sedan&#39;,
 color: &#39;Red&#39;
};

const getBrand = function () {
 console.log(this.brand);
};

const getType = function () {
 console.log(this.type);
};

const getColor = function () {
 console.log(this.color);
};

getBrand(); // object not bind,undefined

getBrand(myCar); // object not bind,undefined

getType.bind(myCar)(); // Sedan

let boundGetColor = getColor.bind(myCar);
boundGetColor(); // Red

로그인 후 복사

9의 지정된 this 값과 초기화 매개변수

Instance로 수정된 원래 함수의 복사본을 반환합니다. 정규식

function getFileExtension1(filename) {
  return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined;
}

로그인 후 복사

해결책 2: 문자열 분할 방법

function getFileExtension2(filename) {
  return filename.split(&#39;.&#39;).pop();
}

로그인 후 복사

이 두 솔루션은 일부 극단적인 경우를 해결할 수 없습니다. 더 강력한 솔루션이 또 있습니다.

해결책 3: 문자열의 슬라이스 및 lastIndexOf 메서드

function getFileExtension3(filename) {
  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}

console.log(getFileExtension3(&#39;&#39;));                            // &#39;&#39;
console.log(getFileExtension3(&#39;filename&#39;));                    // &#39;&#39;
console.log(getFileExtension3(&#39;filename.txt&#39;));                // &#39;txt&#39;
console.log(getFileExtension3(&#39;.hiddenfile&#39;));                 // &#39;&#39;
console.log(getFileExtension3(&#39;filename.with.many.dots.ext&#39;)); // &#39;ext&#39;

로그인 후 복사

이것은 어떻게 구현됩니까?

String.lastIndexOf() 메서드는 이것을 호출할 때 지정된 값(이 예에서는 '.')을 반환합니다. 문자열의 메소드, 또는 찾을 수 없으면 -1입니다.

'filename' 및 '.hiddenfile'의 경우 lastIndexOf의 반환 값은 각각 0과 -1입니다. 부호 없는 오른쪽 이동 연산자(»>)는 -1을 4294967295로, -2를 4294967294로 변환합니다. 이 방법을 사용하면 극단적인 경우에 파일 이름이 변경되지 않고 유지됩니다.
String.prototype.slice()는 위에서 계산한 인덱스에서 파일 확장자를 추출합니다. 인덱스가 파일 이름 길이보다 길면 결과는 ""입니다.
10. 미적용 공격 방지

내장 객체의 프로토타입 메소드를 다시 작성하세요. 외부 코드는 코드를 다시 작성하여 바인딩된 매개변수가 있는 함수를 노출하고 수정할 수 있습니다. 이는 es5의 접근 방식에서 폴리필을 사용할 때 심각한 보안 문제입니다.

// bind polyfill 示例
function bind(fn) {
  var prev = Array.prototype.slice.call(arguments, 1);
  return function bound() {
    var curr = Array.prototype.slice.call(arguments, 0);
    var args = Array.prototype.concat.apply(prev, curr);
    return fn.apply(null, args);
  };
}


// unapply攻击
function unapplyAttack() {
  var concat = Array.prototype.concat;
  Array.prototype.concat = function replaceAll() {
    Array.prototype.concat = concat; // restore the correct version
    var curr = Array.prototype.slice.call(arguments, 0);
    var result = concat.apply([], curr);
    return result;
  };
}

로그인 후 복사

上面的函数声明忽略了函数bind的prev参数，意味着调用unapplyAttack之后首次调用.concat将会抛出错误。

使用Object.freeze，可以使对象不可变，你可以防止任何内置对象原型方法被重写。

(function freezePrototypes() {
  if (typeof Object.freeze !== &#39;function&#39;) {
    throw new Error(&#39;Missing Object.freeze&#39;);
  }
  Object.freeze(Object.prototype);
  Object.freeze(Array.prototype);
  Object.freeze(Function.prototype);
}());

로그인 후 복사

11.Javascript多维数组扁平化

下面是将多位数组转化为单一数组的三种不同方法。

var arr = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];

로그인 후 복사

期望结果：

[1, 2, 3, 4, 5, 6, 7, 8, 9]

로그인 후 복사

解决方案1：使用concat()和apply()

var newArr = [].concat.apply([], arr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

로그인 후 복사

解决方案2：使用reduce()

var newArr = arr.reduce(function(prev, curr) {
  return prev.concat(curr);
});
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

로그인 후 복사

解决方案3：使用 ES6 的展开运算符

var newArr = [].concat(...arr);
console.log(newArr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

로그인 후 복사

12. 函数中如何使用可选参数（包括可选回调函数）

实例函数中第2个与第3个参数为可选参数

function example( err, optionA, optionB, callback ) {
        // 使用数组取出arguments
        var args = new Array(arguments.length);
        for(var i = 0; i < args.length; ++i) {
            args[i] = arguments[i];
        };
        
        // 第一个参数为错误参数
        // shift() 移除数组中第一个参数并将其返回
        err = args.shift();

        // 如果最后一个参数是函数，则它为回调函数
        // pop() 移除数组中最后一个参数并将其返回
        if (typeof args[args.length-1] === &#39;function&#39;) { 
            callback = args.pop();
        }
        
        // 如果args中仍有元素，那就是你需要的可选参数
        // 你可以像这样一个一个的将其取出：
        if (args.length > 0) optionA = args.shift(); else optionA = null;
        if (args.length > 0) optionB = args.shift(); else optionB = null;

        // 像正常一样继续：检查是否有错误
        if (err) { 
            return callback && callback(err);
        }
        
        // 打印可选参数
        console.log(&#39;optionA:&#39;, optionA);
        console.log(&#39;optionB:&#39;, optionB);
        console.log(&#39;callback:&#39;, callback);

        /* 你想做的逻辑 */

    }

    // ES6语法书写更简短
    function example(...args) {
        // 第一个参数为错误参数
        const err = args.shift();
        // 如果最后一个参数是函数，则它为回调函数
        const callback = (typeof args[args.length-1] === &#39;function&#39;) ? args.pop() : null;

        // 如果args中仍有元素，那就是你需要的可选参数你可以像这样一个一个的将其取出：
        const optionA = (args.length > 0) ? args.shift() : null;
        const optionB = (args.length > 0) ? args.shift() : null;
        // ... 重复取更多参数

        if (err && callback) return callback(err);

        /* 你想做的逻辑 */
    }

로그인 후 복사

推荐教程：《JS教程》

위 내용은 자바스크립트 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!