js 内置对象

168 阅读16分钟

内置对象

JS内置对象就是指Javascript自带的一些对象,供开发者使用,这些对象提供了一些常用的的功能。

常见的内置对象有MathStringArrayDate

1、Math 对象

Math对象中封装很多与数学相关的属性和方法。Math对象比较特殊,不需要new

1.1 属性 PI

Math.PI 表示的就是圆周率,通常计算圆的周长或者面积的时候会用到。也可以用作表示角度、弧度(π= 180°)

console.log(Math.PI);  // 3.141592653589793

1.2 最大值/最小值

Math.max(x,y) 表示求出两者之间的最大值

console.log(Math.max(10,99)); // 返回99

Math.min(x,y) 表示求出两者之间的最小值

console.log(Math.min(10,99)); // 返回10

1.3 取整

Math.ceil() 天花板函数(向上取整)

  • 整数向上取整还是整数
  • 正小数向上取整,整数部分加1,小数部分舍去
  • 负小数向上取整,整数部分不变,小数部分舍去

示例代码:

console.log(Math.ceil(2));    // 2
console.log(Math.ceil(1.2));  // 2
console.log(Math.ceil(1.8));  // 2
console.log(Math.ceil(-1.2)); // -1
console.log(Math.ceil(-1.8)); // -1

Math.floor() 地板函数(向下取整)

  • 整数向下取整还是整数
  • 正小数向下取整,整数部分不变,小数部分舍去
  • 负小数向下取整,整数部分减1,小数部分舍去

示例代码:

console.log(Math.floor(2));    // 2
console.log(Math.floor(1.2));  // 1
console.log(Math.floor(1.8));  // 1
console.log(Math.floor(-1.2)); // -2
console.log(Math.floor(-1.8)); // -2

Math.round() 四舍五入(如果是.5,则取更大的那个数)

  • 正小数四舍五入,对小数点后面一位数进行判断,大于等于5整数部分加1,小数舍去;小于5,整数部分不变,小数部分舍去

  • 负小数四舍五入,对小数点后面一位进数行判断:

    • 小于5的时候,小数舍去,整数部分不变
    • 大于5的时候,小数舍去,整数部分减 1
    • 等于5的时候要再判断,如果后面没有数了,小数舍去,整数部分不变;如果后面还有数,小数舍去,整数部分减 1

示例代码:

console.log(Math.round(1.2));    // 1
console.log(Math.round(1.5));    // 2
console.log(Math.round(1.56));   // 2
console.log(Math.round(1.6));    // 2

console.log(Math.round(-0.3));   // 0
console.log(Math.round(-0.6));   // -1
console.log(Math.round(-1.5));   // -1
console.log(Math.round(-1.6));   // -2
console.log(Math.round(-1.56));  // -2

1.4 随机数

Math.random() 返回一个[0,1)之间的数,能取到0,取不到1

示例代码:

// 获得0-5的随机数,包括0-5
// parseInt:取整
console.log(parseInt(Math.random() * 6)); // 因为随机数 能取到0,取不到1,要想返回5 就需要乘以6 


// 获得3-5之间的随机数
// 3-5?可以先取到随机数0-2,然后再加3 获得的就是3-5
console.log(parseInt(Math.random() * 3) + 3);  

1.5 绝对值

Math.abs() 对一个数进行绝对值操作,纯数字字符串也可以转换

示例代码:

console.log(Math.abs(-11));   // 11
console.log(Math.abs(11));    // 11
console.log(Math.abs("-11")); // 11
console.log(Math.abs("aaa")); // NaN

1.6 次幂和开平方

Math.pow(num, power) 求 num 的 power 的次方

示例代码:

console.log(Math.pow(2,4));   // 2的4次方 16

Math.sqrt(num) 为 num 开平方根

示例代码:

console.log(Math.sqrt(9));   // 为9开平方根  3

2、Date对象

Data 对象是用来处理日期和时间的

2.1 创建一个日期对象

使用构造函数创建一个当前时间对象 let date = new Date();

let date = new Date();
console.log(date); // Fri Nov 17 2017 11:59:19 GMT+0800 (中国标准时间)

