小白学js第八天之内置对象对象

目录

• 简单类型和复杂类型的区别
  • 简单类型作为参数时
  • 复杂类型作为参数时
• 内置对象
• 如何学习一个方法

今日份脑图请戳☟[http://naotu.baidu.com/file/553b6b198e8b5066addea4a245b5c863?token=a3ed1af517c7219d]

简单类型和复杂类型的区别

简单类型

简单类型又叫值类型，在存储时，存的是值本身，因此叫值类型

值类型：简单数据类型，基本数据类型

复杂类型

复杂类型又叫引用类型。在存储是，变量中存储的仅仅是地址（引用），因此叫做引用数据类型。

引用类型：复杂数据类型。

简单类型作为参数时

      //简单类型作为参数时不会改变原来变量的值
        function getSum(x, y) {
            x += 1;
            y += 1;
            console.log(x); //2
            console.log(y); //4
        }
        var a = 1;
        var b = 3;
        getSum(a, b);
        console.log(a); //1
        console.log(b); //3

复杂类型作为参数时

  // 复杂类型作为参数时，会改变内存中的值
        function Person(name, age, salary) {
            this.name = name;
            this.age = age;
            this.salar = salary;
        }
        var person = new Person('zs', 18, 10000);
        console.log(person.name); // zs

        function fn(p) {
            p.name = 'ls';
        }
        fn(person);
        console.log(person.name); //ls

内置对象

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

• 学习一个内置对象的使用，只要学会其常用的成员的使用（通过查文档学习）

• 可以通过MDN/W3C来查询

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

内置对象

math对象

Math.PI						// 圆周率
Math.random()				// 生成随机数
Math.floor()/Math.ceil()	 // 向下取整/向上取整
Math.round()				// 取整，四舍五入
Math.abs()					// 绝对值
Math.max()/Math.min()		 // 求最大和最小值

Math.sin()/Math.cos()		 // 正弦/余弦
Math.power()/Math.sqrt()	 // 求指数次幂/求平方根

案例

• 求10-20之间的随机数

function getRandom(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        var small = 10;
        var big = 20;
        console.log(getRandom(small, big));

• 随机生成颜色RGB

       function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }//生成0-255之间的随机数

        function randomColor(min, max) {
            var color1 = getRandom(min, max);
            var color2 = getRandom(min, max);
            var color3 = getRandom(min, max);
            console.log('RGB(' +
                color1 + ',' + color2 + ',' + color3 + ')');
        }
        randomColor(0, 255);

• 模拟实现max()/min()

 // - 模拟实现max()/min()
        var myMath = {
            max: function() {
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (max < arguments[i]) {
                        max = arguments[i];
                    }
                }
                return max;
            },
            min: function() {
                var min = arguments[1];
                for (var i = 1; i < arguments.length; i++) {
                    if (min > arguments[i]);
                    min = arguments[i];
                }
                return min;
            },

        }
        console.log(myMath.max(5, 44, 55, 7, 5));

Date对象

创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。

• Date 是一个构造函数，首先要通过new Date() 来创建日期实例(对象)

var d = new Date();
console.log(d);////打印的是当前时间
 console.log(d.valueOf()); //当前时间距1971年1月1号的毫秒数

日期构造函数 Date()

var d = new Date();
console.log(d);////打印的是当前时间
 console.log(d.valueOf()); //当前时间距1971年1月1号的毫秒数

Date构造函数的参数

1. 毫秒数 1498099000356 new Date(1498099000356)

//构造函数中 传入毫秒值
var d = new Date(1557999887024);
        console.log(d);//返回一个时间

2. 日期格式字符串 '2015-5-1' new Date('2015-5-1')

 // 可以传入日期形式的字符串
var d = new Date('2019-05-16 8:35:08');
        console.log(d);//Thu May 16 2019 08:35:08 GMT+0800 (中国标准时间)

3. 年、月、日…… new Date(2015, 4, 1) // 月份从0开始

// 4 可以传入数字 用， 分隔开

        var d = new Date(2015, 4, 16); //月份从0开始算
        console.log(d); //Sat May 16 2015 00:00:00 GMT+0800 (中国标准时间)

获取日期对象的毫秒值

• valueOf();
• getTime();
• Date.now();
• +new Date(); +表示取正

   var d = new Date();
    // 获取日期对象的毫秒值  不用我们调用
    // console.log(d.valueOf());
    // 和valueOf的作用是一样的
    console.log(d.getTime());
    
     获取当前时间的毫秒值    静态成员
    var num = Date.now();   // 浏览器兼容问题  HTML5
    console.log(num);
    
    
    // + 在这里是取正
    var num = Number( new Date());
    var num = + new Date();
    console.log(num);

获取日期中的指定部分

       //获取日期中的指定部分
        var d = new Date();
        console.log(d.getFullYear()); //年
        console.log(d.getMonth() + 1); //月
        console.log(d.getDate()); //日
        console.log(d.getHours()); //时
        console.log(d.getMinutes()); //分
        console.log(d.getSeconds()); //秒
        console.log(d.getDay()); //星期几

