JS学习归纳7

最新推荐文章于 2024-08-12 23:09:11 发布

SPIRIT_SYF

最新推荐文章于 2024-08-12 23:09:11 发布

阅读量1k

点赞数 30

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/SPIRITE_SYF/article/details/137823577

版权

本文详细介绍了JavaScript中的内置对象，包括Math对象（如求绝对值、随机数）、Date对象（日期处理和格式化）、数组对象（创建、添加、排序和转换）以及字符串对象（包装、不可变性、操作方法）。通过实例演示展示了如何使用这些对象进行编程实践。

摘要由CSDN通过智能技术生成

本节的主要内容是：JS的内置对象、简单数据类型、复杂数据类型。

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象。上一节的末尾我们学习了对象的概念，准确来说属于自定义对象。本节将要学习内置对象。在后续的学习中再学习浏览器对象。

一、内置对象

内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。内置对象最大的优点就是帮助我们快速开发。JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

二、查阅使用方法---MDN

MDN: https://developer.mozilla.org/zh-CN/

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C 来查询。

三、Math对象

3.1 Math 成员

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

Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3 （往大取）
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值

3.2 封装自己的数学对象

封装一个自己的数学对象，包括pi、max、min

  <script>
    var mymath = {
      PI: 3.141592653,
      max: function () {
        var max = arguments[0];
        for (let i = 0; i < arguments.length; i++) {

          if (arguments[i] >= max) {
            max = arguments[i]
          }
        }
        return max
      },

      min: function () {
        var min = arguments[0];
        for (let i = 0; i < arguments.length; i++) {

          if (arguments[i] <= min) {
            min = arguments[i]
          }
        }
        return min
      }
    }
    console.log(mymath.PI);
    console.log(mymath.max(5, 9, 7, 11))

  </script>

3.3 随机数方法 random()

random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1。

//闭区间的书写方法
function getRandom(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min; 
}

写一个1-10猜数字例子方便理解：

  <script>
    var num = Math.floor(Math.random() * 10) + 1;
    var guess = prompt("输入您猜的值")
    for (let i = 0; i >= 0; i++) {

      if (guess > num) {
        guess = prompt("太大了，重新输入")
      }
      else if (guess < num) {
        guess = prompt("太小了，重新输入")
      } else {
        alert('恭喜猜对了')
        break
      }

    }
  </script>

写一个随机点名例子方便理解： getRandom必须会写

  <script>
    var getRandom = function (min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    var nameTable = ['张1', '张2', '张3', '张4', '张5', '张6', '张7', '张8', '张9'];
    alert(nameTable[getRandom(0, nameTable.length - 1)])
  </script>

四、日期对象

4.1 日期对象

Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用。

var now = new Date();
console.log(now);

日期对象的使用：

  <script>

    var date = new Date();
    alert(date);

    var date1 = new Date(1999, 5, 1);
    alert(date1);

    var date2 = new Date('1977-8-7 8:8:8');
    alert(date2);
  </script>

4.2 格式化---年月日星期

<script>
    var date1 = new Date();
    // alert(date.getFullYear());
    // alert(date.getMonth() + 1);//
    // alert(date.getDate());
    // alert(date.getDay() + 1);
    //格式化
    var year = date1.getFullYear();
    var month = date1.getMonth() + 1;
    var date = date1.getDate();
    var xingqi = date1.getDay() + 1;
    console.log(year + '年' + month + '月' + date + '日' + ' ' + '星期' + xingqi);
  </script>

4.3 格式化---日期时分秒

  <script>
    function getTime(params) {
      var date = new Date();
      var h = date.getHours();
      h = h < 10 ? '0' + h : h;
      var m = date.getMinutes();
      m = m < 10 ? '0' + m : m;
      var s = date.getSeconds();
      s = s < 10 ? '0' + s : s;

      alert(h + ':' + m + ':' + s + ' ');
    }
    getTime();
  </script>

4.4 时间戳

Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数。

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单写可以这么做
var now = +new Date();
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

4.5 倒计时

  <script>
    function gettime(time) {
      var nowtime = +new Date();
      var inputtime = +new Date(time);
      var time_left = (inputtime - nowtime) / 1000;
      var d = parseInt(time_left / 60 / 60 / 24); // 计算天数
      d = d < 10 ? '0' + d : d;
      var h = parseInt(time_left / 60 / 60 % 24) // 计算小时
      h = h < 10 ? '0' + h : h;
      var m = parseInt(time_left / 60 % 60); // 计算分数
      m = m < 10 ? '0' + m : m;
      var s = parseInt(time_left % 60); // 计算当前秒数
      s = s < 10 ? '0' + s : s;
      return d + 'd' + h + 'h' + m + 'm' + s + 's';
    }
    alert(gettime('2024-5-1 18:00:00'));
  </script>

五、数组对象

5.1 数组对象的创建

创建数组对象的两种方式

1、字面量方式 [ ]

2、new Array()

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

做一个筛选案例：只保存高于2000的

  <script>
    var arr = [1800, 5000, 2680, 5888, 6000, 1000];
    var newarr = [];
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > 2000) {
        newarr.push(arr[i]);
      }
    }
    alert(newarr);
  </script>

