JS学习笔记（五）-JavaScript内置对象和数据类型总结与JS第一阶段个人小结

2021.1.15

JS学习笔记（五）

JS内置对象

内置对象

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

查文档

MDN

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

MDN官方网址：https://developer.mozilla.org/zh-CN/

如何学习对象中的方法

1. 查阅该方法的功能
2. 查看里面参数的意义和类型
3. 查看返回值的意义和类型
4. 通过demo进行测试

Math对象

Math数学对象不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可。例如：

console.log(Math.PI);//一个属性 圆周率
console.log(Math.max(-1,-10));//-1
console.log(Math.max(1,99,'Ludwig'));// NaN
console.log(Math.max());//-Infinity

练习：封装自己的数学对象
利用对象封装自己的数学对象，里面有PI、最大值和最小值。

<script>
    var myMath = {
      PI: 3.141592653,
      max: function() {
          var max = arguments[0];
          for (var i = 1; i < arguments.length; i++) {
              if (arguments[i] > max) {
                  max = arguments[i];
              }
            }
          return max;
      },
      min: function() {
          var min = arguments[0];
          for (var i = 1; i < arguments.length; i++) {
              if (arguments[i] < min) {
                  min = arguments[i];
              }
            }
          return min;
      }
    }
    console.log(myMath.PI);
    console.log(myMath.max(1, 9, 85, 7));
  </script>

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

Math.PI                 //圆周率
Math.floor()            //向下取整，往小了取（floor地板）
Math.ceil()             //向上取整，往大了取（ceil天花板）
Math.round()            //四舍五入版，就近取整。
                        //注意.5特殊，往大了取，如：-3.5结果是-3
Math.abs()              //绝对值
Math.max()/Math.min()   //求最大和最小值

Note：console.log(Math.abs(’-1’));//输出结果为1，说明abs()方法存在隐式转换，会把字符串型的’-1’转换为数字型的’-1’。

随机数方法random()

1. random()返回一个随机的小数。范围属于[0,1)。
2. 这个方法里面不跟参数。
3. 我们想得到两个数字之间的随机整数，并且包含这两个整数。

查阅MDN文档可知：
Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值，我们只需将其封装到函数里去,调用即可。

function getRandom(min,max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1,10));

4. 随机点名

var arr=['张三','李四','王五','陈六'];
console.log(arr[getRandom(0,arr.length-1)]);

日期对象

Date()日期对象是一个构造函数，必须使用new来调用创建我们的日期对象。

Note:
var arr=new Array();//创建一个数组对象
var obj=new Object();//创建了一个对象实例

使用Date

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

• 如果没有参数，返回当前系统时间
• 参数常用的写法
  • 数字型 2021,1,14
  • 字符串型 ‘2021-1-14 8:8:8’//常用

  var date1=new Date(2021,1,14);
  console.log(date1);//返回的是11月，不是10月
  var date2=new Date('2021-1-14 8:8:8');
  console.log(date2);
  

日期格式化

我们可以采用如下方法：

getFullYear();       //获取当前年
getMonth();          //获取当月(0-11)
getDate();           //获取当天日期
getDay();            //获取星期几(周日0~周六6)
getHours();          //获取当前小时
getMinutes();        //获取当前分钟
getSeconds();        //获取当前秒

Note:
1.输出月份的时候要记得加1
console.log(date.getMonth()+1);
2.输出今天周几，周一_{周六返回的是1}6，而周日返回的是0
console.log(date.getDay());

案例1：写一个 今天是2021年1月14日 周四

var date = new Date();//先创建对象实例
var year = date.getFullYear();
var month = date.getMonth()+1;
var dates = date.getDate();
var arr=['日','一','二','三','四','五','六'];
var day = date.getDay();
console.log('今天是'+year+'年'+month+'月'+dates+'日'+' '+'星期'+arr[day]);

案例2：要求封装一个函数返回当前的时分秒，格式为 08:08:08

function getTimer() {
    var time = new Date(); //这句话不能忘！一定要写！
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTimer());

获取日期的总的毫秒形式(时间戳)

Date对象是基于1970年1月1日(世界标准时间)起的毫秒数。
我们经常利用总的毫秒数来计算时间，因为它更精确。

Note：
获取Date总的毫秒数，不是当前时间的毫秒数，
而是距离1970年1月1号过了多少毫秒。

• 1.通过valueOf()、getTime()

  var date = new Date();
  console.log(date.valueOf());
  console.log(date.getTime());//我们现在的时间距离1970.1.1总的毫秒数。
  

• 2.简单的写法(最常用的写法)

  var date1 = +new Date();//如果参数不为空则返回的是括号里时间总的毫秒数。
  console.log(date1);
  

