• js高级笔录


    1.类型转换
    ①转换成字符串toString()

    Boolean 值、数字和字符串的原始值的有趣之处在于它们是伪对象,这意味着它们实际上具有属性和方法。

    var sColor = "red";
    alert(sColor.length); //输出 "3"


    3 种主要的原始类型 Boolean 值、数字和字符串都有 toString() 方法,可以把它们的值转换成字符串。

    无论最初采用什么表示法声明数字,Number 类型的 toString() 方法返回的都是数字的十进制表示。
    var iNum = 10;
    alert(iNum.toString(2)); //输出 "1010"
    alert(iNum.toString(8)); //输出 "12"
    alert(iNum.toString(16)); //输出 "A"


    toString() 方法可把数组转换为字符串,并返回结果。
    arrayObject.toString()
    arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

    ②转换成数字 parseInt() 和 parseFloat()。

    前者把值转换成整数,后者把值转换成浮点数。对其他类型返回的都是 NaN。
    var iNum1 = parseInt("12345red"); //返回 12345
    var iNum1 = parseInt("0xA"); //返回 10
    var iNum1 = parseInt("56.9"); //返回 56
    var iNum1 = parseInt("red"); //返回 NaN


    parseInt() 方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt() 方法的第二个参数指定的,所以要解析十六进制的值,需如下调用 parseInt() 方法:
    var iNum1 = parseInt("AF", 16); //返回 175

    ③强制类型转换

    3 种强制类型转换如下:
    Boolean(value) - 把给定的值转换成 Boolean 型;
    Number(value) - 把给定的值转换成数字(可以是整数或浮点数);
    String(value) - 把给定的值转换成字符串;


    当要转换的值是至少有一个字符的字符串、非 0 数字或对象时,Boolean() 函数将返回 true。如果该值是空字符串、数字 0、undefined 或 null,它将返回 false。
    var b1 = Boolean(""); //false - 空字符串
    var b2 = Boolean("hello"); //true - 非空字符串
    var b1 = Boolean(50); //true - 非零数字
    var b1 = Boolean(null); //false - null
    var b1 = Boolean(0); //false - 零
    var b1 = Boolean(new object()); //true - 对象


    Number() 函数
    Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似,只是它转换的是整个值,而不是部分值。
    还记得吗,parseInt() 和 parseFloat() 方法只转换第一个无效字符之前的字符串,因此 "1.2.3" 将分别被转换为 "1" 和 "1.2"。
    用 Number() 进行强制类型转换,"1.2.3" 将返回 NaN,因为整个字符串值不能转换成数字。如果字符串值能被完整地转换,Number() 将判断是调用 parseInt() 方法还是 parseFloat() 方法。

    Number(false) 0
    Number(true) 1
    Number(undefined) NaN
    Number(null) 0
    Number("1.2") 1.2
    Number("12") 12
    Number("1.2.3") NaN
    Number(new object()) NaN
    Number(50) 50

    ⅲString() 函数
    强制转换成字符串和调用 toString() 方法的唯一不同之处在于,对 null 和 undefined 值强制类型转换可以生成字符串而不引发错误:
    var s1 = String(null); //"null"
    var oNull = null;
    var s2 = oNull.toString(); //会引发错误

    2.ECMAScript 引用类型

    Object 对象
    Object 对象具有下列属性:
    constructor
    对创建对象的函数的引用(指针)。对于 Object 对象,该指针指向原始的 Object() 函数。
    Prototype
    对该对象的对象原型的引用。对于所有的对象,它默认返回 Object 对象的一个实例。
    Object 对象还具有几个方法:
    hasOwnProperty(property)
    判断对象是否有某个特定的属性。必须用字符串指定该属性。(例如,o.hasOwnProperty("name"))
    IsPrototypeOf(object)
    判断该对象是否为另一个对象的原型。
    PropertyIsEnumerable
    判断给定的属性是否可以用 for...in 语句进行枚举。
    ToString()
    返回对象的原始字符串表示。对于 Object 对象,ECMA-262 没有定义这个值,所以不同的 ECMAScript 实现具有不同的值。
    ValueOf()
    返回最适合该对象的原始值。对于许多对象,该方法返回的值都与 ToString() 的返回值相同。


    Boolean 对象
    var oFalseObject = new Boolean(false);
    var bResult = oFalseObject && true; //输出 true



    Number 对象


    toFixed() 方法
    toFixed() 方法返回的是具有指定位数小数的数字的字符串表示。例如:
    var oNumberObject = new Number(68);
    alert(oNumberObject.toFixed(2)); //输出 "68.00"


    toExponential() 方法
    与格式化数字相关的另一个方法是 toExponential(),它返回的是用科学计数法表示的数字的字符串形式。


    ④String 对象


    length 属性
    String 对象具有属性 length,它是字符串中的字符个数:
    var oStringObject = new String("hello world");
    alert(oStringObject.length); //输出 "11"


    charAt() 和 charCodeAt() 方法
    var oStringObject = new String("hello world");
    alert(oStringObject.charAt(1)); //输出 "e"

    var oStringObject = new String("hello world");
    alert(oStringObject.charCodeAt(1)); //输出 "101"


    concat() 方法
    接下来是 concat() 方法,用于把一个或多个字符串连接到 String 对象的原始值上。

    var oStringObject = new String("hello ");
    var sResult = oStringObject.concat("world");
    alert(sResult); //输出 "hello world"



    indexOf() 和 lastIndexOf() 方法
    var oStringObject = new String("hello world!");
    alert(oStringObject.indexOf("o")); 输出 "4"
    alert(oStringObject.lastIndexOf("o")); 输出 "7"


    localeCompare() 方法
    var oStringObject = new String("yellow");
    alert(oStringObject.localeCompare("brick")); //输出 "1"
    alert(oStringObject.localeCompare("yellow")); //输出 "0"
    alert(oStringObject.localeCompare("zoo")); //输出 "-1"
    再强调一次,由于返回的值是由实现决定的,所以最好以下面的方式调用 localeCompare() 方法
    var oStringObject1 = new String("yellow");
    var oStringObject2 = new String("brick");

    var iResult = oStringObject1.localeCompare(oStringObject2);

    if(iResult < 0) {
    alert(oStringObject1 + " comes before " + oStringObject2);
    } else if (iResult > 0) {
    alert(oStringObject1 + " comes after " + oStringObject2);
    } else {
    alert("The two strings are equal");
    }
    采用这种结构,可以确保这段代码在所有实现中都能正确运行。



    slice() 和 substring()
    var oStringObject = new String("hello world");
    alert(oStringObject.slice("3")); //输出 "lo world"
    alert(oStringObject.substring("3")); //输出 "lo world"
    alert(oStringObject.slice("3", "7")); //输出 "lo w"
    alert(oStringObject.substring("3", "7")); //输出 "lo w"
    var oStringObject = new String("hello world");
    alert(oStringObject.slice("-3")); //输出 "rld"
    alert(oStringObject.substring("-3")); //输出 "hello world"
    alert(oStringObject.slice("3, -4")); //输出 "lo w"
    alert(oStringObject.substring("3, -4")); //输出 "hel"


    instanceof 运算符
    var oStringObject = new String("hello world");
    alert(oStringObject instanceof String); //输出 "true"

    3.运算符

    ①一元运算符

    delete
    delete 运算符删除对以前定义的对象属性或方法的引用。例如:
    var o = new Object;
    o.name = "David";
    alert(o.name); //输出 "David"
    delete o.name;
    alert(o.name); //输出 "undefined"


    void
    void 运算符对任何值返回 undefined。
    <a href="javascript:void(window.open('about:blank'))">Click me</a>

    提示:请记住,没有返回值的函数真正返回的都是 undefined。


    ②位运算符


    ③Boolean 运算符
    抽象操作 ToBoolean 将其参数按照下表中的规则转换为逻辑值:
    参数类型 结果
    Undefined false
    Null false
    Boolean 结果等于输入的参数(不转换)
    Number 如果参数为 +0, -0 或 NaN,则结果为 false;否则为 true。
    String 如果参数为空字符串,则结果为 false;否则为 true。
    Object true


    逻辑 NOT 运算符(取反)
    var bFound = false;
    var i = 0;

    while (!bFound) {
    if (aValue[i] == vSearchValues) {
    bFound = true;
    } else {
    i++;
    }
    }



    逻辑 AND 运算符
    逻辑 AND 运算的运算数可以是任何类型的,不止是 Boolean 值。
    如果某个运算数不是原始的 Boolean 型值,逻辑 AND 运算并不一定返回 Boolean 值:
    如果一个运算数是对象,另一个是 Boolean 值,返回该对象。
    如果两个运算数都是对象,返回第二个对象。
    如果某个运算数是 null,返回 null。
    如果某个运算数是 NaN,返回 NaN。
    如果某个运算数是 undefined,发生错误。

    var bTrue = true;
    var bResult = (bTrue && bUnknown); //发生错误
    alert(bResult); //这一行不会执行

    var bFalse = false;
    var bResult = (bFalse && bUnknown);
    alert(bResult); //输出 "false"
    在这段代码中,脚本将输出逻辑 AND 运算返回的值,即字符串 "false"。即使变量 bUnknown 的值为 undefined,它也不会被计算,因为第一个运算数的值是 false。



    逻辑 OR 运算符
    与逻辑 AND 运算符相似,如果某个运算数不是 Boolean 值,逻辑 OR 运算并不一定返回 Boolean 值:
    如果一个运算数是对象,并且该对象左边的运算数值均为 false,则返回该对象。
    如果两个运算数都是对象,返回第一个对象。
    如果最后一个运算数是 null,并且其他运算数值均为 false,则返回 null。
    如果最后一个运算数是 NaN,并且其他运算数值均为 false,则返回 NaN。
    如果某个运算数是 undefined,发生错误。


    ④关系运算符
    var bResult = "Blue" < "alpha";
    alert(bResult); //输出 true
    字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。要强制性得到按照真正的字母顺序比较的结果,必须把两个数转换成相同的大小写形式(全大写或全小写的),然后再进行比较:

    var bResult = "25" < "3";
    alert(bResult); //输出 "true"
    上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串,所以比较的是它们的字符代码("2" 的字符代码是 50,"3" 的字符代码是 51)。


    不过,如果把某个运算数该为数字,那么结果就有趣了:
    var bResult = "25" < 3;
    alert(bResult); //输出 "false"
    这里,字符串 "25" 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料。

    var bResult = "a" < 3;
    alert(bResult);
    你能预料到这段代码输出什么吗?字母 "a" 不能转换成有意义的数字。不过,如果对它调用 parseInt() 方法,返回的是 NaN。根据规则,任何包含 NaN 的关系运算符都要返回 false,因此这段代码也输出 false:

    var bResult = "a" >= 3;
    alert(bResult);
    通常,如果小于运算的两个值返回 false,那么大于等于运算必须返回 true,不过如果某个数字是 NaN,情况则非如此。


    ⑤等性运算符

    执行类型转换的规则如下:
    如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。
    如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。
    如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。
    如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。
    在比较时,该运算符还遵守下列规则:
    值 null 和 undefined 相等。
    在检查相等性时,不能把 null 和 undefined 转换成其他值。
    如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。
    如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。
    重要提示:即使两个数都是 NaN,等号仍然返回 false,因为根据规则,NaN 不等于 NaN。
    下表列出了一些特殊情况,以及它们的结果:
    表达式 值
    null == undefined true
    "NaN" == NaN false
    5 == NaN false
    NaN == NaN false
    NaN != NaN true
    false == 0 true
    true == 1 true
    true == 2 false
    undefined == 0 false
    null == 0 false
    "5" == 5 true


    全等号由三个等号表示(===),只有在无需类型转换运算数就相等的情况下,才返回 true。
    例如:
    var sNum = "66";
    var iNum = 66;
    alert(sNum == iNum); //输出 "true"
    alert(sNum === iNum); //输出 "false"


    ⑥条件运算符
    variable = boolean_expression ? true_value : false_value;

    ⑦switch 语句
    var BLUE = "blue", RED = "red", GREEN = "green";

    switch (sColor) {
    case BLUE: alert("Blue");
    break;
    case RED: alert("Red");
    break;
    case GREEN: alert("Green");
    break;
    default: alert("Other");
    }
    这里,switch 语句用于字符串 sColor,声明 case 使用的是变量 BLUE、RED 和 GREEN,这在 ECMAScript 中是完全有效的

    4.arguments 对象


    在函数 sayHi() 中,第一个参数是 message。用 arguments[0] 也可以访问这个值,即第一个参数的值(第一个参数位于位置 0,第二个参数位于位置 1,依此类推)。

    function sayHi() {
    if (arguments[0] == "bye") {
    return;
    }

    alert(arguments[0]);
    }

    ②检测参数个数 arguments.length
    function howManyArgs() {
    alert(arguments.length);
    }

    howManyArgs("string", 45);
    howManyArgs();
    howManyArgs(12);


    ③模拟函数重载

    function doAdd() {
    if(arguments.length == 1) {
    alert(arguments[0] + 5);
    } else if(arguments.length == 2) {
    alert(arguments[0] + arguments[1]);
    }
    }

    doAdd(10); //输出 "15"
    doAdd(40, 20); //输出 "60"


    ④Function 对象(类)
    用 Function 类直接创建函数的语法如下:
    var function_name = new function(arg1, arg2, ..., argN, function_body)
    在上面的形式中,每个 arg 都是一个参数,最后一个参数是函数主体(要执行的代码)。这些参数必须是字符串。
    记得下面这个函数吗?
    function sayHi(sName, sMessage) {
    alert("Hello " + sName + sMessage);
    }
    还可以这样定义它:
    var sayHi
    =
    new Function("sName", "sMessage", "alert("Hello " + sName + sMessage);");
    虽然由于字符串的关系,这种形式写起来有些困难,但有助于理解函数只不过是一种引用类型,它们的行为与用 Function 类明确创建的函数行为是相同的。


    ⑤对象应用
    把对象的所有引用都设置为 null,可以强制性地废除对象。例如:
    var oObject = new Object;
    // do something with the object here
    oObject = null;


    ⑥对象类型
    本地对象
    Object
    Function
    Array
    String
    Boolean
    Number
    Date
    RegExp
    Error
    EvalError
    RangeError
    ReferenceError
    SyntaxError
    TypeError
    URIError

    ⑦ECMAScript 只有公用作用域

    6.this
    关键字 this 总是指向调用该方法的对象
    function showColor() {
    alert(this.color);
    };

    var oCar1 = new Object;
    oCar1.color = "red";
    oCar1.showColor = showColor;

    var oCar2 = new Object;
    oCar2.color = "blue";
    oCar2.showColor = showColor;

    oCar1.showColor(); //输出 "red"
    oCar2.showColor(); //输出 "blue"


    7.创建多个相同实例时使用工厂方法
    例如,函数 createCar() 可用于封装前面列出的创建 car 对象的操作:
    function createCar() {
    var oTempCar = new Object;
    oTempCar.color = "blue";
    oTempCar.doors = 4;
    oTempCar.mpg = 25;
    oTempCar.showColor = function() {
    alert(this.color);
    };
    return oTempCar;
    }

    var oCar1 = createCar();
    var oCar2 = createCar();


    常用的构造方式:
    混合的构造函数/原型方式
    联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。
    我们重写了前面的例子,代码如下:
    function Car(sColor,iDoors,iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = new Array("Mike","John");
    }

    Car.prototype.showColor = function() {
    alert(this.color);
    };

    var oCar1 = new Car("red",4,23);
    var oCar2 = new Car("blue",3,25);

    oCar1.drivers.push("Bill");

    alert(oCar1.drivers); //输出 "Mike,John,Bill"
    alert(oCar2.drivers); //输出 "Mike,John"

    动态原型方法

    function Car(sColor,iDoors,iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = new Array("Mike","John");

    if (typeof Car._initialized == "undefined") {
    Car.prototype.showColor = function() {
    alert(this.color);
    };

    Car._initialized = true;
    }
    }

  • 相关阅读:
    MVC中的helper标签
    自适应网页设计(Responsive Web Design)
    网站设计的最简主义
    Windows Forms数据绑定技术
    [C#]写自己的类库
    C#数据库连接字符串
    CSS float属性
    CSS之UL
    NET教程:MVC4使用Bundling,CSS中图片路径问题
    ASP.net 中Get和Post的用法
  • 原文地址:https://www.cnblogs.com/songjn/p/8510827.html
Copyright © 2020-2023  润新知