创建一个指定时间的日期对象 let date = new Date(指定时间);

let date = new Date("2017-03-22");          //创建一个指定时间的日期对象 Wed Mar 22 2017 08:00:00 GMT+0800 (中国标准时间)
let date = new Date("2017-03-22 00:52:34"); //创建一个指定时间的日期对象 Wed Mar 22 2017 00:52:34 GMT+0800 (中国标准时间)

2.2 日期格式化

日期格式化,一般用到的不多,通过格式化可以获得当前日期的日期部分或者时间部分

let date = new Date();
date.toString();            // 默认的日期格式
date.toLocalString();       // 本地风格的日期格式(存在兼容性)
date.toDateString();        // 获得当前日期时间的,日期部分 Fri Nov 17 2017
date.toLocalDateString();   // 本地风格的日期部分(存在兼容性)
date.toTimeString();        // 获得当前日期时间的,时间部分 13:23:42 GMT+0800 (中国标准时间)
date.toLocalTimeString();   // 本地风格的时间部分(存在兼容性)

2.3 获取日期的指定部分

  • getMilliseconds(); 获取毫秒值
  • getSeconds(); 获取秒
  • getMinutes(); 获取分钟
  • getHours(); 获取小时
  • getDay(); 获取星期,0-6 0:星期天
  • getDate(); 获取日,即当月的第几天
  • getMonth(); 返回月份,注意从0开始计算,这个地方坑爹,0-11
  • getFullYear(); 返回4位的年份 如 2016

示例代码:封装一个格式 xxxx-xx-xx xx:xx:xx 的日期函数

let date = new Date();
let year = date.getFullYear();     // 获取当前时间的年份

let month = date.getMonth() + 1;   // 获取当前时间的月份,注意月份是从0开始的0-11,所以加1
addZore(month);                    // 获得的月份有可能是一位数,此时需要给他再拼接一位

let d = date.getDate();            // 获得当前时间的日期天数
addZore(d);

let h = date.getHours();           // 获取当前时间的小时
addZore(h);

let m = date.getMinutes();         // 获取当前时间的分钟
addZore(m);

let s = date.getSeconds();         // 获取当前时间的秒
addZore(s);

function addZore(n) {
    return n > 10 ? n : "0" + n;   // 判断获取到的数字大于10的时候 返回本身,小于的时候需要拼串
}

let dateStr = year + "-" + month + "-" + d + " " + h + ":" + m + ":" + s;
console.log(dateStr); // 2017-11-17 13:58:53

2.4 时间戳

1970年01月01日00时00分00秒起至现在的总毫秒数叫做时间戳

获取时间戳:

let date = new Date();
// 方法一
console.log(date.getTime()); // getTime的方法获得毫秒数

// 方法二
console.log(+date);    // 直接通过计算的方式转换成毫秒数

示例代码:计算代码执行的时间

let start = new Date();
let sum = 0;
// 电脑性能不好的小伙伴 不要这么搞  循环的次数少一点
for (let index = 0; index < 1000000000; index++) {
    sum += index;
}
console.log(sum);  // 499999999067109000
let end = new Date();
console.log(end - start);  // 17899

3、Array 对象

数组对象在javascript中非常的常用

3.1 数组转换成字符串 join()

将数组的值拼接成字符串

语法: array.join(separator)

  • 数组的每一项默认的拼接符是逗号
  • 想要改变拼接符就在join()方法的括号里传入其他的拼接字符

示例代码:

let arr = ["大乔","小乔","小明","小红","小李"];
let str = arr.join();
console.log(str);  // "大乔,小乔,小明,小红,小李"

// 用“-”拼接符
let arr2 = ["大乔","小乔","小明","小红","小李"];
let str2 = arr2.join("-");
console.log(str2);  // "大乔-小乔-小明-小红-小李"

3.2 数组的增删操作

1、arr.push() 在数组最后面 添加元素,返回新数组的长度

let arr = ["大乔","小乔","小明"];
console.log(arr.push("小红", "小李"));  // 返回 5
console.log(arr);                       // ["大乔","小乔","小明","小红","小李"]

