js基礎

1.資料類型

JS組成

ECMAScript——JavaScript文法

DOM——頁面文檔對象模型

BOM——浏覽器對象模型

資料存儲機關

大小關系：bit < byte < kb < GB < TB<.....

位(bit)： 1bit 可以儲存一個 0 或者 1 （最小的存儲機關）
位元組(Byte)：1B = 8b
千位元組(KB)：1KB = 1024B
兆位元組(MB)：1MB = 1024KB
吉位元組(GB): 1GB = 1024MB
太位元組(TB): 1TB = 1024GB

輸入輸出語句

方法	說明	歸屬
alert(msg)	浏覽器彈出警示框	浏覽器
console.log(msg)	浏覽器控制台列印輸出資訊	浏覽器
prompt(info)	浏覽器彈出輸入框，使用者可以輸入	浏覽器

alert() 主要用來顯示消息給使用者，console.log() 用來給程式員自己看運作時的消息。

聲明變量

//  聲明變量  
var age; //  聲明一個 名稱為age 的變量

指派

變量的初始化

聲明一個變量并指派， 我們稱之為變量的初始化。

資料類型簡介

Nunber 數字型，包含整型和浮點型，在JS中八進制前面加0，十六進制前面加 0x

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324
alert(Infinity);  // Infinity 無窮大
alert(-Infinity); // -Infinity 無窮小
alert(NaN);       // NaN , Not a number，代表一個非數值

isNaN用來判斷一個變量是否為非數字的類型，傳回 true 或者 false

文法： var 變量名A = isNaN(變量名B)

String 字元串型

轉義符	解釋說明
\n	換行符，n 是 newline 的意思
\ \	斜杠 \
’	’ 單引号
"	”雙引号
\t	tab 縮進
\b	空格，b 是 blank 的意思

字元串長度 —— 文法：文法： var 變量名A = 變量名B.length

字元串拼接

多個字元串之間可以使用 + 進行拼接，其拼接方式為字元串 + 任何類型 = 拼接之後的新字元串

拼接前會把與字元串相加的任何類型轉成字元串，再拼接成一個新的字元串

如果變量兩側都有字元串拼接，口訣“引引加加 ”，删掉數字，變量寫加中間

Boolean 布爾值類型，如true、false,等價于1和0、
Undefined 未定義——一個聲明後沒有被指派的變量會有一個預設值undefined
Null 空值——一個聲明變量給 null 值，裡面存的值為空

擷取變量資料類型

typeof 可用來擷取檢測變量的資料類型

var num = 18;
console.log(typeof num) // 結果 number

資料類型轉換

轉換為字元串

1.toString() 文法：alert(變量名.toString())

2.String()強制轉換文法：alert(String(變量名))

3.加号拼接字元串：和字元串拼接的結果都是字元串（隐式轉換）
轉換為數字型

1.parseInt(string)函數文法：parseInt(’string‘)

2.parseFloat(string)函數文法：parseInt(’string‘)

3.Number()強制轉換文法：Numer(‘string’)

4.js隐式轉換：利用算術運算隐式轉換為數值型比如：‘12’-0
轉換為布爾型

Boolean()函數文法：Boolean(‘string’)

關鍵字

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

2.運算符、流程控制、循環

遞增運算符

++num 前置遞增，就是自加1，類似于 num = num + 1，但是 ++num 寫起來更簡單。

使用口訣：先自加，後傳回值

num++ 後置遞增，就是自加1，類似于 num = num + 1 ，但是 num++ 寫起來更簡單。

使用口訣：先傳回原值，後自加

比較運算符

< > <== >== == != === !==

邏輯運算符

與&& 或|| 非!

流程控制

if 語句

// 适合于檢查多重條件。
if (條件表達式1) {
    語句1；
} else if (條件表達式2)  {
    語句2；
} else if (條件表達式3)  {
   語句3；
 ....
} else {
    // 上述條件都不成立執行此處代碼
}

三元表達式

表達式1 ? 表達式2 : 表達式3;

switch分支流程控制

