js对象

对象就是一组无序的相关属性和方法的集合。

简单声明及使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
  // 1、声明对象
  // 声明对象里面的属性或方法使用键值对的形式， 键 属性名 : 值 属性值
  // 多个属性或方法中间用逗号隔开
  // 方法冒号后面跟的是一个匿名函数
  var obj = {
    name: 'zhangsan',
    age: 18,
    sex: '男',
    sayHi: function () {
      console.log('sayHi ~~ hello');
    }
  }
  // 2、使用对象
  // 2.1 方法一，直接用  对象名.属性名 这种方式调用
  console.log(obj.name);

  // 2.2 方法二，使用 对象名['属性名'] 调用
  console.log(obj['age']);

  // 2.3 调用对象的方法
  obj.sayHi()
</script>

遍历对象内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  // 1、声明对象
  var obj = {
    name: 'zhangsan',
    age: 18,
    sex: '男'
  }

  // 通过for遍历对象中的属性
  for (key in obj) {
    // console.log(key);            key 变量输出得到的是属性名
    // console.log(obj[key]);       obj[key] 得到的是属性值
    console.log(key + ': ' + obj[key]);
  }
</script>

js内置对象

js中的对象分为3种：自定义对象、内置对象、浏览器对象。

前两种对象是js基础内容，属于ecmascript；第三个浏览器对象属于js独有的。

Math数学对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
  // 取最大值和最小值
  console.log(Math.max(1, 9, 5, 8));   // 求最大值 9
  console.log(Math.min(9, 23, 8, 1));  // 求最小值 1

  // 取绝对值
  console.log(Math.abs(1));     // 1
  console.log(Math.abs(-1));    // 1
  console.log(Math.abs('-1'));  // 1     隐式转换， 字符型 -1 会转换成数字型

  // 向下取整，往最小了取整
  console.log(Math.floor(1.1));   // 1
  console.log(Math.floor(1.9));   // 1

  // 向上取整，往最大了取整
  console.log(Math.ceil(1.1));    // 2
  console.log(Math.ceil(1.9));    // 2

  // 四舍五入
  console.log(Math.round(1.1));   //  1
  console.log(Math.round(1.6));   //  2

  // 取两个数值之间的随机整数
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  console.log(getRandom(1, 9999));

  // 随机点名示例
  var arry = ["张三", '李四', '王五', '赵六', '孙七'];
  console.log(arry[getRandom(0, arry.length - 1)]);
</script>

猜数字小游戏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
  // 取两个数值之间的随机整数
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  var num = getRandom(1, 20)
  var inputNum
  console.log(num);
  while (inputNum != num) {
    inputNum = prompt('请输入你猜的数字')
    if (inputNum > num) {
      alert('你输入的数字' + inputNum + '大了')
    } else if (inputNum < num) {
      alert('你输入的数字' + inputNum + '小了')
    } else {
      alert('恭喜你猜对了，正确数字是：' + num)
      break
    }
  }
</script>

Date时间对象

获取当前时间的年月日时分秒示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
  var date = new Date();
  console.log(date.getFullYear());      // 返回当前日期的年 2022
  console.log(date.getMonth() + 1);      // 返回当前日期的月份会小1个月， 记得月份+1
  console.log(date.getDate());          // 返回当前的几号
  console.log(date.getDay());           // 返回星期几，周一至周六是返回1-6，周日返回0

  // 获取今天时间拼接案例
  var year = date.getFullYear();
  var month = date.getMonth();
  var dates = date.getDate();
  var hours = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();
  var zhou = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  var day = date.getDay();

  console.log('今天是'
    + year
    + '年'
    + month
    + '月'
    + dates
    + '日 '
    + hours
    + '点'
    + minute
    + '分'
    + second
    + '秒 '
    + zhou[day]);
</script>
获取当前时间函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
  function getTimer() {
    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

    return h + ':' + m + ':' + s
  }

  console.log(getTimer());
</script>
获取时间戳
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  // 获取时间戳的三种方法
  var date = new Date();
  // 方法一：valueOf() 和 getTime()
  console.log(date.valueOf());
  console.log(date.getTime());

  // 方法二：简单的写法，也是最常用的写法
  var date1 = +new Date();
  console.log(date1);

  // 方法三：H5新增的
  console.log(Date.now());
</script>
时间戳与时间互转

特定时间转换成时间戳

1
2
3
4
5
<script>
  // 将时间转换成时间戳
  var oldTime = (new Date("2020/05/26 17:52:20")).getTime()/1000;
  console.log(oldTime); // 1590486740
</script>

时间戳转换成时间

