js基础之内置对象

版权声明：转载-复用,请联系博主微信:qiang510939237 https://blog.csdn.net/qiang510939237/article/details/88751933

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

常见的内置对象有Math、String、Array、Date等

内置对象有很多，我们主要是记下这些内置对象的用法即可.
网上资源如下:

• 火狐开发者网站MDN https://developer.mozilla.org/zh-CN/
• W3School网站 http://www.w3school.com.cn/jsref/index.asp

Math对象

Math对象中封装很多与数学相关的属性和方法。

• π
  Math.PI

• 最大值/最小值

• Math.max();
  Math.min();
  

• 取整（★）

•   [1.1 , 1.9,  -1.1 , -1.9  ,  1.5]
  Math.ceil();//天花板，向上取整
  Math.floor();//地板，向下取整
  Math.round();//四舍五入，如果是.5，则取更大的那个数
  

• 随机数（★★）

• Math.random();//返回一个[0,1)之间的数，能取到0，取不到1
  
  // 一般情况看下,我们不是要求随机小数,一般整数,例如速记点名
  

• 绝对值 (abs absolute 绝对)

• Math.abs();//求绝对值
  

• 次幂和开方 (pow power 幂 sqrt:开方 )

• Math.pow(num, power);//求num的power次方
  Math.sqrt(num);//对num开平方
  

• 练习
  //1. 0-3 [0,3)
  // 0-6 [0,6)
  // 6-8 [6,8)

  //2. 0-3的随机整数 [0,3]
  // 0-6的随机整数 [0,6]
  // 6-8的随机整数 [6,8]

  //3. 封装一个函数随机生成一个rgb颜色？
  // 0-255 取整

      function randomRGB() {
        var red = parseInt( Math.random() * 256 );
        var green = parseInt( Math.random() * 256 );
        var blue = parseInt( Math.random() * 256 );
  
        // return 'rgb(20,30,43)'
        return 'rgb('+ red + ',' + green + ',' + blue + ')';
      }
  

Date对象 (Date对象用来处理日期和时间)

• 创建一个日期对象

• var date = new Date();//使用构造函数创建一个当前时间的对象
  var date = new Date("2017-03-22");//创建一个指定时间的日期对象
  var date = new Date("2017-03-22 00:52:34");//创建一个指定时间的日期对象
  var date = new Date(2017, 2, 22, 0, 52, 34);
  var date = new Date(1523199394644);//参数：毫秒值
  
  Date构造函数的参数
  1. 毫秒数 1498099000356		new Date(1498099000356)
  2. 日期格式字符串  '2015-5-1'	new Date('2015-5-1')
  3. 年、月、日……				 var date = new Date(2017, 2, 22, 0, 52, 34);月份从0开始
  

• 日期格式化(了解)

• date.toLocalString();//本地风格的日期格式
  date.toLocaleDateString(); 	// 获取日期
  date.toLocaleTimeString();	// 获取时间
  

• 获取日期的指定部分 (★)

• getMilliseconds();	//获取毫秒值
  getSeconds();		//获取秒
  getMinutes();		//获取分钟
  getHours();			//获取小时
  getDay();			//获取星期，0-6    0：星期天
  getDate();			//获取日，即当月的第几天
  getMonth();			//返回月份，注意从0开始计算，这个地方坑爹，0-11
  getFullYear();		//返回4位的年份  如 2016
  
  // 思考：
  // 封装一个函数，返回当前的时间，格式是：yyyy-MM-dd HH:mm:ss  (2018-01-01 01:20:12)
  function getD() {
    var date = new Date();
    var year = date.getFullYear();
    var month =  date.getMonth() + 1;
    var day = date.getDate();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
  
    function addZero(num) {
       return num < 10 ? '0'+num : num;
    }
    return year+ '-'+ addZero(month) +'-'+  addZero(day) +' '+  addZero(h) +':' +  addZero(m) + ':' +  addZero(s);
  }
  

• 时间戳

