배열은 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.
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()를 사용하세요
0 == ' ' //true null == undefined //true [1] == true //true
NaN === NaN //false
Object.is(0 , ' '); //false Object.is(null, undefined); //false Object.is([1], true); //false Object.is(NaN, NaN); //true
8. 개체 바인딩
Bind 구문
fun.bind(thisArg[, arg1[, arg2[, ...]]])
Parameters
thisArg바인딩된 함수가 호출될 때 이 매개변수는 실행될 때 원래 함수의 this 포인터 역할을 합니다.arg1, arg2, …
바운드 함수가 호출되면 이러한 매개변수는 실제 매개변수보다 먼저 바인딩된 메서드에 전달됩니다.반환 값
JSconst 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(); // Red9의 지정된 this 값과 초기화 매개변수
Instance로 수정된 원래 함수의 복사본을 반환합니다. 정규식function getFileExtension1(filename) {
return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined;
}
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()는 위에서 계산한 인덱스에서 파일 확장자를 추출합니다. 인덱스가 파일 이름 길이보다 길면 결과는 ""입니다.
내장 객체의 프로토타입 메소드를 다시 작성하세요. 외부 코드는 코드를 다시 작성하여 바인딩된 매개변수가 있는 함수를 노출하고 수정할 수 있습니다. 이는 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] === 'function') {
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('optionA:', optionA);
console.log('optionB:', optionB);
console.log('callback:', callback);
/* 你想做的逻辑 */
}
// ES6语法书写更简短
function example(...args) {
// 第一个参数为错误参数
const err = args.shift();
// 如果最后一个参数是函数，则它为回调函数
const callback = (typeof args[args.length-1] === 'function') ? 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