日期格式化方法

    // - 日期格式化方法
        var d = new Date();
        // 打印日期对象的时候。内部调用了toString()
        console.log(d); //Thu May 16 2019 18:36:47 GMT+0800 (中国标准时间)
        console.log(d.toString()); //Thu May 16 2019 18:36:47 GMT+0800 (中国标准时间)
        console.log(d.toTimeString()); //18:35:09 GMT+0800 (中国标准时间)
        console.log(d.toLocaleTimeString()); //下午6:35:09
        console.log(d.toDateString()); //Thu May 16 2019
        console.log(d.toLocaleDateString()); //2019/5/16

案例

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

 // 写一个函数， 格式化日期对象， 返回yyyy - MM - dd HH: mm: ss的形式
        function formatDate(date) {
            //判断date是否是个日期对象
            // console.log(date instanceof Date);
            if (!(date instanceof Date)) {
                console.error('传入的参数不是一个日期参数');
                return;
            }

            var year = date.getFullYear(),
                month = date.getMonth() + 1,
                day = date.getDate(),
                hour = date.getHours(),
                minutes = date.getMinutes(),
                seconds = date.getSeconds();

            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            hour = hour > 9 ? hour : '0' + hour;
            minutes = minutes > 9 ? minutes : '0' + minutes;
            seconds = seconds > 9 ? seconds : '0' + seconds;

            return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
        }

        var d = new Date(2015, 8, 8, 8, 8, 8);
        var dateStr = formatDate(d);
        console.log(dateStr);

• 计算时间差，返回相差的天/时/分/秒

        // 计算时间差， 返回相差的天 / 时 / 分 / 秒
        // //1. 两个时间如何相减
        // var d1 = new Date();
        // var d2 = new Date(2017, 5, 17);
        // //d1.valueOf() - d2.valueOf();
        // console.log(d1 - d2);

        //函数如何让返回多个值

        // function  fn() {
        //     return  {  //返回多个值的形式
        //         year: year,
        //         day: day,
        //         hour: hour
        //     };
        //}


        //3.如何计算相差的天 / 时 / 分 / 秒
        // 相差的总秒数： 两个日期相差的毫秒数 / 1000
        // 相差的天数： 两个日期相差的毫秒数 / 1000/ 60 / 60 / 24
        // 相差的小时数： 两个日期相差的毫秒数 / 1000/ 60 / 60 % 24
        // 相差的分钟数： 两个日期相差的毫秒数 / 1000/ 60 % 60
        // 相差的秒数： 两个日期相差的毫秒数 / 1000 % 60 

        function getInterval(star, end) {
            var interval = end - star;
            var days = Math.round(interval / 1000 / 60 / 60 / 24),
                hours = Math.round(interval / 1000 / 60 / 60 % 24),
                minutes = Math.round(interval / 1000 / 60 % 60),
                seconds = Math.round(interval / 1000 % 60);

            return {
                days: days,
                hours: hours,
                minutes: minutes,
                seconds: seconds
            };


        }
        var d1 = new Date(2017, 5, 17);
        var d2 = new Date();
        var interval = getInterval(d1, d2);
        console.log(interval);

Array对象

• 创建数组对象的两种方式
  • 字面量方式
  • new Array()

// 1. 使用构造函数创建数组对象
// 创建了一个空数组
var arr = new Array();
// 创建了一个数组，里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
// 创建了一个数组，里面存放了4个数字
var arr = new Array(1, 2, 3, 4);



// 2. 使用字面量创建数组对象
var arr = [1, 2, 3];

• 检测一个对象是否是数组

  • instanceof
  • Array.isArray() HTML5中提供的方法，有兼容性问题

        //判断传入的参数是否是数组
        // instanceof 方法
       function test(arr) {
            if (!(arr instanceof Array)) {
                console.error('传入的对象不是数组对象'); //返回传入的对象不是数组对象
            }else {
                console.log('正常执行');
            }
        }
        var arr1 = 1;
        test(arr1);

        //Array.isArray()方法

        function test(array) {
            if (!Array.isArray(array)) {

                console.error("不是数组对象");
                return;
            }
            console.log("正常执行");
        }

        var arr1 = 1;
        test(arr1);

• toString()/valueOf()

  • toString() 把数组转换成字符串，逗号分隔每一项
  • valueOf() 返回数组对象本身

  var array = [5, 4, 3, 2, 1];
        console.log(array.toString()); //返回5,4,3,2,1  把数组转换成字符串，逗号分隔每一项
        console.log(array.valueOf()); //   返回数组对象本身