• 3.H5新增的方法Date.now();

  console.log(Date.now());
  

案例：倒计时

分析：

1. 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数。
2. 用时间戳来做。用户输入时间的总的毫秒数-现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
3. 把剩余时间的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）
   转换公式如下：
   • d = parseInt(总秒数/60/60/24);//计算天数
   • h = parseInt(总秒数/60/60%24);//计算小时
   • m = parseInt(总秒数/60%60); //计算分数
   • s = parseInt(总秒数%60); //计算当前秒数

<script>
    function countDown(time){
        var nowTime=+new Date();//如果括号为空，返回的是当前时间总的毫秒数
        var inputTime=+new Date(time);//如果括号非空，返回的是用户输入时间总的毫秒数
        var times=(inputTime-nowTime)/1000;//time是剩余时间总的毫秒数，1s=1000ms
        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('2021-1-16 00:00:00'));
    var date=new Date();
    console.log(date);
</script>

数组对象

数组对象的创建

创建数组对象有两种方式：

• 字面量方式
• new Array()

    var arr1=new Array();//创建一个空的数组
    var arr2=new Array(2);//创建一个长度为2的数组，里面有两个空的数组元素
    var arr3=new Array(2,3);//等价于[2，3]，里面有两个数组元素是2和3
  

检测是否为数组

1.instanceof运算符，它可以用来检测是否为数组。

var arr = [];
console.log(arr instanceof Array);//arr是否属于Array，如果属于是数组，返回true。

2.Array.isArray(参数); 用该方法检测是否为数组。//H5新增的方法

var arr = [];
console.log(Array.isArray(arr));

添加删除数组元素的方法

1. push()：在我们数组的末尾，添加一个或者多个数组元素 push 推

   var arr=[1,2,3];
   arr.push(4,'Ludwig');
   

   • 作用：push()可以给数组末尾追加新的元素
   • 参数：push()参数直接写数组元素就可以了
   • 返回值：push完毕后，返回的结果是新数组的长度
     console.log(arr.push(4,‘Ludwig’));//返回值是5

2. unshift：在我们的数组开头，添加一个或者多个数组元素

    var arr=[1,2,3];
    arr.unshift('red','blue');
   

   • 作用：usnhift()可以给数组开头追加新的元素
   • 参数：unshift()参数直接写数组元素就可以了
   • 返回值：unshift()完毕后，返回的结果是新数组的长度
     console.log(arr.unshift(4,‘Ludwig’));//返回值是5

3. pop()：它可以删除数组的最后一个元素

   arr.pop();
   console.log(arr);//返回剩下的数组
   console.log(arr.pop());//返回被删掉的元素
   

   • 作用：pop()可以删除数组的最后一个元素，但一次只能删一个
   • 参数：pop()没有参数
   • 返回值：pop()完毕之后，返回的结果是删除的那个元素

4. shift()：它可以删除数组的第一个元素

   arr.shift();
   console.log(arr);//返回剩下的数组
   console.log(arr.shift());//返回被删掉的元素
   

   • 作用：shift()可以删除数组的第一个元素，但一次只能删一个
   • 参数：shift()没有参数
   • 返回值：shift()完毕之后，返回的结果是删除的那个元素

数组排序

1. reverse() 翻转数组

   var arr=['8','1','Ludwig'];
   arr.reverse();
   console.log(arr);
   console.log(arr.reverse());
   

2. sort() 数组排序(冒泡排序)

   var arr=[3,4,7,1];
   arr.sort();
   console.log(arr);
   

   Note:数组元素只能是个位数
   如果是13，4，77，1，7。返回结果是1，13，4，7，77。错误。

   var arr=[13,4,77,1，7];
   arr.sort(function(){
     return a-b;//升序的顺序排列
     //return b-a;//降序的顺序排列
   });
   console.log(arr);
   

数组索引方法

1. indexOf()：数组中查找给定元素的第一个索引。如果找不到，则返回-1。

   var arr=['red','green','blue','pink'];
   console.log(arr.indexOf('blue'));//返回值2
   

2. lastIndexOf()：数组中的最后一个索引，从后往前找。找不到则返回-1。

案例：数组去重

1.目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去。
2.核心算法：遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，就添加，否则不添加。
3.我们怎么知道该元素没有存在？利用新数组.indexOf(数组元素)，
如果返回 -1 则说明新数组里面没有该元素。
4.封装一个去重的函数unique 独一无二的。

function unique(arr){
  var newArr = [];
  for(var i = 0;i < arr.length;i++){
    if(newArr.indexOf(arr[i]) === -1){
      newArr.push(arr[i]);
    }
  }
  return newArr;
}
var demo = unique(['c','a','z','a','x','a','x','c','b']);
console.log(demo);

