JavaScript精粹(一)

JavaScript(簡稱為JS)是一種廣泛應用于網頁開發的腳本語言,具有以下幾個主要作用:

網頁交互:JavaScript 可以用于創建動態的網頁效果,例如響應用戶的操作,實現頁面內容的動態更新,以及驗證用戶輸入等。
與用戶交互:通過 JavaScript,網頁可以與用戶進行實時的交互,例如表單驗證、響應點擊事件、實現動畫效果等,從而提升用戶體驗。
操作 DOM:JavaScript 可以通過 DOM(Document Object Model 文檔對象模型)來操作網頁的結構、樣式和內容,使開發者能夠動態地修改頁面元素,實現頁面的動態效果。
異步數據請求:JavaScript 可以通過 AJAX 技術(Asynchronous JavaScript and XML 異步 JavaScript 和 XML)向服務器發送異步請求,獲取數據并動態更新頁面內容,實現無需刷新頁面即可加載新數據的功能。
構建 Web 應用:JavaScript 還可以用于構建復雜的 Web 應用,例如單頁應用(SPA,Single Page Application)和動態網站,通過 JavaScript 的框架和庫(如React、Angular、Vue.js等),開發者可以更高效地構建現代化的 Web 應用程序。

總的來說,JavaScript 在網頁開發中扮演著至關重要的角色,它使得網頁不再是靜態的展示頁面,而是可以實現豐富的交互和動態效果,從而提升用戶體驗和網站的功能性。

這里寫自定義目錄標題

  • 一、JavaScript發展史
    • 1.1 JavaScript用途
    • 1.2 JavaScript非常好學
  • 二、Hello Word!
    • 1.1 js代碼的書寫
      • 1.1.1 javascript標簽的書寫:
      • 1.1.2 放置位置,執行順序
      • 1.1.3 console.log() 控制臺
      • 1.1.4 alert()
      • 1.1.5 prompt()
    • 1.2 一個簡單的js過程
      • 1.2.1獲取元素
      • 1.2.2 綁定事件
      • 1.2.3寫js代碼需要注意什么?
    • 1.3 不同位置的js代碼
      • 1.3.1 當js代碼放在獲取的元素之前的時候
      • 1.3.2 將js代碼放在標簽內
    • 1.4 事件
    • 1.5 在標簽中添加 或者 獲取內容
      • 1.5.1 innerHTML
      • 1.5.2 innerText
  • 三 變量和字面量初步
    • 1.1 變量和初步認識this
      • 1.1.1 定義變量
      • 1.1.2 變量要先申明才能用
      • 1.1.4 變量的運用
      • 1.1.2 this的簡單認識
    • 1.2 數字的字面量
      • 1. 八進制舉例:
      • 2. 16進制舉例:
      • 3. NaN
    • 1.3 字符串
    • 1.4 變量類型
      • 1.4.1 數據類型(5種)
      • 1.4.2 引用類型
  • 四、數學運算符
    • 1.1 數學運算符
      • 1.1.1 string → number (顯示類型轉換)
      • 1.1.2 number → string
      • 1.1.3 toString()
      • 1.1.4 隱式轉換
      • 1.1.5 取余 %
    • 1.2 關系運算符
      • 1.2.1關系運算符的正統,number和number進行數學運算,得到的答案boolean
      • 1.2.2 不正統的關系運算,為了面試
    • 1.3 邏輯運算符
      • 1.3.1 && 與運算符
      • 1.3.2 || 或運算符
      • 1.3.3 ! 非運算符
    • 1.4 賦值運算符
    • 1.5 Math對象方法


一、JavaScript發展史

1.1 JavaScript用途

前端三層:

  • 結構層 HTML 從語義的角度描述頁面的結構
  • 樣式層 CSS 從審美的角度裝飾頁面
  • 行為層 JavaScript 從交互的角度提升用戶體驗
    說白了,JavaScript用來制作web頁面交互效果,提升用戶體驗

1.2 JavaScript非常好學

好學的點是什么:

  • JavaScript是有界面效果:不像C語言,黑底白字,很枯燥的。
  • JavaScript的語法來源于C和Java:有C和Java的經驗同學好學很多。
  • JavaScript是弱變量類型的語言,動態數據類型語言。
  • JavaScript運行在宿主環境中,不關心內存,垃圾回收。

不好學的點是什么:

  • 兼容性問題: IE8是個怪胎,很多東西都不一樣,所以就要寫兼容寫法,不怕造輪子,多寫幾遍
  • 花式寫法很多,抽象:從簡單入手,細細品味代碼
  • 太多細節: 為知筆記認真寫自己的筆記,自己做實驗; 老師的課程已經精挑細選了細節,并不盲目堆砌

