자바스크립트 실용적인 방법 요약

소개: 이 장에서는 이 포인터, 범위, 프로토타입과 같은 js의 일부 기본 원칙에 대한 심층적인 설명을 제공하지 않습니다. 여기에는 일상적인 개발 중에 코드를 단순화하고 실행 효율성을 향상시키는 데 도움이 되는 몇 가지 사항이 포함됩니다. 또는 경험적 방법으로 사용할 수도 있습니다. 길이가 길지 않아 전체 기사를 작은 단계로 읽고 프로그래밍의 즐거움을 경험할 수 있습니다.

두 간격 내에서 난수 가져오기

function getRandomNum(Min, Max){ // 获取两个区间之内随机数
    // @逆火狂飙  提出有可能第一个参数大于第二个参数，所以增加一下判断更可靠
    if (Min > Max) 
    Max = [Min, Min = Max][0]; // 快速交换两个变量值
    
    var Range = Max - Min + 1;
    var Rand = Math.random();
    return Min + Math.floor(Rand * Range);
};

양수/음수 매개변수를 임의로 반환

function getRandomXY(num){ // 随机返回一个 正/负参数
    num = new Number(num);
    if (Math.random() <= 0.5) 
        num = -num;
    return num;
}

setInterval() 또는 setTimeOut() 타이머 함수 전달 매개변수

var s = '我是参数';
function fn(args) {
    console.log(args);
}
var a = setInterval(fn(s),100);    // xxxxxx错误xxxxx
var b = setInterval(function(){    // 正确,用匿名函数调用被计时函数
    fn(s);
}, 100)

setInterval() 또는 setTimeOut() 타이머는

var s = true;
function fn2(a, b){        //  步骤三
    if (s) {
        clearInterval(a);
        clearInterval(b);
    }
};
function fn(a){     //  步骤二
    var b = setInterval(function(){
        fn2(a, b) // 传入两个计时器
    }, 200)
};
var a = setInterval(function(){      //  步骤一
    fn(a); // b代表计时器本身，可座位参数传递
}, 100)

문자열을 숫자로 변환

// 无需 new Number(String)   也无需 Number(String) 只需字符串减去零即可
var str = '100';  // str: String
var num = str - 0;// num: Number

Null 값 판정

var s = '';  // 空字符串
if(!s)         // 空字符串默认转换为布尔false，可以直接写在判断语句里面
if(s != null) // 但是空字符串 != null
if(s != undefined) // 空字符串也 != undefine

IE 브라우저의 ParseInt() 메소드

// 下面的转换在IE下为0，其他浏览器则为1，这跟IE浏览器解释数字的进制有关
var iNum = parseInt(01);
// 所以，兼容的写法为
var num = parseInt(new Number(01))

Firebug는 js 코드 디버깅에 편리합니다

//Firebug内置一个console对象，提供内置方法，用来显示信息
/**
 * console.log()，可以用来取代alert()或document.write()，支持占位符输出，字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）。如：console.log("%d年%d月%d日",2011,3,26)
 * 如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()
 * console.dir()可以显示一个对象所有的属性和方法
 * console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码
 * console.assert()断言，用来判断一个表达式或变量是否为真
 * console.trace()用来追踪函数的调用轨迹
 * console.time()和console.timeEnd()，用来显示代码的运行时间
 * 性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是：
       console.profile()....fn....console.profileEnd()
 */

현재 시간을 밀리초 단위로 빠르게 가져옵니다

// t == 当前系统毫秒值，原因：+号运算符会，会调用Date的valueOf（）方法。
var t = +new Date();

소수점 빨리 구하기

// x == 2,以下x值都为2,负数也可转换
var x = 2.00023 | 0;
// x = '2.00023' | 0

두 변수의 값 교환(중간 금액 없이)

var a = 1;var b = 2;a = [b, b=a][0]alert(a+'_'+b)    // 结果 2_1,a和b的值已经互换。

논리 OR '||' 연산자

// b不为null:a=b, b为null:a=1。
var a = b || 1;
// 较常见的用法为为一个插件方法传参，和获取事件目标元素：event = event || window.event
// IE有window.event对象，而FF没有

메서드 객체에만 프로토타입 프로토타입 속성이 있습니다

// 方法有对象原型prototype属性，而原始数据没有该属性，如  var a = 1， a没有prototype属性
function Person() {} // 人的构造函数
Person.prototype.run = function() { alert('run...'); } // 原型run方法
Person.run(); // error
var p1 = new Person(); // 只有在new操作符时，此时才会把原型run方法赋值给p1
p1.run(); // run..

요일 빨리 받기

// 计算系统当前时间是星期几
var week = "今天是：星期" + "日一二三四五六".charat(new date().getDay())

폐쇄 편향

