JavaScript系列之基础篇

Posted 2021-06-29 coderkey

十一，内置对象

1，什么是内置对象

1.1，内置对象的简介

（1）含义：

内置对象就是指js自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。

（2）类别：
JavaSsript中的对象分为3种：自定义对象、内置对象、浏览器对象。

2，Math 数学对象

2.1，Math 概述

（1）含义：

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

（2）语法：

  Math.PI    //圆周率
  Math.floor( )    //向下取整，往最小的取整  1.1~1.9结果都为1
  Math.ceil( )    //向上取整，往最大的取整  1.1~1.9结果都为2
  Math.round( )    //四舍五入，就近取整  -1.5结果为-1
  Math.abs( )    //绝对值   '1'结果为1  隐式转换
  Math.max( )    //求最大值
  Math.min( )    //求最小值

2.2，随机数方法 random

（1）含义：

返回一个随机的0 <= x < 1的小数，1不在里面。

（2）语法：

  Math.random( );

（3）例如：

  //1，得到两个数之间的随机整数，并且包含这2个整数
    function getRandomInt(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min; 
    }
     console.log(getRandomInt(1,10));

  //2，随机点名
     function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min; 
      }
      var arr = ['张三', '李四', '王五', '赵六', '王七'];
      console.log(arr[getRandomInt(0,arr.length -1 )]);

  //3，猜字游戏，随机生成1~10的整数，用户输入，直到猜到为止
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min; 
      }
      var random = getRandomInt(1,10);
      while(true) { //死循环
        var num = prompt('你来猜猜看，请输入1~10之间的整数');
        if (num > random) {
          alert('你猜大了');
        } else if (num < random) {
          alert('你猜小了');
        } else {
          alert('恭喜你！猜对了');
          break;
        }
      }

3，Date 日期对象

3.1，Date 概述

（1）含义：

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

（2）语法：

  var  date  =  new  Date( );   //创建一个日期对象 

（3）日期格式化：

方法名	说明	代码
getFullYear( )	获取当前年份	date.getFullYear( )
getMonth( )	获取当前月份（0-11）	date.getMonth( )
getDate( )	获取当天日期	date.getDate( )
getDay( )	获取星期几（周日0到周六6）	date.getDay( )
getHours( )	获取当前小时	date.getHours( )
getMinutes( )	获取当前分钟	date.getMinutes( )
getSeconds( )	获取当前秒钟	date.getSeconds( )

