JS·基礎（一）

Rocky1發表於2019-02-27
JS

·總結一些JS的一些基礎供參考

資料型別

物件

1· 物件特徵：

  1. 物件由鍵值對組成

  2. 鍵值對由逗號隔開

  3. 鍵值對由屬性名和屬性值組成

  4. 屬性名和屬性值用冒號隔開

  5. 前面的是屬性名，後面的是屬性值

  6. 物件沒有length屬性

console.log（a.length);//undefined
複製程式碼

2·獲取某個屬性名對應的屬性值

  1. 物件名、屬性值
var obj={a:1,b:2,c:"zhufeng",1:100}

console.log(obj.a);

console.log(obj["a"]);
複製程式碼
  1. 新增鍵值對
var obj={a:1,b:2,c:"zhufeng",1:100}

obj.d="培訓";

obj["d"]="培訓";

console.log(obj);
複製程式碼
  1. 修改鍵值對

如果沒有就算新加，有就是修改

var obj={a:1,b:2,c:"zhufeng",1:100}

obj.c="培訓";

obj["c"]="北京";

console.log(obj);
複製程式碼
  1. 刪除鍵值對
delete + 物件名，屬性名

var obj={a:1,b:2,c:"zhufeng",1:100}

delete obj.c;

console.log(obj);
obj.a如果放在等號的左邊，那麼是被賦值或修改；放在等號的右邊，是在獲取賦值

obj.a=10；
obj.a=obj.b
複製程式碼
  1. 只要是以值存在的一定是一個具體的資料型別值;

放在等號後面或者物件屬性名冒號的後面一定是值;

var obj={a:1,b:2,c:"zhufeng",1:100}

var d=19;

var obj={a:1,b:"zfpx",c:d};

obj.a=11;

obj.a=a;
複製程式碼

number

number：整數 小數 NaN;

NaN：不是一個數字，但是number型別的；

  1. Number：把其他資料型別的值強制轉換為number型別
var  a=Number("213");//213

var  a=Number("213px");//NaN

var  a=Number(false);//true=1  false=0

var  a=Number(false);//null=0  undefined=NaN

複製程式碼

  1. isNaN：用來判斷是否是一個非有效數字的方法，如果是有效數字返回false，不是返回true；

  2. isNaN 執行時先預設呼叫number方法，把值轉換為number型別；然後再判斷

console.log(isNaN(19));false;

console.log(isNaN(NaN));true;
複製程式碼
  1. parseInt：把字串轉成數字，從左到右依次識別，直到遇到一個非有效數字為止，把識別到的以數字形式返回
console.log(parseInt("12px"));12;

console.log(parseInt("12px12"));12;

console.log(parseInt("px12"));NaN;
複製程式碼
  1. parseFloat：比parseInt多識別一位小數點
console.log(parseFloat("12.66px"));12.66

console.log(parseFloat("12.66.66px"));12.66
複製程式碼
  1. toFixed：保留小數點位數，返回一個 字串，並且進行了四捨五入
var num =12.8998;

// number.toFixed(保留的位數)
199.22222.toFixed(3);

console.log(num.toFixed(2));//199.200
複製程式碼

基本資料型別和引用資料型別

  1. 基本資料型別： number string boolean null undefined

  2. 引用資料型別：物件資料型別和函式資料型別

  3. 物件資料型別： 物件{} 陣列[] 正則 Math Date的例項...

  4. 函式資料型別： 函式類

  5. 基本和引用區別：

  6. 基本資料型別操作是值

  7. 引用資料型別操作的是空間地址

  8. 基本資料型別儲存到棧記憶體中

  9. 引用資料型別都儲存到堆記憶體中

var  num = 100;
    var  obj = {};// obj 儲存的是一個空間地址；
    var  arr = [];
複製程式碼

js資料型別檢測

typeof：檢測資料型別的運算子

// 用typeof檢測資料型別

console.log(typeof 100);  // "number"

console.log(typeof "zhufeng");   //"string"

console.log(typeof true);  //"boolean"

console.log(typeof null); //"object"

console.log(typeof {});  //"object"

console.log(typeof []); //"object"

console.log(typeof function); //"function"

console.log(typeof undefined); //"undefined"
複製程式碼

instanceof：檢測某個例項是否屬於這類

constructor：獲取當前例項的構造器

