찾다

집  >  기사  >  웹 프론트엔드  >  자바스크립트 팁

자바스크립트 팁

hzc
hzc앞으로
2020-06-12 10:38:161744검색

배열은 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('parameter1', , 'parameter3'); // Uncaught SyntaxError: Unexpected token ,

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

method('parameter1', null, 'parameter3') // or
method('parameter1', undefined, 'parameter3');

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

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

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]

5.

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

if (condition) {
  dosomething()
}

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

condition && dosomething()

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

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

var a

console.log(a) // undefined
a = a || 'default value'
console.log(a) // default value
a = a || 'new value'
console.log(a) // default value

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

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

0 == ' ' //true
null == undefined //true
[1] == true //true

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

NaN === NaN //false

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

Object.is(0 , ' '); //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, …

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

반환 값

JS

const myCar = {
 brand: 'Ford',
 type: 'Sedan',
 color: 'Red'
};

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('.').pop();
}

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

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

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

console.log(getFileExtension3(''));                            // ''
console.log(getFileExtension3('filename'));                    // ''
console.log(getFileExtension3('filename.txt'));                // 'txt'
console.log(getFileExtension3('.hiddenfile'));                 // ''
console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext'

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


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 !== 'function') {
    throw new Error('Missing Object.freeze');
  }
  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 juejin.im에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：JS로 간단한 캐러셀 효과를 구현하는 방법은 무엇입니까? (사진과 글로 자세한 설명)다음 기사：JS로 간단한 캐러셀 효과를 구현하는 방법은 무엇입니까? (사진과 글로 자세한 설명)

관련 기사

더보기