1. 内置对象概念

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象。
前面两种对象是JS基础内容，属于 ECMAScript；第三个浏览器对象属于JS独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发。

2. 查文档

查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5应用的API。
MDN:MDN

3. `Math` 对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

属性、方法名	功能
`Math.PI`	圆周率
`Math.floor()`	向下取整
`Math.ceil()`	向上取整
`Math.round()`	四舍五入版就近取整注意 -3.5 结果是 -3
`Math.abs()`	绝对值
`Math.max()/Math.min()`	求最大和最小值
`Math.random()`	获取范围在[0,1)内的随机值

注意：上面的方法使用时必须带括号。

3.1 自定简单的`Math`对象


  let myMath = {
    PI: 3.141592653,
    max: function () {
      let max = arguments[0];
      for (let i = 1; i < arguments.length; i++) {
        if (arguments[i] > max) {
          max = arguments[i];
        }
      }
      return max;
    },
    min: function () {
      let min = arguments[0];
      for (let i = 1; i < arguments.length; i++) {
        if (arguments[i] < min) {
          min = arguments[i];
        }
      }
      return min;
    }
  }
  // 调用自定义对象
  console.log(myMath.max(1, 23, 5, 65, 98, 5));
  console.log(myMath.min(1, 2, 3, 60, 12, 45, 12));
  console.log(myMath.PI);

3.2 案例

猜数字小游戏:


  let num = prompt("现在我们开始一个猜数字游戏请输入一个您猜的数字:");
  console.log(typeof num);
  console.log(num);

  /**
   * 获取 min ~ max之间的随机数
   * @param min
   * @param max
   * @returns {*}
   */
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }

  let randomNum = getRandom(0, 50);
  console.log(randomNum);

  while (true) {
    if (randomNum > parseInt(num)) {
      num = prompt('您输入的数小了,请重新输入:');
    } else if (randomNum < parseInt(num)) {
      num = prompt('您输入的数大了,请重新输入:')
    } else if (randomNum === parseInt(num)) {
      alert('耶,输入正确...');
      break;
    }
  }

4. 日期对象`Date`

Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间。

4.1 使用`Date`实例化日期对象

获取当前时间必须实例化：

var now = new Date();

获取指定时间的日期对象:

 // 传递参数的方式
  let inputDate = new Date(2019, 10, 1);
  console.log(inputDate); // 输出是 11月

  // 字符串写法
  let strDate = new Date('2019-10-1 8:8:8');
  console.log(strDate);

  // 字符串的另一种写法
  let stringDate = new Date('2019/10/1 8:8:8');
  console.log(stringDate);

注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象

4.2 使用Date实例的方法和属性

Date实例的方法和属性

案例：格式化日期年月日


  let date = new Date();
  let year = date.getFullYear();// 获取当前日期的年
  let month = date.getMonth() + 1;  // 获取月份
  let dates = date.getDate(); // 获取日期的日
  // 取星期的方法 将星期日 到 星期六的所有字符串存到一个数组中
  let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  let day = date.getDay();
  console.log('今天是:' + year + '年' + month + '月' + dates + '日' + ' ' +  weeks[day]);

案例：格式化日期时分秒


  let time = new Date();// '2020-11-26 5:5:5'
  let h = time.getHours();
  let m = time.getMinutes()
  let s = time.getSeconds();
  // 优化时分秒显示 注意需要使用括号框起来 并使用三元运算符优化时间显示效果 
  console.log((h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s));

4.3 通过Date实例获取总毫秒数

总毫秒数：基于1970年1月1日（世界标准时间）起的时间。

获取总毫秒数的四种方式



  // 1. 通过valueOf()
  let date = new Date();
  console.log(date.valueOf());

  // 2. 通过getTime()的方式
  console.log(date.getTime());

  // 3. 通过 + new Date()的方式
  console.log(+new Date());

  // 4. 通过H5中的 now()
  console.log(Date.now());

  // 我们获取到的毫秒数有个好听的名字就叫时间戳

4.4 案例

案例：获取两段时间内相隔多少时分秒？


  function countDown(time) {
    let nowTime = +new Date(); // 返回的是当前时间总的毫秒数
    let inputTime = +new Date(time); // 返回用户输入的毫秒数
    let times = (inputTime - nowTime) / 1000;
    let d = parseInt(times / 60 / 60 / 24);
    let h = parseInt(times / 60 / 60 % 24);
    let m = parseInt(times / 60 % 60);
    let s = parseInt(times % 60);
    return '距离下班还有:' + d + '天' + h + '小时' + m + '分' + s + '秒';
  }
  console.log(countDown('2020-11-27 18:00:00')); // 秒数

5. 数组对象