（4）例如：

  //格式化日期 年月日
  var date = new Date();
  console.log(date. getFullYear( ));   //返回当前日期的年2020
  console.log(date.getMonth( ) + 1);   //月份  返回的月份小于当前1个月 记得月份+1  
  console.log(date.getDate( ));   //返回的是几号
  console.log(date.getDay( ));   // 3  周一返回的是1，周六返回的是6但是周日返回的是0
  
   //我们写一个2019年5月1日星期三
  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]);

  //要求封装一个函数返回当前的分钟 格式00:00:00
   function getTime( )  {
   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(getTime( ));

  //倒计时
 function countDown(time) {
        var nowTime = +new Date();
        var inputTime = +new Date(time);
        var times = (inputTime - nowTime) / 1000;
        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('2020-7-11 03:20:20'));
   var date = new Date();
   console.log(date);

4，Array 数组对象

4.1，数组对象的创建

（1）语法：

   1，利用数组字面量创建数组 [ ]
    var  数组名  =  [ ];
   2，利用 new 创建数组
   var  数组名 = new  Array(); 

（2）例如：

  var arr1 = new Array(  );    //创建一个空的数组
  var  arr1  =  new  Array(2);    // 一个数表示数组长度为2，里面有两个空的数组元素
  var arr1  =  new  Array(2, 3, 4);    //两个数及以上表示数组元素  
  //等价于 [2, 3, 4]   里面有三个数组元素，分别是2 3 4

4.2，检测是否为数组的两种方式

（1）含义：

1，instanceof 运算符，它可以用来检测是否为数组。
2，Array.isArray(参数)；H5新增的方法，ie9以上版本。

（2）语法：

1，数组名.instanceof Array
2，Array.isArray(参数)

（3）例如：

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

4.3，添加数组元素的方法 push( )

（1）含义：

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

（2）语法：

数组名.push(参数…)

（3）例如：

  var  arr  =  [1，2，3]；
  arr.push(4,  5);    //[1,  2,  3,  4,  5]
  console.log(arr.push(4,  5));    //5
  console.log(arr);   //[1,  2,  3,  4,  5]

（4）注意：

1，push 是可以给数组追加新的元素。
2，push( ) 参数直接写数组元素就可以了。
3，push完毕之后，返回的结果是新的数组长度。
4，原数组也会发生变化。

4.4，添加数组元素的方法 unshift( )

（1）含义：

unshift( )在我们数组的开头，添加一个或者多个数组元素。

（2）语法：

数组名.unshift(参数…)

（3）例如：

  var  arr  =  [3，4，5]；
  arr.unshift(1,  2);    //[1,  2,  3,  4,  5]
  console.log(arr.unshift(1,  2));    //5
  console.log(arr);   //[1,  2,  3,  4,  5]  

（4）注意：

1，unshift 是可以给数组追加新的元素。
2，unshift( ) 参数直接写数组元素就可以了。
3，unshift 完毕之后，返回的结果是新的数组长度。
4，原数组也会发生变化。

4.5，删除数组元素的方法 pop( )

（1）含义：

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

（2）语法：

数组名.pop( )

（3）例如：

  var  arr  =  [1，2，3]；
  arr.pop( )； //[1,  2]
  console.log(arr.pop( ));    //3
  console.log(arr);   //[1,  2]  

（4）注意：

1，pop 是可以删除数组的最后一个元素，一次只能删除一个元素。
2，pop( ) 没有参数。
3，pop完毕之后，返回的结果是删除的那个元素。
4，原数组也会发生变化。

4.6，删除数组元素的方法 shift( )

（1）含义：

shift() 它可以删除数组开头第一个元素。

（2）语法：

数组名.shift( )

（3）例如：

  var  arr  =  [1，2，3]；
  arr.shift( )； //[2,  3]
  console.log(arr.shift( ));    //1
  console.log(arr);   //[2,  3]  

（4）注意：

1，shift 是可以删除数组的第一个元素，一次只能删除一个元素。
2，shift( ) 没有参数。
3，shift 完毕之后，返回的结果是删除的那个元素。
4，原数组也会发生变化。

4.7，数组索引的方法

（1）语法：

方法名	说明	返回值
indexOf	数组中查找给定元素的第一个索引	如果存在返回索引号，如果不存在，则返回-1
lastIndexOf	在数组中的最后一个的索引	如果存在返回索引号，如果不存在，则返回-1

（2）例如：

  var  arr = ['a',  'b',  'c',  'a'];
  console.log(arr.indexOf('a');    // 0
  console.log(arr.lastIndexOf('a');    // 3

  //数组去重
  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']);
   var demo = unique(['blue', 'green', 'blue']);
   console.log(demo);   //['blue','green']

4.8，数组转换为字符串的方法

（1）语法：

方法名	说明	返回值
toString( )	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join('分隔符')	方法用于把数组中所有元素转换为一个字符串	返回一个字符串
concat( )	连接两个或多个数组，不影响原数组	返回一个新的数组
slice( )	数组截取slice(begin, end)	返回被截取项目的新数组
splice( )	数组删除splice(第几个开始，要删除个数）	返回被删除项目的新数组，注意，这会影响原数组。

（2）例如：

   //toString( )
  var  arr  =  [1,  2,  3];
  console.log(arr.toString( ));    // 1,2,3
   //join('分隔符')
  var  arr  =  ['a',  'b',  'c'];
  console.log(arr.join( ));      // a,b,c
  console.log(arr.join('-' ));      // a-b-c

 var arr = ['a', 'b', 'c', 'd'];
    arr.splice(1,2);
    console.log(arr); //['a','d']
    var arr2 = ['e','f'];
    console.log(arr.concat(arr2)); // ['a', 'd', 'e', 'f']

5，字符串对象

5.1，基本包装类型

（1）含义：

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

5.2，字符串的不可变

（1）含义：

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

5.3，根据字符返回位置的方法

（1）含义：

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

（2）语法：

方法	说明
indexOf('要查找的字符',开始的位置)	返回指定内容在原字符串中的位置，如果找不到返回-1，开始的位置是index索引号。
lastIndexOf()	从后往前找，只找第一个匹配的

（3）例如：

  var  str  =  'abcdabcd';
  console.log(str.indexOf('a'));    // 0
  console.log(str.indexOf('a', 1));    // 4   索引号从1的位置开始往后查找

5.4，根据位置返回字符的方法

（1）语法：

方法名	说明	使用
charAt(index)	返回指定位置的字符(index 字符串的索引号)	str.char(0)
charCodeAt(index)	获取指定位置处字符的ASCII码(index 字符串的索引号)	str.charCodeAt(0)
str[index]	获取指定位置处字符	html5,IE8+支持和charAt( )等效

（2）例如：

  // 1，charAt(index) 根据位置返回字符
      var str = 'abcd';
      console.log(str.charAt(3));    // d
   //遍历所有字符
      for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));    // a b c d
      }
   // 2，charCodeAt(index) 返回相应索引号的字符ASCII值，目的是判断用户按下哪个键
      console.log(str.charCodeAt(3));   // 100
   // 3，str[index] H5新增的
      console.log(str[3]);    // d

5.5，字符串操作方法

（1）语法：

方法名	说明
concat(str1,str2,str3…)	用于连接两个或多个字符串。拼接字符串，等效于+，+更常用
substr(start,length)	从start位置开始(索引号），length截取的个数
slice(strat,end)	从start位置开始，截取到end位置，end取不到（它们两个都是索引号）
substring(start,end)	从start位置开始，截取到end位置，end取不到，但不接受负值。

（2）语法：

  // 1,concat('字符串1'，'字符串2'...)
      var str = 'hello';
      console.log(str.concat('world'));    // helloworld
  // 2,substr('截取的起始位置'， '截取几个字符')
      var str1 = 'abcdef';
      console.log(str1.substr(1,3));   // bcd  从索引号1开始，截取3个字符

5.6，替换字符串以及转换为数组的方法

（1）语法：

方法	说明
replace('被替换的字符串','替换为的字符串')	只会替换第一个需要替换的字符串
split('分隔符')	把字符串转换为数组

（2）例如：

  // 1，替换字符
  var str = 'bbcd';
  console.log(str.replace('b', 'a'));   //abcd 只会替换第一个b
  //有一个字符串 'abcoabcoabco' 要求把里面所有o替换为*
  var str1 = 'abcoabcoabco' ;
  while (str1.indexOf('o') !== -1) {
        str1 = str1.replace('o', '*');
   }
   console.log(str1);    //abc*abc*abc
   // 2，字符转换为数组
   var str2 = 'a,b,c,d';
   console.log(str2.split(','));    // ["a","b","c"]

---

十二，简单数据类型和复杂数据类型导读

1，简单数据类型和复杂数据类型

（1）含义：

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string, number, boolean, undefined, null
引用类型：复杂数据类型,在存储时变量中存储的仅仅是地址(引用) ，因此叫做引用数据类型，通过new关键字创建的对象(系统对象、自定义对象) ,如Object, Array, Date等

2，堆和栈

（1）堆栈空间分配区别：

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

（2）注意：

JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式。

3，简单数据类型的内存分配

（1）方式：

值类型（简单数据类型）：string，number, boolean, undefined, null
简单数据类型是存放在栈里面，里面直接开辟一个空间存放的是值。

4，复杂数据类型的内存分配

（1）方式：

引用类型（复杂数据类型）：通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等。
复杂数据类型，首先在栈里面存放地址，十六进制表示，然后这个地址指向堆里面的数据。真正的对象实例存放在堆空间中。

---