JavaScript （内置对象及方法）

JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象

JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean...

对象只是带有属性和方法的特殊数据类型。

内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。

一、Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供跟数学相关的运算来找Math中的成员（求绝对值，取整）

Math.PI                      // 圆周率     console.log(Math.PI);
Math.E                       // 常数的底数  console.log(Math.E);

Math.random()                // 生成随机数  返回一个浮点,  伪随机数在范围[0，1)
Math.floor()/Math.ceil()     // 向下取整/向上取整    console.log(Math.ceil(12.09));
Math.round()                 // 取整，四舍五入       console.log(Math.round(12.09));
Math.fround()                // 返回数字的最接近的单精度浮点型表示。  console.log(Math.fround(12.09));
Math.abs()                   // 绝对值         console.log( Math.abs(-2));//2
Math.max()/Math.min()        // 求最大和最小值   console.log(Math.max(10,1,9,100,200,45,78));

Math.sin()/Math.cos()        // 正弦/余弦  Math.sin(Math.PI / 2); // 1
Math.power()/Math.sqrt()     // 求指数次幂/求平方根console.log(Math.sqrt(4,2));

1.1 Math.random()

函数返回一个浮点,  伪随机数在范围[0，1)，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。

1.1.1 得到一个大于等于0，小于1之间的随机数

function getRandom() {
  return Math.random();
}

1.1.2 得到一个两数之间的随机数

这个例子返回了一个在指定值之间的随机整数。这个值比min大（如果min不是整数，可能相等）

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

也许很容易让人想用舍入来完成这个任务，但是这样做会导致你的随机数处于一个不均匀的分布，这可能不符合你的需求

得到一个两数之间的随机整数，包括两个数在内

当getRandomInt() 函数在最小值之上，它将排除最大值. 如果你需要结果包含最小值和最大值，怎么办呢?  getRandomIntInclusive() 函数将能完成.

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
}

1.2 综合实例

//随机产生一个十六进制的颜色值
//封装成一个函数
console.log(parseInt(Math.random() * 5));

function getColor() {
  var str = "#";
  //一个十六进制的值的数组
  var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
  for (var i = 0; i < 6; i++) {
    //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起
    var num = parseInt(Math.random() * 16);
    str += arr[num];
  }
  return str;
}

二、Date对象

var dt = new Date();
//当前的时间---当前的服务器
console.log(dt);              //Wed Jun 13 2018 12:57:17 GMT+0800 (China Standard Time)

var dt = new Date("2017-08-12");
//传入的时间
console.log(dt);              //Sat Aug 12 2017 08:00:00 GMT+0800 (China Standard Time)


var dt = new Date("2017/08/12");
// 传入的时间
console.log(dt);              //Sat Aug 12 2017 00:00:00 GMT+0800 (China Standard Time)
// 获取时间的对象
var dt = Date.now();
console.log(dt);//毫秒        //1528865837155