5.1 创建数组的两种方式

字面量方式

示例代码如下:

// 1. 使用数组字面量的方式创建数组
  let arr = [1, 2, 3, 4, 5, 6, 7];
  console.log(arr);

new Array()

示例代码如下：

// 2. 使用new Array()的方式创建数组 let arrNew = new Array(5); 如果Array构造函数中只传递一个参数该参数表示的是数组的长度
  let arrNew = new Array(1, 2, 3, 4, 5, 6, 6);
  console.log(arrNew);

注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数

参数传递规则如下：

如果只传入一个参数，则参数规定了数组的长度。

如果传入了多个参数，则参数称为数组的元素。

5.2 检测是否为数组

`instanceof` 运算符

instanceof可以判断一个对象是否是某个构造函数的实例。

  /**
   * 数组反转
   * @param arr
   */
  function reverse(arr) {
    if (arr instanceof Array) {
      let newArr = [];
      for (let i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
      }
      return newArr;
    } else {
      return '请传递一个数组';
    }
  }

`Array.isArray()`

Array.isArray()用于判断一个对象是否为数组，isArray()是HTML5 中提供的方法:

// 判断一个变量是否是一个数组
console.log(Array.isArray([1, 2, 3]));

5.3 添加删除数组元素的方法

数组中有进行增加、删除元素的方法，部分方法如下表:

进行增加删除元素的方法

注意：push、unshift为增加元素方法；pop、shift为删除元素的方法

5.4 数组排序

数组中有对数组本身排序的方法，部分方法如下表

数组排序

注意：sort方法需要传入参数来设置升序、降序排序

如果传入“function(a,b){ return a-b;}”，则为升序;
如果传入“function(a,b){ return b-a;}”，则为降序。

5.5 数组索引方法

数组中有获取数组指定元素索引值的方法，部分方法如下表：

数组索引方法

重点案例：数组去重

  /**
   * 原理 我们遍历的就是旧数组，然后拿着旧数组元素去新数组中查询，如果该元素在新数组中不存在则将该元素存入新数组，否则不添加
   * https://segmentfault.com/a/1190000016418021?utm_source=tag-newest  JavaScript数组去重（12种方法，史上最全）
   * @param arr
   * @returns {*}
   */
  function unique(arr) {
    if (!Array.isArray(arr)) {
      console.log('传递的不是一个数组');
      return;
    }

    let newArray = [];
    for (let i = 0; i < arr.length; i++) {
      if (newArray.indexOf(arr[i]) === -1) { // 在arr中取元素放到 newArray中并判断是否已经存在该元素
        newArray.push(arr[i]); // push 在数组末尾添加元素
      }
    }
    return newArray;
  }

  let arr = ['a', 'a', 'c', 'x', 'a', 'x', 'c', 'b'];
  console.log(unique(arr));

5.6 数组转换为字符串

数组中有把数组转化为字符串的方法，部分方法如下表:

数组转换为字符串

注意：join方法如果不传入参数，则按照 “ , ”拼接元素

5.7 其他方法

数组中其他操作方法：

数组中其他操作方法

6.字符串对象

6.1 基本包装类型

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