• 数组常用方法

 //  1 栈操作(先进后出)
        // push()  
        var array = [1, 2, 3, 4, 5];
        console.log(array.push()); //5,   取出数组中的最后一项,不会修改length属性   
        console.log(array.length); //5
        
         // pop() //取出数组中的最后一项，修改length属性
        var array = [1, 2, 3, 4, 5];
        console.log(array.pop()); //5
        console.log(array.length); //4
        
        
         // 2 队列操作(先进先出)
        // shift() //取出数组中的第一个元素，修改length属性
        var array = [1, 2, 3, 4, 5];  
        console.log(array.shift());//1
        console.log(array.length);// 4
        
        
    //  shift() //取出数组中的第一个元素，修改length属性
        var array = [1, 2, 3, 4, 5];
        console.log(array.shift()); //1
        console.log(array.length); // 4
        
      // unshift() //在数组最前面插入项，返回数组的长度
        var array = [1, 2, 3, 4, 5];
        console.log(array.unshift(0)); // 6
        console.log(array);  //[0, 1, 2, 3, 4, 5]
        console.log(array.length); //6
        
        
        // reverse() //翻转数组
        var array = ['a', 'b', 'c', 'd', 'e'];
        console.log(array.reverse()); // ["e", "d", "c", "b", "a"]
        
          // sort(); //即使是数组sort也是根据字符，从小到大排序
        var array = ['a', 'b', 'c', 'd', 'e'];
        console.log(array.sort());
        
        
        // concat() //把参数拼接到当前数组的最后
        var array = ['a', 'b', 'c', 'd', 'e']; //["a", "b", "c", "d", "e", "s"]
        console.log(array.concat('s'));
        
        
          // slice() //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
        var array = ['a', 'b', 'c', 'd', 'e'];
        console.log(array.slice(1, 3));//["b", "c"]
        console.log(array);//["a", "b", "c", "d", "e"]
        
        // 5 位置方法
        //indexOf()、lastIndexOf()   //如果没找到返回-1
        // 6 迭代方法 不会修改原数组(可选)
        //every()、filter()、forEach()、map()、some()
         // 7 方法将数组的所有元素连接到一个字符串中。
        //join()  //和toString（）方法很像， 调用toString()方法，可以把数组变成一个字符串用逗号分隔,join()方法也可以，但是如果在join方法中有参数传入，join()方法会在每个元素的后面都加上传入的参数，然后变成一个字符串输出
          var names = ['刘备', '张飞', '关羽'];
          console.log(names.join('|'));

• 清空数组

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

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

//将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”。使用两种方式实现
 //使用传统方法
        function getSeperate(array) {
            var seperator = '|';
            var name = array[0];

            for (var i = 1; i < array.length; i++) {
                name = name + seperator + array[i];
            }
            return name;
        }

        var names = ['刘备', '张飞', '关羽'];

        console.log(getSeperate(names));


        //2.  使用join()方法
        var names = ['刘备', '张飞', '关羽'];
        console.log(names.join('|'));

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

        //将一个字符串数组的元素的顺序进行反转。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用两种种方式实现。提示：第i个和第length-i-1个进行交换
//第一种
        function reverse(array) {
            for (var i = 0; i < (array.length / 2); i++) {
                var tmp = array[i];
                array[i] = array[array.length - i - 1];
                array[array.length - i - 1] = tmp;
            }
            console.log(array);
        }
        var strs = ["a", "b", "c", "d"];
        reverse(strs);

//第二种
        var strs = ["a", "b", "c", "d"];
        console.log(strs.reverse());

• 工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除

//第一种传统方法
    function getNewArray(numbers) {
            var newArray = []; //定义了一个空数组，所以这个空数组的长度为0
            for (var i = 0; i < numbers.length; i++) {
                if (numbers[i] >= 2000) {
                    continue;
                } else {
                    newArray[newArray.length] = numbers[i];
                }
            }
            console.log(newArray);
        }

        var arr = [1500, 1200, 2000, 2100, 1800];
        getNewArray(arr);
        
        
        //第二种
        var arr = [1500, 1200, 2000, 2100, 1800];
        var newArray = arr.filter(function(item) {
            //item 是数组中的每一个元素
            return item < 2000;
        })
        console.log(newArray);

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

//第一种方式
   function getA(array) {
            var arr = [];//定义一个数组来接收a出现的位置
            for (var i = 0; i < array.length; i++) {
                if (array[i] === 'a') {
                    arr[arr.length] = i;
                }
            }
            console.log(arr);
        }
        var strs = ["c", "a", "z", "a", "x", "a"];
        getA(strs);
        
//第二种方式
    
        // var strs = ["c", "a", "z", "a", "x", "a"];

        // //从前往后找元素
        // console.log(strs.indexOf('a'));
        // //从后往前找元素
        // console.log(strs.lastIndexOf('a'));

        // // indexOf的第二个参数 设置indexOf查找的开始位置
        // console.log(strs.indexOf('c', 2));
        // // 如果没有找到元素 indexOf  会返回-1

        var strs = ["c", "a", "z", "a", "x", "a"];
        var index = -1; //为了从arr[0]开始查找元素
        do {
            index = strs.indexOf('a', index + 1);
            if (index !== -1) {
                console.log(index);
            }
        } while (index !== -1);

自定义对象

浏览器对象

如何学习一个方法？

1. 方法的功能
2. 参数的意义和类型
3. 返回值意义和类型
4. demo进行测试