【JavaScript】巧用思維導圖輕松學習JavaScript的后續來了

前期更新了JavaScript 但是內容還沒有完 所以，你想要的巧用思維導圖輕松學習JavaScript的后續來了，并且文章末尾提供了好物分享呦

作用域——預決議以及代碼執行

1，預決議 會把js引擎里面所有的var以及function提升到當前作用域的最前面
2，代碼執行 按照代碼書寫的順序從上往下進行執行

變數提升和函式提升

預決議 分為 變數預決議（變數的提升）和 函式預決議（函式提升）
變數的提升：就是把所有的變數宣告提升到當前的作用域最前面 不提升賦值操作
函式提升：就是把所有的函式宣告提升到當前作用域的最前面

eg:

var num = 10;
fun();
function fun(){
console.log(num);
var num = 20
}

1，先進行外部預決議運行代碼

var num;//預決議 變數提升
function fun(){//預決議 函式提升  先外部 后區域
console.log(num);
var num = 20
}
num = 10;
fun（）；

2，在進行內部函式預決議運行代碼

var num；
function fun(){//函式內部預決議
var num；
console.log(num);
 num = 20；
}
num = 10;
fun（）；

3，代碼從上往下進行執行

var num; 
function fun(){
var num；
console.log(num);
 num = 20；
}
num = 10;
fun();
//所以輸出結果為undefined

eg:

fn();
console.log(c);//9
console.log(b);//9
console.log(a);//錯誤
function f1(){
var a = b = c = 9;
console.log(a);//9
console.log(b);//9
console.log(c);//9
}

注：

var a = b = c = 9;
相當于 var a = 9   b = 9  c = 9
其中 b c 沒有被宣告當作全域變數，而a當作為區域變數，則回傳的為錯誤

JavaScript的物件

物件是 無序 屬性 方法
物件是由屬性和方法組成
屬性：事物的特征 n 大小 顏色 主要是外在特性
方法：事物的行為 v 打電話 發資訊 主要是行為

利用自變數創造物件

語法：

var obj = { }//創建一個空的物件

舉例：

var obj = {
     uname : '張三楓',  //語法格式：用逗號隔開
     age:18,
     sex:'男'，
     sayHi :function(){       //方法
      console.log('hi~');
     }
}

注：
1，里面的屬性或者方法 我們采取鍵值對的方式 鍵 以及 屬性名 ： 值 屬性值
2，多個屬性或者方法之間用逗號進行隔開
3，方法冒號后面跟的是一個匿名函式
4，使用物件
呼叫物件的屬性 采用 物件名 . 屬性名
eg: console.log(obj.age);
5,呼叫屬性還有一種方法 物件名 [ ‘屬性名’]
6，呼叫物件的方法
obj.sayHi()；不要忘記小括號

變數和屬性總結：

變數和屬性的相同點：他們都是用來存盤資料的
變數和屬性的不同點：
變數單獨宣告并賦值 使用的時候直接寫變數名，單獨存在
屬性 在物件里面的不需要宣告 ，使用的時候語法形式為 物件.屬性

函式和方法總結：

函式和方法的相同點: 都是執行某些功能

函式：
function fn(){
}///函式 單獨宣告并呼叫
fn:function(){
}///方法///在物件里面   呼叫 物件.方法（）

利用 new Object 創建物件

var obj = new Object( );//創建空的物件
obj.uname = '徐文杰';
obj.age = 18;
obj.sayHi = function(){
console.log('hi~');
}

注：
1，利用等號進行賦值
2，用分號進行隔開

為什么利用建構式創建物件？
原因：以前的兩種創造物件的方式只能創造一個物件

建構式

1，利用函式：重復相同的代碼 稱為建構式
2，建構式：里面封裝的不是普通的代碼 而是 物件
3，建構式 就是把我們物件里面一些相同的屬性和方法抽象出來封裝到函式里面

語法：

function 建構式名（形參）{
     this.屬性 = 值；
     this.方法 = function（）{
        }
      new  建構式名（實參）；
}

舉例：

function Star(uname,age,sex){
  this.name = uname;
  this.age = age;
  this.sex = sex;

  }
 var idh = new Star('徐文杰'，18，'男')//呼叫函式回傳的是物件

注：

1,建構式名字首字母需要大寫
2,建構式不需要return 就可以回傳結果
3，呼叫建構式必須使用new
4，只要new Star() 呼叫函式就創建了一個物件
5，屬性和方法前面需要加上this

區別：

物件：是一個具體的事物
建構式：泛指的某一個大類 類似java里面的類
物件實體化:建構式創建物件的程序就是物件實體化

new關鍵字的作用

1，建構式在記憶體中創建一個空的物件
2，this指向創建的空物件
3，執行建構式里面的代碼 給這個空物件添加屬性和方法
4，回傳物件

遍歷物件 for in

語法 :

for (變數 in 物件){

 }

舉例：

var obj ={
  name:'徐文杰',
  age:18,
  sex:'男'
  }  

for( var k in obj){
console.log(k);// k 變數 輸出的是 屬性名
console.log(obj[k]);//輸出變數的屬性值 
}

注：

for in 里面的變數 喜歡寫k 或者key

內置物件

js 中的物件分為3種：自定義物件、內置物件、瀏覽器物件
內置物件 指js語言自帶的物件