let str = 'andy';
console.log(str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：

 // 1. 生成临时变量把简单类型包装为  复杂数据类型
  let temp = new String('andy');
  // 2. 赋值给我们声明的字符变量
  str = temp;
  // 3. 销毁临时变量
  temp = null;

6.2 字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
由于字符串的不可变，在大量拼接字符串的时候会有效率问题。

6.3 根据字符返回位置

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：

根据字符返回位置

  let str = 'this my name';
  console.log(str.indexOf('m'));

案例：查找字符串"obcoefoxoooosdooofodoasdoofdeooewrrvcofdf"中所有f出现的位置以及次数

let index = str.indexOf('f'); // 获取到第一个 f 出现的位置
  let num = 0;
  while (index !== -1) {
    console.log(index);
    num++;
    index = str.indexOf('f', index + 1);
  }
  console.log("o在字符串中出现的次数:" + num);

先查找第一个f出现的位置;
然后只要indexOf 返回的结果不是 -1 就继续往后查找。因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找。

6.4 根据位置返回字符

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：

根据位置返回字符

在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码，ASCII码对照表如下：

图片9.png

案例：判断一个字符串 'kiocioniodio' 中出现次数最多的字符，并统计其次数

技术支持：有一个对象判断它是否有某个属性

// 有一个对象来判断是否有该属性 对象['属性名']

  let o = {
    age: 23
  };

  if (o['for']) {
    console.log('有该属性');
  } else {
    console.log('没有该属性');
  }

核心算法：利用 charAt(） 遍历这个字符串,把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就 +1。遍历对象，得到最大值和该字符。注意：在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象中，对应的属性值是该字符出现的次数。

6.4 字符串操作方法

字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：

字符串操作方法

replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：如果需要替换字符串中所有的字符，需要使用循环替换的方式。

字符串.replace(被替换的字符串， 要替换为的字符串)；

split()方法

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。其使用格式如下：

字符串.split("分割字符")

操作代码


  // 1. concat() 方法用于连接两个或多个字符串。拼接字符串，等效于 + ，+ 更常用
  let strA = 'aaaa';
  let strB = 'bbbb';
  let strC = 'cccc';
  let strConcat = strA.concat(strB, strC);
  console.log(strConcat);

  // 截取字符串
  let helloStr = 'say hello ok!';
  let hello = helloStr.substr(4, 5); // 空格也算
  console.log(hello);

  // 截取字符串
  let okStr = 'say hello ok!';
  let ok = okStr.slice(10, 12);
  console.log(ok);

  // 替换字符串中的字符
  let replaceStr = 'like for hahaha';
  // 将其中的a字符替换为空字符
  // 使用循环替换的方式 替换字符串里面的全部需要替换的字符
  while (replaceStr.indexOf('a') !== -1) {
    replaceStr = replaceStr.replace('a', ' ');
  }
  console.log(replaceStr);

  // split() 方法用于将字符分割为数组
  let strSplit = 'zhangsan2rose2jack';
  let strArr = strSplit.split('2');
  console.log(strArr);

  // 字符串的大小写转换toUpperCase toLowerCase
  let strUpper = 'ZHANGSAN';
  let strLower = strUpper.toLowerCase();
  console.log(strLower);
  let newStrUpper = strLower.toUpperCase();
  console.log(newStrUpper);

【前端】09 - JavaScript基础-内置对象

1. 内置对象概念

2. 查文档

3. `Math` 对象

3.1 自定简单的`Math`对象

3.2 案例

4. 日期对象`Date`

4.1 使用`Date`实例化日期对象

4.2 使用Date实例的方法和属性

4.3 通过Date实例获取总毫秒数

获取总毫秒数的四种方式

4.4 案例

5. 数组对象

5.1 创建数组的两种方式

字面量方式

new Array()

注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数

5.2 检测是否为数组

`instanceof` 运算符

`Array.isArray()`

5.3 添加删除数组元素的方法

5.4 数组排序

注意：sort方法需要传入参数来设置升序、降序排序

5.5 数组索引方法

重点案例：数组去重

5.6 数组转换为字符串

注意：join方法如果不传入参数，则按照 “ , ”拼接元素

5.7 其他方法

6.字符串对象

6.1 基本包装类型

6.2 字符串的不可变

6.3 根据字符返回位置

案例：查找字符串"obcoefoxoooosdooofodoasdoofdeooewrrvcofdf"中所有f出现的位置以及次数

6.4 根据位置返回字符

案例：判断一个字符串 'kiocioniodio' 中出现次数最多的字符，并统计其次数

6.4 字符串操作方法

replace()方法

split()方法

操作代码

你可能感兴趣的:(【前端】09 - JavaScript基础-内置对象)

【前端】09 - JavaScript基础-内置对象

1. 内置对象概念

2. 查文档

3. Math 对象

3.1 自定简单的Math对象

3.2 案例

4. 日期对象Date

4.1 使用Date实例化日期对象

4.2 使用Date实例的方法和属性

4.3 通过Date实例获取总毫秒数

获取总毫秒数的四种方式

4.4 案例

5. 数组对象

5.1 创建数组的两种方式

字面量方式

new Array()

注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数

5.2 检测是否为数组

instanceof 运算符

Array.isArray()

5.3 添加删除数组元素的方法

5.4 数组排序

注意：sort方法需要传入参数来设置升序、降序排序

5.5 数组索引方法

重点案例：数组去重

5.6 数组转换为字符串

注意：join方法如果不传入参数，则按照 “ , ”拼接元素

5.7 其他方法

6.字符串对象

6.1 基本包装类型

6.2 字符串的不可变

6.3 根据字符返回位置

案例：查找字符串"obcoefoxoooosdooofodoasdoofdeooewrrvcofdf"中所有f出现的位置以及次数

6.4 根据位置返回字符

案例：判断一个字符串 'kiocioniodio' 中出现次数最多的字符，并统计其次数

6.4 字符串操作方法

replace()方法

split()方法

操作代码

你可能感兴趣的:(【前端】09 - JavaScript基础-内置对象)

3. `Math` 对象

3.1 自定简单的`Math`对象

4. 日期对象`Date`

4.1 使用`Date`实例化日期对象

`instanceof` 运算符

`Array.isArray()`