当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JavaScript常用对象

JavaScript常用对象

2019年06月18日  | 移动技术网IT编程  | 我要评论

一、创建对象

  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));

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网