5.3 数组排序

var arr = [1,22,2,48,35,50,96];
arr.sort(function(a, b) {
 return b - a; // 降a序
 // return a - b; // 升序
});
console.log(arr);

5.4 数组索引方法

数组去重（重点案例）:

  <script>

    var arr = ['c', 'a', 'e', 'f', 'c', 'e', 'd'];

    function unique(arr) {
      var newarr = [];
      for (let i = 0; i < arr.length; i++) {
        if (newarr.indexOf(arr[i]) === -1) {
          newarr.push(arr[i]);
        }

      }
      return newarr;
    }

    newarr = unique(arr);
    alert(newarr);
  </script>

5.5 数组转换为字符串

  <script>
    arr = [1, 2, 3]
    console.log(arr.toString());//自动，分隔
    console.log(arr.join('~')); //自定义分隔
  </script>

5.6 数组拼接

六、字符串对象

6.1 基本包装

        基本包装类型：就是把简单数据类型包装成为了复杂数据类型。就可以使用属性和方法。
        1、把简单数据类型包装为复杂数据类型
        2、把临时变量的值给 str
        3、销毁这个临时变量

    <script>
        // 基本包装类型
        var str = '111';
        console.log(str.length);
        // 对象 才有 属性和方法   复杂数据类型才有 属性和方法 
        // 简单数据类型为什么会有length 属性呢？ 
        // 基本包装类型：  就是把简单数据类型 包装成为了 复杂数据类型 
        // (1) 把简单数据类型包装为复杂数据类型 
        var temp = new String('111');
        // (2) 把临时变量的值 给 str
        str = temp;
        // (3) 销毁这个临时变量
        temp = null;
    </script>

6.2 字符串的不可变性

        // 字符串的不可变性
        var str = '1';
        console.log(str);  //输出1
        str = '2';
        console.log(str);  //输出2

看似改变了，其实是新开辟了一个内存，让str指向新地方，旧的部分没有删除。

所以字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。

6.3 根据字符返回位置

举一个例子：

    <script>
        // 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])
        var str = '改革春风吹满地，中国人民真争气~';
        console.log(str.indexOf('春'));
        console.log(str.indexOf('春', 4)); // 从索引号是 3的位置开始往后查找
    </script>

第一个 str.indexOf('春')，从第0个位置开始查找，返回值是2；但是第二个从第四个位置开始查找，所以返回 -1；

举例：统计字符串中某个字符出现的次数和位置（面试题！！！）

    <script>
        var str = "aanjkskdoasudsaassa";
        var num = 0;
        var i = str.indexOf('a');
        while (i !== -1) {
            num++;
            console.log(i);
            i = str.indexOf('a', i + 1);
            // console.log(i);
        }
        console.log('a一共出现了' + num + '次');
       
    </script>

思路分析：
1、先查找第一个o出现的位置
2、然后只要indexOf 返回的结果不是 -1 就继续往后查找
3、因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找

6.4 根据位置返回字符

    <script>
        // 根据位置返回字符
        // 1. charAt(index) 根据位置返回字符
        var str = '123456';
        console.log(str.charAt(3)); //4
        // 遍历所有的字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
        // 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 
        console.log(str.charCodeAt(0)); //1的ASCII 49
        // 3. str[index] H5 新增的
        console.log(str[0]); // 1
    </script>

同样设计一个案例，统计字符串中出现次数最多的字符，并统计其次数

    <script>
        var obj = {};
        var str = 'abcshdfacaaassexa sfgh';
        var num = 0;
        var maxchar;
        for (let i = 0; i < str.length; i++) {
            var temp = str.charAt(i);

            if (obj[temp]) {
                obj[temp]++
            } else {
                obj[temp] = 1;
            }

        }

        for (let i = 0; i < str.length; i++) {
            var temp = str.charAt(i);
            if (obj[temp] > num) {
                num = obj[temp];
                maxchar = temp;
            }

        }

        console.log('字符串中出现最多的是' + maxchar);
        console.log('一共出现了' + num + '次');
    </script>

6.5 字符串的操作方法

像数组中的splice。

6.6 replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符。

注意：只替换第一次出现的。

用法：replace(被替换的字符串，要替换为的字符串)；

案例：把所有的a用*代替

        var str1 = 'agsjccaaasoejf';
        while (str1.indexOf('a') !== -1) {
            str1 = str1.replace('a', '*');
        }
        console.log(str1);

6.7 split()方法

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

和join刚好是相反操作。

var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]

6.8 大小写转换

1、toUpperCase() //转换大写

2、toLowerCase() //转换小写

SPIRIT_SYF

关注

30
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
JS学习归纳7

上一节的末尾我们学习了对象的概念，准确来说属于自定义对象。
复制链接

扫一扫