JavaScript常用对象

一、创建对象

1. 构造函数

   • 使用new操作符后跟object构造函数

   // 创建对象
   var person = new object();
   // 给对象添加name和age属性
   person.name = 'jack';
   person.age = 28;
   // 给对象添加fav的方法
   person.fav = function(){
       console.log('泡妹子');
   }
   
   // 特殊：
   var person = {};    // 与new object()相同

2. 使用对象字面量表示法

   • 对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程

   var person = {
       name : 'jack';
       age : 28,
       fav : function(){
           console.log('泡妹子');
       }
   }

   • this指向
     • 对象中的this指向当前对象
     • 全局作用域中的this，一定指向window
     • 函数中的this，一般情况下，都指向window
       • 特殊情况：使用call和apply，此时this指向传入的对象
     • 自执行函数中的this，一定指向window

   var obj = {};
   obj.name = 'mjj';
   obj.fav = function(){        
       console.log(this);       // 此时this指向当前对象，即obj 
   }
   
   console.log(this);           // 此时this指向window
   function  add(x,y) {
       console.log(this.name);
   }
   add();                      // 空值，此时this指向window
   add.call(obj,1,2);           // 此时this指向传入的对象，即obj
   add.apply(obj,[1,2]);        // 此时this指向传入的对象，即obj
   
   (function () {
       console.log(this);       // 此时this指向window
   })()

3. 访问对象中属性的方法

   • 点语法：用来访问对象中的属性

   person.name;         // jack
   person.fav();        // 泡妹子

   • 括号表示法

   person['name'];          // 相当于person.name;

4. 遍历对象

   var obj = {};
   for (var key in obj){
       obj[key]
   }

5. 面向对象

   // 使用构造函数来创建对象
   function point(x, y) {
     this.x = x;
     this.y = y;
   }
   point.prototype.tostring = function () {
     return '(' + this.x + ', ' + this.y + ')';
   };
   var p = new point(1, 2);
   
   // es6用class来创建对象
   class person{
       constructor(name,age){
           // 初始化
           this.name = name;
           this.age = age;
       }
       fav(){
           console.log(this.name);
       }
   }
   var p = new person('mjj',18);
   p.fav();

二、常用对象

2.1 数组：array

1. 数组的创建方式

   • 跟object创建对象一样，使用array构造函数方式创建

   var colors = new array();

   • 使用字面量方式创建数组

   var colors = [];

2. array.isarray()：确定某个值到底是否是数组

   var colors = ['red','green','blue'];
   array.isarray(colors);       // true

3. tostring()：返回由数组中每个值以一个以逗号拼接成的字符串

   var colors = ['red','green','blue'];
   alert(colors.tostring());        // red,green,blue

4. join方法：返回由数组中每个值以相同符号拼接成的字符串

   var colors = ['red','blue','green'];
   colors.join('||');           // red||blue||green

5. 栈方法：lifo（后进先出）

   • push()：进，可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度

   var colors = [];
   var count = colors.push('red','blue','green');
   alert(count);                // 3

   • pop()：出，从数组末尾移除最后一项，减少数组的length值，然后返回移除的项

   var item = colors.pop();     // 取最后一项
   alert(item);                 // green
   alert(colors.length);        // 2

6. 队列方法：fifo（先进先出）

   • unshift()：进，在数组前端添加任意个项并返回新数组的长度

   var colors = [];
   var count  = colors.unshift('red','green');  // 推入两项
   alert(count);                // 2
   console.log(colors);         // ["red", "green"]

   • shift()：出，移除数组中的第一个项并返回该项，同时将数组长度减1

   var colors = ['red','blue','green'];
   var item = colors.shift();       // 取得第一项
   alert(item);                 // "red"
   alert(colors.length);        // 2

7. 重排序方法

   • reverse()：反转，翻转数组项的顺序

   var values = [1,2,3,4,5];
   values.reverse();
   alert(values);           // 5,4,3,2,1

   • sort()：排序，默认是升序排列

   // 升序
   function compare(v1,v2){
       if(v1 < v2){
           return -1;
       }else if (v1 > v2){
           return 1;
       }else{
           return 0;
       }
   }
   var values = [0,1,5,10,15];
   values.sort(compare);
   alert(values);           // 0,1,5,10,15
   // 降序
   function compare(v1,v2){
       if(v1 < v2){
           return 1;
       }else if (v1 > v2){
           return -1;
       }else{
           return 0;
       }
   }
   var values = [0, 1, 5, 10, 15];
   values.sort(compare);
   alert(values);           // 15,10,5,1,0

