DOM操作(五)

Apr 7, 2017


javaScript内置对象

日期对象

var date1 = new Date();

设定指定时间:(兼容最强) var date2 = new Date(“2016/01/27 12:00:00”)

var date3 = new Date(‘Wed Jan 27 2016 12:00:00 GMT+0800 (中国标准时间)’);

var date4 = new Date(2016, 1, 27);

日期对象的方法

getFullYear () 获取完整年份(浏览器都支持) getMonth () 获取月 0-11(1月从0开始) getDate() 获取日 1-31 getDay () 获取星期 0-6(0代表周日) getHours () 获取小时 0-23 getMinutes () 获取分钟 0-59 getSeconds () 获取秒 0-59 getMilliseconds () 获取毫秒 (1s = 1000ms) getTime () 返回累计毫秒数(从1970/1/1午夜)

返回累计毫秒数(从1970/1/1午夜) var date = Date.now(); var date = +new Date(); var date = new Date().getTime(); var date = new Date().valueOf();

String、Number、Boolean

为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型(基本包装类型):String/Number/Boolean

<!-- 基本字符串和字符串对象 -->
//例1:
    var s_prim = "foo";
    var s_obj = new String(s_prim);

    console.log(typeof s_prim); // Logs "string"
    console.log(typeof s_obj);  // Logs "object"
//例2:
    var s1 = "zhangsan";
    var s2 = s1.substring(5);
    //s1是基本类型,基本类型是没有方法的
    //当调用s1.substring(5)的时候  *系统* 先把s1包装成String类型的临时对象,再调用substring方法,最后销毁临时对象

    //相当于:
    var s1 = new String("zhangsan");
    var s2 = s1.substring(5);
    s1 = null;
//例3:
    s1 = "2 + 2";               // creates a string primitive
    s2 = new String("2 + 2");   // creates a String object
    console.log(eval(s1));      // returns the number 4
    console.log(eval(s2));      // returns the string "2 + 2"
    //利用 valueOf 方法,可以将字符串对象转换为其对应的基本字符串
    console.log(eval(s2.valueOf())); // returns the number 4

eg: var num = 18; //数值,基本类型 var num = Number(“18”); //类型转换 var num = new Number(18); //基本包装类型,对象

String

String类型是字符串的对象包装类型,可以提供给我们很多有用的操作字符串的方法。

  1. 属性 length 返回当前字符串中总共多少个字符
  2. 方法 字符方法、字符串操作方法、位置方法、去除空白、大小写转换方法… 字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串

    • 字符方法 str.charAt(下标) //查看对应下标的字符 str.charCodeAt(下标) //获取指定位置处字符的ASCII码(sort()底层用到了该方法) String.fromCharCode(编码值) 查看ASCII码对应的字符 str[i] //HTML5,IE8+支持 和charAt()等效 小案例:获取字符串占位长度

    • 字符串操作方法 concat() //拼接字符串,等效于+,+更常用

      str.substring(arg1[,arg2]) 一个参数:从该参数开始截取到字符串末尾; 两个参数:从第一个参数开始,截取到第二个参数; 可以检测两个数,大的往后扔,小的往前扔; str.substring(0);相当于未截取 str.substring(2,0);相当于str.substring(0,2) str.substring(-3,2);-3当成0来截取 str.substring(2,-3);相当于str.substring(-3,2)即str.substring(0,3)

      str.slice(beginSlice[, endSlice])提取字符串的一部分,并返回一个新的字符串。在一个字符串中的改变不会影响另一个字符串。也就是说,slice不修改原字符串,只是返回一个包含了原字符串中部分字符的新字符串。 注意:slice() 提取的新字符串包括beginSlice但不包括 endSlice。 beginSlice 从该索引(以 0 为基数)处开始提取原字符串中的字符。如果值为负数,会被当做 sourceLength + beginSlice 看待,这里的sourceLength 是字符串的长度 (例如, 如果beginSlice 是 -3 则看作是: sourceLength - 3) endSlice 可选。在该索引(以 0 为基数)处结束提取字符串。如果省略该参数,slice会一直提取到字符串末尾。如果该参数为负数,则被看作是 sourceLength + endSlice,这里的 sourceLength 就是字符串的长度(例如,如果 endSlice 是 -3,则是, sourceLength - 3)。 两个截取方法的区别: slice()当第二个参数值小于第一个时,不会交换位置,直接返回空 slice(-4,-2)从倒数第四个截取到倒数第二个

      substr() //从start位置开始,截取length个字符

      str.split([separator[, limit]]) 以separator为分隔符,分割后得到的是数组(separator也被去掉了) str.split():相当于不分割,直接转为数组 str.split(‘’):把str分割成字符数组 str.split(‘ ’):把str分割成数组, 以空格为分隔符 参数limit是一个整数,限定返回的分割片段数量。split方法仍然分割每一个匹配的separator,但是返回的数组只会截取最多limit个元素。

    • 位置方法 str.indexOf(‘m’) 判断str中第一次出现’m’的位置,找到后,返回对应下标 str.indexOf(‘m’,下标) 下标可以限定从第几个字符往后找 该方法如果超出对应下标或未找到,返回-1 从左往右找

      str.lastIndexOf(‘m’) 用法和indexOf相同,从后往前找 共同点:如果第二个值为负数,默认从0开始找

    • str.includes(searchString[, position])用于判断一个字符串是否包含在另一个字符串中,根据情况返回true或false。

    • 去除空白
      trim() //只能去除字符串前后的空白

    • 大小写转换方法 to(Locale)UpperCase() //转换大写 to(Locale)LowerCase() //转换小写

    • str.replace(regexp substr,newSubStr function) 返回一个由替换值替换一些或所有匹配的模式后的新字符串。
    • str.search() 看该字符串对象与一个正则表达式是否匹配,返回第一个出现的匹配项的下标。 str.match() 使用正则表达式与字符串相比较。

    • localeCompare()(操作单个字符) s1.localeCompare(s2)
      s1 > s2 返回正数,一般是1 s1 == s2 返回0 s1 < s2 返回负数,一般是-1
数组方法
  1. arr.join() 把数组转化为字符串,默认以逗号分割 arr.join(‘ ‘) 把数组转化为字符串,以空字符分割,即去掉数组元素间原有的逗号 arr.join(‘-‘) 把数组转化为字符串,以-分割

练习:浏览器窗口中的查找功能

  1. 添加数组元素–返回值均为数组长度 arr.push() arr.unshift()//返回值不支持ie6和ie7
  2. 删除方法–返回值为被删除的元素 arr.pop() arr.shift()

应用:排队走

  1. 删除、替换、添加–splice,返回被删除的元素

    arr.splice(0,2);从数组零下标开始,删除两个值 arr.splice(0,1,”new”);从数组零下标开始,找到两个元素,整体 替换为”new” arr.splice(1,0,”new”);从数组一下标开始,添加元素”new”

练习:数组去重

var arr = ["张三","李四","李四","李四","张三","王五","张三"];

for (var i = 0; i < arr.length; i++) {
    for(var j = i+1; j < arr.length; j++){
        if(arr[i] == arr[j]){
            arr.splice(j,1);
            j--;
        }
    }
}

alert(arr);
  1. 数组排序sort(),默认全部按字符串排序
// 随机排序
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(a,b) {
    return Math.random() - 0.5;
});
alert(arr);
  1. concat()–数组连接 arr1.concat(arr2,arr3)
  2. reverse()–颠倒数组元素的位置

    随机函数及随机函数的推理过程