switch( 表達式 ){ 
      case value1:
          // 表達式 等于 value1 時要執行的代碼
          break;
      case value2:
          // 表達式 等于 value2 時要執行的代碼
          break;
      default:
          // 表達式 不等于任何一個 value 時要執行的代碼
  }

注意：執行case 裡面的語句時，如果沒有break，則繼續執行下一個case裡面的語句。

for循環

for(初始化變量; 條件表達式; 操作表達式 ){
    //循環體
}

while循環

while (條件表達式) {
    // 循環體代碼 
}

do-while循環

do {
    // 循環體代碼 - 條件表達式為 true 時重複執行循環體代碼
} while(條件表達式);

continue

continue 關鍵字用于立即跳出本次循環，繼續下一次循環（本次循環體中 continue 之後的代碼就會少執行一次）

break

立即跳出整個循環（循環結束）

3.數組、函數

建立數組

利用 new 建立數組

var 數組名 = new Array() ；
var arr = new Array();   // 建立一個新的空數組

注意 Array () ，A 要大寫

利用數組字面量建立數組

//1. 使用數組字面量方式建立空的數組
var  數組名 = []；
//2. 使用數組字面量方式建立帶初始值的數組
var  數組名 = ['小白','小黑','大黃','瑞奇'];

數組中新增元素

函數的使用

聲明函數

// 聲明函數
function 函數名() {
    //函數體代碼
}

調用函數

// 調用函數
函數名();  // 通過調用函數名來執行函數體代碼

函數的參數

形參：函數定義時設定接收調用時傳入
實參：函數調用時傳入小括号内的真實資料

函數的傳回值

return 語句

在使用 return 語句時，函數會停止執行，并傳回指定的值
如果函數沒有 return ，傳回的值是 undefined

arguments的使用

當不确定有多少個參數傳遞的時候，可以用 arguments 來擷取

arguments展示形式是一個僞數組，可以進行周遊

具有 length 屬性
按索引方式儲存資料
不具有數組的 push , pop 等方法

4.作用域、預解析、對象

JavaScript（es6前）中的作用域有兩種：

全局作用域在函數内部沒有聲明直接指派的變量屬于全局變量

局部作用域（函數作用域）

預解析

預解析：在目前作用域下, JS 代碼執行之前，浏覽器會預設把帶有 var 和 function 聲明的變量在記憶體中進行提前聲明或者定義。
代碼執行：從上到下執行JS語句。

預解析會把變量和函數的聲明在代碼執行之前執行完成。

對象

所有的事物都是對象，對象是由屬性和方法組成的

屬性：事物的特征，在對象中用屬性來表示（常用名詞）
方法：事物的行為，在對象中用方法來表示（常用動詞）

建立對象的三種方式

1.利用字面量建立對象

var 對象名 = {
   屬性1：屬性值1;
  屬性2：屬性值2;
  .......
    sayHi : function(){
        alert('大家好啊~');
    }
};

調用對象——對象名.屬性名或對象名[‘屬性名’]

調用對象方法——對象名.方法名()

2.利用 new Object 建立對象

通過内置構造函數Object建立對象，此時變量已經儲存了建立出來的空對象

通過對象操作屬性和方法的方式，來為對象增加屬性和方法

比如——對象名1.屬性1=’XXX‘;

3.利用構造函數建立對象

function 構造函數名(形參1,形參2,形參3) {
     this.屬性名1 = 參數1;
     this.屬性名2 = 參數2;
     this.屬性名3 = 參數3;
     this.方法名 = 函數體;
}

構造函數的調用格式

var obj = new 構造函數名(實參1，實參2，實參3)

以上代碼中，obj即接收到構造函數建立出來的對象

周遊對象

其文法如下：

for (var 變量 in 對象名字) {
    // 在此執行代碼
}

5.内置對象

Math對象

屬性、方法名	功能
Math.PI	圓周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版就近取整注意 -3.5 結果是 -3
Math.abs()	絕對值
Math.max()/Math.min()	求最大和最小值
Math.random()	擷取範圍在[0,1)内的随機數

// Math随機數方法  包含兩端的2個數字
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}
 console.log(getRandom(1, 10));

日期對象

擷取目前時間必須執行個體化：

擷取指定時間的日期對象