8. 操作方法

   • concat()：数组合并方法，一个数组调用concat()方法去合并另一个数组，返回一个新的数组，接收的参数是可以是任意的
     • 参数为一个或多个数组，会将这些数组中每一项都添加到结果数组中。
     • 参数不是数组，这些值就会被简单地添加到结果数组的末尾

   var colors = ['red','blue','green'];
   colors.concat('yello');                   // ["red", "blue", "green", "yello"]
   colors.concat({'name':'张三'});           // ["red", "blue", "green", {…}]
   colors.concat({'name':'李四'},['black','brown']);  
   // ["red", "blue", "green", {…}, "black", "brown"]

   • slice()：基于当前数组中一个或多个项创建一个新数组，可以接受一或两个参数，要返回项的起始和结束位置
     • 一个参数的情况下，返回从该参数指定位置开始到当前数组默认的所有项
     • 两个参数的情况下，返回起始和结束位置之间的项，但不包括结束位置的项

   var colors = ['red','blue','green','yellow','purple'];
   // 正值情况下
   colors.slice(1);     // ["blue", "green", "yellow", "purple"]
   colors.slice(1,4);      // ["blue", "green", "yellow"]
   // 负值情况下
   colors.slice(-2,-1); // ["yellow"] 
   colors.slice(-1,-2); // []

   • splice()：给数组插入、删除、替换项
     • 插入：向指定位置插入任意数量的项，只需提供3个参数：起始位置，0（要删除的个数），要插入的项
     • 删除：删除任意数量的项，只需指定2个参数：要删除的第一项的位置，要删除的个数
     • 替换：向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置，要删除的项数，要插入的任意数量的项

   var colors = ["red", "green", "blue"];
   var removed = colors.splice(0,1); 
   alert(colors);       // green,blue 
   alert(removed);  // red，返回的数组中只包含一项
   removed = colors.splice(1, 0, "yellow", "orange"); 
   alert(colors);       // green,yellow,orange,blue 
   alert(removed);  // 返回的是一个空数组
   removed = colors.splice(1, 1, "red", "purple"); 
   alert(colors);       // green,red,purple,orange,blue 
   alert(removed);  // yellow，返回的数组中只包含一项

9. 位置方法

   • indexof()：从数组的开头(索引位置0)开始向后查找
   • lastindexof()：从数组的末尾开始向前查找

   var numbers = [1,2,3,4,5,4,3,2,1];
   numbers.indexof(4);          // 3
   numbers.lastindexof(4);      // 5
   numbers.indexof(4,4);        // 5
   numbers.lastindexof(4,4);    // 3
   var person = {name:"mjj"};
   var people = [{name:'mjj'}];
   var morepeople = [person];
   people.indexof(person);   // -1
   morepeople.indexof(person);  // 0

10. 迭代方法

    • filter()：利用指定的函数确定是否在返回的数组中包含某一项

    var numbers = [1,2,3,4,5,4,3,2,1];
    var filterresult = numbers.filter(function(item, index, array){
        return (item > 2);
    });
    alert(filterresult);    // [3,4,5,4,3]

    • map()：返回一个数组，而这个数组的每一项都是在原始数组中的对应项上执行函数的结果

    var numbers = [1,2,3,4,5,4,3,2,1];
    var filterresult = numbers.map(function(item, index, array){
        return item * 2;
    });
    alert(filterresult);    // [2,4,6,8,10,8,6,4,2]

    • foreach()：对数组中的每一项执行函数，没有返回值，本质上与使用for循环迭代数组一样，只能在数组中使用

    //执行某些操作,相当于for循环
    var numbers = [1,2,3,4,5,4,3,2,1];
    numbers.foreach(function(item, index, array){
    });

2.2 字符串：string

1. 字符串的创建方式

   var stringvalue = "hello world"; 

2. length属性

   var stringvalue = "hello world"; 
   alert(stringvalue.length);            // "11"

3. 字符方法

   • charat()：返回给定位置的那个字符

   var stringvalue = "hello world"; 
   alert(stringvalue.charat(1));         // "e"

   • charcodeat()：返回给定位置的那个字符所对应的编码

   var stringvalue = "hello world";
   alert(stringvalue.charcodeat(1));     // 输出"101"