Object.prototype.toString.call:獲取當前例項的所屬類資訊

  1. 使用typeof檢測，返回的結果是一個字元 串，字串中包含的內容證明了值是屬於 什麼樣型別

陣列

引用資料型別：空間型別

  1. 有lenght和索引

陣列是由陣列成員組成，陣列成員用逗號隔開

  1. 有length：屬性值代表陣列成員的個數

  2. 索引：代表陣列成員的屬性名從0開始

var arr=[1,2,3,4,100];

console.log(arr.length);
複製程式碼
  1. 有索引的;索引從0開始;依次遞增1;
var arr=[1,2,3,4,100];

console.log(arr[2]);
複製程式碼

push

  1. push:在陣列末尾追加元素

  2. push方法的引數：要追加到陣列後面的元素；可以是多個；用逗號隔開

  3. 需要傳參

  4. push方法的返回值：執行完成，新陣列長 度

var arr =[1,2];

arr.push("a"); // [1,2,"a"]

console.log(arr);
複製程式碼

pop

  1. pop：從陣列末尾去掉一個元素

  2. pop:方法沒有引數

  3. pop：返回值；刪除末尾陣列元素後的陣列

  4. pop方法原陣列發生變化

var arr=["a","n",1,"m"]; //length=4

var ret=arr.pop();

console.log(arr);
複製程式碼

unshift

  1. unshift：在陣列的前面新增元素

  2. unshift:方法引數：要新增的值；可以為 多個引數

  3. unshift：返回值新陣列長度，lenght

var arr=[1,2,3,4];

arr.unshift(0);

console.log(arr)
複製程式碼

shift

  1. shift：從陣列的前面刪除一第個元素

  2. shift方法沒有引數

  3. shift方法返回值：被刪除的陣列的第一項成員

var arr=[1,2,3,4,5];
 
arr.shift(1);

console.log(arr);
複製程式碼

slice

  1. slice：擷取陣列

  2. slice：方法引數：如果是兩個引數；第一個引數是開始位置的索引；

  3. 第二個引數是結束為止的索引；不包括第二個引數的位置

  4. slice返回值：擷取的那一部分資料，以陣列的方式返回

  5. 如果是一個引數引數是開始位置的索引擷取到整個陣列的最後一位

  6. 引數如果是負數；陣列的長度+負數得到的值；陣列的下標

  7. 沒有引數複製一份陣列

  8. 原有陣列不發生改變

  9. 支援負數

var arr=[1,2,3,4,5,6,7];

arr.slice(2,5)；

console.log(arr)；
複製程式碼

splice

  1. splice：刪除原有陣列的項第一個引數；開始位置的索引刪除的長度；返回值是刪除的項；以陣列的形式返回

  2. 替換/修改第一個引數，開始位置的索引

  3. 第二個引數，是刪除的長度，剩下的引數；被新增到原來開始位置索引的陣列元素

  4. 新增：第二個引數為0（不刪除），然後再原有的位置；新增後面引數元素的值。

  5. 原來的陣列發生了變化

  6. 引數為0全部刪除

var arr=["a","b","c","d","e","f"];

arr.splice(2,2);

console.log(arr);
複製程式碼

sort

  1. sort:排序 只能排相同位數的陣列

  2. 對陣列進行排序

  3. 引數可有可無

  4. 沒有引數 只能排相同位數

var ary=[1,23,435,46,34,653];

ary.sort(function(a,b){return a-b}) 從小到大

ary.sort(function(a,b){return b-a}) 從大到小
複製程式碼

reverse

  1. reverse:將陣列倒序排列

  2. 不需要引數

  3. 返回值是陣列倒序之後的陣列

  4. 原有陣列發生改變

indexOf

  1. indexOf：用來獲取當前陣列成員第一次出現的索引位置

  2. 需要引數；如果陣列成員不存在這一項返回-1

  3. 如果引數存在 返回當前項索引 不存在返回-1

  4. 原有陣列不發生改變

  5. 0返回也是-1

lastIndexOf

  1. lastIndexOf:用來效驗陣列成員最後一次出現的索引位置

  2. 需要引數 如果不存在返回-1

  3. 返回最後一次的索引或者是不存在就返回-1

  4. 原有陣列不發生改變

  5. 0返回也是-1

concat

  1. concat:陣列的拼接

  2. 需要引數 沒有引數就是複製一樣的引數

  3. 返回是拼接後的陣列

  4. 原有陣列不變

