1標識符 2-5數(shù)據(jù)類型和數(shù)據(jù)類型的轉(zhuǎn)化 6算數(shù)運算符 7賦值運算符 8自增自減運算符 9關系運算符 10邏輯運算符 11逗號運算符 12三目運算符 13條件語句 14循環(huán)語句 15變量作用域 16break和continue關鍵字 17數(shù)組 18函數(shù) 19預解析
1.標識符的命名規(guī)則
- 只能由字母憔恳、數(shù)字榕吼、_宦芦、$組成
- 不能以數(shù)字開頭
- 不能使用關鍵字本股，保留字
2.數(shù)據(jù)類型
- 基本數(shù)據(jù)類型
Number Strinng Bolean Undefined Null (數(shù)值類型 子字符串類型 布爾類型 未定義類型 空類型) - Object 引用數(shù)據(jù)類型
- 檢測數(shù)據(jù)類型 typeof
3.轉(zhuǎn)化為數(shù)值類型
- string轉(zhuǎn)化number
數(shù)值的字符串蝗罗，數(shù)字
' ' 空字符串, 0
數(shù)字加其他的字符串夹纫，NaN - boolean是true1 false0
- null轉(zhuǎn)化number是0
- undefined轉(zhuǎn)化number是NAN
- 空字符串/false/null轉(zhuǎn)換之后都是0 字符串中不僅僅是數(shù)字/undefined轉(zhuǎn)換之后是NaN
- 轉(zhuǎn)化的方法：Number() / +和- / ParseInt()和ParseFloat()
4.轉(zhuǎn)化為字符串類型
- Number和Boolean, 可以通過變量名.toString()
- String(value)
- 常亮or變量 + ' '
5.轉(zhuǎn)化為布爾類型
- string轉(zhuǎn)化Boolean
空字符串' '為false，其他為true - number
0為false崔挖，NaN為false - undefined, null都是false
- 空字符串/0/NaN/undefined/null 會轉(zhuǎn)換成false, 其它的都是true
- 方法：Boolean()
6.算數(shù)運算符 + - * / %
- 和字符串相加贸街，會拼接字符串
- 和字符串相減，會轉(zhuǎn)化number再運算
- 任何和NaN進行運算虚汛，都是NaN
- Bolean Undefined Null參與加減會被強制轉(zhuǎn)化為number類型
7.賦值運算符
- = += -= *= /= %=
例如：res += 1同res = res+1
8.自增自減運算符 ++ --
- 符號在前面匾浪，先自增再運算
- 符號在后面，先運算再自增
let num = 1;
// let res = num++ + 1; // let res = num + 1; num++; 2
let res = ++num + 1; // num++; let res = num + 1; 3
console.log(res); //
9.關系運算符 > < >= <= == != === !==
- 返回值Boolean
- 和number比較卷哩，轉(zhuǎn)化為number再判斷
- 和NaN比較蛋辈，返回false
- 都是string，比較對應的Unicode編碼
- 判斷NaN将谊，使用方法isNaN()冷溶，因為NaN == NaN或NaN === NaN結(jié)果都是false
- 判斷取值和類型 === !== 判斷取值 == !=
- 關系運算符中 > < >= <= 的優(yōu)先級高于 == != === !==
- 不能利用關系運算符來判斷區(qū)間
let res = 10 > 5 > 3; // let res = true > 3; let res = 1 > 3;
10.邏輯運算符
- 與 &&
一假則假
條件A && 條件B
A不成立，返回A（因為判斷為false后尊浓，就會終止后面的運算） - 或 ||
一真則真
條件A || 條件B
A成立逞频，返回A（因為判斷為true后，就會終止后面的運算） - 非!
取反 - &&的優(yōu)先級高于||
11.逗號運算符
- 在JavaScript中逗號運算符一般用于簡化代碼
利用逗號運算符同時定義多個變量
let a, b;
利用逗號運算符同時給多個變量賦值
a = 10, b = 5; - 逗號運算符的優(yōu)先級是所有運算符中最低的
- 逗號運算符的運算符結(jié)果就是最后一個表達式的結(jié)果
表達式1, 表達式2, 表達式3, ....;
let res = ((1 + 1), (2 + 2), (3 + 3));
console.log(res);//6
12.三目運算符
- 條件表達式 ? 結(jié)果A : 結(jié)果B;
let res = (1 > 5) ? 1 : 5;
13.條件語句
- if
//第一種形式
if(條件表達式){
條件滿足執(zhí)行的語句;
}
//第二種形式
if(條件表達式){
條件成立執(zhí)行的語句;
}else{
條件不成立執(zhí)行的語句;
}
//第三種形式
if(條件表達式A){
條件A滿足執(zhí)行的語句;
}else if(條件表達式B){
條件B滿足執(zhí)行的語句;
}
... ...
else{
前面所有條件都不滿足執(zhí)行的語句;
}
- switch
switch(表達式){
case 表達式A:
語句A;
break;
case 表達式B:
語句B;
break;
... ...
default:
前面所有case都不匹配執(zhí)行的代碼;
break;
}
//例
let day = 7;
switch (day) {
case 1:
console.log("星期1");
break;
case 2:
console.log("星期2");
break;
case 3:
console.log("星期3");
break;
default:
console.log("Other");
break;
}
- if 和switch的選擇
幾個固定的值使用switch栋齿，其他使用if
14.循環(huán)語句
- while
while(條件表達式){
條件滿足執(zhí)行的語句;
}
//死循環(huán)
while (true){
console.log("123");
}
- dowhile
do{
需要重復執(zhí)行的代碼;
}while(條件表達式);
//dowhile循環(huán)的特點: 無論條件表達式是否為真, 循環(huán)體都會被執(zhí)行一次
- for
for(初始化表達式;條件表達式;循環(huán)后增量表達式){
需要重復執(zhí)行的代碼;
}
//例如
for(let num = 1;num <= 10;num++){
console.log("次數(shù)" + num);
}
//在for循環(huán)中"初始化表達式""條件表達式""循環(huán)后增量表達式"都可以不寫
for(;;){ //for循環(huán)是可以省略條件表達式的, 默認就是真
console.log("123");
}
15.變量作用域
- var 定義變量
可以重復定義同名的變量苗胀，并且"相同作用域內(nèi)"后定義的會覆蓋先定義的
可以先使用后定義(預解析) - let 定義變量
"相同作用域內(nèi)"不可以重復定義同名的變量
不可以先使用后定義(不能預解析) - 局部作用域
在函數(shù){}內(nèi) - 塊級作用域
沒有和函數(shù)結(jié)合在一起{} - 全局變量
省略var或let的變量
在全局作用域中定于的變量
在塊級作用域中通過var定義的變量是全局變量 - 局部變量
在局部作用域定于的變量
在塊級作用域中通過let定義的變量是全局變量 - 作用域鏈
變量在作用域鏈查找規(guī)則襟诸，就近原則
16.break和continue關鍵字
- break關鍵字可以用于switch語句和循環(huán)結(jié)構(gòu)中
立即結(jié)束當前的switch語句
終止循環(huán) - continue關鍵字只能用于循環(huán)結(jié)構(gòu)
在循環(huán)結(jié)構(gòu)中continue關鍵字的作用是跳過本次循環(huán), 進入下一次循環(huán)
for(let num = 1; num <= 10; num++){
if(num === 1){
continue;
console.log("continue后面的代碼"); // 永遠執(zhí)行不到
}
console.log("發(fā)射子彈" + num);//跳過1
}
17.數(shù)組
創(chuàng)建一個數(shù)組
通過構(gòu)造函數(shù)創(chuàng)建：let arr = new Array(size);
字面量的方式：let arr = [ ]數(shù)組遍歷
for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
}數(shù)組結(jié)構(gòu)賦值
一般：let [a, b, c] = [1, 3];//c是undefined
給定默認值：let [a, b = 666, c = 888] = [1,2];//b是2
使用擴展運算符（擴展運算符只能寫在最后）： let [a, ...b] = [1, 3, 5];//b[3,5]數(shù)組常用的方法
- 清空數(shù)組
let arr = [1, 2, 3, 4, 5];
// arr = [ ];
// arr.length = 0;
// arr.splice(0, arr.length) - 將數(shù)組轉(zhuǎn)化為字符串
let arr = [1, 2, 3, 4, 5];
//let str = arr.toString();
// let str = arr.join('分隔符') 默認為',' - 拼接數(shù)組
// let arr1 = [1, 3, 5];
// let arr2 = [2, 4, 6];
// let res = arr1.concat(arr2);
// let res = [...arr1, ...arr2]; - 反轉(zhuǎn)數(shù)組
arr.reverse(); - 截取數(shù)組
arr.slice(start,end)
不包括end
返回值：array 被截取的元素的數(shù)組 - 查找索引
arr.indexOf(item，start);
arr.lastIndexOf(item基协，start);
返回值：number 元素的索引歌亲，沒有返回-1 - 是否包含
arr.includes(value); - 刪除，替換
array.splice(index,howmany,item1,.....,itemX)
改變原始數(shù)組
返回值：array 被刪除的元素的數(shù)組 - 在數(shù)組最后增刪
array.push(item1, item2, ..., itemX)
改變原始數(shù)組
數(shù)組的末尾添加一個或多個元素澜驮，并返回新的長度
array.pop()
改變原始數(shù)組
刪除數(shù)組的最后一個元素并返回刪除的元素
10.在數(shù)組開始增刪
array.unshift(item1,item2, ..., itemX)
array.shift()
18.函數(shù)
- 定義
函數(shù)是專門用于封裝代碼的, 函數(shù)是一段可以隨時被反復執(zhí)行的代碼塊 - 格式
function 函數(shù)名稱(形參列表){
被封裝的代碼;
}
//一般
function getSum(a, b) {
console.log(a, b);
return a + b;
}
//保存到變量
let getSum = function (a, b) {
console.log(a, b);
return a + b;
}
- 函數(shù)return
return作用結(jié)束當前所在函數(shù)
函數(shù)沒有通過return明確返回值, 默認返回undefined - 調(diào)用函數(shù)時實參的個數(shù)和形參的個數(shù)可以不相同
- 函數(shù)實參的默認值
//es6之前
function getSum(a, b) {
a = a || "1";
b = b || "2";
console.log(a, b);
}
getSum(123, "abc");
//es6之后
function getSum(a = "1", b = getDefault()) {
console.log(a, b);
}
getSum();
// getSum(123, "abc");
function getDefault() {
return "2"
}
- 函數(shù)是引用數(shù)據(jù)類型(對象類型)
- 函數(shù)arguments
保存所有傳遞給函數(shù)的實參陷揪，例如 console.log(item1，...杂穷，itemX);
function getSum() {
// 注意點: 每個函數(shù)中都有一個叫做arguments的東東
// arguments其實是一個偽數(shù)組
console.log(arguments);
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
getSum(10, 20, 30, 40);
image
- 函數(shù)的擴展運算符
- 在左邊悍缠，將剩余的數(shù)據(jù)打包到一個新的數(shù)組中（解構(gòu)賦值）
只能寫在最后
let [a, ...b] = [1, 3, 5];// a = 1; b = [3, 5]; - 在右邊，將數(shù)組中的數(shù)據(jù)解開
let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let arr = [...arr1, ...arr2];// arr = [1, 3, 5, 2, 4, 6]; - 擴展運算符在函數(shù)的形參列表中的作用
將傳遞給函數(shù)的所有實參打包到一個數(shù)組中
只能寫在形參列表的最后
function getSum(...values) {
// console.log(values);
let sum = 0;
for (let i = 0; i < values.length; i++){
let num = values[i];
sum += num;
}
return sum;
}
let res = getSum(10, 20, 30, 40);
console.log(res);
- 函數(shù)作為參數(shù)和返回值
//作為參數(shù)
function a(){
console.log('a');
}
function test(fn) {
fn();
}
test(a);
//作為返回值
function test() {
// 注意點: 在其它編程語言中函數(shù)是不可以嵌套定義的,
// 但是在JavaScript中函數(shù)是可以嵌套定義的
let say = function () {
console.log("hello world");
}
return say();
}
test();
- 匿名函數(shù)
作為其他函數(shù)的參數(shù)
作為其他函數(shù)的返回值
作為一個立即執(zhí)行的函數(shù)
不能夠只定義不使用
// 作為其他函數(shù)的參數(shù)
function test(fn) {
fn();
}
test(function () {
console.log("hello world");
});
// 作為其他函數(shù)的返回值
function test() {
return function () {
console.log("hello lnj");
};
}
let fn = test();
fn();
// 作為一個立即執(zhí)行的函數(shù)
(function () {
console.log("hello it666");
})();
- 箭頭函數(shù)
格式：
let 函數(shù)名稱 = (形參列表) =>{
需要封裝的代碼;
}
let say = () => {
console.log("hello world");
}
只有一個形參, 那么()可以省略
let say = value => {
console.log("hello world");
}
只有一句代碼, 那么{}也可以省略
let say = value => console.log("hello world"); - 遞歸函數(shù)
遞歸函數(shù)就是在函數(shù)中自己調(diào)用自己, 我們就稱之為遞歸函數(shù)
遞歸函數(shù)在一定程度上可以實現(xiàn)循環(huán)的功能
每次調(diào)用遞歸函數(shù)都會開辟一塊新的存儲空間, 所以性能不是很好
//不使用遞歸
let pwd = -1;
do{
pwd = prompt("請輸入密碼");
}while (pwd !== "123456");
alert("密碼正確");
//使用遞歸
function login() {
let pwd = prompt("請輸入密碼");
if(pwd !== "123456"){
login();
}
alert("密碼正確");
}
login();
如上流程耐量，會彈出3次 第三方的圖片
直接上傳的圖片
19.預解析
- 瀏覽器在執(zhí)行JS代碼的時候會分成兩部分操作：
預解析以及逐行執(zhí)行代碼飞蚓，也就是說瀏覽器不會直接執(zhí)行代碼,
而是加工處理之后再執(zhí)行,這個加工處理的過程, 我們就稱之為預解析 - 預解析的規(guī)則
將變量聲明和函數(shù)聲明提升到當前作用域最前面
將剩余代碼按照書寫順序依次放到后面
通過let定義的變量不會被提升(不會被預解析)
如果將函數(shù)賦值給一個var定義的變量, 那么函數(shù)不會被預解析, 只有變量會被預解析
//var 定義變量預解析
// 預解析之前
console.log(num); //undefined
var num = 123;
// 預解析之后
var num;
console.log(num);
num = 123;
//函數(shù)預解析
// ES6之前定義函數(shù)的格式
console.log(say);
say();
// ES6之前的這種定義函數(shù)的格式, 是會被預解析的, 所以可以提前調(diào)用
function say() {
console.log("hello world");
}
// 預解析之后的代碼
function say() {
console.log("hello world");
}
//函數(shù)賦值給一個var定義的變量
say();
console.log(say);
say(); // say is not a function
// 如果將函數(shù)賦值給一個var定義的變量, 那么函數(shù)不會被預解析, 只有變量會被預解析
var say = function() {
console.log("hello itzb");
}
var say; //undefined
say();
say = function() {
console.log("hello itzb");
}
- 預解析case
//case1
var a = 666;
test();
function test() {
var b = 777;
console.log(a);
console.log(b);
console.log(c);
var a = 888;
let c = 999;
}
/*
var a;
function test() {
var b;
var a;
b = 777;
console.log(a); // undefined
console.log(b); // 777
console.log(c); // 報錯
a = 888;
let c = 999;
}
a = 666;
test();
*/
//case2
//如果變量名稱和函數(shù)名稱同名, 那么函數(shù)的優(yōu)先級高于變量
console.log(value); // 會輸出函數(shù)的定義
var value = 123;
function value() {
console.log("fn value");
}
console.log(value); // 會輸出123
/*
function value() {
console.log("fn value");
}
var value;
console.log(value);
value = 123;
console.log(value);
*/