var future = new Date('2019/5/1');//或者 （'2019-10-10 8:8:8'）

 // 傳回目前年份
        console.log(date.getFullYear());
        // 傳回目前月份 數值比實際月份小1  需要＋1
        console.log(date.getMonth() + 1);
        // 傳回目前日期是本月的多少日
        console.log(date.getDate());
        // 傳回目前日期是周幾  注意：傳回目前是周幾  周日傳回值為0
        console.log(date.getDay());
         // 傳回目前小時
        console.log(date.getHours());
		  // 傳回目前分鐘
        console.log(date.getMinutes());
		  // 傳回目前秒鐘
        console.log(date.getSeconds());

擷取總毫米數

基于1970年1月1日（世界标準時間）起的毫秒數

擷取總毫秒數如下

// 執行個體化Date對象
var now = new Date();
// 1. 用于擷取對象的原始值
console.log(date.valueOf())	
console.log(date.getTime())	
// 2. 簡單寫可以這麼做
var now = + new Date();			
// 3. HTML5中提供的方法，有相容性問題
var now = Date.now();

數組對象

檢測是否為數組

1.instanceof 可以判斷一個對象是否是某個構造函數的執行個體傳回值為true或者false

文法：數組名 instanceof Array

比如：console.log(arr instanceof Array);

2**.Array.isArray(數組名)**用于判斷一個對象是否為數組傳回值為true或者false 是 HTML5 中提供的方法

添加删除數組元素

方法名	說明	傳回值
push(參數1…)	末尾添加一個或多個元素–數組名.push(要添加的)	新的長度
pop()	删除最後一個元素，數組長度減一	删除的元素值
unshift(參數1…)	開頭添加一個或多個元素	新的長度
shift()	删除第一個元素，數組長度減一	第一個元素值

注意：push、unshift為增加元素方法；pop、shift為删除元素的方法

數組排序

方法名	說明
reverse()	颠倒數組中元素順序
sort()	對數組的元素進行排序

注意：sort方法需要傳入參數來設定升序、降序排序

如果傳入“function(a,b){ return a-b;}”，則為升序
如果傳入“function(a,b){ return b-a;}”，則為降序

數組轉換為字元串

1.toString() 把數組轉換成字元串，逗号分隔每一項

2.join(‘分隔符’) 把數組中的所有元素轉換為一個字元串

注意：二者均傳回一個字元串，join方法如果不傳入參數，則按照 “ , ”拼接元素

數組對象轉換為字元串格式

JSON.stringify()

其他方法

數組連接配接 concat(‘連接配接内容’)

數組截取字元串 slice(截取的起始位置，截取的數量)

數組替換 replace(‘被替換的字元’,‘替換為的字元’) 隻會替換第一個

數組根據索引号删除相關内容 splice(索引号,從索引号處開始要删除的數量 )

字元串對象

js 會把基本資料類型包裝為複雜資料類型

字元串轉換為數組對象

JSON.parse()

字元串操作方法

連接配接字元串 str.concat(‘連接配接内容’)

查找字元串 str.substr（start,length）從start位置開始，length取的個數

截取字元串 slice(start,end) 從start位置開始，截取到end位置，end取不到

替換字元串 str.replace(‘被替換的字元’,‘替換為的字元’) 隻會替換第一個

字元轉換為數組 str.split(‘分隔符’)

前端Web--JS基礎部分js基礎

js基礎

1.資料類型

2.運算符、流程控制、循環

3.數組、函數

4.作用域、預解析、對象

5.内置對象

繼續閱讀

Js複制内容到剪貼闆

浏覽器js運作解析

layui時間選擇框，選擇時間段

實作電腦功能

js進階學習筆記（b站尚矽谷）-3-對象

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

js 日期格式化以及擷取某天的零點和23:59

Angularjs的$http方法的success和then的差別

jquery,ajax,jsonp例子+springmvc背景

attachEvent 與addEventListener 差別

用JS模拟實作二叉樹(含周遊)

關于 underscore 中模闆引擎的應用示例

【JavaScript文法】函數對象的淺拷貝、深拷貝

JS--運算符

數組和類數組

jquery_126_demo