数组转换为字符串

1. toString()：把数组转换成字符串，逗号分隔每一项。返回值是一个字符串。

   var arr = [1,2,3];
   console.log(arr.toString());
   

2. join(‘分隔符’)：把数组中的所有元素转换为一个字符串

   var arr = ['green','red','blue'];
   console.log(arr.join());//green,red,blue.如果没有参数默认逗号分隔
   console.log(arr.join('-'));//green-red-blue.
   

数组中的其他常用方法

1. concat():数组连接
   连接两个或多个数组，不影响原数组。
   返回值:返回一个新的数组。

   var arr1 = ['a','b','c'];
   var arr2 = ['d','e','f'];
   var arr3 = arr1.concat(arr2);
   console.log(arr3);//["a", "b", "c", "d", "e", "f"]
   

2. slice()：数组截取

   var color=['red','blue','green','black','yellow'];
   console.log(color.slice(2));//["green", "black", "yellow"]前两个截掉
   console.log(color.slice(2,4));//["green", "black"]
   //浅拷贝slice(begin,end),包括begin，不包括end。
   console.log(color.slice(1,5));//["blue", "green", "black", "yellow"]
   

3. splice()：删除或替换数组元素//此方法会改变原数组

   var months = ['Jan', 'March', 'April', 'June'];
   months.splice(1, 0, 'Feb');
   // replaces 0 element at index 1，即inserts at index 1
   console.log(months);
   // expected output: Array ["Jan", "Feb", "March", "April", "June"]
   months.splice(4, 1, 'May');
   // replaces 1 element at index 4
   console.log(months);
   // expected output: Array ["Jan", "Feb", "March", "April", "May"]
   

字符串对象

一个问题

var str = 'andy';
console.log(str.length);//4

对象，也就是复杂数据类型，才有属性和方法，
简单数据类型字符串为什么会有length属性呢？

基本包装类型

基本包装类型：就是把简单数据类型包装成为了复杂数据类型。

• 第一步：把简单数据类型包装为复杂数据类型

  var temp = new String('andy');
  

• 第二步：把临时变量的值给str

  str = temp;
  

• 第三步：销毁临时变量

  temp = null;
  

这样基本数据类型就有了属性和方法。
为了方便操作基本数据类型JavaScript提供了三个特殊的引用类型：
String，Number和Boolean。

字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中开辟了一个新的内存空间。因此我们不要大量的拼接字符串。

var str = '';
for (var i = 1;i <= 1000000000;i++){
  str += i;
}
console.log(str);//由于字符串的不变性，在不停开辟新的内存空间，所以可能会卡死。

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

根据字符返回位置

1. str.indexOf(‘要查找的字符’,[起始的位置])//中括号表示可选项。

var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春',3));//从索引号是3的位置开始往后查找

2. lastIndexOf()//从后往前查找，只找到第一个匹配的。
案例：查找字符串中某个字符串中某个字符出现的位置及次数

var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
while(index !== -1){
  console.log(index);
  num++;
  index = str.indexOf('0',index + 1);
}
console.log('o出现的次数是：'+num);

根据位置返回字符

1. charAt(index)：根据位置返回字符

   var str = 'andy';
   console.log(str.charAt(3));//y
   //遍历所有字符串所有的字符
   for (var i = 0;i < str.length;i++){
     console.log(str.charAt(i));
   }
   

2. charCodeAt(index)：返回指定位置处字符的ASCII码值
   目的：判断用户按下了哪个键。

   console.log(str.charCodeAt(0));//97
   

3. str[index]：获取指定位置处字符//HTML5新增

   console.log(str[0]);//a
   

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

//有一个对象
var obj = {
  age:18
}
if (obj['age']){//obj['age']相当于obj.age
//如果没有该属性返回的值就是undefined，在if中转化为false
  console.log('里面有该属性');
}else{
  console.log('没有该属性');
}

案例分析：
1.核心算法：利用charAt()遍历这个字符串
2.把每个字符都存储给对象，如果对象没有该属性就为1，如果存在了就+1
3.遍历对象，得到最大值和该字符

var str = 'abcoefoxyozzopp';
var obj = {};
for(var i = 0;i < str.length;i++){
  var chars = str.charAt(i);//chars是字符串的每一个字符
  if(obj[chars]){//obj[chars]得到的是属性值，相当于上文的obj.age
    obj[chars]++;
  }else{
    obj[chars] = 1;
  }
}
console.log(obj);
//遍历对象，用for...in
var max = 0;
var ch = '';
for(var k in obj){
  //k得到的是属性名
  //o[k]得到的是属性值
  if(o[k]>max){
    max = o[k];
    ch = k;
  }
}
console.log(max);
console.log('出现最多的字符是'+ch);