二、Hello Word!

1.1 js代碼的書寫

1.1.1 javascript標簽的書寫:

三種寫法都是對的

<script></script>
<script type="text/javascript"></script>
<script language="javascript"></script>

JavaSript程序,要寫在HTML頁面中,運行頁面的時候,這個頁面上的JS也就一起運行了。也就是說,js的運行必須有宿主環境,最最常見的宿主環境,就是瀏覽器

1.1.2 放置位置,執行順序

可以放置在頁面中任何位置,但是,我們通常放在body或者head結束之前,且要注意加載順序,從上到下依次加載
就像css一樣,js還可以引入外部js文件,通常放在head結束之前

<script src="index.js"></script>

1.1.3 console.log() 控制臺

console.log("內容");

在控制臺輸出內容,字符串需要加引號(單雙引號不區分,成對出現就好)

1.1.4 alert()

alert("內容");

1.1.5 prompt()

var a = prompt("請輸入用戶名:");

會把用戶輸入的值返回,存到a里面

1.2 一個簡單的js過程

我們想要用js操作元素,和我們的css一樣,需要選擇到這個元素,當然,我們的css是通過選擇器,那么js是通過什么呢?

1.2.1獲取元素

我們來學習第一個獲取元素的方法

document.getElementById("id名");//通過ID選擇器獲取元素
//document代表整個HTML頁面

1.2.2 綁定事件

當我們獲取到元素以后,我們可以操作元素了,我們來給他綁定一個點擊事件,通常也叫做添加監聽。

document.getElementById("box").onclick = function () {alert("Daniel好帥!Daniel好帥!");
};

1.2.3寫js代碼需要注意什么?

通過上面的一段簡單的js代碼,我們可以總結出一些js的代碼規范

  • 代碼要縮進,縮進要對齊
  • js嚴格區分大小寫
  • 語句字符都要半角符號
  • 每條完整語句后面要寫分號
  • JavaScript對空格和換行不敏感,因此,語句后面的分號就顯得尤為重要,分號代表一個語句執行完畢

1.3 不同位置的js代碼

1.3.1 當js代碼放在獲取的元素之前的時候

這個時候由于代碼是由上到下執行的,因此js找不到box,這個時候就會報錯,這個時候我們可以用

window.onload = function(){}

將我們的代碼包裹起來,這個代碼的意思是:頁面加載完成(標簽、圖片、框架…)后,執行代碼。
但是,一個頁面只能出現一次

<script>
window.onload = function(){document.getElementById("box").onclick = function(){alert( '這是我的第一段JavaScript代碼~' );};
};
</script>
<body>
<div id='box'></div>
</body>

1.3.2 將js代碼放在標簽內

神奇的是,我們還能將js的代碼放在標簽里面,但是,寫法有所不同

<div id='box' onclick='alert("這是我的第一段JavaScript代碼~")'></div>

我們可以發現,少了function方法,好比我們有onclick這一個屬性一樣直接用等號加引號接上他的屬性值
但是,這樣子寫沒辦法維護,代碼一多久雜亂無章,可讀性差因此我們不會這樣寫js

1.4 事件

JS里面有很多的事件,剛剛我們講的onclick就是其中的左鍵點擊事件。
我們可以講這些事件大致分為幾類:鼠標事件、鍵盤事件、表單事件、系統事件。此處做簡單認識,暫時無需全部掌握。
鼠標事件:

onclick 鼠標點擊事件
onmouseover/onmouseout 鼠標被移入/移出(會冒泡,暫時不需要理解)
onmouseenter/onmouseleave 鼠標移入/移出(常用)
ondblclick 鼠標雙擊事件
onmousedown 鼠標按鍵按下事件(按下不彈起)
onmousemove 鼠標移動事件
onmouseup 某個鼠標抬起事件

表單事件:

onblur 元素失去焦點
onfocus 元素獲得焦點
onchange 用戶改變表單的內容 (發生在失去焦點之前)
用戶改變表單內容:當失去焦點的時候表示改變完成,但是又在失去焦點事件之前執行
onreset 重置按鈕被點擊(注意:要給form表單設置該事件)
onsubmit 提交按鈕被點擊

鍵盤事件:

onkeydown 某個鍵盤的鍵被按下
onkeypress 某個鍵盤的鍵被按下或按住
onkeyup 某個鍵盤的鍵被松開

系統事件:

onload 某個頁面或圖像被完成加載
onresize 窗口或框架被調整尺寸
onselect 文本被選定
onerror 當加載文檔或圖像時發生某個錯誤(xss跨站腳本攻擊時使用)

1.5 在標簽中添加 或者 獲取內容