4. 字符操作方法

   • concat()：用于将一或多个字符串拼接起来，返回拼接得到的新字符串
   • +或${}，也可以拼接字符串

   var stringvalue = "hello ";
   var result = stringvalue.concat("world"); alert(result);           // "hello world" 
   alert(stringvalue);      // "hello"
   
   // concat()方法可以接受任意多个参数，也就是说可以通过它来拼接任意多个字符串
   var stringvalue = "hello ";
   var result = stringvalue.concat("world", "!");
   alert(result);           // "hello world!"
   
   // 拼接字符串
   // 通用方式：
   var name = 'wusir', age = 28;
   var str = name + '今年是' + age + '岁了，快要结婚了，娶了个黑姑娘';
   // es6的模板字符串，使用``（tab上面的那个键）
   var str2 = `${name}今年是${age}岁了，快要结婚了，娶了个黑姑娘`;

   • slice()，substr()，substring()：基于子字符串创建新字符串的方法

   var stringvalue = "hello world";
   // 正值情况下
   stringvalue.slice(3);          // "lo world"
   stringvalue.substring(3);      // "lo world"
   stringvalue.substr(3));        // "lo world"
   stringvalue.slice(3, 7);       // "lo w"
   stringvalue.substring(3,7);    // "lo w"
   stringvalue.substr(3, 7);      // "lo worl
   // 负值情况下
   stringvalue.slice(-3);         // "rld" 
   stringvalue.substring(-3);     // "hello world"
   stringvalue.substr(-3);        // "rld"
   stringvalue.slice(3, -4);      // "lo w" 
   stringvalue.substring(3, -4);  // "hel"
   stringvalue.substr(3, -4);     // ""(空字符串)

5. 字符串位置方法

   • indexof()：从字符串的开头向后搜索子字符串
   • lastindexof()：从字符串的末尾向前搜索子字符串

   var stringvalue = "hello world";
   alert(stringvalue.indexof("o"));            // 4
   alert(stringvalue.lastindexof("o"));        // 7
   alert(stringvalue.indexof("o", 6));         // 7
   alert(stringvalue.lastindexof("o", 6));     // 4

6. trim()：删除字符串的前后空格

   var stringvalue = "   hello world   ";
   stringvalue.trim();       // "hello world"

7. 字符串大小写转换方法

   • touppercase()：小写转换成大写
   • tolowercase()：大写转换成小写

   var stringvalue = "hello world";
   stringvalue.touppercase();       // "hello world"
   stringvalue.tolowercase();       // "hello world"

2.3 日期对象：date

1. 日期对象的创建方式

   var mydate = new date();

2. 基本方法

   • getdate()：返回指定日期对象的月份中的第几天
   • date()：返回当天的日期和时间
   • getmonth()：返回指定日期对象的月份
   • getfullyear()：返回指定日期对象的年份
   • getday()：返回指定日期对象的星期中的第几天
   • gethours()：返回指定日期对象的小时
   • getminutes()：返回指定日期对象的分钟
   • getseconds()：返回指定日期对象的秒数

3. 日期格式化方法

   • tolocalestring()：以特定于实现的格式显示年月日，时分秒;
   • todatestring()：以特定于实现的格式显示星期几、月、日和年
   • totimestring()：以特定于实现的格式显示时、分、秒和时区;
   • toutcstring()：以特定于实现的格式完整的 utc 日期

   var mydate = new date();
   mydate.tolocalestring();     // "2019/6/4 上午9:33:58"
   mydate.todatestring();          // "mon apr 15 2019"
   mydate.totimestring();          // "10:11:53 gmt+0800 (中国标准时间)"
   mydate.toutcstring();           // "mon, 15 apr 2019 02:11:53 gmt"

4. 将今天的星期数显示在网页上，即写入body中，使用document.write

   var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
   console.log(weeks[date.getday()]);
   var day = weeks[date.getday()];
   document.write(`<a href="#">${day}</a>`);