2、arr.pop() 在数组最后面删除一个元素,返回删除的那个元素

let arr = ["大乔","小乔","小明","小红", "小李"];
console.log(arr.pop());   // 返回 "小李"
console.log(arr);         // ["大乔","小乔","小明","小红"]

3、arr.unshift() 在数组前面添加元素,返回新数组的长度

let arr = ["小明","小红", "小李"];
console.log(arr.unshift("大乔","小乔"));   // 返回 5
console.log(arr);                          // ["大乔","小乔","小明","小红", "小李"];

4、arr.shift() 在数组最前面删除一个元素,返回删除的那个元素

let arr = ["大乔","小乔","小明","小红", "小李"];
console.log(arr.shift());   // 返回 "大乔"
console.log(arr);           // [小乔","小明","小红", "小李"];

示例代码(一):

let arr = ["刘备"];
//添加数据后变成:["赵云","马超","刘备","关羽","张飞"]
arr.push("关羽","张飞");
arr.unshift("赵云","马超");
console.log(arr);   //  ["赵云","马超","刘备","关羽","张飞"]

//删除数据后变成:["关羽","张飞"]
arr.shift();
arr.shift();
arr.shift();
console.log(arr);   // ["关羽","张飞"]

示例代码(二):

let arr = ["赵云","马超","刘备","关羽","张飞"];

//把数组的最后一个元素变成数组的第一个元素
arr.unshift(arr.pop());
console.log(arr);        // ["张飞","赵云","马超","刘备","关羽"]

3.3数组的翻转与排序

1、arr.reverse() 翻转数组

let arr = [1,2,3,4,5];
let newArr = arr.reverse();
console.log(newArr);  // [5,4,3,2,1]   
console.log(arr);     // [5,4,3,2,1]

2、arr.sort() 数组排序

  • 默认按照字母顺序排序
  • sort方法可以传递一个函数作为参数,这个参数用来控制数组如何进行排序
  • a-b 从小到大排序,b-a 从大到小排序
let arr = [1,3,5,7,9,2,4,6,8,10];
let newArr = arr.sort(function(a,b){
    // 如果返回值>0,则交换位置
    return a - b;
});
console.log(newArr);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr);     // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

示例代码(一):

// 将字符串数组按照字符长度从大到小排列
let arr = ["ccc", "bb", "a", "dddd"];
arr.sort(function (a, b) {
    return b.length - a.length;
});
console.log(arr);       // ["dddd", "ccc", "bb", "a"]

示例代码(二):

//将学生数组按照年龄从小到大排列
let arr = [
    {name:"张三", age: 18, score: 50},
    {name:"李四", age: 70, score: 95},
    {name:"王五", age: 9, score: 33},
    {name:"赵六", age: 38, score: 100},
    {name:"田七", age: 6, score: 8},
    {name:"王八", age: 22, score: 66}
];

arr.sort(function(a, b) {
    return a.age - b.age;
});
console.log(arr);  

3.4 数组的拼接与截取

1、concat 数组的合并

let arr1 = [1, 3, 5, 7, 9];
let arr2 = [2, 4, 6, 8, 10];

// concat: 合并两个数组
let newArr = arr1.concat(arr2);
console.log(newArr);        //  [1, 3, 5, 7, 9, 2, 4, 6, 8, 10]

不会影响原来的数组,会返回一个新的数组

2、slice 数组切分

复制数组的一部分(浅拷贝)到一个新数组,并返回这个数组,原来的数组不受影响

slice有两个属性,分别是开始的下标和结束的下标,截取的时候包含begin,不包含end

let arr = [1, 3, 5, 7, 9];


// slice: 截取数组的一部分
let newArr = arr.slice(0,3);
console.log(newArr);        //  [1, 3, 5]

3、splice 数组拼接

splice:数组拼接,以新元素来替换旧元素,以此来修改数组的内容,常用于删除数组的某些项

array.splice(start, deleteCount, [items]); start:开始下标 deleteCount:删除的个数 items:替换的内容