join

  1. join：按照指定的字元進行拼接成一個字串

  2. 需要引數 如果不寫 預設是逗號隔開

  3. 返回一個連線後的字串

  4. 原有陣列不變

forEach

  1. forEach:用來遍歷陣列每一項

  2. 需要引數 1、第一個是陣列的每一項 2、陣列成員的索引 3、要迴圈的陣列

  3. 返回的是undefined

  4. 原有陣列不發生改變

ary.forEach(function (a,b,c){
    a:陣列的每一項
    b:陣列成員的索引
    c:要迴圈的陣列
})
複製程式碼

map

  1. 迴圈陣列

  2. 有返回值

  3. map:遍歷 對映

  4. 需要引數

  5. 返回是對映之後的陣列

  6. 原有陣列不發生變化

  7. map裡有return屬性

Math

  1. Math 是一個物件資料型別的
console.log(Math);

console.log(typeof Math);
複製程式碼
  1. Math.abs(); 取絕對值
console.log(Math.abs(3)); //3
複製程式碼
  1. Math.floor(); 向下取整
console.log(Math.floor(5.9999)); //5
複製程式碼
  1. Math.ceil(); 向上取整
console.log(Math.ceil(5.0001)); //6
複製程式碼
  1. Math.max(); 獲取一組數的最大值；
console.log(Math.max(12,3,22,56,5,7,8)); //56
複製程式碼
  1. Math.min(); 獲取一組數的最小值；
console.log(Math.min(1,23,45,2,4,5)); //1
複製程式碼
  1. Math.random(); 產生一個0--1的隨機小數
console.log(Math.random());
複製程式碼
  1. Math.round(); 四捨五入
console.log(Math.round(4.756));  //5
複製程式碼
  1. 產生一個m-n之間的隨機整數
Math.round(Math.random()*(n-m)+m)
複製程式碼
  1. Math.pow(m，n); 獲取m的n次冪
console.log(Math.pow(3,3)); // 3*3*3--27
複製程式碼

10、Math.sqrt(16); 開16的平方---4

console.log(Math.sqrt(16)); //4
複製程式碼

字串的方法

  1. 有length

  2. 索引

  3. 字串是不能根據索引修改的、只能用索引來獲取

  4. 字串運算

  5. +是字串拼接 其餘轉number再運算

標記js表示式 ${變數名}

var srr="Rocky"
var str=`ma name is ${srr}`
console.log("3px"-"3");  //NaN
複製程式碼
  1. toUpperCase： 把小寫字母變成大寫

原有字串不發生變化

var sTc="zhufengpeix"

console.log(str.toUpperCase());//'ZHUFENGPEIX'
複製程式碼
  1. toLowerCase: 把大寫轉小寫
console.log(sTr.toLowerCase());
複製程式碼
  1. charAt: 通過索引獲取對應的字元
console.log(sTc.charAt[3]);
複製程式碼
  1. charCodeAt: 獲取對應的字元的Unicode編碼值
console.log(sTr.charCodeAt(3));
97-122  a-z  65-90 A-Z
複製程式碼
  1. substr： 字串的擷取；從索引m開始，擷取n個；如果只有一個引數；擷取到末尾
console.log(str.substr(2));
複製程式碼
  1. substring(m,n);從索引m開始，擷取到索引n;但不包含n
console.log(str.substring(2, -5));
複製程式碼
  1. slice(m,n);從索引m開始，擷取到索引n;但不包含n;slice 支援負數傳參
console.log(str.slice(2, -5))
複製程式碼
  1. replace : 替換replace(old,new);用新字串替換舊字串
console.log(str.replace("e", "a"));
複製程式碼
  1. indexOf: 檢測字串第一次出現的索引位置 如果不存在返回-1
console.log(str.indexOf("h"));
複製程式碼
  1. lastIndexOf:檢測字串最後一次出現的索引位置 如果不存在返回-1
console.log(str.lastIndexOf("e"));
複製程式碼
  1. split: 按照特定的字元分割成陣列中的每一項
//支援正則

console.log(str.split(" "));
複製程式碼
  1. concat： 字串拼接
console.log(str.concat("aaaa"));
複製程式碼
  1. trim： 去空格 去字串左右的空格