总结：
var dt=new Date();
console.log(dt);
// var dt=+new Date();             //一种特殊的写法,只适用于这个Date的对象
// console.log(dt);
console.log(dt.getFullYear());     //年
console.log(dt.getMonth());        //月---从0开始
console.log(dt.getDate());         //日
console.log(dt.getHours());        //小时
console.log(dt.getMinutes());      //分钟
console.log(dt.getSeconds());      //秒
console.log(dt.getDay());          //星期---从0开始
console.log(dt.toDateString());    //日期
console.log(dt.toLocaleDateString());    //日期
console.log(dt.toTimeString());          //时间
console.log(dt.toLocaleTimeString();     //时间
console.log(dt.valueOf());               //毫秒
console.log(dt.toString());              // 转成字符串 Wed Jun 13 2018 13:08:36 GMT+0800 (China Standard Time)

2.1 兼容性问题

获取日期的毫秒形式

var now = new Date();
// valueOf用于获取对象的原始值
console.log(now.valueOf())    

// HTML5中提供的方法，有兼容性问题
var now = Date.now();    

// 不支持HTML5的浏览器，可以用下面这种方式
var now = + new Date();            // 调用 Date对象的valueOf() 

日期格式化方法

toString()        // 转换成字符串
valueOf()        // 获取毫秒值
// 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

获取日期指定部分

toString()        // 转换成字符串
valueOf()        // 获取毫秒值
// 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

2.2 综合案例

写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式

function formatDate(d) {
    //如果date不是日期对象，返回
    if (!date instanceof Date) {
        return;
    }
    var year = d.getFullYear(),
        month = d.getMonth() + 1,
        date = d.getDate(),
        hour = d.getHours(),
        minute = d.getMinutes(),
        second = d.getSeconds();
    month = month < 10 ? '0' + month : month;
    date = date < 10 ? '0' + date : date;
    hour = hour < 10 ? '0' + hour : hour;
    minute = minute < 10 ? '0' + minute:minute;
    second = second < 10 ? '0' + second:second;
    return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}
console.log(formatDate(new Date()));
>>>
2018-06-13 14:00:46

三、String对象

3.1字符串的不可变

var str = 'abc';
str = 'hello';
// 当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题

3.2 创建字符串对象

var str1 = "sda";
console.log(typeof (str1));    //string
var str = new String('Hello World');
console.log(typeof (str));     //object

var str = "sss";
console.log(str instanceof String);   //false

var str1 = new String("ef");
console.log(str1 instanceof String);  //true

var str="hello";
str[1]="W";  字符串可以通过索引访问字符串中的某个值
但是,是可以访问---读取---只读

3.3 字符串对象的常用方法

　　字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。

// 1 字符方法
charAt()        //获取指定位置处字符
charCodeAt()      //获取指定位置处字符的ASCII码
str[0]           //HTML5，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat()           //拼接字符串，等效于+，+更常用
slice()            //从start位置开始，截取到end位置，end取不到，没有end，则取到最后
substring()     //从start位置开始，截取到end位置，end取不到，没有end，则取到最后
substr()           //从start位置开始，截取length个字符，没有length，则取到最后
// 3 位置方法
indexOf()       //返回指定内容在元字符串中的位置
lastIndexOf()     //从后往前找，只找第一个匹配的。但是位置序号还是从前往后排的。
// 4 去除空白   
trim()          //只能去除字符串前后的空白
// 5 大小写转换方法
to(Locale)UpperCase()     //转换大写
to(Locale)LowerCase()     //转换小写
// 6 其它
search()                  //寻找一个字符在字符串中的位置。
replace()                 //替换
split()                   //分开字符串
fromCharCode()            //输入ASCII数字，返回字符
// String.fromCharCode(101, 102, 103);     //把ASCII码转换成字符串

实例方法---->必须要通过new的方式创建的对象(实例对象)来调用的方法。
静态方法---->直接通过大写的构造函数的名字调用的方法(直接通过大写的对象名字调用的)。

var str = "12345";
console.log(str.length);        //5

var str = "whatareyounoshalei";
var result = str.charAt(100);   // 由于超出索引，结果为""
console.log(result + "1");

var str = String.fromCharCode(107, 108, 109);
console.log(str);                  //klm

var str = String.fromCharCode(83, 79, 83);
console.log(str);                     //SOS

var str = "what";
console.log(str + "are" + "you" + "no" + "sha" + "lei");  //whatareyounoshalei

var str = "小苏";
console.log(str.concat("喜欢", "苹果", "这是", "真的"));   //小苏喜欢苹果这是真的

var str = "小苏喜欢苹果这是真的";
var index = str.indexOf("喜", 5);
console.log(index);                        //从5开始找是找不到的，所以返回 -1
var index = str.indexOf("喜欢", 1);
console.log(index);                        //2

var str = "helo amen";
var index = str.lastIndexOf("a");
console.log(index);                        //5

var str = "小苏好帅哦,真的好勇敢哦";
if (str.indexOf("帅") != -1) {
    str = str.replace("帅", "猥琐");
} else {
    console.log("不存在");                    //小苏好帅哦,真的好勇敢哦
}
console.log(str);

var str = "如果有一天我邪恶了,请记住,我曾纯洁过";
//从索引5的位置开始提取,到索引为10的前一个结束,没有10，并返回这个提取后的字符串
str = str.slice(5, 10);
console.log(str);                               //我邪恶了,

var str = "乔峰|慕容|凤姐|梅超风|小苏|大蛇丸";
var arr = str.split("|");
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);                       //乔峰  慕容 ...每次都换行
}

var str = "哈哈,小苏真的是好帅哦";
str = str.substr(5, 5);
console.log(str);                                //真的是好帅