• 实际项目中,用的最多的就是时间戳,,因为这个好计算,其他的都不好算
  var date = +new Date();//1970年01月01日00时00分00秒起至现在的总毫秒数
  // 思考
  // 如何统计一段代码的执行时间？  打印10000次
  // 开始 
  var start = +new Date();
  for ( var i = 1 ; i <= 1000 ; i++) {
      console.log(i);
  }
  // 结束
  var end = +new Date();
  console.log('时间戳 :' + (end-start));
  

Array对象

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

• 数组转换（★）— join

• // 语法：array.join(分隔符)
  // 作用：将数组元素连接起来以构建一个字符串
  var arr = [1,2,3,4,5];
  arr.join();//不传参数，默认按【,】进行拼接
  arr.join("");//按【"】进行拼接
  arr.join("-");//按【-】进行拼接
  

• 数组的增删操作（★）

• var arr = ['zs','ls','ww'];
  array.push(元素);//从后面添加元素，返回新数组的length
  array.pop();//从数组的后面删除元素，返回删除的那个元素
  array.unshift(元素);//从数组的前面的添加元素，返回新数组的长度
  array.shift();//从数组的最前面删除元素，返回删除的那个元素
  
  //总结:
  //1. shift 在前面 ,所以处理数组前面的
  //2. p+ 在后面,所以是处理后面的
  //3. unshift 比 shift 多个un,,所以就是加
  //4. 添加的都是返回长度
  //5. 删除的都是返回删除的元素
  //6. 添加要说明添加什元素,,删除直接删除
  
  //练习1
  var arr = ["刘备"];
  //添加数据后变成：["赵云","马超","刘备","关羽","张飞"]
  //删除数据后变成：["关羽","张飞"]
  
  //练习2
  var arr = ["赵云","马超","刘备","关羽","张飞"];
  //把数组的最后一个元素变成数组的第一个元素
  //把数组的第一个元素变成数组的最后一个元素
  

• 数组的翻转与排序

• array.reverse(); //翻转数组
  array.sort(); //数组的排序，默认按照 字母/首字符 顺序排序 => 1 11 2 3
  var arr1 =  ['a','d','b','c'];
  var arr2 = [3, 6, 1, 5, 10, 2,11];
  
  // sort方法可以传递一个函数作为参数,这个参数用来控制数组如何进行排序
  arr.sort(function(a, b){
    //如果返回值>0,则交换位置
    return a - b;
  });
  记忆 : b比a高
  
  //思考：
     //将[3, 6, 1, 5, 10, 2,11]从小到大排列
    var arr = [3, 6, 1, 5, 10, 2,11];
  	//将字符串数组按照字符长度从小到大排列
    var arr = ['b','a','c','u','z','e'];
  	//将学生数组按照年龄从大到小排列
    var arr = [18,34,21,20,66];
  

• 数组的拼接与截取

• //1. concat: 数组合并，不会影响原来的数组，会返回一个新数组。
  var newArray = array.concat(array2);
  
  //2. slice: 截取出来，既然是截取`出来`,,肯定要有个东西接收
  //原来的数组不受影响，
  // - slice() 全部截取出来
  // - slice(start) 从第start往后截取出来
  // - slice(start, end) 从第start开始删除,,不包括end   [start, end)
  var arr = ['zs','ls','ww','zl','xmg'];
  var arr = [0,1,2,3,4,5,6,7,8,9];
  var newArray = array.slice(begin, end);
  
  //3. splice: 数组任意地方删除或者添加元素   
  var arr = ['zs','ls','ww','zl','xmg'];
  // 原来的数组影响
  //- splice(start, deletedCount)   删除元素
  // 		- start 开始
  // 		- deletedCount 删除个数
  //- splice(start, deletedCount , item) 删除+添加,  第三个参数是在原来删除的位置上新加几个元素
  //- 特殊 : 
  //  splice(start, 0 , item)   就是在某个位置新加元素
  //练习：
    var arr = ["赵云","马超","刘备","关羽","张飞"];
  
    //截取["刘备","关羽"]
  
    //在刘备前面增加 马腾
  
    //删除关羽
  

  • 数组查找元素

      javascript
      //indexOf方法用来查找数组中某个元素 `第一次`出现的位置，如果找不到，返回-1
      array.indexOf(search, [fromIndex]);
    
      //lastIndexOf()方法用来查找数组中某个元素 `最后一次`出现的位置,如果找不到，返回-1
      array.lastIndexOf(search, [fromIndex]);
      
      var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    

    主要配合if语句的多

