JavaScript 학습 기술_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript 학습 기술_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:34 PM

javascript공부 기술

부울 유형으로 변환
JavaScript의 모든 값은 다음과 같이 암시적으로 부울 유형으로 변환될 수 있습니다.

   0 == false; // true<BR>
   1 == true; // true<BR>
   '' == false // true<BR>
   null == false // true<BR>

그러나 이러한 값은 부울 유형이 아닙니다.
따라서 비교를 위해 세 개의 등호를 사용하는 경우:

   0 === false; // false<BR>
   1 === true; // false<BR>
   '' === false // false<BR>
   null === false // false<BR>

이제 문제는 다른 유형을 부울 유형으로 변환하는 방법입니다.

   !!0 === false; // true<BR>
   !!1 === true; // true<BR>
   !!'' === false // true<BR>
   !!null === false // true<BR>

정의되지 않음

으로 대체되었습니다. 이 예에서 plus(2)
와 plus(2, undefine)은 동일하며
```
 function plus(base, added) { 
 return base + added; 
 } 
 plus(2); // NaN 
 
```
2 undefine의 결과는 NaN입니다. . 이제 문제는 두 번째 매개변수가 전달되지 않은 경우 초기 값을 어떻게 할당할 것인가입니다. 일부 네티즌들은 plus(2, 0) = 3이라고 언급했는데, 정말 그런 곳인 것 같습니다.
```
 function plus(base, added) { 
 added = added || 1; 
 return base + added; 
 } 
 plus(2); // 3 
 plus(2, 2); // 4 
 
```
다른 사람이 Iframe에서 귀하의 페이지를 로드하는 것을 방지하세요
```
 function plus(base, added) { 
 added = added || (added === 0 ? 0 : 1); 
 return base + added; 
 } 
 
```
귀하의 웹사이트가 인기를 얻으면 귀하의 웹사이트에 링크하거나 귀하의 웹페이지를 삽입하려는 웹사이트가 많이 있을 것입니다. IFrame을 통한 웹페이지.
재밌지도 않은데 어떻게 하면 이런 행동을 멈출 수 있을까요?
이 코드는 각 페이지의 머리에 배치되어야 합니다. 누군가가 실제 생활에서 이 코드를 사용하는지 알고 싶다면 Baidu의 블로그를 살펴보세요.
```
 if(top !== window) { 
 top.location.href = window.location.href; 
 } 
 
```
문자열 대체

String.prototype.replace
이 함수는 C#이나 Java에 매우 익숙한 프로그래머를 종종 혼란스럽게 합니다. 예:
replace 함수의 첫 번째 매개변수는 정규식입니다. 첫 번째 매개변수로 문자열을 전달하면 일치하는 첫 번째 문자열만 교체됩니다.
이 문제를 해결하려면 정규식을 사용할 수 있습니다.
```
 'Hello world, hello world'.replace('world', 'JavaScript'); 
 // The result is "Hello JavaScript, hello world" 
 
```
대체 시 대소문자를 무시하도록 지정할 수도 있습니다.

인수를 배열로 변환
```
 'Hello world, hello world'.replace(/world/g, 'JavaScript'); 
 // The result is "Hello JavaScript, hello JavaScript" 
 
```
```
 'Hello world, hello world'.replace(/hello/gi, 'Hi'); 
 // The result is "Hi world, Hi world" 
 
```
arguments
함수에 미리 정의된 변수는 실제 배열이 아니라 배열과 유사한 객체입니다. length
속성은 있지만 슬라이스, 푸시, 정렬 등의 기능은 없습니다. 따라서 인수를 만드는 방법은 이러한 경우에만 사용할 수 있는 기능이 있습니다. 배열?
즉, 인수를 실제 배열로 만드는 방법은 무엇일까요?
parseInt 함수의 두 번째 매개변수를 지정하세요
```
 function args() { 
 return [].slice.call(arguments, 0); 
 } 
 args(2, 5, 8); // [2, 5, 8] 
 
```
parseInt
는 문자열을 정수로 변환하는 데 사용됩니다. 구문은 다음과 같습니다. 두 번째 매개변수는 선택 사항입니다. , 첫 번째 매개변수의 10진수를 지정하는 데 사용됩니다. 두 번째 매개변수가 전달되지 않으면 다음 규칙을 따릅니다.
-> str이 0x로 시작하면 16진수로 간주됩니다.
```
 parseInt(str, [radix]) 
 
```
->
str
이 0으로 시작하면 8진수로 간주됩니다. -> 그렇지 않으면 소수로 간주됩니다. 따라서 이러한 규칙을 모른다면 다음 코드는 혼란스러울 것입니다.
따라서 안전을 위해 parseInt
에 대한 두 번째 매개변수를 지정해야 합니다.
```
 parseInt('08'); // 0 
 parseInt('08', 10); // 8 
 
```
배열에서 요소 삭제
delete
를 통해 이를 수행할 수 있습니다. 보시다시피 delete
는 그렇지 않습니다. 정말 작동합니다. 배열에서 요소를 삭제합니다. 삭제된 요소는 undefine으로 대체되며 배열의 길이는 변경되지 않습니다.
```
 var arr = [1, 2, 3, 4, 5]; 
 delete arr[1]; 
 arr; // [1, undefined, 3, 4, 5] 
 
```
사실 아래와 같이 Array.prototype의 splice 함수를 통해 배열의 요소를 삭제할 수 있습니다.