我們先來做一個小小的案列,當我們鼠標移入box盒子的時候顯示一段文字:

1.5.1 innerHTML

我們又學習到一個新的屬性:innerHTML 獲取元素里面的內容或者添加內容

document.getElementById('box').onmouseover = function(){document.getElementById('box').innerHTML = '大家好,我是Daniel';
};

當然也可以獲取內容

console.log(document.getElementById('box').innerHTML);

這個時候我們可以獲取里面的內容,是獲取到里面所有的內容,包括標簽

1.5.2 innerText

此外,還有一個innerText也可以添加內容

document.getElementById('box').onmouseover = function(){document.getElementById('box').innerText = '<p>大家好,我是Daniel。</p>';
};
document.getElementById('box').onmouseover = function(){document.getElementById('box').innerHTML = '<p>大家好,我是Daniel。</p>';
};

但是我們可以看出來,innerText不能解析標簽,而innerHTML可以。
注意:這兩個屬性都是可讀可寫的,也就是既可以修改也可以獲取.


三 變量和字面量初步

1.1 變量和初步認識this

變量(Variables),和高中代數學習的x、y、z很像,它們不是字母,而是蘊含值的符號。
它和直接量不同,直接量5,就是數字5;直接量”你好”就是字符串“你好”。現在這個變量不一樣了,你看見一個a,實際上它不是字母a,而是里面蘊含的不同的值。

1.1.1 定義變量

<script type="text/javascript">//定義一個變量var a;//賦值a = 100;//輸出變量aconsole.log(a);
</script>

我們使用var關鍵字來定義變量,所謂的關鍵字就是一些有特殊功能的小詞語,關鍵字后面要有空格。var就是英語variables變量的縮寫,表示定義一個變量。一旦你

var a

你的電腦內存中,就會開辟一個空間,來存儲這個變量a。現在就可以給這個變量賦值,JS中給變量賦值用等號,等號右邊的值賦給左邊

a = 100

現在a變量的值就是100。所以我們輸出

console.log(a)    //100

1.1.2 變量要先申明才能用

使用一個變量,必須先進行一個var,才能使用。var這個過程可以叫做聲明declaration,也可以叫做定義definition。
現在我們直接運行語句:

console.log(b);   //這個b沒有被var過,所以要報錯

在這里插入圖片描述

因為b沒有被定義,所以b現在不是一個變量,系統不認識這個b的。拋出引用錯誤。而且
如果一個變量,僅僅被var了,但是沒有被賦初值呢,此時這個變量的值就是undefined 未定義

var a;
console.log(a);  //undefined

變量也可以一邊定義一邊賦值

var a = 10;

還可以同時定義多個變量

var a = 10,b = 20;

變量的名稱是標識符(identifiers),任何標識符的命名都需要遵守一定的規則:

  • 在JavaScript語言中,一個標識符(identifier)可以由 字母、下劃線(_)、美元($)符號、數字(0-9) 組成,但不能以數字開頭 。也就是說,一個標識符必須由字母、下劃線、美元符號開頭,后續可以有字母、下劃線、美元符號、數字。因為JavaScript語言是區分大小寫的,所以A和a不是同一個變量。并且不能是JavaScript保留字、關鍵字。

1.1.4 變量的運用

之前我們設置了一個js事件,鼠標移入會顯示內容,那么,當移出的時候我們也給他設置事件,讓里面的內容清空

document.getElementById('box').onmouseover = function(){document.getElementById('box').innerHTML = '大家好,我是Daniel。';
};
document.getElementById('box').onmouseout = function(){document.getElementById('box').innerHTML = '' ";
};

這個時候,我們可以看到我們的頁面中有一大串重復的語句document.getElementById(‘box’) ,這時候我們就可以用變量把他給存起來。

var oBox = document.getElementById('box');
oBox .onmouseover = function(){oBox .innerHTML = '大家好,我是Daniel。';
};
oBox .onmouseout = function(){oBox .innerHTML = ''";
};

這個時候,我們可以發現,我們的代碼量少了很多,優化了代碼,也提升了運行速度,但是,我們卻不能這樣子,

var oBox = document.getElementById('box');
var x= oBox .innerHTML
oBox .onmouseover = function(){x = '大家好,我是Daniel。';
};
oBox .onmouseout = function(){x = ''";
};

這個時候是什么情況呢,是我們把oBox的內容復制給了x,再將’大家好,我是Daniel。復制給x,這時候,等價于給x新賦值了內容,把之前的覆蓋了。在js里面 ‘=’是賦值的意思,‘==’才是等于的意思

1.1.2 this的簡單認識

this指向觸發這個事件的對象