• 清空数组

• //1. array.splice(0,array.length);//删除数组中所有的元素
  //2．array.length = 0;//直接修改数组的长度
  //3．array = [];//将数组赋值为一个空数组，推荐
  

• 数组综合练习

• var arr = ["c", "a", "z", "a", "x", "a", "a", "z", "c", "x", "a", "x"]
  //1. 找到数组中第一个a出现的位置
  //2. 找到数组中最后一个a出现的位置
  //3. 找到数组中每一个a出现的位置
  //4. 数组去重，返回一个新数组
  //5. 获取数组中每个元素出现的次数
  // 新方法 :  if(arr[i] in obj) {} 判断元素是否在对象中
    var obj = {};
    for ( var i = 0 ; i < arr.length ; i++) {
        if (arr[i] in obj) {
          obj[arr[i]] += 1;
        } else {
          obj[arr[i]] = 1;
        }
    }
    console.log(obj);
  

基本包装类型
简单数据类型是没有属性和方法的。为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String/Number/Boolean。
基本包装类型：把基本类型包装成复杂类型。

var str = “abc”;
var result = str.indexOf(“a”);

// 发生了三件事情
1. 把简单类型转换成复杂类型：var s = new String(str);
2. 调用包装类型的indexOf方法：var result = s.indexOf(“a”);
3. 销毁刚刚创建的复杂类型 

总结 : js为了我们使用方便，浏览器允许使用简单类型直接调用方法，会自动把简单类型转换成复杂类型。

Number对象

Number对象是数字的包装类型，数字可以直接使用这些方法
toFixed(2); //保留2位小数
toString(); //转换成字符串

Boolean对象

Boolean对象是布尔类型的包装类型.
toString( ); //转换成字符串
undefined和null没有包装类型, 所以调用toString方法会报错

String对象

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

注意: 注意 : 操作字符串的方法都不会改变原来的字符串,,,所以需要返回

字符串是不可变的

• 查找指定字符的位置

• //indexOf: 获取某个字符串第一次出现的位置, 如果没有, 返回-1
  //lastIndexOf: 获取某个字符串最后一次出现的位置. 如果没有, 返回-1
  

• 去除空白

• trim();//去除字符串两边的空格，内部空格不会去除
  

• 大小写转换

  //toUpperCase：全部转换成大写字母
  //toLowerCase：全部转换成小写字母
  

• 字符串拼接与截取

• //字符串拼接
  //可以用concat，用法与数组一样，但是字符串拼串我们一般都用+
  
  //`字符串截取的方法有很多, 记得越多，越混乱，因此就记好用的就行
  
  //slice ：截取出来 从start开始, end结束，并且取不到end 和 substring一样`
  //substring : 从start开始，end结束，并且取不到end
  
  //substr : 从start开始，截取length个字符  ==  数组的 splice()
  
  总结: 优先使用 substr
  

• 字符串切割

• //split:将字符串分割成数组（很常用）
  //功能和数组的join正好相反。
  var str = "张三,李四,王五";
  var arr = str.split(",");
  

• 字符串替换

• var str = 'abcedabc'
  str = str.replace(/a/g,'c')
  replace(searchValue, replaceValue)  //  replace(old, new)
  // 参数：searchValue:需要替换的值  replaceValue:用来替换的值
  

• 遍历、获取

• var  str1 = 'abcoefoxyozzopp'
  for ( var i = 0 ; i < str1.length ; i++) {
      console.log(str1[i]);
  }
  str[0] == str.charAt(0)
  

• 练习
  //1. 截取字符串"我爱中华人民共和国"，中的"中华"
  //2. "abcoefoxyozzopp"查找字符串中所有o出现的位置
  //3. 把字符串中所有的o替换成!
  //4. 把一个字符串中所有的空格全部去掉