splice 能实现多种用法:

  • 找到开始下标,删除个数为0,再输入替换的内容,此时就可以在数组中任意位置添加元素
  • 找到开始下标,需要删除的个数,再输入替换的内容,此时就可以在数组任意位置替换元素
  • 找到开始下标,需要删除的个数,不输入替换内容,此时就可以在数组任意位置,删除任意个数的元素
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 从下标是2的位置开始,删除0个,把 100 101 添加进去
let newArr = arr.splice(2, 0, 100, 101);
console.log(newArr); // 操作的是原数组,不会返回这个新数组
console.log(arr); // [1, 2,100,101,3, 4, 5, 6, 7, 8, 9, 10]     


// 也可以替换元素 (此时arr = [1, 2,100, 101, 3, 4, 5, 6, 7, 8, 9, 10] )
arr.splice(0, 2, 98, 99);
console.log(arr); // [98, 99, 100, 101, 3, 4, 5, 6, 7, 8, 9, 10]


// 也可以用于删除数组里的多个元素 (此时arr = [98, 99, 100, 101, 3, 4, 5, 6, 7, 8, 9, 10] )
arr.splice(0, 4);
console.log(arr); // [3, 4, 5, 6, 7, 8, 9, 10]

3.5 数组查找元素

indexOf()方法,是用来查找数组中,某个元素首次出现的位置,下标从0开始,找到的话返回位置信息,当找不到的时候返回-1

arr.indexOf(search,[fromIndex]);search:需要搜索的元素,fromIndex:规定在字符串中开始检索的位置。

示例代码:

let arr = [1, 5, 8, 11, 1, 2, 9];
arr.indexOf(8);  // 返回2
arr.indexOf(8,1) // 从下标1,往后查找 返回 2 
arr.indexOf(10); // 返回-1 说明找不到

与之对应的还有一个lastIndexOf(),从后往前找

let arr = [1, 5, 8, 11, 1, 2, 9];
arr.lastIndexOf(1);  // 返回4
arr.lastIndexOf(1,3) // 从下标3,往前查找 返回0 
arr.lastIndexOf(10); // 返回-1 说明找不到

3.6 清空数组

1、删除数组中的所有元素

let arr = [1,2,3,4,5];
arr.splice(0,arr.length);
console.log(arr);  // []

2、直接修改数组的长度

let arr = [1,2,3,4,5];
arr.length = 0;
console.log(arr);  // []

3、将数组赋值为一个空的数组

let arr = [1,2,3,4,5];
arr = [];
console.log(arr);  // []

3.7 数组的综合练习

let arr = ["c", "a", "z", "a", "x", "a", "a", "z", "c", "x", "a", "x"];
//1. 找到数组中第一个a出现的位置
console.log(arr.indexOf("a"));          // 1

//2. 找到数组中最后一个a出现的位置
console.log(arr.lastIndexOf("a"));      // 10

//3. 找到数组中每一个a出现的位置
for (let i = 0; i < arr.length; i++) {
    if (arr[i] == "a") {
        console.log(i);                 // 1 3 5 6 10
    }
}

//4. 数组去重,返回一个新数组
let newArr = [];
for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) == -1) {   // 判断当newArr的数组里没有arr[i]的时候
        newArr.push(arr[i]);              // 将arr[i] 添加到newArr中 ["c", "a", "z", "x"]
    }
}
console.log(newArr);

//5. 获取数组中每个元素出现的次数
// 首先需要知道 如何判断一个对象中是否存在某属性
/*
    let obj = {
        name:"zs",
        age:18,
        score:100
    }
    //in关键字可以查看对象是否拥有某个属性。
    console.log( "sex" in obj );  // false
*/
let obj = {};
for(let i = 0; i < arr.length; i++){
    // 遍历数组,判断对象有没有这个属性, 
    if(arr[i] in obj){
        // 如果有这个属性,让这个属性的值+1 
        obj[arr[i]] ++;
    }else{
        // 如果没有这个属性,让这个属性等于1                    
        obj[arr[i]] = 1;
    }
}
console.log(obj);

4、String 对象

字符串可以看成是一个字符数组(伪数组)。因此字符串也有长度,也可以进行遍历。String对象很多方法的名字和和Array的一样。