함수도 객체입니다
```
 var arr = [1, 2, 3, 4, 5]; 
 arr.splice(1, 1); 
 arr; // [1, 3, 4, 5] 
 
```
자바스크립트에서는 함수에 속성을 추가할 수 있으므로 함수도 객체입니다.
예:
이 함수가 호출된 횟수를 기록하기 위해 add 함수에
count
속성을 추가했습니다.
```
 function add() { 
 return add.count++; 
 } 
 add.count = 0; 
 add(); // 0 
 add(); // 1 
 add(); // 2 
 
```
물론 이는 보다 우아한 방법으로 달성할 수 있습니다. arguments.callee는 현재 실행 중인 함수를 가리킵니다.
```
 function add() { 
 if(!arguments.callee.count) { 
 arguments.callee.count = 0; 
 } 
 return arguments.callee.count++; 
 } 
 add(); // 0 
 add(); // 1 
 add(); // 2 
 
```
배열의 최대값
숫자로 가득 찬 배열에서 최대값을 찾는 방법은 루프를 통해 간단하게 찾을 수 있습니다.
다른 방법이 있나요? 우리 모두는 JavaScript에 숫자를 처리하는

Math 개체가 있다는 것을 알고 있습니다. 그러면 다음과 같이 배열에서 최대값을 찾을 수 있습니다.

   var arr = [2, 3, 45, 12, 8];<BR>
   var max = arr[0];<BR>
   for(var i in arr) {<BR>
    if(arr[i] > max) {<BR>
     max = arr[i];<BR>
    }<BR>
   }<BR>
   max; // 45<BR>

IE용

   Math.max(2, 3, 45, 12, 8); // 45<BR>

console.log

   var arr = [2, 3, 45, 12, 8];<BR>
   Math.max.apply(null, arr); // 45<BR>

기능 추가

Firefox에서 Firebug를 지원하여 console.log를 사용하여 방송국 기록을 제어하는 경우가 많습니다. 몇 가지 정보. 그러나 이 접근 방식은 현재 console
개체가 전혀 없기 때문에 IE에서 JavaScript 실행을 방지합니다(Firefox에서 Firebug가 활성화되지 않은 경우에도 마찬가지). 다음 요령으로 이런 일이 발생하지 않도록 방지할 수 있습니다.

정의되지 않음
```
 if (typeof(console) === 'undefined') { 
 window.console = { 
 log: function(msg) { 
 alert(msg); 
 } 
 }; 
 } 
 console.log('debug info.'); 
 
```
은 JavaScript의 예약어인가요?
그렇게 보이지만 실제로 undefound는 JavaScript의 키워드가 아닙니다. 이 코드는 이상하다고 느낄 수도 있지만 정상적으로 작동합니다. undefine 단지 사전 정의된 것입니다. 자바스크립트의 변수. 참고: JavaScript 프로그램에서는 이 작업을 수행하지 마십시오. 이 트릭은 단지 이것이 사실임을 알려줄 뿐입니다.
判断一个变量是否为undefined
两种情况下，一个变量为undefined：
1. 声明了变量，但是没有赋值
```
 var name; 
 name === undefined; // true 
 
```
2. 从来没有声明过此变量
```
 name2 === undefined; // error – name2 is not defined 
 
```
在第二种情况下，会有一个错误被抛出，那么如果判断一个变量是否为undefined而不产生错误呢？
下面提供了一种通用的方法：
```
 typeof(name2) === ‘undefined'; // true 
 
```