var str = "哈哈,小苏真的是好帅哦";
str = str.substring(5, 9);
console.log(str);                                  //真的是好

var str = "HELLO";
//str=str.toLocaleLowerCase();
str = str.toLowerCase();
console.log(str);                                //hello

var str = "hello";
str = str.toLocaleUpperCase();
//str=str.toUpperCase();
console.log(str);                                 //HELLO

var str = "   哦,这    是一个神奇的一天   ";
str = str.trim();
console.log("====" + str + "====");                 //====哦,这    是一个神奇的一天====

3.4 总结

     * 字符串的常用属性:
     * .length------>字符串的长度
     * .charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串
     * .fromCharCode(数字值,可以是多个参数),返回的是ASCII码对应的值
     * .concat(字符串1,字符串2,...);返回的是拼接之后的新的字符串
     * .indexOf(要找的字符串,从某个位置开始的索引);返回的是这个字符串的索引值,没找到则返回-1
     * .lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1
     * .replace("原来的字符串","新的字符串");用来替换字符串的
     * .slice(开始的索引,结束的索引); 从索引5的位置开始提取,到索引为10的前一个结束,没有10，并返回这个提取后的字符串
     * .split("要干掉的字符串",切割后留下的个数);切割字符串
     * .substr(开始的位置,个数);返回的是截取后的新的字符串
     * .substring(开始的索引,结束的索引),返回截取后的字符串,不包含结束的索引的字符串
     * .toLocaleLowerCase();转小写
     * .toLowerCase();转小写
     * .toLocaleUpperCase()转大写
     * .toUpperCase();转大写
     * .trim();干掉字符串两端的空格

　　　　

// 1 字符方法
charAt()        //获取指定位置处字符
charCodeAt()      //获取指定位置处字符的ASCII码
str[0]           //HTML5，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat()           //拼接字符串，等效于+，+更常用
slice()            //从start位置开始，截取到end位置，end取不到，没有end，则取到最后
substring()     //从start位置开始，截取到end位置，end取不到，没有end，则取到最后
substr()           //从start位置开始，截取length个字符，没有length，则取到最后
// 3 位置方法
indexOf()       //返回指定内容在元字符串中的位置
lastIndexOf()     //从后往前找，只找第一个匹配的。但是位置序号还是从前往后排的。
// 4 去除空白   
trim()          //只能去除字符串前后的空白
// 5 大小写转换方法
to(Locale)UpperCase()     //转换大写
to(Locale)LowerCase()     //转换小写
// 6 其它
search()                  //寻找一个字符在字符串中的位置。
replace()                 //替换
split()                   //分开字符串
fromCharCode()            //输入ASCII数字，返回字符
// String.fromCharCode(101, 102, 103);     //把ASCII码转换成字符串

3.5 案例

3.5.1 案例1：截取字符串"我爱中华人民共和国"，中的"中华"

var str = "我爱中华人民共和国";
//console.log("中华");
var key = "中华";
//先获取要截取的字符串的索引的位置
var index = str.indexOf(key);
//从指定的位置开始截取,截取两个即可
str = str.substr(index, 2);
console.log(str);

3.5.2 案例2：找到这个字符串中所有的 o 出现的位置

var str2 = "hello wod odd ott fbo nhyo";
var index = 0;//开始的位置
var key = "o";//要找的字符串
while ((index = str2.indexOf(key, index)) != -1) {//如果是-1情况,说明找完了
  console.log(index);
  index += key.length;
}
//4 7 10 14 20 25
//var index=str2.indexOf("o",0);
//console.log(index);

3.5.3 案例3 : 找到这个字符串中每个字符串出现了多少次

var str3 = "whatOareYyouYnoYshaHleiHoHmyHgod";
//第一步:把所有的字母全部变成小写
str3 = str3.toLocaleLowerCase();
//第二步:创建一个空对象,目的:把字母作为键,次数作为值
var obj = {};
//第三步,遍历字符串,获取每个字母
for (var i = 0; i < str3.length; i++) {
  //判断obj这个对象中有没有这个字母(字母---键)
  var key = str3[i];//每个字母
  if (obj[key]) {//判断obj中有没有这个键
    //对象中有这个字母了
    obj[key]++;
  } else {
    //对象中没有这个字母,那就把字母加到对象中,并且给这个字母一个出现的次数,默认1次
    obj[key] = 1;
  }
}