// 遍历一段字符串
let str = "abcdefghijk";
for(let i = 0; i < str.length; i++){
    console.log(str[i]);  // "a" "b" "c" "d"...
}

4.1 字符串大小写转换的方法

小写转换成大写

toUpperCase(),toLocaleUpperCase()是将英文小写的字符串转换为大写,其中toLocaleUpperCase()方法则是针对特定地区的实现(如土耳其语会为Unicode大小写转换应用特殊的规则)。

let str = "hello world";
str.toUpperCase(); // "HELLO WORLD"
str.toLocaleUpperCase();

大写转换成小写

toLowerCase(),toLocaleLowerCase()是将英文小写的字符串转换为大写

let str = "HELLO WORLD";
str.toUpperCase(); // "hello world"
str.toLocaleUpperCase();

注意: 因为是方法,所以一定不要忘记加上()

4.2 indexOf 查找指定字符串

indexOf()方法,是用来判断指定字符,在当前字符串中首次出现的位置,下标从0开始,找到的话返回位置信息,当找不到的时候返回-1

示例代码:

let str= "good good study , day day up!";
str.indexOf("day");  // 返回18
str.indexOf("good"); // 返回0
str.indexOf("GOOD"); // 返回-1 说明找不到

与之对应的还有一个lastIndexOf(),是用来从后面开始查找字符第一次出现的位置

let str= "good good study , day day up!";
str.lastIndexOf("good");  // 返回 5

4.3 trim 去除空白

trim();方法,是用来去除字符串两边的空格,内部空格不会去除

let str = " A B C ";
console.log(str.trim());  // "A B C"

4.4 slice 截取字符串

slice()方法是用来截取一段字符串的,str.slice(start,end);它的两个参数都是表示下标的,一个表示开始,一个表示结束(截取时不包括结束下标)

说明:

  • start下标从0开始的str指定部分起始索引。如果start为负,将它作为length+start处理,此处length为字符串的长度。
  • end下标从0开始的str指定部分结束索引。如果end为负,将它作为length+end处理,此处length为字符串的长度。

示例代码:

// 起始位置结束位置都是正数
let str = "ABCDEFGHIJK";
str.slice(2,6);  // "CDEF"
// 当起始位置为负数的时候
let str = "ABCDEFGHIJK";
str.slice(-6, 10); // "FGHIJ"
// str的length为11,所以起始位置是-6+11=5,就是F结束是10(不包括10),那么就是J;
// 特殊情况 当起始位置在结束位置后面的时候,是截取不了的,返回空
let str = "ABCDEFGHIJK";
str.slice(-6, 2); // 空
// str的length为11,所以起始位置是-6+11=5,就是F,结束位置在2,这个时候是截取不了的

注意:

  • end为结束下标,截取的时候不包括end那一位
  • 截取是有顺序的,开始到结束的顺序必须是从左向右,否则是截取不了的,为空

4.5 substring 截取字符串

substring()方法返回位于String对象中指定位置的子字符串,str.substring(start,end);它的两个参数都是表示下标的,一个表示开始,一个表示结束(截取时不包括结束下标)

说明:

  • start指明子字符串的起始位置,该索引从0开始起算。
  • end指明子字符串的结束位置,该索引从0开始起算。
  • substring方法使用startend两者中的较小值作为子字符串的起始点。如果startendNaN或者为负数,那么将其替换为0

示例代码:

// 当起始位置,结束位置都是正数的时候
let str = "ABCDEFGHIJK";
str.substring(2,6); // "CDEF"
// 同样的,substring方法结束位置也不包括自己
// 当起始位置为负数的时候,直接转换成下标0
let str = "ABCDEFGHIJK";
str.substring(-2,6); // "ABCDEF" 下标转换成了0 
// 当开始的位置大于结束位置的时候,自动转换较小的值作为起点
let str = "ABCDEFGHIJK";
str.substring(6,2); // "CDEF"

利用substring方法,实现打字效果

/*样式部分*/
#box {
    width: 300px;
    height: 150px;
    border: 2px dashed fuchsia;
    margin: 100px auto;
    text-align: left;
    padding: 10px;
}
<!--html部分-->
<div id="box"></div>