oBox1.onmouseenter = function () {this.innerHTML = "我愛Daniel!";//在js里面=是賦值
};
oBox1.onmouseleave = function () {this.innerHTML = "Daniel好帥!";//在js里面=是賦值
};

字面量:英語叫做literals,有些書上叫做直接量。
我們先來學習數字的字面量,和字符串的字面量。剩余的字面量類型,我們日后遇見再介紹

1.2 數字的字面量

數字的字面量,就是這個數字自己,并不需要任何的符號來界定這個數字。
JavaScript中,數字的字面量可以有三種進制:

  • 10進制:普通的數字就是十進制
  • 8進制:如果以0開頭、或者以0o開頭、或者以0O開頭的都是八進制,八進制只能用0~7來表示
  • 16進制:如果以0x 或0X開頭的都是十六進制。

1. 八進制舉例:

以0開頭,所以就是八進制;顯示的時候會以十進制顯示 036 = 3*8+6=30

    console.log(036);  //30console.log(044);   //36console.log(010);   //8console.log(0o36); //30console.log(0O36); //30console.log(010);   //8

注意,八進制只能出現0~7這8中字符,如果表示不合法,那么JS將自動的認為你輸入錯了,從而用十進制進行顯示:
console.log(088);//88 以0開頭,按理說是八進制,但后面的數字錯了,所以以十進制顯示
但是以0o開頭、0O開頭的數字,如果后面寫錯了,控制臺報錯

2. 16進制舉例:

十六進制數:0 1 2 3 4 5 6 7 8 9 a b c d e f

console.log(0xff);   //255
console.log(0x2b);  //43
console.log(0x11);  //17

小數的字面量也很簡單,就是數學上的點。計算機世界中,小數稱為“浮點數”,允許使用e來表示乘以10的幾次冪:

console.log(5.6e5); //560000
console.log(1e-4); //0.0001
console.log(.1e-3); //0.0001

只有十進制有小數的字面量,八進制、十六進制沒有小數的字面量
最后學習兩個特殊的字面量:

Infinity 無窮大

試圖輸出一個非常大的數字:

console.log(3e45645645645645);  //infinity

至于多大的數字能生成無窮大,不同瀏覽器不一樣,不要管,當然也可以是負無窮大

3. NaN

英語全名叫做not a number,不是一個數。比較哲學的是,這個“不是一個數”是一個數字字面量

console.log(0/0);

簡單得說就是用不是數字字面量或數字字符串參與運算,或者不符合運算法則的結果就是NaN
總結一下,數字字面量有 整數字面量(十進制、16進制、八進制),浮點數字面量(要記住e),Infinity,NaN

1.3 字符串

字符串是一個術語,就是人類說的語句、詞。字符串的字面量,必須用雙引號、單引號包裹起來。字符串被限定在同種引號之間;也即,必須是成對單引號或成對雙引號。

console.log("今天天氣很好")

或者

console.log('今天天氣很好')

但是絕對不能