console.log(str.trim());
複製程式碼
  1. trimLeft（）：去掉字串左邊的空格
console.log(str.trimLeft());
複製程式碼
  1. trimright（）： 去掉字串右邊的空格
console.log(str.trimRight());
複製程式碼

js中字串的屬性和方法

js獲取元素的方式

通過id獲取元素

  1. 元素是個物件 元素都是物件資料型別的

  2. 獲取不到 獲取結果是null

  3. 名字相同 只獲取第一個

  4. 上下文只能是document

var oBox= document.getElementById（"id名"）
//通過標籤名獲取元素
複製程式碼

  1. 獲取的元素是一個元素集合

  2. 支援元素作為該方法的上下文

var oBox= document.getElementsByTagName（"標籤名"）
通過class名獲取元素
複製程式碼
  1. 如果需要獲取具體的某個元素 需要加上索引

通過class名獲取DOM元素

var oBox= document.getElementsByClassName（"class名"）
通過name名獲取元素
複製程式碼
  1. 獲取元素集合 一般用於表單元素
<div name="boss"></div>
var oBox= document.getElementsByName（"boss"）
複製程式碼

通過選擇器獲取元素

  1. 如果是id加上#

  2. 如果是class 加上.

var oBox= document.querySelector（"選擇器"）
複製程式碼

獲取body元素

document.body
複製程式碼

獲取HTML

document.documentElement
複製程式碼

獲取所有的元素

<div></div>
<div></div>
<div></div>
console.log(document.querySelectorAll("div"))
複製程式碼

DOM的節點以及屬性

節點是組成DOM樹的基本單位

節點分為四種 元素節點 文字節點 註釋節點 document；他們都是物件資料型別的

nodeType nodeName nodeValue

元素節點 1 大寫的標籤名 null

文字節點 3 #text 文字內容

註釋節點 8 #comment 註釋內容

document 9 #document null

屬性

  1. childNodes: 當前元素所有的子節點

  2. children: 當前元素的所有的子元素節點

  3. parentNode：獲取當前元素的父親節點 document是根節點；他的父親節點是null

  4. previousSibling：上一個哥哥節點

  5. previousElementSibling:上一個哥哥元素節點

  6. nextSibling:下一個弟弟節點

  7. nextElementSibling:下一個弟弟元素節點

  8. firstchild：第一個子節點

  9. firstElementChild：第一個子元素節點

  10. lastChild：最後一個子節點

  11. lastElementChild：最後一個子元素節點

空格和換行符都是文字節點

console.log(box.childNodes);

console.log(box.children);

console.log(last.parentNode);
複製程式碼

獲取上一個哥哥元素節點，相容所有瀏覽器

function getBrother(curEle) {
 
        var pre = curEle.previousSibling;
        
        while(pre)
        
        {
            if(pre.nodeType===1){
                return pre;
            }
            
            pre = pre.previousSibling;
            
            // pre等於哥哥節點的哥哥節點；
        }
    }
複製程式碼

動態操作DOM元素

  1. document.createElement:建立一個元素
var new = document.createElement（"div"）
複製程式碼
  1. appendChild(元素)
// 向容器末尾新增子節點

<div id="box"></div>

box.appendChild(元素)
複製程式碼
  1. insertBefore
// 向容器中的某個元素前面插入新元素

容器.insertBefore（newChild，oldChild）

box.insertBefore(newDiv,firet)
複製程式碼
  1. removeChild
//刪除子節點

容器.removeChild（oldChild）

box.removeChild(ul)
複製程式碼
  1. replaceChild
//用新的子節點替換老的子節點

容器.replaceChild(newChild,oldChild)

box.replaceChild(newDiv,ul)
複製程式碼

  1. cloneNode

  2. 克隆同樣的元素

  3. cloneNode的引數一個是true代表深度克隆將後代節點也克隆出來

  4. false：不傳就是false；淺克隆 克隆元素本身 不能克隆元素裡的所有後代節點

  5. 預設情況下只能克隆元素本身 不能克隆元素裡的所有後代節點

  6. 不能克隆點選事件

var divs=box.cloneNode(ture)
複製程式碼
  1. getAttribute
// 獲取行間屬性所對應的屬性值

<div id="box" zfpx="hui"></div>

box.getAttribute("zfpx")
複製程式碼
  1. setAttribute
//設定行間屬性對應的屬性值