<!--js部分-->
<script>
    let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let strLength = str.length;
    let index = 0;
    setInterval(function() {
        if (index >= strLength) {
            return;
        }
        index++;
        document.querySelector('#box').innerHTML = str.substring(0, index);
    }, 100);
</script>

注意:

  • substring方法,end为结束下标,截取的时候同样不包括end那一位
  • start的值大于end的时候,两者中较小的值作为起始下标

4.6 字符串的 substr方法

substr()方法返回一个从指定位置开始,指定长度的子字符串。str.substr(start,length),start为开始的下标,length为需要返回字符串的长度

说明:

  • start所需的子字符串的起始位置。字符串中的第一个字符的索引为0
  • length在返回的子字符串中应包括的字符个数。

示例代码:

let str = "ABCDEFGHIJK";
str.substr(1,5); // BCDEF

4.7 match 查找字符串

match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符,找不到的话返回null

示例代码:

let str= "good good study , day day up!";
str1.match("good");  // good
str1.match("Good");  // null

4.8 replace 替换字符串

replace() 方法在字符串中用某些字符替换另一些字符。

示例代码:

let str2 = "hello world";
str2.replace("world", "china"); // "hello china"

4.9 split 切割字符串转为数组

将一个字符串分割为子字符串,然后将结果作为字符串数组返回。str.split(separator,num),带一个参数separator表示切割的条件,第二个参数num表示需要切割的位数

说明:

  • separator(分隔符)字符串或正则表达式对象,它标识了分隔字符串时使用的是一个还是多个字符。如果忽略该选项,返回包含整个字符串的单一元素数组。
  • num该值用来限制返回数组中的元素个数。

示例代码:

let str = "ABCDEFGHIJK";
str.split("",6); // ["A", "B", "C", "D", "E", "F"]

5、Array对象 与 String对象综合练习

1、翻转一个字符串

let str = "abcdefg";
let strArr = str.split(""); // 将字符串转换为数组 ["a","b","c","d","e","f","g"]
strArr.reverse();           // 翻转这个数组       ["g","f","e","d","c","b","a"]
let newStr = strArr.join("");
console.log(newArr);        // "gfedcba"

2、将一串字符转化成对象

/*
有一个链接:http://www.baidu.com?name=cc&id=100&desc=很帅 
将链接的参数部分转换成一个对象
即{name:"cc", id=100 , desc: "很帅"}
*/
let str = "http://www.baidu.com?name=cc&id=100&desc=很帅";
let obj = {};
let strArr = str.split("?");          // ["http://www.baidu.com", "name=cc&id=100&desc=很帅"]
let strArr2 = strArr[1].split("=");   // ["name=cc", "id=100", "desc=很帅"]
for(let i = 0; i < strArr2.length; i++){
    console.log(strArr2[i]);          // "name=cc" "id=100" "desc=很帅"
    let key = strArr2[i].split("=")[0];     // name  id  desc
    let value = strArr2[i].split("=")[1];   // cc 100 很帅
    obj[key] = value;
}
console.log(obj);     // {name:"cc", id=100 , desc: "很帅"}

3、将对象转换成字符串

/*
有一个对象{name:"cc", id:100,desc:"很帅"}
和一个链接http://www.baidu.com,
拼接成链接http://www.baidu.com?name=cc&id=100&desc=很帅
*/
let prefix = "http://www.baidu.com";
let obj = {name:"cc", id:100,desc:"很帅"};
let arr = [];
for (let key in obj) {
    // console.log(key);            name id desc
    // console.log(obj[key]);       "cc" 100 "很帅"
    let str = key + "=" + obj[key];
    console.log(str);               // name=cc id=100 desc=很帅
    arr.push(str);  
    console.log(arr);               // ["name=cc", "id=100", "desc=很帅"]
}
let arrStr = arr.join("&");         
console.log(arrStr);                // name=cc&id=100&desc=很帅
let result = prefix + "?" + arrStr;
console.log(result);                // http://www.baidu.com?name=cc&id=100&desc=很帅