首页 > 代码库 > javascript 基础三

javascript 基础三

2024-07-04 08:18:22   237人阅读

　　记着来上第三篇javascript的笔记，也是红宝书的最后一篇笔记。笔记内容只到书的大半部分，不是完整的笔记。

　　附上evernote的公开链接。

　　

  1.  Object类型
    1. 引用类型的值（对象）是引用类型的一个实例。引用类型是一种数据结构，用于将数据和功能组织在一起。
    2. 引用类型也称对象定义，描述的是一类对象所具有的属性和方法。
    3. 对象是某个特定引用类型的实例，新对象用new后跟一个构造函数来创建。
    4. 创建Object实例的方式有二：
      1. 构造函数
        • new操作符后面跟Object构造函数
      2. 对象字面量
        • 目的是简化创建含有大量属性的对象的过程 eg:   var car={ ID:"123",Color:"red"}    或者  var person={"name":"jason","age":"22"} 或者 var boy = { age: 10};
        •  属性名可以是字符串！
        •  使用对象字面量是，除了Firefox其他浏览器不会调用Object构造函数
    5.  访问对象
      1. 点表示法      eg: person.age
      2. 方括号表示法  
        •  注意：把访问的属性以字符串的形式放在方括号里面，不是字符串则报错！     eg:  person["age"]
        • 方括号中可以传入变量来访问该属性   eg:var proertyName = "name"; alert(person[proertyName]);
  2. Function类型
    1. 含义：函数实际上是对象，函数名实际上是指针。
    2. 声明函数的三种方法：函数声明语法定义、函数表达式、Function构造函数方式。
    3. 函数没有重载。
      1. 根本原因是：函数名只是一个指向某函数的一个指针而已，如果“重载”函数，相当于把函数名变量的指针更改了，函数名变量指向新的函数。
      2. 函数名其实是一个变量。
    4. 作为值的函数。
      • 可以像传递参数一样把一个函数传递给另一个函数，同时可以将一个函数作为另一个函数的结果返回。（红皮书P95）
    5.  函数内部属性。函数内部有两个特殊的对象。
      1.  arguments对象。为一个类数组对象，包含传入函数的所有参数。
        1. arguments的callee属性，argument.callee指向拥有该argument属性的函数，在阶乘函数中使用。
        2. 不完美的重载：根据arguments判断传入参数的类型和数量而做出不同反应，此达到重载。
          •  没有函数签名，不能实现真正重载。
          •  没有传值的命名参数自动赋予undefined值
          •  所有参数传递都是值传递，不存在引用传递。注意：传递对象时，依然是值传递，但传递对象时，函数会修改对象，表现得像引用传递一样。
          • 未指定返回值的函数，返回一个特殊的undefined值
      2.  this对象。this是函数在执行时所在的作用域。
    6. 函数的属性和方法。
      1.  属性：
        1.  length。函数名.length（add.length）即命名参数的个数。
        2.  prototype。保存所有实例方法的所在。
      2. 方法（每个函数都包含非继承而来的两个方法）：
        1.  apply()
        2.  call()
        3.  两者都是在特定的作用域中调用函数。
        4.  最大的用途：扩大作用域。
  3. Array类型
    1. Array数组的每一项可以保存任何类型的数据。
    2. 数组的大小可以动态调整，即可以随数据的添加而自动增长容纳新的数据。
    3. 创建数据的方式：
      1. Array构造函数： 
        1. var array = new Array();
        2. var array = new Array(5);
        3. var array = new Array("red","blue","black",true,1);
      2. 字面量：
        1. var array = ["red","blue","black"];
    4. length属性：数组的长度
      1. 数组长度不是只读，也可以写
      2. 通过length属性，可以从数组末尾移除或者增加新项
        1. 把数组长度设置为比当前长度小，就可以实现移除数组的项
        2. 把数组长度设置为比当前长度大，则实现增加新项
          • 实现push()，var array = [1,2,"blue"]; array[array.length] = "newData"; //   array = [1,2,"blue","newData"];
          • 增加多项，var array = [1,2]; array.length = 100; 则array有100项，后98项为undefined
    5. 转换方法：
      1. toLocalString()、toString()、valueOf() 都返回数组中每个值的字符串形式拼接而来的一个以逗号分隔的字符串，不管每一项是什么数据类型，都转换为字符串输出
        • eg:  var array = [1,2,3,true,"value"]; alert(array.toString());  //  1,2,3,true,value 的一个字符串
      2. join()方法：
        1. 指定使用不同分隔符来构建输出的字符串
        2. 接收作为分隔符字符串的参数，eg:  array.join("-"); //  1-2-3   [1,2,""].join("-") //  1-2-
        3. 如果某一项为null或者undefied，调用以上转换方法，该项输出都为空字符串
    6. 栈方法：
      1. 栈：LIFO(last-in-first-out)后进先出。
      2. 操作：推入和弹出，都在栈的顶部进行。
        1. push()推入，接收任意数量的参数，把他们逐个添加到数组尾部，并返回修改后数组长度
          • var l = array.push("blue","red",1,2);   //  l = array.length();
        2. pop()弹出，不接收参数，移除数组最后一项，减少数组长度，并返回移除的项
    7. 队列方法：
      1. 队列：FIFO(first-in-first-out)先进先出。
      2. 操作，队列在列表的末端添加项，在列表前端移除项。故结合push()和shift()方法即可形成队列操作。
      3. shift()移除数组第一项，减少数组长度，并返回移除的项。
        • var array = [1,2,3]; var firstElement = array.shift();  //firstElement为移除的第一项
      4. unshift()在数组前端添加任意项并返回数组长度。故同时使用unshift()和pop()可以从反方向模拟队列，即在前端添加项，在末端移除项。
    8. 重排序方法：
      1. reverse()倒序方法，即反转数组
      2. sort()方法
        1. 默认情况下，调用sort()会按照升序排列数组，并且按照词法的顺序来进行排序
        2. sort()排序时，先把每一项调用toString()方法把每一项都变成字符串，然后再作字符串的比较。其中大写字母排在小写字母前。故[1,100,10,2,5].sort();直接调用sort()时，返回结果是[1,10,100,2,5] 
        3. 给sort()传入比较函数作为参数。
          1. 比较函数 function compare(value1,value2){if(value1<value2){return -1;} if(value1>value2) return 1;  if(value1==value2){return 0;}} if(value1>value2){return 1;}}  即：第一个参数应该位于第二个参数前，返回一个负数；两个参数相等，返回0；第一个参数应该位于第二个参数的后面，返回正数。
          2. eg:  var a = [10,1,5]; alert(a.sort(compare)); // 返回[1,5,10]
          3. 注意：reverse()和sort()方法返回值的都是经过排序之后的数组，同时原数组也修改了！
          4. 比较函数的简单用法：返回用第一个数减去第二个数的值（升序排序）；放回第二个数减去第一个数的值（降序排序）  eg: function(value1,value2){return value1 - value2;}  //  升序排序
    9. 操作方法：
      1. concat()方法：
        1. 总是基于当前数组中的所有项创建一个新数组。
        2. 不传入参数，返回数组的一份副本，即复制数组。区别于直接变量赋值，变量赋值只能复制指针！
        3. 接受任意个参数，如果是数组，则把数组的每一项都添加进当前数组中；如果传递的不是数组，在把这些值简单地添加到数组中  eg: var a = [1,2]; var result = a.concat(8,[3,4],[5,6]); // result： [1,2,8,3,4,5,6]的一个新数组  a仍然是[1,2]的数组
        4. 用途：连接（合并）两个或者多个数组甚至是非数组，也可用于扁平化一个多维数组（即变成一维数组）
      2. slice()方法：即部分方法。
        1. 总是基于当前数组中的一项或者多项创建新的数组。
        2. 接受一个或者两个参数，即要返回数组项的开始和结束位置，即哪里到哪里，注意结束位置不包含在返回的结果中。
      3. splice()方法：即拼接方法，总是返回从原数组中被删除的项，若无则返回空字符串，注意：会修改原数组
        1. 删除：传入两个参数，第一个参数指定开始位置，第二个参数指定删除的项数。
          • eg:  var a = [1,2,3]; alert( a.splice(1,1));  // [1,3]
          • 如果只传入一个参数，则删除从指定位置到结束的项
        2. 插入：传入三个参数，第一个指定开始位置，第二个参数为0（即删除0项），第三个参数为插入的项如果要插入对个项，则传入任意多个项，故本方法可以传入多于三个参数
          • eg:  var a = [1,5]; alert( a.splice(1,0,2,3,4)); alert(a) // 第一个alert的结果是空字符串，a值变成[1,2,3,4,5]
          • 注意：第一个参数指定了插入项的位置，例子中，指定了在数组位置1处插入三项，故原数组项a[1]往后挪动3个位置，在数组位置1出开始插入数组项2,3,4。
        3. 替换：传入三个参数，第一个指定开始位置，第二个指定删除的项数，第三个可以传入要在指定位置插入的项，可以为多项，故才方法可以传入多于三个参数
          • eg: var a = [1,"s","b",4,5]; alert( a.splice(1,2,2,3)) alert(a); // s,b   [1,2,3,4,5]
          • eg: var a = [1,"s","b",4,5]; alert( a.splice(1,2,[2,3])) alert(a); // s,b   [1,2,3,4,5]
          • 替换在以上例子中，等于先执行删除操作，后执行插入操作
        4. splice()方法多用于向数组中部插入项
      4. 小结：concat()和slice()方法都是基于当前数组创建新的数组，都可以用于复制数组的用途！splice()方法会修改当前数组！
        1. concat() eg:  var newArray = oldArray.concat();
        2. slice()    eg:  var newArray = oldArray.slice() 或者 var newArray = oldArray.slice(0); 或者 var newArray = oldArray.slice(0,oldArray.length)
        3. 复制数组还有用for……in 或者 for循环的方式进行，不过不够优雅
  4. Date类型
    1. Date()构造函数
      1. Date使用1970年1月1日零时零分开始到当前经过的毫秒数来保存时间
      2. 不传入参数，新创建的对象自动获得当前日期和时间，即返回一个表示当前时间的对象
        • eg:   var ms  = new Date();  console.log(ms);  //   Date {Wed Sep 19 2012 21:47:24 GMT+0800} 返回一个Date对象
      3. 传入表示日期的字符串，相当于调用Date.parse()处理该表示日期的字符串
        • eg:  var date = new Date("9/19/2012");  返回一个Date对象
        • 注意字符串是月/日/年，年/月/日 也可以
      4. 传入表示日期的数值，相当于调用Date.UTC()方法来处理该表示日期的数值 
        • 注意：Date.UTC()的月份是以0月开始
        • eg: var date = new Date(2012,8,19);  返回一个Date对象
        • 注意：数值是年/月/日
    2. Date.parse()方法
      1. 接收一个表示日期的字符串，然后放回相应的毫秒数
      2. 这个方法返回的结果因实现而异
      3. eg: var someDate = new Date(Date.parse("9/25/2012"));
    3. Date.UTC()方法
      1. 接收一个表示日期的数字，其中年月是必须参数，若没提供天数，默认为1，其他参数默认为0
      2. 注意：月份是从0开始计算，并且日期和时间是基于本地时区而非GMT来创建
      3. eg: var someDate = new Date(Date.UTC(2012,8,25));   //   表示2012年9月25日，0时0分0秒
    4. value()方法
      1. 返回日期的毫秒数表示，注意，并不是返回表示日期的字符串
      2. 故，可以直接比较日期的大小
        1. eg: var date1 = new Date(2012,8,25); var date2 = new Date(1990,6,11); console.log(date1>date2); // true
    5. toUTCString()方法
      1. 返回UTC即世界时间、格林威治时间的字符
      2. eg: var today = new Date();  console.log( today.toUTCString() ); //  返回世界时间 Wed, 03 Oct 2012 08:13:05 GMT，实际上本地时间为Wed Oct 03 2012 16:16:03 GMT+0800
    6. get方法和set方法
      1. getMonth() 从0~11月，故注意要自增1
      2. getFullYear()等
    7. Date支持的运行
      1. 只有对两个Date进行相减才有意义
      2. 其他+、-、*、/运算也支持，但无意义
  5. RegExp类型
    1. 创建正则表达式
      1. 字面量创建  var pattern = /a/g
      2. 构造函数,new RegExp()，接收两个参数，注意：由于构造函数模式的参数都是字符串，故所有元字符都要进行双重转义！
        1. var pattern = /\.\[bc\]at/i; 字面量     var pattern = new RegExp("\\.\[bc\]","i");
    2. 正则表达式标志：
      1. i  不区分大小写
      2. g 全局模式，匹配所以字符串，而不是匹配到第一个就停止
        • 注意：g全局模式用于替换所有指定的字符串很有效果，但想要输出某字符串中所有匹配的字符串，必须使用全局模式加上循环输出才能达到目的
      3. m 多行模式，到达一行文本的末尾时继续查找下一行
      4. 注意：标志可以同时使用eg:  var pattern = /a/gi
    3. RegExp实例属性
      1. global 布尔值，表示是否设置了g标志
      2. ignreCase 布尔值，表示是否设置了i标志
      3. lastIndex 整数，表示开始搜索下一个匹配项的字符位置，从0开始 
        • 注意：在全局模式下，每次调用exec()后，lastIndex都会增加，而非全局模式下始终不变（红皮书90）
      4. multiline 布尔值，是否设置了m标志
      5. source 正则表达式的字符串表示，注意，是按照字面量的方式返回，即使是用构造函数的方式来构造正则表达式
    4. RegExp实例方法
      1. exec()方法
        1. 接受一个要应用模式的字符串
        2. 返回包含第一个匹配项信息的数组，若没有匹配项时返回null
        3. 在返回的匹配项数组中，有额外的两个属性
          1. index属性，表示匹配项在字符串中的位置
          2. input属性，表示应用正则表达式的字符串
          3. [0]，匹配值
          4. [1],……,[n] 带圆括号的子字符串匹配，注意是捕获组下标是从1开始
          5. eg: var str = "a b c"; var pattern = new RegExp( "a" , "g" ); var result = pattern.exec(str); console.log( result.index); console.log( result[0]);  // result.index 返回0，表示匹配项在字符串中的位置  result[0]是匹配到的字符串
      2. test()方法
        1. 同样是接受一个要应用模式的字符串
        2. 返回true或者false，多用在if判断中
      3. toString()和toLocaleString()，返回正则表达式的字面量，即使是用构造函数方式创建
  6. 基本包装类型
    1. 基本知识
      1. 为了方便操作基本类型值，ECMAScript提供3个特殊的引用类型：Boolean类型，Number类型和String类型
      2. 实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能调用一些方法来操作这些基本类型。
      3. 在读模式中，后台会经历下面三个步骤：
        1. 按照基本类型的值创建对应包装类型的一个实例
        2. 在实例上调用指定的方法
        3. 销毁这个实例
        4. eg: var str1 = "123"; var str2 = str1.subString(1); 后台的做法
        5. var str1 = new String("123"); var str2 = str1.subString(); str1 = null;
      4. 引用类型和基本包装类型的区别：对象的生存期
        1. 使用new创建的引用类型的实例，在执行流离开当前作用域之前一直保存在内存中
        2. 而自动创建的基本包装类型的对象，则只保存在一行代码的执行瞬间，然后立即销毁。而这意味着不能在运行时为基本类型值添加属性和方法，添加后也会立即销毁。
      5. 对基本包装类型的实例调用typeof会返回"Object"，由此，基本包装类型的对象（实例）在布尔环境下都会转换为布尔值true。
      6. 对基本类型的值调用typeof返回对于的类型值的字符串
    2. Boolean类型
      1. eg: var falseObject = new Boolean("false"); var result = falseObject && true;   // result为true 
      2. eg: var falseValue = http://www.mamicode.com/false; var resut = falseValue && true; // >
      3. eg: alert(falseObject instanceOf Boolean);  // result为Object
      4. eg: alert(falseValue instanceOf Boolean); // result为false
      5. 基本类型和引用类型（基本包装类型）的区别
        1. typeOf操作符对基本类型返回该基本类型的类型，如"Boolean"，typeOf操作符对引用类型返回的是"object"
        2. 由于Boolean对象是Boolean类型的实例，故使用instanceOf操作符返回true，而对基本类型返回false
    3. Number类型
      1. toFixed()方法
        1. 按照指定的小数位返回数值的字符串表示，参数为保留小数的位数
        2. toFixed()方法有自动舍入的特性，四舍五入
        3. eg: var num = 10.206;alert(num.toFixed(2)); // "10.21"
      2. toExponential()方法
        1. 返回指数表示法（科学计数法）表示的数值的字符串形式，参数为保留的小数位的位数
        2. eg:var num = 10; alert(num.toExponential(2));  // "1.00e+1"
      3. toPrecision()方法
        1. 可能返回指数格式（Exponential）或者固定格式（Fixed），实际上是调用以上两个方法的其中一个，具体规则要看哪一种格式更合适
        2. 接收一个参数，表示数值的所有数字的位数，注意，值所有位数
        3. eg: var num = 99; alert(num.toPrecision(1));  //  "1e+2"   即100，发生自动舍入
        4. eg: var num = 99; alert(num.toPrecision(2)); // "99"
        5. eg: var num = 99; alert(num.toPrecision(3)); // "99.0"
    4. String类型
      1. length属性，表示字符串中字符的个数，注意：一个中文字尽管占用2个字节（UTF-8中占用3个字节），但是在length属性中一个中午还是一个字符。
      2. 字符方法：
        1. charAt():
          1. 接收一个指定字符串中字符位置的整数参数，从0开始，返回指定位置的字符
          2. eg： var string = "hello"; alert(string.charAt(1)); // "e"
        2. charCodeAt():
          1. 接收一个指定字符串中字符位置的整数参数，从0开始，返回指定位置字符的字符编码
          2. eg:   var string = "hello"; alert(string.charCodeAt(1));  // "101"
          3. 除IE外，还可以这样访问字符串的某个字符   eg: var string = "hello"; alert(string[1]);  // "e"
      3. 字符串操作：
        1. concat():
          1. 将一个或者多个字符串拼接起来，接受多个参数，即可以任意拼接多个字符串
          2. eg:  var str = "hello "; alert(str.concat("world"," !"));  //  "hello word !"
          3. 在实践中，完全可以用”+“操作符来代替concat()方法
        2. slice()与subString():
          1. 返回指定部分字符串
          2. 接受一个或者两个参数，接受一个参数，返回指定参数表示位置到最后一个字符的字符串；接受两个字符串，返回指定的开始位置字符串到指定的结束位置的字符串，放回指定开始位置和指定结束位置的字符串，即返回哪里到哪里。（与数组操作中的slice()方法类似）
          3. 其中，slice()传入负数的参数时，会把所有负数的参数与字符串长度相加
          4. subString()传入负数的参数时，把所有负参数转换为0
        3. subStr():
          1. 返回指定部分字符串
          2. 接受一个或者两个参数，接受一个参数，放回指定位置到结束的字符串；接受两个字符串，返回指定字符串。
          3. 注意：subStr()区别于上面两个方法，substr()第二个参数指放回开始位置后的多个个字符。即哪里到哪里的后几位字符串。
          4. 如果subStr()传入负参数，把第一个参数加上字符串长度，则把第二个负参数都转换成0。则两个参数都为负数时，返回空字符串
      4. 字符串位置方法：
        1. 从字符串中查找子字符串的方法，返回子字符串的位置
          1. indexOf()与lastIndexOf()，接受要查找的子字符串为参数，返回子字符串的位置（开始位置）。查到不到返回-1
          2. 区别：前者从字符串开头查找，后者从字符串末尾开始查找，注意，返回的始终是从查找的方向来算，字符串的第一次出现的位置。
          3. 两者都接受一个或者两个参数，接受两个参数时，表示从指定的哪个位置开始搜索。
        2. 用indexOf()来找出字符串中所有指定的子字符串，即找出所有指定子字符串
          1. var stringValue = "http://www.mamicode.com/Lorem ipsum dolor sit amet.";
          2. var pos = stringValue.indexOf("e");
          3. var position = new Array();
          4. while(pos > -1) {
          5.       position.push(pos);
          6.       pos = stringValue.indexOf("e",pos+1);
          7. }
          8. console.log(position);  // [3,24]
      5. 大小写转换方法：
        1. toLowerCase()与toLocaleLowerCase()：
          1. 返回字符串小写形式
          2. 区别：后者根据特定地区（当地）来转换字符串小写，推荐使用
        2. toUpperCase()与toLocaleUpperCase():
          1. 返回字符串大写形式
          2. 区别：后者根据特定地区（当地）转换大写，推荐使用
      6. 字符串的模式匹配方法：
        1. match()
          1. 与RegExp对象的exec()方法类似，接受RegExp对象或者正则表达式字面量
          2. 返回捕获组字符串数组，结果与exec()方法一样
        2. search()
          1. 与RegExp对象的test()方法类似，接受RegExp对象或者正则表达式字面量
          2. 返回第一个匹配项的位置，若匹配不到则返回-1
        3. replace()
          1. 替换子字符串，参数接受一个RegExp对象或者一个字符串（不会转化成正则字面量），第二个参数是一个字符串或者一个函数
          2. 如果第一个参数是字符串，那只会替换第一个字符串；如果想替换全部子字符串，则为提供一个正则表达式，而且指定全局标志g
            • eg: var string = "abcabc"; var newStr = string.replace(/a/g,"o");   //  newStr = "obcobc";
          3. 如果第二个参数是字符串，可以使用一些特殊的字符序列，将正则表达式操作得到的结果插入到结果字符串中。（红皮书106）。同时，第二个参数可以为函数，该函数的俄第一个参数为模式匹配项。
        4. split()
          1. 基于指定的分隔符把字符串分隔成多个子字符串，并将结果放到一个数组中，即返回的是数组。
          2. 此方法与Array对象的join()方法是相逆的方法
          3. 第一个参数是分隔符，分隔符可以是字符串，也可以是RegExp对象。第二个参数可选，指定返回数组的大小，确保数组不会超过指定大小。
          4. eg: var color = "red,blue,black"; console.log(color.split(","));  // ["red","blue","black"]
      7. localeCompare()方法
        1. 比较两个字符串，返回-1、0、1，表示参数中的字符串应该位于该对象的前后位置关系
        2. eg: var string = "yellow"; alert(string.localeCompare("black"));  //  1    表示参数字符串应该在前面，即要调换
        3. 注意：返回值取决于浏览器的实现方式，故最好判断返回值是否小于0、等于0、大于0
      8. fromCharCode()方法
        1. String构造函数的静态方法：fromCharCode()
        2. 接受一或者多个字符编码作为参数，然后把他们转换成一个字符串，与charCodeAt()是相反的操作
        3. eg:  alert( String.fromCharCode( 104 , 101 , 108 , 111 ) );   // "hello"
    5. 内置对象
      1. Global对象
        1. URL编码方法
          1. 用UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解
          2. encodeURI(param)
            1. 用于对整个URI进行编码
          3. encodeURIComponent(param)
            1. 用于对URI后面的字符（查询字符）进行编码
          4. 区别：前者不会对本事属于URI的特殊字符进行编码，例如冒号、正斜杠、问好和井号；而后在会对任何非标准字符进行编码，包括上面举例列出的额字符。故前者只能用于对整个URI编码，后在只能用于对URI后面的字符进行编码
          5. decodeURI()与decodeURIComponent()，前者只能对用encodeURI编码的字符进行解码，后在则能对所有已编码的字符进行解码。
          6. eg: var urlString = "http://www.baidu.com?keyword=你好";  var encodeRerult = encodeURI(urlString);
        2. eval()方法
          1. eval()方法就是一个完整的ECMAScript解析器，接受一个参数，即要执行的ECMAScript字符串  eg: eval("alert(‘hello")");
          2. 通过eval()执行的代码被认为包该次调用的执行环境的一部分，可以与被执行的代码具有改执行环境的相同的作用域链 eg: var msg = "hello"; eval("alert(msg)");
          3. 同样，我们可以通过在eval()中定义一个函数，然后再调用的外部代码中引用这个函数，不过必须先执行eval(),再调用函数
 
 
 
 
 
              

 


联系
我们