box.setAttribute("a",100)
複製程式碼
  1. removeAttribute
//移除行間屬性

<div id="box" zfpx="hui"></div>

box.removeAttribute("zfpx")
複製程式碼

  1. classList

  2. add 新增類名

  3. remove 移除類名

  4. replace 改變類名（前一箇舊類名，後一個新類名）

box.classList.add("a")

box.classList.replace("a","b")
//前一個引數舊的  後面是新的class
複製程式碼

Date

  1. new + 函式：建立這個函式的例項;例項是個物件資料型別

  2. new 是個關鍵字：

console.log(new Date()); //獲取當前電腦的系統時間
複製程式碼

  1. getFullYear（）：返回時間年

  2. getMonth（）: 返回時間月【0-11】

  3. getDate（）： 返回當前日【1-31】

  4. getDay（）： 返回星期幾 【0-6】星期日是0

  5. getHours（）： 返回小時 【0-23】

  6. getMinutes（）： 返回時間分鐘數 【0-59】

  7. getSeconds（）：獲取時間秒

  8. getMilliseconds（）：獲取毫秒數

  9. getTime（）： 當前時間距離1970-1-1上午8：00 毫秒差

  10. Date.now（）：經常用於產生一個時間戳：產生一個唯一的數字

定時器

  1. setTimeout 和setInterval

  2. 定時器返回值

  3. 清除定時器 ：claearInterval

JS 的組成部分

ECMAScript :

規定了JS基礎語法，變數、資料型別、操作語句、函式等

DOM : 文件物件模型；

BOM : 瀏覽器物件模型

JS 的引入方式

  1. 行內式 內嵌式 外鏈式

JS 的輸出方式

  1. alert 彈框 將引數轉成字串輸出

  2. console.log在控制檯輸出引數可為多個

  3. confirm 彈框有取消按鈕

  4. document.write()在文件寫入內容可以識別標籤

JS中的變數

  1. 由字母、數字、下劃線、$組成；

  2. 不能以數字開頭，嚴格區分大小寫

  3. 遵循駝峰命名，第一個單詞的首字母小寫，其餘有意義的單詞首字母大寫

  4. 不能使用關鍵字和保留字；

innerHTML innerText

  1. innerHTML 可以識別標籤，innerText 不可以識別標籤

  2. = : 賦值

var a = document.getElementById("a");
    
    a.onclick = function () {
        
        a.innerHTML += 123
    }
複製程式碼

資料型別number

  1. number 可以是整數、小數、NaN（not a number）

Number

  1. isNaN : 校驗是否是一個非有效數字

  2. parseInt：把字串轉成數字，從左到右依次識別，直到遇到一個非有效數字為止把識別到的以數字形式返回

  3. parseFloat :多識別一位小數點

  4. toFixed ： 保留小數點位數

var  a = Number("18")
string
複製程式碼

  1. length 索引 "" '';

  2. 字串的運算 - * /

  3. : 字串的拼接

布林型別

  1. boolean : true false

  2. Boolean :

  3. js的內建方法；在全域性作用下

  4. 0 "" NaN null undefined只有這五個值轉 布林是false

  5. ! : 先把後面的值轉成布林，再取反

console.log(![] == [])// true
 
    console.log([]==[])// false
    
    console.log(![]==false);//true
    
console.log({a:1}=="[objectobject]")//true

console.log("12px" == 12);
複製程式碼

  1. ! : 會先把後面的值進行去布林，然後再取反，最後比較

  2. null undefined： 都表示沒有

 var obj = {a:1};//obj=null;
    
    var  a;
    
    
    console.log(a);
    
    console.log(obj.b);// undefined
複製程式碼

三個判斷

if / else

  1. if (如果)

  2. else if （再者）

  3. else （否則）

switch

break（終止）

三元運算子

ID

  1. js中如果ID名重複，只能獲取第一個id的元素

  2. ID名不能重複、

  3. 如果通過id名獲取不到內容，那麼獲取的結果是null

js的輸出方式

  1. console.log()在控制檯輸出

  2. 經常用於除錯bug 開發人員使用

console.log(100);
複製程式碼

  1. alert：彈出

  2. 有且只有彈出第一個數

<script>

alert(222，333，666)

</script>
複製程式碼

  1. 會讓程式碼停止到這一行

  2. 會把彈出的值轉成字串，預設呼叫tostring方法

