1.js中+號的作用
-
字串連接符 ：連接字串
-
* 條件 ： +號兩邊只要有一邊是string型別 * 算術加法
-
條件 : +號兩邊都是number型別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/* js中+號 兩個作用
1. 字串連接符 ： 連接字串
* 條件 ： +號兩邊只要有一邊是string型別
2. 算術加法
* 條件 : +號兩邊都是number型別
*/
//1 字串連接符：將 + 號 兩邊的字串連接在一起組成一個新的字串
//前提條件： + 號的兩邊，只要有一邊是string型別
let name = '海海';
//console.log ( "我的名字是name" );//此時name是字串的一部分，無法取到變數的值
console.log ( "我的名字是:" + name);
//示例：
let res1 = '10' + 10;
console.log ( res1 );//1010
//2.數學加法
//前提條件： 當 + 號兩邊都是number型別的時候，代表數學加法運算
let res2 = 10 + 10;
console.log ( res2 );//20
</script>
</body>
</html>2.算術運算子與算術運算式
-
運算子只是一種運算的符號，由運算子參與的式子稱之為運算式 -
運算式一定會得到一個運算的結果：要么直接列印這個結果（直接量），要么用變數保存
<script>
/**1.算術運算子：數學中的算術運算
+：加法
-：減法
*：乘法
/：除法
%：求余（求模運算）
2.運算子只是一種運算的符號，由運算子參與的式子稱之為運算式
3.算術運算式（運算式）：由算術運算子組成的式子 例如： 數字1 + 數字2
4.運算式一定會得到一個運算的結果：要么直接列印這個結果（直接量），要么用變數保存
5.算術運算子的優先級與小學數學學的一致：小括號>乘除模>加減
*/
/**加法*/
console.log ( 1 + 1 ); //直接列印算術運算式的結果
let num = 100 + 50; //用變數保存運算式的結果
console.log ( num ); //150
/**減*/
console.log ( 2 - 1 ); //1 數值
/**乘法*/
console.log ( 20 * 3 ); //60
/**除法
* 1.如果兩數相除的結果是一個無理數（無限不回圈小數）或者無限回圈小數，則無法完整的表示所有的小數
一般這種情況不影響開發，可以忽略
* 2.數學中0不能作為除數，JS里也一樣
如果作為除數會得到一個關鍵字：Infinity，代表無窮大的意思
*/
console.log ( 10 / 3 ); //3.333333
console.log ( 10 / - 2 ); //-5
console.log ( 10 / 0 ); //Infinity無窮大
/**求模*/
console.log ( 10 % 3 ); //1
</script>3.復合算術運算子
-
符合算術運算子是算術運算子的一種簡寫形式
-
num += 5只是num = num + 5的簡寫形式，他們之間完全等價 -
+=: 在自身值的基礎上再加多少 -
-=：在自身值的基礎上減多少 -
*=: 在自身值的基礎上乘多少 -
/=: 在自身值的基礎上除多少 -
%=：在自身值的基礎上模多少
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**復合算術運算子：簡化算術運算的代碼
+=: 在自身值的基礎上再加多
-=：在自身值的基礎上減多
*=: 在自身值的基礎上乘多
/=: 在自身值的基礎上除多
%=：在自身值的基礎上模多少
*/
// +=
let num1 = 10;
num1 += 10; //這行代碼相當于 num1 = num1 + 10 的簡寫形式
console.log ( num1 ); //20
// -=
let num2 = 70;
num2 -= 10; //相當于 num2 = num2 - 10;
console.log(num2); //60
// *=
let num3 = 20;
num3 *= 4; //相當于 num3 = num3 * 4;
console.log(num3); //80
// /=
let num4 = 90;
num4 /= 3; //相當于 num4 = num4 / 3
console.log(num4); //30
// %=
let num5 = 10;
num5 %= 3; // num5 = num5 % 3;
console.log(num5); //1
// 注意：不管是哪種復合運算，都是左邊與右邊的結果進行運算
let num6 = 10;
num6 -= 10 - 5; //相當于 num6 = num6 - (10 - 5)
console.log(num6); //5
</script>
</body>
</html>
4.自增/自減運算子
-
1.自增/自減都稱之為自操作運算
-
++：自增，自己+1
-
--：自減，自己-1
-
-
2.自操作運算都是
一元運算式，即只有一個變數參與運算 -
3.自操作運算不能用于
直接量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1.自增運算子 ++
//后置自增運算式: num++
let num1 = 10;
num1++; //這行代碼相當于 num1 = num1 + 1 的簡寫形式
console.log ( num1 ); //11
//2.前置自增
let num2 = 20;
++num2; //這行代碼相當于 num2 = num2 + 1 的簡寫形式
console.log( num2 ); //21
//注意：以上內容說明：如果自操作是獨立一行代碼，不參與其他運算或者輸出，那么
//前置和后置沒有區別
//3.前置和后置區別
let num3 = num4 = 1; //1賦值給num4，然后賦值給num3，相同值的不同變數簡寫初始化
console.log(num3++); //1 先保留num3的原始值1，用于輸出，然后自增為2
console.log(++num4); //2 先運算num4自增，num4為2，然后2用于輸出
console.log(num3,num4); //2 2
//注意：以上內容說明：如果自操作是與其他操作一起運算，那么
//前置會先改變自己，后參與其他運算；后置是先保留自己參與運算，后改變自己
</script>
</body>
</html>--自操作與++操作一致，只是操作的結果是自身的值 - 1
<script>
//1.自減運算子 --
//自減運算式： num--
let num5 = 20;
num5--; //這行代碼相當于 num2 = num2 - 1 的簡寫形式
console.log ( num2 ); //19
//2.前置自減
let num6 = 40;
--num4;
console.log( num6 ); //39
//3.自減操作參與其他運算
let num7 = num8 = 1;
console.log(num7--,--num8); //1 0
</script>5.Math高級數學計算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**
1. Math作用 ： 高級數學計算
2. 常用
a. Math.ceil(數字) ：向上取整
b. Math.floor(數字) ：向下取整
c. Math.max(數字1,數字2,...) ：求最大值
d. Math.min(數字1,數字2,...) ：求最小值
e. Math.random() ：回傳 (0,1) 之間的小數
*/
//1.圓周率
let pi = Math.PI;
console.log ( pi ); //3.1415926.....
//2.絕對值:一個數字與坐標原點的距離
console.log ( Math.abs ( - 2 ) ) //2
//3.天花板函式：向上取整
console.log ( Math.ceil ( 10 ) ); //整數得到自身
console.log ( Math.ceil ( 10.1 ) ); //11,小數則向上取整
console.log ( Math.ceil ( -10.1 ) ); //-10
//4.地板函式: 向下取整
console.log ( Math.floor( 8 ) ); //8 整數得到自身
console.log ( Math.floor ( 7.9 ) ); //7,小數則向下取整
console.log ( Math.floor ( -7.9 ) ); //-8
//5.四舍五入取整
console.log ( Math.round ( 4.5 ) ) //5
console.log ( Math.round ( 3.3 ) ) //3
console.log ( Math.round ( - 9.9 ) ) //-10
//6.求最大值， 數值數量不限使用逗號分割
console.log ( Math.max ( 50, 99, 888, 123 ) ) //888
//7.求最小值， 數值數量不限使用逗號分割
console.log ( Math.min ( 50, 99, 888, 123 ) ) //50
//8.生成一個亂數 范圍 0 - 1 之間的小數
console.log ( Math.random () );
//如果想得到0-100之間的整數 可以乘以一百然后向下取整即可
console.log ( Math.floor ( Math.random () * 100 ) );
//9.冪運算 Math.pow(x,y) 回傳x的y次冪
console.log ( Math.pow ( 2, 8 ) ); //256 2的八次方
</script>
</body>
</html>6.常量const關鍵字【ES6】
-
1.let關鍵字定義的叫做變數，變數的值可以隨時隨地隨便改變
-
2.有的資料希望一開始定義好，后面就不發生變化，那就需要用到const關鍵字
-
const是ES6的語法規范（為大型專案而生）
-
const宣告的叫做常量（固定量）
-
常量在宣告的時候就必須賦值，且后續不再可以改變（只能使用）
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**
1. const定義常量，固定不讓變化（只能使用）
*/
//1.圓周率
let pi = Math.PI; // pi為3.141592653589793
pi = 3.14; // pi改為3.14
const PI = Math.PI;
//PI = 3.14; // 語法錯誤
</script>
</body>
</html>7.模板字串【ES6】
-
ES6提供了一種新的寫描述字串的方式：反引號（數字鍵1旁邊的英文狀態下的符號）
-
作用
-
和引號標記字串的效果一樣
-
可以解決引號字串過長不能換行的問題
-
可以解決字串連接需要使用
+號的問題
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1.引號字串，不方便換行（保留結構）
/*
使用引號字串實作div輸出
<div class="goods">
<a href="#">你好呀</a>
</div>
*/
//寫在一行太長，且沒有結構感，所以一般使用+號連接字串
let str = '<div class="goods">';
str += '<a href="#">你好呀</a>';
str += '</div>';
document.write(str);
//2.模板字串就可以直接換行保護結構
let str = `<div class="goods">
<a href="#">你好呀</a>
</div>`;
document.write(str);
//3.模板字串里面可以方便決議變數，簡化字串的拼接
let data = '你好呀';
let html = `
<div class="goods">
<a href="#">${data}</a>
</div>
`
//注意：后面框架經常使用模板字串方式
</script>
</body>
</html>上一章：JavaScript入門第三章（資料型別與直接量 ）
下一章：JavaScript入門第五章（運算子與運算式下）???????
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290901.html
標籤：其他
上一篇：淺談并小結一下web前端的知識點