JavaScript_javascript 기술의 실용적인 네이티브 API 요약

주제 바로가기

문자열 객체 구문 분석

JavaScript 개체를 JSON으로 직렬화할 수 있고 JSON도 개체로 구문 분석할 수 있다는 것은 모두 알고 있습니다. 하지만 문제는 JSON도 개체도 아닌 '것'이 있으면 변환하는 것이 불편하다는 것입니다. 둘 중 하나를 선택하면 eval이 유용할 수 있습니다

var obj = "{a:1,b:2}";  // 看起来像对象的字符串
eval("("+ obj +")")   // {a: 1, b: 2}

eval은 문자열 표현식을 실행할 수 있고 문자열 객체 obj를 실제 객체로 실행하고 싶기 때문에 eval을 사용해야 합니다. 그러나 eval이 {}를 명령문으로 사용하여 obj를 실행하는 것을 방지하기 위해 obj 외부에 () 쌍을 넣어 표현식으로 구문 분석할 수 있도록 합니다.

&(비트 AND)

숫자가 2의 n제곱인지 확인하려면 빼기 1을 AND로 하면 됩니다.

var number = 4
(number & number -1) === 0 // true

^(비트 XOR)

다른 세 번째 변수를 사용하면 두 변수의 값을 교환할 수 있습니다

var a = 4,b = 3
a = a ^ b //  7
b = a ^ b //  4
a = b ^ a //  3

날짜 형식

포맷 후 시간을 확인하고 싶으신가요? 이제 더 이상 연, 월, 일, 시, 분, 초를 가져올 필요가 없으며 세 단계만 거치면 됩니다

var temp = new Date();
var regex = /\//g;
(temp.toLocaleDateString() + ' ' + temp.toLocaleTimeString().slice(2)).replace(regex,'-');

// "2015-5-7 9:04:10"

형식화된 시간을 시간 개체로 변환하고 싶으신가요? Date 생성자를 직접 사용하세요

new Date("2015-5-7 9:04:10");

// Thu May 07 2015 09:04:10 GMT+0800 (CST)

표준 시간 객체를 Unix 타임스탬프로 변환하고 싶으신가요? valueOf가 해냈습니다

(new Date).valueOf();

// 1431004132641

많은 친구들도 이 방법을 사용하면 타임스탬프를 빨리 얻을 수 있다고 상기시켜 주었습니다

새 날짜

1달러 플러스

1달러 플러스는 문자열 숫자를 수학적인 숫자로 빠르게 변환할 수 있습니다.

var number = "23" 
typeof number // string
typeof +number // number

시간 객체를 타임스탬프로 변환할 수 있습니다

new Date // Tue May 12 2015 22:21:33 GMT+0800 (CST)
+new Date // 1431440459887

이스케이프된 URI

경로의 매개변수로 URL을 전달해야 합니다. 이제 이스케이프하세요

var url = encodeURIComponent('http://segmentfault.com/questions/newest')

// "http%3A%2F%2Fsegmentfault.com%2Fquestions%2Fnewest"

역탈출

decodeURIComponent(url)
// "http://segmentfault.com/questions/newest"

숫자

문자열 가로채기를 하지 않고 소수점 이하 몇 자리를 유지하고 싶다면 toFixed를 사용하여 없애세요

number.toFixed()   // "12346"
number.toFixed(3)  // "12345.679"
number.toFixed(6)  // "12345.678900"

매개변수 범위는 0~20이며, 쓰지 않으면 기본값은 0입니다

유형 감지

Typeof는 가장 자주 사용되는 유형 감지 방법입니다

typeof 3    // "number"
typeof "333"  // "string"
typeof false  // "boolean"

기본(단순) 데이터형에는 좋지만, 참조데이터형은 쉽지 않습니다

typeof new Date()  // "object"
typeof []      // "object"
typeof {}      // "object"
typeof null     // "object"   

처음 세 개는 견딜 수 있지만 실제로는 null이 객체를 반환합니다. 농담인가요? ! ! (ps: 사실 이건 사람들이 고칠 수 없는 자바스크립트 버그입니다 ꒰･◡･๑꒱ )

이번에는 instanceof를 사용하겠습니다

toString instanceof Function
// true
(new Date) instanceof Date
// true
[] instanceof Object
// true
[] instanceof Array
// true

실제로 []와 Object가 true가 되는 것을 알 수 있습니다. []도 객체라는 것을 알고 있지만, 유형을 결정하는 더 정확한 방법이 필요했고 이제 여기에 있습니다.
판단하려면 Object.prototype.toString()을 사용하세요. 각 개체가 감지를 통과하려면 Function.prototype.call 또는 Function.prototype.apply를 사용하여

를 호출해야 합니다.

var toString = Object.prototype.toString;

toString.call(new Date)  // "[object Date]"
toString.call(new Array)  // "[object Array]"
toString.call(new Object) // "[object Object]"
toString.call(new Number) // "[object Number]"
toString.call(new String) // "[object String]"
toString.call(new Boolean) // "[object Boolean]"

toString 메서드는 재정의될 가능성이 매우 높으므로 사용해야 할 때는
Object.prototype.toString() 메소드를 직접 사용할 수 있습니다

상속 구현

공식 사례 보기

//Shape - superclass
function Shape() {
 this.x = 0;
 this.y = 0;
}

Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
 Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1, 1); //Outputs, "Shape moved."

호출을 통해 초기화된 속성과 메서드를 가져오고, Object.create를 통해 프로토타입 객체의 속성과 메서드를 가져옵니다

반복

ES5에는 맵, 필터, 일부, 모든, 축소 등 많은 반복 기능이 있습니다.

배열

여기서 구체적인 API를 자세히 소개합니다.
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Glob...
다음은 몇 가지 단어입니다.
Join, pop, push, reverse, shift, sort, splice, unshift는 원래 배열을 변경합니다

concat,indexOf,lastIndexOf,slice,toString은 원래 배열을 변경하지 않습니다

맵, 필터, 일부, 모든, 축소 및 forEach와 같은 반복 방법은 원래 배열을 변경하지 않습니다

몇 가지 참고 사항:

1교대, 팝은 삭제된 요소를 반환합니다
2 스플라이스는 삭제된 요소로 구성된 배열 또는 빈 배열을 반환합니다
3번 푸시하면 새 배열 길이가 반환됩니다
4 사실인 경우 일부 중지
허위시마다 5번 정지
6 위의 반복 메서드는 콜백 실행 시 this 값인 thisArg 매개변수를 끝에 추가할 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.