由于物件里面的方法比較多，所以我們要學會看檔案

查檔案
MDN檔案.
1, 先查閱方法的功能
2，參閱方法的引數和型別
3，查看回傳值的意義和型別
4，通過demo進行測驗

Math物件

1, Math物件 不是建構式 不需要new 直接呼叫就行就行
2, 出現的不是物件 就回傳的為NAN

Math.max( ) //求最大值
console.log(Math.PI);//3.1425927
console.log(Math.max(1,99,3))//99

eg：利用物件封裝自己的數學物件 里面有PI以及最大值 和最小值

var myMath = {
     PI：3.1415927，
     max : function(){
    var max = argumentt[0];
for( var i = 1;i<argument.length;i++){
 if(arguments[i]<min){
  min = arguments[i];    
        }
    }
return min;
       }
    }
console.log(myMath.PI);
console.log(myMath.max(1,5,9));
console.log(myMath.min(1,5,9));

注：

Math.abs( )//絕對值
Math.floor( )//向下取整
Math.ceil( )//向上取整
Math.round()//四舍五入
特殊情況：5 特殊 它往大的取
random()//亂數 回傳一個隨機小數 0 =< x < 1之間

eg:想要得到兩個數之間的隨機整數 并且包含2個整數

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));

eg:隨機點名

var arr = ['張三'，'張三楓'，'徐文杰'，'李四'，'王麻子'];
console.log(arr[getRandom(0,4)]);

eg：猜數字游戲

function getRandom(min,max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
var random = getRandom(1,10);
while(true){
var num = prompt('你來猜？請輸入1-10之間的一個數字')；
  if(num>random){
       alert('你猜大了')；
     }
else if(num<random){
    alert('你猜小了')；
     }
else
   alert（'你猜對了'）；
   break;//退出整個回圈
  }

日期物件

日期物件（倒計時）是一個建構式 必須是使用new進行構造

1,創建一個物件

 var arr = new Arry();//創建一個陣列物件
 var obj = new Object();//創建一個物件實體

2，使用 date

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

注：

1，當里面沒有引數，就回傳當前時間
2，數字型 2019，10，11
字串型‘2019-10-2 8：8：8：8 使用的比較多

var date1 = new Date(2019,10,1);
console.log(date1);//數字型回傳的是11月 不是10月 
var date2 = new Date('2019-10-2 8：8：8：8');//字串 

回傳當前的日期的年份

var date = new Date();

console.log(date.getFullYear());

console.log(date.getMonth()+1);//回傳的月份小一個月，需要加1才為實際的日期

console.log(date.getDay());//周一回傳的是1 周六回傳的是6 周榷訓傳的是0、

eg: 今天是2020年5月1號 星期三

var date = new Date();
var year = date.getFullyear();
var mon = data.getMonth()+1;
var dates = data.getData();//號
var day = date.getDay();//星期
var arr = ['星期日'，'星期一'，'星期二'，'星期三'，'星期四'，'星期五'，'星期六'];
var day = date.getDay();//星期
console.log('今天是：' + year + '年'+ mon +'月'+dates + '日 ' + arr[day])；

時 分 秒

var date = new Date();
console.log(date.getHours());//小時
console.log(date.getMinutes());//分
console.log(date.getSeconds());//秒

eg:要求封裝一個函式回傳當前的時 分 秒

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();
     m = m<10?  '0'+s : s;
     return h +':'+m+':'+'s';
 }

獲取日期的總毫秒(時間戳)

Date物件基于1970年1月1日
1，通過 valueOf( ) getTime( )
var time = new Date();
console.log(date.valueOf( ));//現在時間距離1970年總的毫秒數
console.log(date.getTime());
2，簡單的寫法
var date1 = +new Date();// +new Date()回傳到總的毫秒數  常用
3 ，H5新增的獲得總的毫秒數
console.log(Date.now());

京東倒計時

來看看京東是什么樣的

核心演算法：
1，輸入的時間減去現在的時間
2，倒計時不能拿著時分秒進行相減導致負載 采取的是時間戳進行相減
3，再把總的毫秒數轉化成天以及分 秒等

換算公式：
d = parselnt(總秒數/60/60/24)//計算天數
h= parselnt(總秒數/60/60%24)//計算小時
m = parselnt(總秒數/60%60)//計算分數
s = parselnt(總秒數%60)//計算當前秒數

function conutDown(time){
var nowTime = +new Date();//獲取當前的時間
var inputTime = +new Date(time);//用戶輸入的時間
var times =（ inputTime - nowTime）/1000;//一秒等于1000毫秒
var d = parselnt(times/60/60/24);//計算天數
 d = d<10 ?  '0' + d : d;
var h= parselnt(times/60/60%24);//計算小時
 h = h<10 ?  '0' + h : h;
var m = parselnt(times/60%60);//計算分數
 m = m<10 ?  '0' + m : m;
var s = parselnt(times%60);/計算當前秒數
 s = s<10 ?  '0' + s : s;
return d +'天'+h +'時'+m +'分'+s +'秒'； 
  }
console.log(countDown('2019-5-1 18:00'));

關于我：

如果你喜歡我的博客，請給我一個贊👍 是我寫下去的動力！

我是涼心??姑娘！🉑?進我的博客！