5. 数字时钟

   • 示例：返回了用数字时钟格式的时间

   var time = new date();
   var hour = time.gethours();
   var minute = time.getminutes();
   var second = time.getseconds();
   var temp = "" + ((hour > 12) ? hour - 12 : hour);
   if (hour == 0)
       temp = "12";
   temp += ((minute < 10) ? ":0" : ":") + minute;
   temp += ((second < 10) ? ":0" : ":") + second;
   temp += (hour >= 12) ? " p.m." : " a.m.";
   alert(temp);

   • 升级版：在网页上显示数字时钟的动态效果

   <body>
   <h2 id="time"></h2>
   <script>
       var timeobj = document.getelementbyid('time');
       console.log(time);
       function getnowtime() {
           var time = new date();
           var hour = time.gethours();
           var minute = time.getminutes();
           var second = time.getseconds();
           var temp = "" + ((hour > 12) ? hour - 12 : hour);
           if (hour == 0) {
               temp = "12";
           }
           temp += ((minute < 10) ? ":0" : ":") + minute;
           temp += ((second < 10) ? ":0" : ":") + second;
           temp += (hour >= 12) ? " p.m." : " a.m.";
           timeobj.innertext = temp;
       }
       setinterval(getnowtime, 20)
   </script>
   </body>

2.4 数学对象：math

1. min()和max()方法

   • math.min()：求最小值
   • math.max()：求最大值

   var max = math.max(3, 54, 32, 16);
   alert(max);    // 54
   var min = math.min(3, 54, 32, 16);
   alert(min);    // 3
   
   // 特殊：使用apply，找到数组中最大或最小值
   var values = [1,2,36,23,43,3,41];
   var max = math.max.apply(null, values);

2. 舍入方法

   • math.ceil()：天花板函数，只入不舍，相当于取整再加1
     • 执行向上舍入，即它总是将数值向上舍入为最接近的整数
   • math.floor()：地板函数，只舍不入，相当于取整
     • 执行向下舍入，即它总是将数值向下舍入为最接近的整数
   • math.round()：四舍五入，和数学中的取舍方式一致
     • 执行标准舍入，即它总是将数值四舍五入为最接近的整数

   var num = 25.7;
   var num2 = 25.2;
   math.ceil(num);     // 26
   math.floor(num);    // 25
   math.round(num);    // 26
   math.round(num2);   // 25

3. random()方法

   • 用来取随机数
   • math.random()：方法返回大于等于0小于1的一个随机数

   // 例1:获取min到max的范围的整数
   function random(lower, upper) {
       return math.floor(math.random() * (upper - lower)) + lower;
   }
   
   // 例2: 获取随机颜色
   /* 产生一个随机的rgb颜色
   @return {string}  返回颜色rgb值字符串内容，如：rgb(201, 57, 96) */
   function randomcolor() {
    // 随机生成rgb值，每个颜色值在0-255之间
       var r = random(0, 256),
           g = random(0, 256),
           b = random(0, 256);
    // 连接字符串的结果
       var result = "rgb("+ r +","+ g +","+ b +")";
       // 返回结果
       return result;
   }
   
   // 例3: 获取随机验证码
   function createcode(){
       //首先默认code为空字符串
       var code = '';
       //设置长度，这里看需求，我这里设置了4
       var codelength = 4;
       //设置随机字符
       var random = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r', 's','t','u','v','w','x','y','z'];
       //循环codelength 我设置的4就是循环4次
       for(var i = 0; i < codelength; i++){
           //设置随机数范围,这设置为0 ~ 36
           var index = math.floor(math.random()*36);
           //字符串拼接 将每次随机的字符 进行拼接
           code += random[index]; 
       }
       //将拼接好的字符串赋值给展示的value
       return code
   }

三、字符串和数值之间的转换

1. 字符串转数值

   • parseint()：字符串转整数
   • persefloat()：字符串转浮点型
   • number()：字符串转数值

   var str = '123.0000111';         
   console.log(parseint(str));           // 123
   console.log(typeof parseint(str));     // number
   console.log(parsefloat(str));         // 123.0000111
   console.log(typeof parsefloat(str));  // number
   console.log(number(str));             // 123.0000111

2. 数值转字符串

   • tostring()：数值转字符串
   • 数字+空的字符串：数值转字符串

   var num  = 1233.006;
   // 强制类型转换
   console.log(string(num));
   console.log(num.tostring());
   // 隐式转换
   console.log(''.concat(num));
   // tofixed()方法会按照指定的小数位返回数值的字符串 四舍五入
   console.log(num.tofixed(2));