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

關於我：

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

我是涼心❤️姑娘！🉑️進我的部落格！