原生js學(xué)習(xí)筆記
- 內(nèi)容中的鏈接是相關(guān)的學(xué)習(xí)鏈接
- 是學(xué)習(xí)過程中的記錄在代碼中
開發(fā)環(huán)境配置
-安裝HBuilder：HBuilder快捷鍵：
- 中途換行“Ctrl+Alt”
第一個(gè)HTML代碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
// script標(biāo)簽用于引入js包碴里，src值為js的路徑
<script src="index.js">
</body>
</html>
</html>
- 小技巧：HBuilder中使用“Enter”快捷鍵可以快速補(bǔ)全代碼枷餐。
如 輸入sc+"Enter"鍵生成script標(biāo)簽,上述將代碼寫在html中，不推薦匙奴。更好的方法是寫在一個(gè)文件中俗冻，再在html中引用js文件
第一個(gè)js代碼塊hello world
console礁叔、alert函數(shù)
// console.log方法用于打印，與瀏覽器F12控制臺(tái)配合可以對(duì)Js進(jìn)行調(diào)試
console.log("hello world");
// alert方法用于顯示帶有一條指定消息和OK的警告框
alert("error");
規(guī)則
- 每個(gè)語句后綴加上符號(hào);
- 嚴(yán)格區(qū)分大小寫
變量命名
// 以var開頭迄薄，變量未賦值在控制臺(tái)打印結(jié)果不會(huì)顯示
var name = "hello js";
console.log(name);
變量命名規(guī)則
// 變量命名以值意義命名為英文琅关，可以使用駝峰命名
var fontColor = "red";
// 可以使用下劃線命名
var font_color = "blue"
變量簡單運(yùn)算
// 變量的運(yùn)算
var a = 1;
var b = 2;
var c = a + b;
console.log(c);
常量
// 常量使用const關(guān)鍵字命名,不能變化的數(shù)據(jù)用常量來儲(chǔ)存，不能改變常量的值
const Five_SECONDS = 100;
console.log(Five_SECONDS);
基本數(shù)據(jù)類型
// 數(shù)據(jù)類型
// 布爾值 true 和false
var visible = true;
var isTrue = false;
console.log(visible)
console.log(isTrue)
// 整型讥蔽、浮點(diǎn)型
var num_a = 100
var float_a = 0.1
var negative = -100
console.log(num_a)
console.log(float_a)
console.log(negative)
// 字符串
var str_a = "hello"
console.log(str_a)
// 未定義
// notUndef等同于notUndef_1 = undefined;
var notUndef;
var notUndef_1 = undefined;
console.log(notUndef);
console.log(notUndef_1);
// 空值 null,與未定義不同涣易，未定義是沒有值画机，null為null值
var empty_a = null;
console.log(empty_a);
數(shù)據(jù)類型轉(zhuǎn)換
// 數(shù)據(jù)類型轉(zhuǎn)換
// type0f 獲取數(shù)據(jù)類型
// visible是boolean類型
console.log(typeof visible);
// num_a 是 number類型
console.log(typeof num_a);
// notUndef是undefined類型
console.log(typeof notUndef);
// empty_a 是 object類型
console.log(typeof empty_a);
// str_a是string類型
console.log(typeof str_a);
// float_a是number類型
console.log(typeof float_a);
// 轉(zhuǎn)換 number類型和string類型相加后為string類型
//
var result = num_a +str_a;
console.log(result);
console.log(typeof result);
// parseInt(str_b)f方法將string類型轉(zhuǎn)換為number類型
var str_b = "123";
console.log(parseInt(str_b) + num_a);
console.log(str_b);
操作符、算術(shù)操作符
// 操作符 "="賦值
var x = 10;
var y = x;
console.log(y);
// A=+B 會(huì)將B轉(zhuǎn)化為數(shù)字并賦值給A
var strNum = 0;
var strNum = + "3";
console.log(strNum, typeof strNum);
// ++ 會(huì)自增長1
var num_b = 8;
// 8,++先返回變量值num_b的值
console.log(num_b++);
// 9
console.log(num_b);
// ++num_b變量值自增長1
// 10
console.log(++num_b);
// 10
console.log(num_b);
// --num_b變量值自減1
// 9
console.log(--num_b);
// 9
console.log(num_b);
// num_b--返回前面的變量值9新症，值不變
console.log(num_b--);
// 值-1步氏，8
console.log(num_b);
// 算術(shù)操作符,加減乘除，取余徒爹，次方
console.clear()
console.log("1+5", 1+5);
console.log("5-1=", 5-1);
console.log("3*9=",3*9);
console.log("7/2=", 7/2)
console.log("7%2", 7%2);
console.log("4 ** 2 = ", 4**2);
比較操作符號(hào)
console.clear()
console.log("1>5", 1>5);
console.log("1>=5", 1>=5);
console.log("5>=5", 5>=5);
// ==不同的類型比較值是否相等荚醒，===類型不同返回false
// true
console.log("5==5", 5==5);
// true
console.log('5 == "5"', 5 == "5");
// false
console.log('5==="5"', 5 === "5");
// true
console.log('5 === "5"', 5 === 5);
// true 值相等
console.log("undefined == null", undefined == null);
// false 類型不同
console.log("undefined === null", undefined === null);
// 邏輯操作符，與或非
console.clear();
// && 與
//真
console.log("true && true", true && true);
// false
console.log("true && false", true && false)
// 或
// false
console.log("true || false", true || false);
// true
console.log("true || true", true || true)
// 非
// false
console.log("!true", !true);
// 與鏈接布爾和 其他類型數(shù)據(jù)
// 返回hello
console.log('true && "hello"', true && "hello" );
// 或鏈接false 和 其他類型值返回default
console.log("false || 'default'", false || 'default');
// 5
var a = null;
b = a || 5;
console.log(b);
// 與第一個(gè)操作符為false隆嗅，第二個(gè)值不會(huì)被打印出來.false
console.log('false && "not printed"', false && "not printed");
// 返回5,與或非會(huì)返回表達(dá)式的結(jié)果
console.log('true || "not printed"', (4+1) || "not printed");
// !一個(gè)!會(huì)將數(shù)據(jù)轉(zhuǎn)換為布爾值 ,false
console.log(!4);
// !!兩個(gè)!!會(huì)將其他數(shù)據(jù)轉(zhuǎn)化為布爾值界阁，true
console.log(!!4);
// 5 101
// 5 011
// 轉(zhuǎn)化為二進(jìn)制，5二進(jìn)制101榛瓮，3二進(jìn)制 011， 與有0返回0巫击，2個(gè)1返回1禀晓，5和3返回001，
// 二進(jìn)制001坝锰，十進(jìn)制1
console.log("5 & 3", 5 &3);
// 與 二進(jìn)制計(jì)算：有一個(gè)1返回1粹懒，都是0才會(huì)返回0，這里返回111顷级，十進(jìn)制7
console.log("5 | 3", 5 | 3);
// 異或凫乖， ^相同返回0，不同返回1,返回110
console.log("5 ^ 3", 5 ^ 3);
// 取反 ~ 一般為-(num+1)對(duì)數(shù)字取反弓颈，0轉(zhuǎn)化為1帽芽，1轉(zhuǎn)化為0；并對(duì)所有二進(jìn)制位轉(zhuǎn)化翔冀，如5的二進(jìn)制位有32位
// -6
console.log("~5 ", ~5 );
// -4
console.log("~3",~3 );
// 左移：對(duì)二進(jìn)制整體往左移一位导街，右邊不夠用0補(bǔ)齊
// 5 101 左移 1010 返回10 >>
console.log("5 << 1", 5 << 1);
// 右移：對(duì)二進(jìn)制整體向右移一位，左邊不夠用0補(bǔ)齊
// 5 101 右移纤子， 0101,返回2
console.log("5 >> 1", 5 >> 1);
返回結(jié)果
Console was cleared
index.js:157 true && true true
index.js:159 true && false false
index.js:162 true || false true
index.js:164 true || true true
index.js:167 !true false
index.js:170 true && "hello" hello
index.js:172 false || 'default' default
index.js:177 5
index.js:180 false && "not printed" false
index.js:182 true || "not printed" 5
index.js:184 false
index.js:186 true
index.js:191 5 & 3 1
index.js:193 5 | 3 7
index.js:195 5 ^ 3 6
index.js:198 ~5 -6
index.js:200 ~3 -4
index.js:203 5 << 1 10
index.js:206 5 >> 1 2
三目運(yùn)算符
判斷條件+問號(hào)搬瑰，滿足條件執(zhí)行冒號(hào)前的代碼，不滿足執(zhí)行后面的控硼。
// 三目運(yùn)算符:滿足條件執(zhí)行冒號(hào)前的代碼泽论，不滿足執(zhí)行后面的
console.clear();
var temperature = 10;
console.log(temperature > 9 ? "出門" : "在家");
console.log(temperature > 15 ? "出門" : "在家");
返回值
Console was cleared
index.js:213 出門
index.js:214 在家
流程圖語句模塊
用let定義的變量和const定義的常量只能在語句塊內(nèi)部使用，var可以在全局使用.
語句塊中 使用 let 定義變量.
console.clear();
// 語句塊卡乾，用let定義的變量和const定義的常量只能在語句塊內(nèi)部使用翼悴，var可以在全局使用
// 實(shí)際最好的語句塊中 使用 let 定義變量
{
var name = "啊米";
console.log(name);
let age = "20";
// 20
console.log(age);
}
// 啊米
console.log(name);
// not defined
console.log(age);
啊米
index.js:226 20
index.js:229 啊米
index.js:231 Uncaught ReferenceError: age is not defined
at index.js:231
if-else流程控制
// if-else流程控制
console.clear();
// prompt()函數(shù)讓你輸入框輸入值
var password = prompt();
if (password === "1234"){
alert("登錄成功");
} else {
alert("登錄失敗");
}
if --else if --else流程語句
// if --else if --else流程語句
var role = prompt("請輸入用戶權(quán)限")
if (role === "超級(jí)管理員"){
alert("跳轉(zhuǎn)到超級(jí)管理員頁面");
} else if (role === "管理員"){
alert("跳轉(zhuǎn)到普通頁面");
} else {
alert ("提示error");
}
流程控制語句 switch case。
使用break阻止下一個(gè)case的運(yùn)行幔妨，使用default規(guī)定匹配不存在時(shí)執(zhí)行的程序.
break必須寫上
var role = prompt("請輸入用戶權(quán)限");
switch(role){
case "超級(jí)管理員":
alert("超級(jí)管理員頁面");
break;
case "管理員":
alert("管理員頁面");
break;
default:
alert("默認(rèn)頁面");
}
流程控制 循環(huán) while語句
var password = "";
while(password !== "123456"){
password = prompt("請輸入密碼");
}
console.log("登錄成功")
do while 抄瓦、 for語句
// do while 循環(huán)
// do{
// 循環(huán)體潮瓶；
// }while(判斷條件)；
// 5钙姊，6毯辅，7，8煞额，9思恐，10
var x = 5;
do {
console.log(x++);
} while (x > 5 && x <= 10);
// 流程控制for循環(huán)
// 初始化變量，條件膊毁，增量表達(dá)式
console.clear()
for(let i = 0; i < 10; i+= 2){
console.log(i);
}
流程控制 break continue
break強(qiáng)行中止循環(huán),不會(huì)執(zhí)行后面的程序胀莹；
continue強(qiáng)行中止循環(huán)，仍會(huì)執(zhí)行后面的程序婚温；
// 返回0~5
for(let i = 0; i < 10;i ++){
if(i === 6){
break;
}
console.log(i);
}
// CONTIUE打斷當(dāng)前條件描焰，但后面的會(huì)打印出來，break則不會(huì)
// 返回0~5,7~9
for(let i = 0; i < 10;i ++){
if(i === 6){
continue;
}
console.log(i);
}
函數(shù)
// 函數(shù)
// 函數(shù)三部曲栅螟，定義函數(shù)荆秦，傳參，調(diào)用函數(shù)
// 函數(shù)名稱最好用動(dòng)詞
console.clear()
// function putToCat(a,b){
// return a + b;
// }
// putToCat(1,2);
// console.log(putToCat(1,2));
// return可以打斷函數(shù)力图，或者返回函數(shù)值
console.clear()
function putTodog(c,d){
if (c>4) return d;
return
}
var data1 = putTodog(4,5);
// 未定義undefined
console.log(data1);
var data2 = putTodog(5,6);
// 返回 6
console.log(data2);
// 函數(shù)的返回值可以作為變量
var result = putTodog(6,data2);
// 返回6
console.log(result);
// 不傳參步绸，返回undefined
var data5 = putTodog();
console.log(data5);
函數(shù)表達(dá)式、匿名函數(shù)
// 函數(shù)表達(dá)式
// 返回函數(shù)本身的值
// ? putTodog(c,d){
// if (c>4) return d;
// return
// }
console.log(putTodog);
// 函數(shù)表達(dá)式可以把函數(shù)名賦值給新變量吃媒，使用新變量調(diào)用函數(shù)
var add = putTodog;
var res = add(7,8);
// 返回8
console.log(res);
// 匿名函數(shù),省略函數(shù)名稱瓤介，賦值給變量兵睛，調(diào)用函數(shù)
var multiply = function(a,b){
return a * b ;
};
// 返回2
console.log(multiply(1,2));
函數(shù)提升付秕、默認(rèn)參數(shù)傳參
// 變量及函數(shù)提升
// 函數(shù)的提升惫谤》技ǎ可以把函數(shù)放到底部姜钳，調(diào)用代碼放在前面
console.clear();
var data4 = divide(2,1);
// 返回2
console.log(data4);
function divide(a,b){
return a/b;
};
// 函數(shù)：默認(rèn)參數(shù) para = ""
console.clear()
// 不傳參返回10
var age = setdefault();
console.log(age);
var age1 = setdefault("11");
console.clear();
// 返回11
console.log(age1);
function setdefault(age = "10"){
return ("小民今年"+age+"歲了")
}
// 多個(gè)參數(shù)袒啼，第一個(gè)傳undefined熊泵，會(huì)傳遞默認(rèn)參數(shù)
function greetingWith(name = "哈哈", word ){
// name返回默認(rèn)值哈哈瘦赫，
console.log(name+word);
};
greetingWith(undefined, "你好");
遞歸
示例：和胃珍、費(fèi)波切那數(shù)列
// 函數(shù)遞歸：函數(shù)自己遞歸自己梁肿，和條件結(jié)合
// 計(jì)算num+...+1到的和
function getit(num){
if (num <= 1){
return 1;
};
return num + getit(num-1);
};
var data10 = getit(100);
// 返回5050 ，1.+100的值
console.log(data10);
// 費(fèi)波切那數(shù)列
// 1 1 2 3 5 8 13--
function fib(num){
if (num <= 1){
return 1;
};
return fib(num -1) + fib(num -2);
}
// 返回8觅彰，5意思從0開始計(jì)算出坐標(biāo)第6個(gè)值
console.log(fib(5));
函數(shù)arguments
// 函數(shù)arguments,可變參數(shù)吩蔑，接收多個(gè)參數(shù)，函數(shù)定義不需要寫形參
console.clear();
// 定義函數(shù)
function cal(){
// for 循環(huán)填抬， 變量初始化烛芬， 條件，變量自增長
for(let i = 0 ; i < arguments.length; i++){
// arguments通過下標(biāo)[]獲取參數(shù)值
console.log(arguments[i]);
};
};
// 1，2
cal("1","2");
作用域赘娄、全局變量仆潮、局部變量
// 作用域：沒有在函數(shù)內(nèi)定義的變量：全局變量
// 局部變量：定義在函數(shù)內(nèi)的變量
// 外部不能訪問到局部變量
// 相同的變量名，外部變量會(huì)被內(nèi)部變量覆蓋
// x全局變量
var x = 4;
// var a = 3;
function sum(a){
// a 為局部變量參數(shù)
// 返回4遣臼，x為局部變量
var x = 2;
//
console.log( a + x );
}
// 返回6
sum(2);
var/let的區(qū)別
// var/let的區(qū)別
// 相同：定義變量性置。定義的變量出了函數(shù)不能訪問。全局變量都可以使用
// 不同：除了函數(shù)外的代碼塊中定義的變量是否能被訪問到揍堰。如在if-else,for語句塊中
// var聲明的變量在代碼塊外部也可以使用鹏浅，let聲明的變量在代碼快外部不能使用。
// const定義的常量規(guī)則和let一樣
// if-else代碼塊中的var變量可以在外部訪問
console.clear();
var i = 2;
if( i > 1){
var j = 2;
// console.log(i);
}
// 2
console.log(j);
// for循環(huán)中的let變量在代碼塊外部無法訪問
console.clear();
for (let m = 0;m <5; m ++){
// console.log(a);
let n = 3;
};
// console.log("m",m);
// 程序阻塞屏歹，Uncaught ReferenceError: n is not defined
// console.log("n",n);
箭頭函數(shù)
// 箭頭函數(shù)
// 格式var 變量名 = (多個(gè)參數(shù))=> 或者 var 變量名 = 單個(gè)參數(shù) =>{}
console.clear()
// 多個(gè)函數(shù)
var print_hello = (word,langa) => {
console.log(word+","+langa);
};
// 返回hello,javascript
print_hello("hello", "javascript")
// 單個(gè)函數(shù)
console.clear()
// 單個(gè)函數(shù)的語法
var calsum = x => x * 2;
// 返回12
console.log(calsum(6));
閉包
// 閉包：函數(shù)內(nèi)定義另一個(gè)函數(shù)隐砸，內(nèi)函數(shù)可以訪問外函數(shù)變量，外函數(shù)不暴露內(nèi)函數(shù)蝙眶，外部無法訪問
// 內(nèi)函數(shù)季希，內(nèi)函數(shù)形成為私有函數(shù)private
// 定義函數(shù),箭頭函數(shù)語法
var getage = (x,y) => {
var age = (x) => {
return x * x ;
};
return age(x) + age(y);
};
console.log(getage(1,2));
// 閉包二
var getname = () => {
// 定義外部變量
var name = 'hah';
// 定義內(nèi)部函數(shù)
var setname = () => {
// 返回外函數(shù)變量
return name;
};
// 返回內(nèi)函數(shù)名
return setname;
};
console.clear();
// 返回內(nèi)函數(shù)名setname
var res = getname();
// res值為內(nèi)函數(shù)內(nèi)容
console.log(res);
// 返回內(nèi)函數(shù)返回值 hah
console.log(res());
函數(shù)柯里化
// 函數(shù)柯里化：把接收多個(gè)參數(shù)的函數(shù)換成接收一個(gè)單一參數(shù)的函數(shù)
// 函數(shù)柯里化思想：一個(gè)JS預(yù)處理的思想，降低通用性幽纷，提高適用性式塌。
// 正常函數(shù)
console.clear();
function addTreeNums(a , b ,c){
return a + b + c;
};
// 6
console.log(addTreeNums(1,2,3));
// 改造成柯里化函數(shù)
function add_threenum(a){
// 返回新的函數(shù),fuction()
return function(b){
// 返回新的函數(shù)
return function(c){
// 返回表達(dá)式
return a + b + c;
};
};
};
// 調(diào)用柯里化函數(shù) 6,調(diào)用語法fuction(a)(b)(c)
var value = add_threenum(1)(2)(3);
console.log(value);
// 函數(shù)柯里化一般可以用于前兩個(gè)參數(shù)固定的情況下，第三個(gè)參數(shù)變化霹崎，調(diào)用不同參數(shù)
// 返回
console.clear()
var add_two = add_threenum(1)(2);
// 返回7
console.log(add_two(4));
// 返回8
console.log(add_two(5));
自執(zhí)行函數(shù)
// 自執(zhí)行函數(shù)：將代碼放在自執(zhí)行函數(shù)珊搀，創(chuàng)建一個(gè)命名空間冶忱。直接調(diào)用函數(shù)尾菇，內(nèi)部變量為私有變量
// 也可以傳參數(shù)的，把外部的函數(shù)囚枪，變量什么穿進(jìn)去也是可以的
console.clear();
var a =2;
function get_a(){
var a = 1;
// 1
console.log(a);
}
// 調(diào)用函數(shù)
get_a();
// 打印變量a的值.2
console.log(a);
console.clear();
var num_c = 2;
(function get_self(){
var num_c = 1;
// 返回1
console.log(num_c);
}())
// 全局變量返回2
console.log(num_c);
回調(diào)函數(shù)
// 回調(diào)函數(shù)：一段代碼執(zhí)行完后派诬，需要調(diào)用的另一個(gè)函數(shù)
// 一般是調(diào)用一個(gè)函數(shù)內(nèi)，執(zhí)行另一個(gè)函數(shù)
// 語法1
// 傳入函數(shù)名
function request(cb){
console.log("調(diào)用回調(diào)");
// 調(diào)用傳入的回調(diào)函數(shù)链沼；
cb("js");
console.log("回掉結(jié)束");
};
function callback(result){
console.log("hello,"+result);
};
// 調(diào)用主函數(shù)request 返回 hello, js
request(callback);
// 語法2 不用單獨(dú)定義回調(diào)函數(shù)callback默赂，插入函數(shù)體，缺點(diǎn)是不能復(fù)用回掉函數(shù)
request(result => {
// 插入回調(diào)函數(shù)的函數(shù)體
// 調(diào)用主函數(shù)request 返回 hello, js
console.log("hello,"+result);
});