如果控制檯是數字，字型顏色是藍色

如果控制檯是字串，字型顏色是黑色

（單雙引號包起來的都是字串）

  1. confirm：相對於alert多一個取消按鈕

如果點選確定，代表true，點選取消，代表false

prompt：在confirm基礎上增加讓使用者輸入的效果

使用者點選取消按鈕，我們獲取到的結果是 null（空） ，使用者點選的結果是確定，

我們將會獲取到使用者所輸入的內容（如果使用者沒有輸入內容，那麼獲取的將會是空字串）

使用原生js封裝模態框元件

  1. console.dir:詳細輸出

  2. console.table:把json資料以表格的形式輸出

在js中定義一個變數

變數：值是可以變的

  1. 變數其實是一個無意義的名字，它所代表的意義都是其儲存的值

  2. 常量：值是不可變的

  3. var + 變數 =值

  4. 變數名是自己起的

  5. 定義一個變數名是a，把這個10的值賦值給a，那麼a代表這個10

var a=10;
console.log(a);
console.log(a+10);
複製程式碼

  1. 變數命名規範

  2. 變數名是由字每，數字，下劃線，￥組成

  3. 變數名數字不能開頭，嚴格區分大小寫

  4. 遵循駝峰命名法；第一個單詞首字母小寫；剩餘有意義的單詞首字母大寫；

  5. 關鍵字和保留字不能作為變數名

  6. 關鍵字：在js中有特殊意義的單詞都是關鍵字

  7. 保留字：未來有可能成為關鍵字的單詞

js屬性

  1. innerHTML：改變元素中的內容，而且識別標籤
<div id="box"></div>
<script>

window.document.getElementById("box").innerHTML("改變內容")

</script>
複製程式碼

  1. innerText：不能識別標籤

  2. onclick=function 滑鼠點選事件

  3. 前面加元素名

var a= document.getElementById("box")；

a.onclick=function() {
    
    //點選時，此處程式碼執行

a.innerHTML="<ahref='http://www.baid.com'>百度</a>";};
複製程式碼

引用資料型別分為：物件資料型別和函式

資料型別

  1. 物件資料型別：物件 陣列 正則

  2. Dote的例項 Math

  3. 布林資料型別

1、Boolean

  1. 在boolean只有兩個值：true和false

  2. true：正確 false：錯誤

  3. true--1 false--0

  4. boolean把其他型別轉布林型別方法；返回值只有正確和錯誤

  5. 在js中只有0、“”、null、undefined、NaN 這五個值轉布林值是false 其餘全是true

  6. 負數也是true

console.log(Boolean(0));--false

console.log(Boolean(2));--true
複製程式碼

！：取反

  1. 首先會把後面的值轉成布林值，然後再取反
  console.log(!NaN);--true

     console.log(!"12px");--false
複製程式碼

string：字串

  1. 字串：用單引號或雙引號包起來的值就是字串型別

  2. length：有長度，length的屬性值代表字串的個數

var str="wdaifhauohfiuahgfia"

console.log(str.length);
複製程式碼
  1. 有索引 索引從0開始第二個字串索引可就是1
console.log(str[3]);

console.log(str[str.length-1]);
複製程式碼

獲取字串最後一項：

  1. 字串運算

任何數字和NaN運算都是NaN

加法是字串的拼接

減法、加法、除法是先把字串轉成number型別，然後運算

console.log("18-16");2

console.log("18px"-"12");6

console.log("18px"*"12");216

console.log("18px"/"12");1.5

console.log("18px"+"12");18px+12

console.log("18"+"12");1812
複製程式碼

null和undefined都表示沒有

null表示現在沒有，以後可能會有、undefined表示現在沒有，以後也不可能有

null:

  1. 通過id獲取元素如果獲取不到內容，那麼預設返回值是null

  2. 如果需要銷燬物件的堆記憶體，那麼會給物件賦值為null

  3. 正則進行捕獲，捕獲不到內容，那麼返回值是null null表示物件指標

陣列去重

  1. indexOf

  2. 物件；迴圈物件；放入新的陣列中

  3. 操作原有的陣列

氣泡排序

  1. 氣泡排序：讓相鄰兩項進行比較如果前面一項比後面一項大，讓其交換位置