预加载图片
预加载图片就是加载页面上不存在的图片，以便以后使用JavaScript把它们快速显示出来。
比如你想在鼠标移动到某个图片上时显示另一张图片:

   var img = new Image(); <BR>
   img.src = "clock2.gif";<BR>

   <img src="/static/imghwm/default1.png"  data-src="clock.gif"  class="lazy" alt="" <BR>
    onmouseover="this.src='clock2.gif';" <BR>
    onmouseout="this.src=clock.gif';" /><BR>

那么，如何加载一组图片呢？考虑如下代码：

   var source = ['img1.gif','img2.gif']; <BR>
   var img = new Image(); <BR>
   for(var i = 0; i < source.length; i++) { <BR>
    img.src = source[i]; <BR>
   }<BR>

实际上，这段代码只能预加载最后的一张图片，因为其他的图片根本没有时间来预加载在循环到来的时候。
因此正确的写法应该是：

   var source = ['img1.gif','img2.gif']; <BR>
   for(var i = 0; i < source.length; i++) { <BR>
    var img = new Image(); <BR>
    img.src = source[i]; <BR>
   }<BR>

闭包（closure）
闭包指的是函数内的局部变量，当函数返回时此变量依然可用。
当你在函数内部定义另外一个函数时，你就创建了一个闭包，一个著名的例子：
```
 function add(i) { 
 return function() { 
 return ++i; 
 }; 
 } 
 add(2).toString(); // "function () { return ++i; }" 
 add(2)(); // 3 
 
```
add(2) 是一个函数，它可能获取外部函数的局部变量i 。
参考文章

私有变量
我们经常使用命名规范来标示一个变量是否为私有变量（最常用来标示）：

   var person = { <BR>
    _name: '', <BR>
    getName: function() { <BR>
     return this._name || 'not defined'; <BR>
    } <BR>
   }; <BR>
   person.getName(); // "not defined"<BR>

下划线前缀用来作为私有变量的约定，但是其他开发人员仍然可以调用此私有变量：

   person._name; // ""<BR>

那么，如何在JavaScript中创建一个真正的私有变量呢？
主要技巧是使用匿名函数（anonymous function）和闭包（closure）。

   var person = {}; <BR>
   (function() { <BR>
    var _name = ''; <BR>
    person.getName = function() { <BR>
     return _name || 'not defined'; <BR>
    } <BR>
   })(); <br><br>
   person.getName(); // "not defined" <BR>
   typeof(person._name); // "undefined"<BR>

JavaScript没有块级上下文（Scope）
JavaScript中块级代码没有上下文，实际上只有函数有自己的上下文。

   for(var i = 0; i < 2; i ++) { <br><br>
   } <BR>
   i; // 2<BR>

如果想创建一个上下文，可以使用自执行的匿名函数：

   (function (){ <BR>
    for(var i = 0; i < 2; i ++) { <br><br>
    }<BR>
   })(); <BR>
   typeof(i) === 'undefined'; // true<BR>

怪异的NaN
NaN用来表示一个值不是数字。
NaN在JavaScript中行为很怪异，是因为那NaN和任何值都不相等（包括它自己）。
```
 NaN === NaN; // false 
 
```
因为下面的代码可能会让一些人抓狂：
```
 parseInt('hello', 10); // NaN 
 parseInt('hello', 10) == NaN; // false 
 parseInt('hello', 10) === NaN; // false 
 
```
那么如何来检查一个值是否NaN?
可以使用window.isNaN来判断：
```
 isNaN(parseInt('hello', 10)); // true 
 
```
真值和假值
JavaScript中所有值都能隐式地转化为Boolean类型。
在条件判断中，下面这些值会自动转化为false：
null, undefined, NaN, 0, ‘', false
因此，不需要做如下复杂的判断:
```
 if(obj === undefined || obj === null) { 
 } 
 
```
而只需要这样做就行了：
```
 if(!obj) { 
 } 
 
```

修改arguments
比如，添加一个值到arguments中：

   function add() { <BR>
    arguments.push('new value'); <BR>
   } <BR>
   add(); // error - arguments.push is not a function<BR>

这样会出错，因为arguments 不是一个真正的数组，没有push方法。
解决办法：

   function add() { <BR>
    Array.prototype.push.call(arguments, 'new value'); <BR>
    return arguments; <BR>
   } <BR>
   add()[0]; // "new value"<BR>