//遍历对象,显示每个字母的次数
for(var key in obj){
  console.log(key+"这个字母出现了"+obj[key]+"次");
}
//创建新的对象---空对象---没有属性,也没有方法

四、Array对象

4.1  数组创建

创建方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

创建方式3:
var arrname = new Array(长度);
//  初始化数组对象:
var cnweek=new Array(7);
cnweek[0]="星期日";
cnweek[1]="星期一";
...
cnweek[6]="星期六";

4.1.1 创建二维数组：

var cnweek=new Array(7);
for (var i=0;i<=6;i++){
    cnweek[i]=new Array(2);
}
cnweek[0][0]="星期日";
cnweek[0][1]="Sunday";
cnweek[1][0]="星期一";
cnweek[1][1]="Monday";
...
cnweek[6][0]="星期六";
cnweek[6][1]="Saturday";

4.1.2 对象是不是数组类型:两种

//1   instanceof
var str = "sss";
console.log(str instanceof String);   //false

var str1 = new String("ef");
console.log(str1 instanceof String);  //true

var obj = [];
console.log(obj instanceof Array);//true

var str1 = new Array();
console.log(str1 instanceof Array);  //true
//2 使用数组的 
console.log(Array.isArray(obj));//   Array.isArray() HTML5中提供的方法，有兼容性问题

4.2 数组对象的属性和方法

1、join方法：
x.join(bystr)       －－－－将数组元素拼接成字符串

var arr1=[1, 2, 3, 4, 5, 6, 7];
var str1=arr1.join("-");
alert(str1);  //结果为"1-2-3-4-5-6-7" 

2、concat方法：
x.concat(value,...)    －－－－数组拼接
var a = [1,2,3];
var b=a.concat(4,5) ;
alert(a.toString());  //返回结果为1,2,3
alert(b.toString());  //返回结果为1,2,3,4,5

3、数组排序-reverse sort：
//x.reverse()
//x.sort()

var arr1=[32, 12, 111, 444];
//var arr1=["a","d","f","c"];

arr1.reverse(); //颠倒数组元素
alert(arr1.toString());
//结果为444,111,12,32

arr1.sort();    //排序数组元素
alert(arr1.toString());
//结果为111,12,32,444

//------------------------------
arr=[1,5,2,100];

//arr.sort();
//alert(arr);
//如果就想按着数字比较呢?

function intSort(a,b){
    if (a>b){
        return 1;//-1
    }
    else if(a<b){
        return -1;//1
    }
    else {
        return 0
    }
}

arr.sort(intSort);

alert(arr);

function IntSort(a,b){
    return a-b;
}

4、数组切片操作：
//x.slice(start, end)
//
//使用注解
//
//x代表数组对象
//start表示开始位置索引
//end是结束位置下一数组元素索引编号
//第一个数组元素索引为0
//start、end可为负数，-1代表最后一个数组元素
//end省略则相当于从start位置截取以后所有数组元素

var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);

alert(arr2.toString());
//结果为"c,d" 
alert(arr3.toString());
//结果为"e,f,g,h"
alert(arr4.toString());
//结果为"c,d,e,f,g"

5、删除子数组：
//x. splice(start, deleteCount, value, ...)

//使用注解

//x代表数组对象
//splice的主要用途是对数组指定位置进行删除和插入
//start表示开始位置索引
//deleteCount删除数组元素的个数
//value表示在删除位置插入的数组元素
//value参数可以省略       
        
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);

alert(a.toString());//a变为 [1,4,5,6,7,8]

a.splice(1,1);

alert(a.toString());//a变为[1,5,6,7,8]

a.splice(1,0,2,3);

alert(a.toString());//a变为[1,2,3,5,6,7,8]

6、数组的push和pop：
//push pop这两个方法模拟的是一个栈操作

//x.push(value, ...)  压栈
//x.pop()             弹栈      
//使用注解
//
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//push是将value值添加到数组x的结尾
//pop是将数组x的最后一个元素删除


var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//结果为"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//结果为"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//结果为"1,2,3,4,5"

7、数组的shift和unshift：
//x.unshift(value,...)
//x.shift()
//使用注解