1
2
3
4
5
6
7
<script>
  // 时间戳转换成时间格式
  function getLocalTime(nS) {
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
  }
  console.log(getLocalTime('1653558886'));  // 2022/5/26 17:54 
</script>
倒计时案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
    // 倒计时效果
    // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
    // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
    // 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
    // 转换公式如下： 
    //  d = parseInt(总秒数/ 60/60 /24);    //  计算天数
    //  h = parseInt(总秒数/ 60/60 %24)   //   计算小时
    //  m = parseInt(总秒数 /60 %60 );     //   计算分数
    //  s = parseInt(总秒数%60);            //   计算当前秒数
    function countDown(time) {
        var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
        var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
        var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
        var d = parseInt(times / 60 / 60 / 24); // 天
        d = d < 10 ? '0' + d : d;
        var h = parseInt(times / 60 / 60 % 24); //时
        h = h < 10 ? '0' + h : h;
        var m = parseInt(times / 60 % 60); // 分
        m = m < 10 ? '0' + m : m;
        var s = parseInt(times % 60); // 当前的秒
        s = s < 10 ? '0' + s : s;
        return d + '天' + h + '时' + m + '分' + s + '秒';
    }
    console.log(countDown('2019-5-1 18:00:00'));
    var date = new Date();
    console.log(date);
</script>

array数组对象

数组的增加删除元素

数组内添加元素

1
2
3
4
5
6
7
8
9
10
11
<script>
  var arry = [1, 2, 3, 'zhangsan']
  // push() 会在数组的末尾添加一个或多个数组的元素。
  // push添加元素之后会返回新数组的长度。
  console.log(arry.push('lisi')); // 数组长度返回 5
  console.log(arry);

  // unshifit() 会在数组的开头 添加一个或多个数组元素。
  console.log(arry.unshift('wangwu'));
  console.log(arry);
</script>

数组内删除元素

1
2
3
4
5
6
7
8
9
10
11
12
<script>
  var arry = [1, 2, 3, 'zhangsan']
  // pop() 会删除数组内最后一个元素，一次只能删除一个元素，不需要传递参数
  // 返回值是删除了什么元素，就返回元素内容。
  console.log(arry.pop());
  console.log(arry);

  // shift() 会删除数组内第一个元素，一次只能删除一个元素，不需要传递参数
  // 返回值是删除了什么元素，就返回元素内容。
  console.log(arry.shift());
  console.log(arry);
</script>
数组的翻转
1
2
3
4
<script>
  var arry = [1, 2, 3, 'zhangsan']
  console.log(arry.reverse());
</script>
数组排序
1
2
3
4
5
6
7
<script>
  var arry = [3, 42, 71, 1]
  console.log(arry.sort(function (a, b) {
    return a - b;     // 升序排序
    return b - a;     // 降序排序
  }));
</script>
数组的索引
1
2
3
4
5
6
7
8
9
10
<script>
  var arry = [3, 42, 71, 1]

  // 从前往后查询71这个元素在arry数组中哪个索引号，只返回第一个71的索引号
  // 找不到元素时返回 -1
  console.log(arry.indexOf(71));

  // 从后往前查询71这个元素在arry数组中哪个索引号，只返回第一个71的索引号
  console.log(arry.lastIndexOf(71));
</script>
数组转换成字符串
1
2
3
4
5
6
7
8
9
<script>
  // 方法1 直接转换，结果为,逗号分割
  var arry1 = [3, 1, 71, 1]
  console.log(arry1.toString());

  // 方法2 ,可以指定分隔符，默认为逗号
  var arry2 = [3, 1, 71, 1]
  console.log(arry2.join('#')); // 3#1#71#1
</script>

string字符串对象

字符串所有的方法，都不会修改字符串本身，操作完成后会返回一个新的字符串

查找字符串索引号
1
2
3
4
5
6
7
8
9
<script>
  // 从前往后查找字符串，并返回字符串的索引号
  var str = '我爱你中国，我爱golang'
  console.log(str.indexOf('爱'));
  console.log(str.indexOf('爱', 2));  // 指定从哪个索引号之后开始查找

  // 从后往前查找字符串，并返回字符串的索引号
  console.log(str.lastIndexOf('爱'));
</script>
字符串替换
1
2
3
4
5
<script>
  // 从前往后查找字符串，并返回字符串的索引号
  var str = '我爱你中国，我爱golang'
  console.log(str.replace('golang','JavaScript'));  // 我爱你中国，我爱JavaScript
</script>
字符串分割转数组
1
2
3
4
5
6
<script>
  // 将字符串按指定分隔符切割，并返回一个数组
  var str = '1,2,3,4'

  console.log(str.split(','));  // ['1', '2', '3', '4']
</script>