Boolean 和 new Boolean
我们可以把Boolean看做是一个函数，用来产生Boolean类型的值（Literal）：

   Boolean(false) === false; // true <BR>
   Boolean('') === false; // true<BR>

所以，Boolean(0) 和!!0 是等价的。
我们也可以把Boolean看做是一个构造函数，通过new 来创建一个Boolean类型的对象：

   new Boolean(false) === false; // false <BR>
   new Boolean(false) == false; // true <BR>
   typeof(new Boolean(false)); // "object" <BR>
   typeof(Boolean(false)); // "boolean"<BR>

快速字符串连接
我们经常使用+ 将较短的字符串连接为一个长字符串，这在大部分的情况下是没问题的。
但是如果有大量的字符串需要连接，这种做法将会遇到性能问题，尤其是在IE下。

   var startTime = new Date();<BR>
   var str = '';<BR>
   for (var i = 0; i < 50000; i++) {<BR>
    str += i;<BR>
   }<BR>
   alert(new Date() - startTime); // Firefox - 18ms, IE7 - 2060ms<BR>

   var startTime = new Date();<BR>
   var arr = [];<BR>
   for (var i = 0; i < 100000; i++) {<BR>
    arr.push(i);<BR>
   }<BR>
   var str = arr.join("");<BR>
   alert(new Date() - startTime); // Firefox - 38ms, IE7 - 280ms<BR>

可以看到Firefox似乎对+ 操作符进行了优化，而IE则表现的傻乎乎的。

一元操作符 +
在JavaScript中，我们可以在字符串之前使用一元操作符“+”。这将会把字符串转化为数字，如果转化失败则返回NaN。
```
 2 + '1'; // "21" 
 2 + ( +'1'); // 3 
 
```
如果把 + 用在非字符串的前面，将按照如下顺序进行尝试转化：
1. 调用valueOf()
2. 调用toString()
3. 转化为数字
```
 +new Date; // 1242616452016 
 +new Date === new Date().getTime(); // true 
 +new Date() === Number(new Date) // true 
 
```
参考文章
encodeURI和encodeURIComponent
window.encodeURI函数用来编码一个URL，但是不会对以下字符进行编码：“:”, “/”, “;”, “?”.
window.encodeURIComponent则会对上述字符进行编码。
我们通过一个例子来说明：
```
 'index.jsp?page='+encodeURI('/page/home.jsp'); // "index.jsp?page=/page/home.jsp" 
 'index.jsp?page='+encodeURIComponent('/page/home.jsp'); // "index.jsp?page=%2Fpage%2Fhome.jsp" 
 
```
因此，在对URL进行编码时我们经常会选择 encodeURIComponent。

table.innerHTML在IE下是只读属性
我们经常通过节点的innerHTML 属性来填充节点，比如：

   <div id="container1"> </div><BR>

   document.getElementById('container1').innerHTML = "Hello World!";

但是在IE下设置table.innerHTML 将会导致错误：

<table id="table1"> </table><BR>

   // works well in Firefox, but fail to work in IE<BR>
   document.getElementById('table1').innerHTML = "<tr><td>Hello</td><td>World!</td></tr>";<BR>

实际上，table, thead, tr, select等元素的innerHTML属性在IE下都是只读的。

那么如果动态的创建一个table呢，下面提供了一种可行的方法：

<div id="table1"> </div><BR>

   document.getElementById('table1').innerHTML = "<table><tr><td>Hello</td><td>World!</td></tr></table>";<BR>

0.1+0.2 != 0.3
JavaScript将小数作为浮点数对待，所以可能会产生一些四舍五入的错误，比如：
```
0.1 + 0.2; // 0.30000000000000004
```
你可以通过toFixed方法指定四舍五入的小数位数：
```
 (0.1 + 0.2).toFixed(); // "0" 
 (0.1 + 0.2).toFixed(1); // "0.3"
```

javascript 是一种区分大小写的程序语言.

定义数组:
var strweek= new Array(7);

问号表达式
var i= (condition)?A:B;
相当于if-else 语句;condition 成立执行A ，不成立执行B;

switch 语句

var i=3;
var result="";
swithck(i);
{
case 1;
result="First";
case 2;
result="Second";
case 3;
result="Three";
break;
}

Date类
getDate() getYear() getMont()
getMinutes() getHours() getSeconds()
setTimeout("fution()",1000);

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.