//x代表数组对象
//value可以为字符串、数字、数组等任何值
//unshift是将value值插入到数组x的开始
//shift是将数组x的第一个元素删除

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);  //结果为"4,5,1,2,3"

arr1. unshift([6,7]);
alert(arr1);  //结果为"6,7,4,5,1,2,3"

arr1.shift();
alert(arr1);  //结果为"4,5,1,2,3"

 数组常用方法

// 1 栈操作(先进后出)
push()
pop()         //取出数组中的最后一项，修改length属性
// 2 队列操作(先进先出)
push()
shift()        //取出数组中的第一个元素，修改length属性
unshift()     //在数组最前面插入项，返回数组的长度
// 3 排序方法
reverse()    //翻转数组
sort();     //即使是数组sort也是根据字符，从小到大排序
// 带参数的sort是如何实现的？
// 4 操作方法
concat()      //把参数拼接到当前数组
slice()     //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice()    //删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
// 5 位置方法
indexOf()、lastIndexOf()   //如果没找到返回-1
// 6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()
// 7 方法将数组的所有元素连接到一个字符串中。
join()

 清空数组

// 方式1 推荐 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

案例

案例1：将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”。使用两种方式实现

function myJoin(array, seperator) {
  seperator = seperator || ',';
  array = array || [];
  if (array.length == 0){
    return '';
  }
  var str = array[0];
  for (var i = 1; i < array.length; i++) {
    str += seperator + array[i];
  }
  return str;
}
var array = [6, 3, 5, 6, 7, 8, 0];
console.log(myJoin(array, '-'));

console.log(array.join('-'))

案例2：将一个字符串数组的元素的顺序进行反转。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用两种种方式实现。提示：第i个和第length-i-1个进行交换

function myReverse(arr) {
  if (!arr || arr.length == 0) {
    return [];
  }
  for (var i = 0; i < arr.length / 2; i++) {
    var tmp = arr[i];
    arr[i] = arr[this.length - i - 1];
    arr[arr.length - i - 1] = tmp;
  }
  return arr;
}

var array = ['a', 'b', 'c'];
console.log(myReverse(array));

console.log(array.reverse());

案例3：工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除

// 方式1
var array =  [1500,1200,2000,2100,1800];
var tmpArray = [];
for (var i = 0; i < array.length; i++) {
  if(array[i] < 2000) {
    tmpArray.push(array[i]);
  }
}
console.log(tmpArray);
// 方式2
var array =  [1500, 1200, 2000, 2100, 1800];
array = array.filter(function (item, index) {
  if (item < 2000) {
    return true;
  }
  return false;
});
console.log(array);

案例4：["c", "a", "z", "a", "x", "a"]找到数组中每一个a出现的位置

var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
do {
  var index = array.indexOf('a',index + 1);
  if (index != -1){
    console.log(index);
  }
} while (index > 0);

案例5：编写一个方法去掉一个数组的重复元素

var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
function clear() {
  var o = {};
  for (var i = 0; i < array.length; i++) {
    var item = array[i];
    if (o[item]) {
      o[item]++;
    }else{
      o[item] = 1;
    }
  }
  var tmpArray = [];
  for(var key in o) {
    if (o[key] == 1) {
      tmpArray.push(key);
    }else{
      if(tmpArray.indexOf(key) == -1){
        tmpArray.push(key);
      }
    }
  }
  returm tmpArray;
}

console.log(clear(array));

基本包装类型

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String/Number/Boolean

// 下面代码的问题？
// s1是基本类型，基本类型是没有方法的
var s1 = 'zhangsan';
var s2 = s1.substring(5);

// 当调用s1.substring(5)的时候，先把s1包装成String类型的临时对象，再调用substring方法，最后销毁临时对象, 相当于：
var s1 = new String('zhangsan');
var s2 = s1.substring(5);
s1 = null;

// 创建基本包装类型的对象
var num = 18;                  //数值，基本类型
var num = Number('18');     //类型转换
var num = new Number(18);     //基本包装类型，对象
// Number和Boolean基本包装类型基本不用，使用的话可能会引起歧义。例如：
var b1 = new Boolean(false);                //注意：b1是对象
var b2 = b1 && true;        // true
var b3 = true && b1;        //Boolean {false}      后面是什么就是什么