字符串操作方法

1. concat(str1,str2,str3…)
   concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用。

   var str = 'andy';
   console.log(str.concat('red'));//andyred
   

2. substr(start,length)

   var str = '改革春风吹满地';
   console.log(str.substr(2,2));//春风
   //第一个2是索引号的2，第二个2是截取长度
   

3. replace(‘被替换的字符’，‘替换为的字符’)：替换字符

   var str = 'andyandy';
   console.log(str.replace('a','b'));//bndyandy
   

   Note:它只会替换第一个字符。

   案例：把一个字符串里所有字符o全部替换为

   var str = 'abcoefoxyozzopp';
   while(str.indexOf('o') !== -1){
     str=str.replace('o','*');
   }
   console.log(str);//过滤文章敏感词
   

4. split(‘分隔符’) 字符转换为数组//join把数组转换为字符串
   split里的分隔符取决于字符串里是用什么隔开的

   var str1 = 'red,pink,blue';
   console.log(str1.split(','));//["red", "pink", "blue"]
   var str2 = 'red&pink&blue';
   console.log(str2.split('&'));//["red", "pink", "blue"]
   console.log(str2.split('l')); //["red&pink&b", "ue"]
   

5. toUpperCase()：转换大写

6. toLowerCase()：转换小写

JS简单类型与复杂类型（数据类型的总结）

简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，
复杂类型又叫做引用类型

• 值类型：简单数据类型/基本数据类型，在存储变量中存储的是值本身，因此叫做值类型。string，number，boolean，undefined，null

  Note:简单数据类型null很特殊，它返回的是一个空的对象object。
  因此，如果有个变量我们以后打算存储为对象，暂时还没想好放啥，这个时候就给null。

  var timer = null;
  console.log(typeof timer);//object
  

• 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型。可以通过new关键字创建对象(系统对象、自定义对象)，如：Object、Array、Date等。

堆和栈

在计算机中，操作系统会将内存分为两大类，堆和栈。
堆栈空间分配区别：

1. 栈(操作系统)：简单数据类型存放到栈里面
   由操作系统自动分配释放存放函数的参数值、局部变量的值等。
   其操作方式类似于数据结构的栈;
2. 堆(操作系统)：复杂数据类型存放到堆里面
   一般由程序员分配释放，存储复杂数据类型(对象)，
   若程序员不释放，由垃圾回收机制回收。

Note:JavaScript中没有堆栈的概念，通过堆栈的方式，可以更容易理解代码的一些执行方式，便于将来学习其他语言。

简单类型与复杂类型的内存分配

• 简单数据类型
  • 值类型(简单数据类型)：string，number，boolean，undefined，null
  • 值类型变量的数据存放在变量(栈空间)中，在栈里面，直接开辟一个空间，存放的是值。
• 复杂数据类型
  • 引用类型(复杂数据类型)：通过new关键字创建对象(系统对象、自定义对象)，如：Object、Array、Date等。
  • 首先是在栈里面存放地址，用十六进制表示，然后这个地址指向堆里面的数据。真正的对象实例存放到堆空间中。

简单类型传参

函数的形参也可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，形参在栈里也开辟一个新的空间，那么在方法内部堆形参做任何修改，都不会影响到外部变量。

复杂类型传参

函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实时把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

function Person(name){
  this.name=name;
}//这是一个构造函数
function f1(x){
  console.log(x.name);//2.刘德华
  x.name='张学友';
  console.log(x.name);//张学友
}
var p = new Person('刘德华');
console.log(p.name);//1.刘德华
f1(p);//x=p.x和p都是变量，p将自己的地址复制给x
console.log(p.name);//张学友

个人小结

今天完成了毕业设计的任务书，花了许多时间，晚上和舍友去学校北门外吃了烤鱼，耽搁了一点时间，现在是1月16日的凌晨2点16分。庆幸JavaScript第一阶段语法阶段基本告一段落，也即将迎来JavaScript的第二阶段Web APIs阶段的学习。五天时间对我个人而言，这个学习强度还是挺大的，身体有些疲倦，知识有些遗忘，但还是坚持下来了。坚持每天一篇博客，也看到了陌生人的鼓励，对一个初学者来说，是莫大的鼓舞，还会继续坚持还会继续努力。学校里已经没有什么人了，挺冷清，明天（就是今天16号）会全力完成开题报告的书写，并且和女朋友约了哥老官火锅，可能会停更一天。23分了，准备睡觉。