/** * 闭包：任何一个js方法体都可以称为一个闭包，并非什么只有内嵌函数来引用了外部函数的某个参数或属性才会发生。 
* 它有一个独立作用域，在该作用域内可存在若干的子作用域（就是方法嵌套方法），最终该闭包作用域为最外层方法的作用域 
* 它包含了本身方法参数和所有内嵌函数的方法参数，所以当一个内嵌函数在外部有引用时，该引用的作用域为引用函数所在的（顶级）方法作用域 
*/ 
function a(x) {    
   function b(){        
      alert(x); // 引用外部函数参数    
   }    
   return b;
}
var run = a('run...'); 
// 由于作用域的扩大，可以引用到外部函数a的变量并显示run(); 
// alert(): run..

주소 매개변수 문자열을 가져오고 정기적으로 새로 고침

// 获取问号？后面的内容，包括问号
var x = window.location.search
// 获取警号#后面的内容，包括#号
var y = window.location.hash
// 配合定时器可实现网页自动刷新
window.location.reload()

Null 및 정의되지 않음

/**
 * Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
 * Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
 * ECMAScript认为undefined是从null派生出来的，所以把它们定义为相等的。
 * 但是，如果在一些情况下，我们一定要区分这两个值，那应该怎么办呢？可以使用下面的两种方法
 * 在进行判断时根据需要，判断对象是否有值时最好用‘==='强类型判断。
 */
var a;
alert(a === null); // false,因为a不是一个空对象
alert(a === undefined); // true,因为a未初始化，值为undefined
// 引申
alert(null == undefined); // true,因为‘=='运算符会进行类型转换，
// 同理
alert(1 == '1'); // true
alert(0 == false); // true,false转换为Number类型为0

메소드에 동적으로 매개변수 추가

// 方法a多了一个参数2
function a(x){
    var arg = Array.prototype.push.call(arguments,2);
    alert(arguments[0]+'__'+arguments[1]);

함수, 객체가 배열인가요?

var anObject = {}; //一个对象
anObject.aProperty = “Property of object”; //对象的一个属性
anObject.aMethod = function(){alert(“Method of object”)}; //对象的一个方法
//主要看下面：
alert(anObject[“aProperty”]); //可以将对象当数组以属性名作为下标来访问属性
anObject[“aMethod”](); //可以将对象当数组以方法名作为下标来调用方法
for( var s in anObject) //遍历对象的所有属性和方法进行迭代化处理
alert(s + ” is a ” + typeof(anObject[s]));
// 同样对于function类型的对象也是一样：
var aFunction = function() {}; //一个函数
aFunction.aProperty = “Property of function”; //函数的一个属性
aFunction.aMethod = function(){alert(“Method of function”)}; //函数的一个方法
//主要看下面：
alert(aFunction[“aProperty”]); //可以将函数当数组以属性名作为下标来访问属性
aFunction[“aMethod”](); //可以将函数当数组以方法名作为下标来调用方法
for( var s in aFunction) //遍历函数的所有属性和方法进行迭代化处理
alert(s + ” is a ” + typeof(aFunction[s]));

/**
 * 是的，对象和函数可以象数组一样，用属性名或方法名作为下标来访问并处理。
 * 那么，它到底应该算是数组呢，还是算对象？我们知道，数组应该算是线性数据结构，线性数据结构一般有一定的规律，适合进行统一的批量迭代操作等，有点像波。
 * 而对象是离散数据结构，适合描述分散的和个性化的东西，有点像粒子。
 * 因此，我们也可以这样问：JavaScript 里的对象到底是波还是粒子？如果存在对象量子论，那么答案一定是：波粒二象性！
 * 因此，JavaScript里的函数和对象既有对象的特征也有数组的特征。这里的数组被称为“字典”，一种可以任意伸缩的名称值对儿的集合。其实， object和function的内部实现就是一个字典结构，但这种字典结构却通过严谨而精巧的语法表现出了丰富的外观。正如量子力学在一些地方用粒子来 解释和处理问题，而在另一些地方却用波来解释和处理问题。你也可以在需要的时候，自由选择用对象还是数组来解释和处理问题。只要善于把握 JavaScript 的这些奇妙特性，就可以编写出很多简洁而强大的代码来。
 */

빈 공간을 클릭하면 특정 요소가 닫히거나 숨겨질 수 있습니다.

/**
 * 有时候页面有个下拉菜单或者什么的效果，需要用户点击空白处或者点击其他元素时将其隐藏
 * 可用一个全局document点击事件来触发
 * @param {Object} "目标对象"
 */
$(document).click(function(e){
    $("目标对象").hide();
});
/**
 * 但是有一个缺点就是当你点击该元素又想让他显示
 * 如果你不及时阻止事件冒泡至全局出发document对象点击时，上面方法就会执行
 */
$("目标对象").click(function(event){
    event = event || window.event;
    event.stopPropagation(); // 当点击目标对象时，及时阻止事件冒泡
    $("目标对象").toggle();
});

위의 내용은 일반적으로 사용되는 몇 가지 예입니다. 제가 정리한 javascript 방법은 다음과 같습니다. 더 많은 관련 튜토리얼을 보시려면

JavaScript 동영상 튜토리얼을 방문해 주세요!