遞迴

  1. 遞迴：針對函式：在函式內部呼叫函式本身；讓其執行，這種現象就是函式的遞迴

  2. 需要結束條件，結束當前迴圈

  3. 遞迴的時候一定要有一個結束條件 否則會一直迴圈下去

快速排序

  1. 快速排序原理：獲取到陣列的中間項然後讓陣列中的每一項和中間項進行比較

插入排序

  1. 新建一個陣列

  2. 把舊陣列的第一項push到新陣列中

  3. 取舊陣列中的每一項和新陣列中的每一項比較

在js中，遇到{}、[]都會開闢一個新的空間地址

  1. = 賦值

  2. 把10賦值給變數hh

var hh=10;
複製程式碼

  1. == 比較；返回一個布林值；相等返回true，不相等返回false

  2. 允許不同資料型別之間的比較

  3. 如果是不同型別的資料進行，會預設進行資料型別之間的轉換

console.log(1==1);//true

console.log(1=="1");//true

console.log(1=="1px");//false

console.log(1==true);//true
複製程式碼

如果是物件資料型別的比較，比較的是空間地址

console.log({}==[]);//false

console.log({}=={});//false

console.log([]=="");//true

console.log([]==0);//true
複製程式碼

{} 呼叫跑哪個tostring轉換成字串結果是“[object object]”

  1. === 絕對比較；只要資料型別不一樣，那麼返回false
console.log(1 === 1 );//true

console.log(1 ===true );//false

console.log(1 === "1");//false
複製程式碼

js判斷語句

1.操作語句：三個判斷、三個迴圈

  1. 瀏覽器從上到下進行判斷、如果條件成立 就執行那塊程式碼

  2. 只要有一處滿足條件，下面即便條件成立 都不執行

  3. 小括號中的條件最後一定要轉成一個布林值

if ([])
console.log(1)
複製程式碼

條件巢狀、兩個條件同時滿足，才成立

if（20>10）{
    if（11<18）{

    }
}
複製程式碼
  1. 三元運算子
//條件？條件成立執行：條件不成立執行'
18=="18px"?console.log(18):console.log(19);
複製程式碼
  1. switch case

絕對比較

var num =10；

switch （num）{
    csae "10":
    console.log(1);
    break;  //終止不讓向下進行判斷
    
    case "10px"：
    console.log(2);
    break;
    
    case 10:
    console.log(3);
    break;
    
  default:   //當以上條件都不成立時、執行此處代
  碼
  console.log(4)
  
}
複製程式碼

邏輯運算子

  1. && ：並且、同時滿足

  2. || ：或、只要其中一個滿足

  3. &&

if（1==1 && 1==="1"）{
    //當兩個條件都成立、整體才成立
    console.log(1)；
    
}
||

if(isNaN("12px")||3==="3"){
    //只要其中一個滿足、條件成立
    console.log(3)；
    
}

複製程式碼

三個迴圈

  1. JS 是單執行緒的、同一時間、只能做一件事

  2. for 迴圈的四步曲

  3. 定義變數i;

  4. 判斷條件是否成立

  5. 執行迴圈體

  6. 執行i++

//執行過程1-->2-->3-->4-->2-->3-->4..

for

for(va i=0; i<10; i++){
    
    console.log(1);
}
  console.log(2);
continue:停止本輪迴圈

for(var i=0;i<10;i++){
    
    if(i>5){
        continue
    }
    console.log(100);

}
break:終止整個大迴圈

for(var i=0;i<10;i++){
    
    if(i>5){
        break;
    }
    console.log(100);

}
複製程式碼

for in

var  obj={a:1,b:3,str:"www"};

for(var key in obj){
    //key:代表屬性名、而且是個字串
    console.log(key);
    //obj[key] 代表屬性名對應的屬性值
    //會把屬性值是數字的先輸出
    //輸出循序會根據屬性名進行排序、從小到大依次輸出
    console.log(obj[key]);
}
複製程式碼

while

  1. 一般用於不知道迴圈多少次時，用while

  2. 阻塞主執行緒、讓程式碼在此處停留

  3. 同非同步

var  i=0;

    while(i<4){
    
    //改變while的條件一般在迴圈體中進行修改；
    console.log(100);
    
    i++;
    }
複製程式碼

do while

  1. 先執行；後判斷
var i=0

do{
    console.log(111)
    i=i+2
}while(i<10);

複製程式碼

相關文章