console.log('今天天氣很好")

無論什么類型,只要用引號引起來以后就是字符串
如果在字符串里面要使用引號,那么必須用轉義符號""轉義:

console.log("老師說你像\"考拉\"一樣漂亮");

1.4 變量類型

這個變量是什么類型,和賦的值有關系,而和定義的時候是沒有關系的。定義的時候,都是用var關鍵字定義的
檢測數據類型用typeof

var a = 10;
console.log(typeof a);

1.4.1 數據類型(5種)

基本類型5種:

  • number 數字類型
  • string 字符串類型
  • undefined undefined類型,變量未定義時的值,這個值自己是一種類型
  • boolean 布爾類型,僅有兩個值true 和 false,講if語句時我們細說
  • null null類型,空對象 這個值自己是一種類型,遇見時我們細說

(1) number 數字類型

var a = -100;

(2)string 字符串(無論什么類型,用引號引起來就是字符串)

 var a = '100';

注意:空字符串,也是字符串。
(3) undefined

var a;
console.log(a);   //undefined

(4) boolean 布爾值(true/false)

var a = false;

1.4.2 引用類型

所謂的引用類型就是在進行比較的時候比較的不僅是值,還有內存地址
(1)function 函數類型

var a = function () {console.log("Daniel!");};var b = function () {console.log("Daniel!");};console.log(typeof a); // functionconsole.log(a === b); //false};

我們可以發現 雖然這兩個函數長得一模一樣,但是卻不相等,這就是因為在定義的時候開辟了兩個不同的內存,導致他們的內存地址不相等,所以值不等。
還有json,數組也是引用類型,不過,function是獨立的function類型,json和數組是object類型

(2)object對象(元素節點、數組、JSON、null)

元素節點:

var oBox = document.getElementById('box');
console.log(typeof oBox); //object

數組:
數組(數組里面可以放任意的數據類型,包括數組)

var a = [1,2,3,'Daniel','好帥'];

可以通過下標的方式獲取數組里面的內容,數組的下標從0開始

console.log(a[2]);    //3

通過.length獲取數組的長度

console.log(a.length)   //5

類型:object

var a = [1,2,3,4];
var b = [1,2,3,4];
console.log(typeof a); //object
console.log(a === b); //false

JSON:

  • JSON,里面放置鍵值對,由逗號隔開,最后一個可以不加逗號
  • 鍵值對:由引號引起的屬性 冒號 值構成
  • 就屬性而言:可以不用引號,但有些后臺語言不認識沒有冒號的JSON,因此我們統一要求加冒號
  • 就值而言:可以是任意語句,但是一般傳到后臺的是字符串數據,在js自身去使用的話可以是任意類型
var a = {"name" : 'Daniel',"sex" : '男',"age" : 18,"fn" : function () { console.log("哈哈");}};console.log(a.name); //調用里面的屬性 值console.log(a.fn());

但是,和數組不一樣的是,json里沒有長度這個屬性,除非你定義了

console.log(shuaiGe.length); //undefined

類型:object

    var a = {"name" : "Daniel"};var b = {"name" : "Daniel"};
console.log(typeof a); // objectconsole.log(a === b); //false

null:
在一個節點元素沒有添加事件的時候,他的事件就是null

var oBox = document.getElementById('box');
console.log(oBox.onclick); //null
console.log(typeof oBox.onclick); //object

所以我們在綁定一個事件的時候想要解綁,就可以用null

var oBox = document.getElementById('#box');oBox.onclick = function (ev) {console.log("你好!");};oBox.onclick = null;

四、數學運算符

運算符(Operators,也翻譯為操作符),是發起運算的最簡單形式。運算符的分類見仁見智,我們的課程對運算符進行如下分類:

  • 數學運算符(Arithmetic operators)
  • 比較運算符(Comparison operators)
  • 邏輯運算符(Logical operators)
  • 賦值運算符(Assignment operators)
  • 按位運算符(Bitwise operators)
  • 條件 (三元) 運算符(Conditional operator)

1.1 數學運算符

數學運算符的正統,是number和number的數學運算,結果是number。出于面試的考慮,有一些奇奇怪怪的數學運算:
數學運算中,只有純數字字符串、布爾值、null能夠幫你進行隱式轉換
- + - * / % ()

1.1.1 string → number (顯示類型轉換)

(1)parseInt()
parseInt就是將一個string轉為一個整數,不四舍五入,直接截取整數部分。如果這個string有亂七八糟的東西,那么就截取前面數字部分。如果兩個數字之間有字符串,那么只截取第一個數字。

var a = "123.12px123";
var b = parseInt(a);
console.log(typeof b); //number
console.log(b); //123

(2)parseFloat()
會截取小數點

var a = "123.12px123";
var b = parseFloat(a);
console.log(typeof b); //number
console.log(b); //123.12

1.1.2 number → string

將一個數字,與一個空字符串進行連字符運算,那么就是自動轉為字符串了,不僅是數字適用,其他類型要轉換成字符串也適用

var a = 123;
var b = a + "";
console.log(b); //123
console.log(typeof b);  //string

1.1.3 toString()

將其他類型轉換為string類型

var str4 = 100;
console.log(typeof str4.toString()); //string

1.1.4 隱式轉換

就是沒有寫parseInt()、parseFloat()自己幫你轉格式

console.log(3 * "8"); //24
console.log("3" * "8"); //24
console.log("48" / "2"); //24
console.log("24" % 55); //24
console.log(3 * null);  //0   隱式轉換的時候null將被轉為0
console.log(3 * false);  //0  隱式轉換的時候false將被轉為0
console.log(3 * true);  //3  隱式轉換的時候true將被轉為1
// 不純的字符串和undefined是不能幫你進行隱式轉換的,結果都是NaN
console.log(3 * "8天"); //NaN 數學運算中,不純的字符串沒法隱式轉換
console.log(3 * undefined); //NaN  數學運算中,undefined不能進行隱式轉換

加號比較特殊,加號兩邊都是數字類型或者數字類型的字符串的時候,那么就是數學加法;兩邊不都是數字或者數字類型的字符串的時候,那么就是字符串的拼接,結果是字符串。

var sum = 3 + 4; //7

以上是運算

console.log("你" + "好"); //你好
var sum = "3" + "4"; //34

這種就是字符串的拼接,所以,加號沒有隱式類型轉換

總結

  • 無論哪種運算,只要出現了undefined參與運算,結果都是NaN。
  • 然后"4"、false、true、null都能進行隱式轉換。
  • 加號比較特殊,面對"4"沒有隱式轉換的

1.1.5 取余 %

兩個值相除的余數

var a = 13 % 5;
console.log(a);   //3

13除以5 商 2 余3, 所以結果為3

1.2 關系運算符

<img src="img/1.jpg" alt="Daniel的媳婦兒,你們的師娘!" id="box" width="200" >>   大于<   小于>=  大于等于<=  小于等于==  等于!=  不等于=== 全等于!== 不全等

1.2.1關系運算符的正統,number和number進行數學運算,得到的答案boolean

console.log(8 > 5);
console.log(7 < 4);

(1)= 等號 賦值

var a = 10; //將10賦值給a

(2)== 等等 等于

var a = 10;
var b = "10";
console.log( a == b );  //true

(3)=== 全等 數據類型判斷值和類型 引用類型判斷內存地址和值

var a = "3",var b = 3;
console.log( a === b );  //false

1.2.2 不正統的關系運算,為了面試

(1)string 和 string 比較的就是字符編碼順序
字符編碼順序 à 數字、大寫字母、小寫字母

"a" < "b" //true
"A" < "B" //true
"A" < "a" // true ,大寫字母在字符集里面是在小寫字母前面
"1" < "A"   //true ,數字在字母前端
"blank" < "blue"   //true   因為一位一位比,直到比出大小
"25678" < "111111111"    //false  因為是string和string比,比的是字符編碼順序 所以一位一位的比

(2)與數字進行關系運算時,純數字字符串被轉為數字,null轉換為0,true轉換轉為1, false轉換為0 (隱式類型轉換)

注意的是:null不能進行和0的相等判定

null < 0.00001   //true
null > -0.0001   //true
null == 0   //false  
false == 0   //true
true == 1 //true

NaN不等于自己,不全等于自己

NaN == NaN   //false
NaN === NaN   //false
NaN != NaN //true
NaN !== NaN //true

string 和 number比,string會被隱式轉換為number

console.log( "234" < 235 ); //true

要注意的是,不要出洋相,不能連續使用關系運算符!!
2 > 2 > 1
的值是多少?

解:原式=(3>2) >1 = true > 1 = false (因為true會被當做1來與1進行比較)

也就是說,不能連續使用關系運算符!!因為一旦連續使用了,實際上還是從左至右計算,所以就有上一步的boolean參與了下一步的運算。
如果想要使用連續關系運算:
1<2 && 2<3

1.3 邏輯運算符

邏輯運算符就三個:

  • && 邏輯與運算
  • || 邏輯或運算
  • ! 邏輯非運算

正統來說,參與邏輯運算的是boolean和boolean,得到的結果也是boolean

1.3.1 && 與運算符

都真才真 有假就假 “短路語法”:a&&b a真拋出b a假拋出a

console.log(1 && 2); //2
console.log(false && 2); //false

1.3.2 || 或運算符

有真就真,都假才假 “短路語法”: a || b a真拋出a a假拋出b

console.log(1 || 2); //1
console.log(false || 2); //2

1.3.3 ! 非運算符

取反

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

1.4 賦值運算符

  • = 賦值
  • += 加等于
  • -= 減等于
  • *= 乘等于
  • /= 除等于
  • %= 模等于
  • ++ 加加
  • -- 減減

賦值運算的參與者,一定是變量
(1)+=

var a = 1;
a += 2;        //這行語句等價于a = a + 2;
console.log(a);   //3

(2)/=

var b = 6;
b /= 3;   //等價于b = b / 3
console.log(b); //2

(3)%=

var c = 100;
c %= 10; //等價于c = c % 10;
console.log(c); //0var a = false + true && 13;
原式 = 0 + 1 && 13= 1 && 13= 13

(4)++

var e = 10;
e++; //等價于e=e+1
console.log(e); //11

++可以與輸出語句寫在一起,++寫在變量前和寫在變量后不是一個意思

var a = 10;
var x = a++// 先賦值 再加1
var y = ++a : // 先加1 再賦值

++有花式玩兒法,僅面試有用:

var a = 8;
console.log(4 + a++);   //12  , 先使用原來的a的值,就是4+8,輸出12.然后a加1  a為9
console.log(a);     //9

(5)運算符的計算順序:
++ -- !貼身的 →→→ 比較 →→→ 邏輯 →→→ 賦值

var a = 3 < 6 && 7 < 14; //true
原式 = true && true= true
var a = 1 + 2 < 3 + 3 && 3 + 4 < 2 * 7;
原式 = 3 < 6 && 7 < 14= 上一題= true
var a = false + true && 13;
原式 = 0 + 1 && 13= 1 && 13= 13
var a = 15;
false + a++ + true > 8 && 13 || 6
原式 = false + 15 + true > 8 && 13 || 6= 16 > 8 && 13 || 6= true && 13 || 6= 13 || 6= 13

1.5 Math對象方法

  1. Math.pow(x,y) x的y次冪
    Math.pow(3,4) //81
  2. Math.sqrt(x); x的根號
    Math.sqrt(81); //9
  3. Math.floor() 向下取整
    Math.floor(3.14) //3
  4. Math.ceil() 向上取整
    Math.ceil(3.14) //4
  5. Math.max() 取最大值 參數沒有個數限制
    Math.max(3,4) // 4
  6. Math.max() 取最小值 參數沒有個數限制
    Math.min(3,4); //3
  7. Math.random() 隨機數 [0,1) 之間,取得到0,取不到1
    要取到[a,b]之間的隨機整數,公式:Math.floor(Math.random()*(b-a+1) + a),比如要取[2,4]之間的整數
    Math.floor(Math.random()*(4-2+1) + 2);
  8. Math.abs() 取絕對值
    Math.abs(-2) // 2
  9. Math.round() 四舍五入
    Math.round(3.14) //3

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/12282.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/12282.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/12282.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Java SE vs Java EE:深入剖析及面試指南

Java 平臺提供了多個版本來滿足不同應用場景的需求&#xff0c;其中最常用的是 Java SE&#xff08;Standard Edition&#xff09;和 Java EE&#xff08;Enterprise Edition&#xff09;。理解這兩個版本的區別對于任何 Java 開發者都是至關重要的&#xff0c;尤其是在面試過程…

C++字符串細節,面試題06

文章目錄 22. 字符串22.1. 字符數組 vs 字符指針 vs 常量字符指針 vs string22.2. strcpy vs sprintf vs memcpy22.3. strlen vs length vs size vs sizeof22.4. 字符串之間的轉換22.5 其他數據類型與字符串之間的轉換22.6 字符串分割 22. 字符串 22.1. 字符數組 vs 字符指針 …

Spring整合其他技術

文章目錄 Spring整合mybatis思路分析Mybatis程序核心對象分析整合Mybatis 代碼實現 Spring整合Junit修改成警告 Spring整合mybatis 思路分析 Mybatis程序核心對象分析 上面圖片是mybatis的代碼&#xff0c;上述有三個對象&#xff0c;分別是sqlSessionFactory&#xff0c;sqlS…

Linux:配置客戶端自定義autofs服務

Linux&#xff1a;配置客戶端自定義autofs服務 修改autofs的主策略文件 [rootserver200 data]# vim /etc/auto.master# 修改內容如下 /misc /etc/auto.misc # 掛載目錄的上級目錄 /mnt /etc/auto.timinglee --timeout3修改autofs的自定義策略文件 [rootserver200 data]…

數據庫SQL編寫規范-SQL書寫規范整理(SQL語句書寫規范全解-Word原件)

編寫本文檔的目的是保證在開發過程中產出高效、格式統一、易閱讀、易維護的SQL代碼。 1 編寫目 2 SQL書寫規范 3 SQL編寫原則 軟件全套精華資料包清單部分文件列表&#xff1a; 工作安排任務書&#xff0c;可行性分析報告&#xff0c;立項申請審批表&#xff0c;產品需求規格說…

鴻蒙布局Column/Row/Stack

鴻蒙布局Column/Row/Stack 簡介我們以Column為例進行講解1. Column({space: 10}) 這里的space: 10&#xff0c;表示Column里面每個元素之間的間距為102. width(100%)&#xff0c;height(100%) 表示寬高占比3. backgroundColor(0xffeeeeee) 設置背景顏色4. padding({top: 50}) 設…

【ARM 嵌入式 C 文件操作系列 20.4 -- 打印 uint64_t 類型的數值】

文章目錄 C代碼中 打印 uint64_t 類型的數值測試效果 C代碼中 打印 uint64_t 類型的數值 為了以16進制方式打印uint64_t類型的數值&#xff0c;可以使用printf函數&#xff0c;配合<inttypes.h>頭文件中定義的宏PRIX64或PRIx64。這些宏確保了無論在哪個平臺上&#xff0…

keepalived雙機熱備超詳細入門介紹

keepalived 一、keepalived入門介紹 1.keepalived簡介 2.keepalived服務的三個重要功能 2.1.管理LVS負載均衡軟件 2.2.實現對LVS集群節點健康檢查功能 2.3.作為系統網絡服務的高可用功能 3.keepalived高可用故障切換轉移原理 4.keepalived安裝及主配置文件介紹 …

如何用Rust獲取本機CPU、內存在Web網頁中顯示?

目錄 一、需求描述 二、具體操作步驟 三、知識點 1、systemstat 2、Actix 一、需求描述 需求&#xff1a; 1、需要使用Rust進行后端開發獲取本機CPU和內存信息&#xff1b; 2、使用WEB框架發布API&#xff1b; 3、然后使用HTML/CSS/JavaScript進行前端開發&#xff0…

MySQL表的增刪查改【基礎部分】

數據表的操作 新增 普通插入 insert into 表名 values(值,值...)注意&#xff1a; 此處的值要和表中的列相匹配 使用’‘單引號或者”“雙引號來表示字符串 mysql> insert into student values(123,zhangsan); Query OK, 1 row affected (0.02 sec)指定列插入 insert …

2024年3月 電子學會 青少年等級考試機器人理論真題五級

202403 青少年等級考試機器人理論真題五級 第 1 題 下圖程序運行后&#xff0c;串口監視器顯示的結果是&#xff1f;&#xff08; &#xff09; A&#xff1a;0 B&#xff1a;1 C&#xff1a;3 D&#xff1a;4 第 2 題 下列選項中&#xff0c;關于74HC595移位寄存器芯片的…

微信小程序開發【Coffee Shopping】(1)

1.環境準備 微信開發者工具&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 前端常用網站集合&#xff1a;http://www.wwp666.cn/ 微信小程序開發文檔&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/quicksta…

數據結構之二叉樹詳解[1]

在前面我們介紹了堆和二叉樹的基本概念后&#xff0c;本篇文章將帶領大家深入學習鏈式二叉樹。 1.預備知識 2.二叉樹結點的創建 3.二叉樹的遍歷 3.1前序遍歷 3.2中序遍歷 3.3 后序遍歷 4.統計二叉樹的結點個數 5.二叉樹葉子結點的個數 6.二叉樹第k層的結點個數 7.總結 …

鴻蒙ArkUI開發:常用布局【相對布局】

相對布局&#xff08;RelativeContainer&#xff09; 相對布局可以讓子元素指定兄弟元素或父容器作為錨點&#xff0c;基于錨點做位置布局必須為RelativeContainer及其子元素設置ID&#xff0c;用于指定錨點信息。未設置ID的子元素不會顯示RelativeContainer ID為“__containe…

增程SUV價格即將崩盤?買車一定要再等等!

文 | AUTO芯球 作者 | 雷歌? 真是“離譜”啊&#xff0c;車圈真是逗比歡樂多&#xff0c; 我這兩天看一個博主連續40多小時開車直播&#xff0c;充電口、油箱蓋全部封死&#xff0c;全程視頻直播沒斷過&#xff0c; 就為了測試這兩天剛上市的星際元ET續航有多遠。 另一個…

Docker 創建網絡

問題&#xff1a; 1.需要將多個容器添加到同一個網絡. 2.docker-compose.yaml 如果不指定&#xff0c;默認會重新創建一個網卡. 創建網卡 docker network create -d bridge mynet ##-d 指定模式&#xff08;默認橋接&#xff09;查看自定義網絡信息 docker inspect mynet…

NSSCTF Web方向的例題和相關知識點(二)

[SWPUCTF 2021 新生賽]Do_you_know_http 解題&#xff1a; 點擊打開環境&#xff0c;是 提示說請使用wLLm瀏覽器訪問 我們可以更改瀏覽器信息&#xff0c;在burp重放器中發包后發現是302重定向&#xff0c;但是提示說success成功&#xff0c;說明 我們修改是成功的&#xff…

HTML特殊字符

特殊字符 有特殊含義的字符成為字符實體 對于有特殊含義的字符,需要通過轉移字符來表示 <span> <br><a href"http://www.atguigu.com">我 愛 前端</a> <br>&amp;amp; 效果

Element-UI 快速入門指南

文章目錄 一、安裝 Element-UI1.1 使用 npm 安裝1.2 使用 yarn 安裝 二、引入 Element-UI三、使用 Element-UI 組件3.1 按鈕組件3.2 輸入框組件3.3 表單組件3.4 表格組件3.5 彈框組件 四、自定義主題4.1 安裝主題工具4.2 初始化變量文件4.3 編譯主題 五、總結 &#x1f389;歡迎…

刷題之最長連續序列

哈希表 class Solution { public:int longestConsecutive(vector<int>& nums) {//set記錄并且去重nums中的數unordered_set<int>set;for(int i0;i<nums.size();i){set.insert(nums[i]);}int result0;//遍歷所有數for(auto iset.begin();i!set.end();i){//如…