JS（一）

虛幻交界發表於2020-12-22

js程式碼匯入方式

1. 嵌入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    	alert('hello');
    </script>
</head>
<body>
    
</body>
</html>

2. 行內式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="點我" onclick="alert('hello')">
</body>
</html>

3. 外部匯入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="myjs.js"></script>
</head>
<body>
    
</body>
</html>

註釋

1. 單行註釋

// 單行註釋

2. 多行註釋

/*
多行註釋
*/

修改vscode中塊註釋
管理 -> 鍵盤快捷方式 -> 搜尋切換塊註釋 -> 設定為 ctrl + shift + /

輸入輸出語句

alert 瀏覽器警示框 alert('hello')
console.log 瀏覽器控制檯列印 console.log('see this message')
prompt 瀏覽器彈出輸入框 prompt('請輸入數字：')

變數

變數的初始化

var name = 'zzer';
var age;
age = 20;

var a=1,b=2,c=3;

變數命名規範

變數名可使用字母，數字，下劃線，美元符號$ 組成
區分大小寫
不能以數字開頭
不能為保留關鍵字
駝峰命名法，首字母小寫，後面的單詞首字母大寫

資料型別

基本資料型別

簡單資料型別	說明	預設值
Number	數字型，整形，浮點型	0
Boolean	布林值型別，如 true、false，等價於 1，0	false
String	字串	''
Undefined	var a; 未賦值時 a = undefined	undefined
Null	var a = null; 宣告變數a為空值	null

#### Number ##### 八進位制數字前加 0 010 -> 十進位制 8 ##### 十六進位制數字前加 0x 0x10 -> 十進位制16

Number物件屬性

Number.MAX_VALUE
Number.MIN_VALUE

Infinity 無窮大
-Infinity 無窮小
NaN （not a number ）非數字

isNaN

判斷變數是否為數字
isNaN(123)

String

使用一對單引號或雙引號

轉義字元
\n 換行
\b 空格
\t 製表符

字串長度

字串length屬性

var str = 'hello';
str.length;

字串拼接

var str = 'hello' + 'world';

數值和字串相加自動將數值轉為字串

Boolean

true 相當於 1
false 相當於 0

Undefined

變數宣告未賦值時未undefined

Null

空值

內建函式

typeof 獲取物件資料型別

var str = ‘string’;
typeof str

資料型別轉換

轉換為字串

物件方法 .toString()

var num = 10;
console.log(num.toString())

String

var num = 10;
console.log(String(num))

使用字串拼接

var num = 10;
console.log(num + ‘’)

轉換為數字型

parseInt()

parseInt(‘123’)
parseInt(‘120px’) 可以去單位

parseFloat()

parseFloat(‘3.14’)

Number()

Number(‘321’)

進行算術運算隱式轉換

‘12’ - 0 結果為 Number 12
‘123’ - ‘120’ 結果為 Number 3

Boolean轉換為布林型

‘’,0,NaN,null,undefined 為false
Boolean(1) -> true

運算子

遞增運算子

遞增 ++
遞減 –

前置遞增運算子

先加1 後返回值
var num = 0;
console.log(++num + 1); //->2

後置遞增運算子

先返回原值，後自加1
var num = 0;
console.log(num++ + 1); //->1

比較運算子

>	大於
>=	大於等於
<	小於
<=	小於等於
==	相等	判斷兩邊值是否相等，包含隱性轉換
!=	不等於
===	全等	值和資料型別都一樣

邏輯運算子

邏輯運算子	說明	案例
&&	邏輯與 and	true && false -> false
\|\|	邏輯或 or	true \|\| false -> true
!	邏輯非 not	!true -> false

賦值運算子

var num = 1;
num += 2;
num -= 2
num *= 2;
num /= 2;
num %= 2;

運算子優先順序

小括號
一元運算子
算術運算子
關係運算子
相等運算子
邏輯運算子先 && 後 ||
賦值運算子
逗號運算子

流程控制

if語句

if (條件表示式) {
	程式碼塊1;
} else if{
	程式碼塊2;
} else {
	程式碼塊3;
}

三元表示式

條件表示式 ? 表示式1: 表示式2

如果條件表示式為真執行表示式1 否則執行表示式2

switch語句

將表示式的值與 value值相匹配

switch(表示式) {
	case value1:
		執行語句1;
		break;
	case value2:
		執行運距2;
		break;
	default:
		執行最後語句;
}

for迴圈

for (初始化變數; 條件表示式; 操作表示式) {
 迴圈體
}

while迴圈

while (條件表示式) {
	迴圈體
}

當條件表示式為true時執行，為false是退出

do while迴圈

do {
	迴圈體
} while (條件表示式)

先執行迴圈體，再判斷條件

continue,break 關鍵字

continue 跳過本輪迴圈
break 跳出迴圈體

陣列

js中一個陣列可以儲存不同資料型別資料

陣列建立

1.方式一
var arr = new Array();
2.方式二
var arr = [];

陣列元素用逗號分隔

獲取陣列元素

索引訪問

var arr = ['a','b','c','d'];
arr[0]  //索引從0開始 只有正向索引
arr[4] // 輸出undefined

獲取陣列長度

var arr = [‘a’,'b','c','d'];
console.log(arr.length)

陣列遍歷

var arr = [‘a’,'b','c','d'];
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i])
}

陣列新增元素

1.方式一

修改length屬性，length可讀性
var arr = [‘a’,'b','c','d'];
arr.length = 6
其中 arr[4],arr[5] 為undefined

2.方式二

var arr = [‘a’,'b','c','d'];
arr[4] = 'e'

迴圈追加元素

var arr = [];
for (var i = 0; i < 10; i++) {
	arr[i] = i;
}

var arr = [];
for (var i = 0; i < 10; i++) {
	arr[arr.length] = i;
}

翻轉陣列

var arr = [1,2,3,4,5];
var new_arr = [];
for (var i = 0; i < ar.length; i++) {
	new_arr[arr.length - i - 1] = arr[i] 
}

//==============

var arr = [1,2,3,4,5];
var new_arr = [];
for (var i = arr.length - 1; i >= 0; i--) {
	new_arr[new_arr.length] = arr[i] 
}

陣列氣泡排序

var arr = [5,4,3,2,1];
var temp;
for (var i = 0; i < arr.length - 1; i++) {
	for (var j = 0; j < arr.length - 1 - i; j++ ) {
		if (arr[j] > arr[j+1]) {
			temp = arr[j];
			arr[j] = arr[j+1];
			arr[j+1] = temp;
		}
	}
}

函式

函式定義

function 函式名(arg1, arg2) {
	函式體
}

引數

實參個數大於形參個數 -> 不會報錯多餘的實參不會被接受
實參個數小於形參個數 -> 不會報錯多餘的形參定義為undefined

return

終止函式，且只能返回一個值

function func(arg) {
	return arg;
}

返回多個值可以使用陣列

function func(num1, num2) {
	return [num1+num2, num1-num2, num1*num2, num1/num2]
}

無返回值函式返回undefined

arguments

函式中arguments物件包含傳遞的所有實參

偽陣列(1. 具有length屬性，2. 按索引方式儲存 3. 沒有真正陣列的方法 pop等)

function func() {
	return arguments
}

func(1,2,3,4,5)

匿名函式

var func = function(arg1,arg2) {
	函式體;
}
func()

作用域

某個變數起作用的範圍

函式內定義的變數作用域只在函式內

函式內部不適用var 關鍵字直接賦值的變數作用域為全域性

塊級作用域

es6之前沒有塊級作用域
塊級作用域 {} 裡面為單獨的作用域

作用域鏈

內部函式訪問外部函式的變數，採取的是鏈式查詢的方式，就近原則

預解析

js引擎執行js 分兩步：預解析程式碼執行

預解析

變數預解析

將var變數宣告放到當前作用域最前面(只宣告不符值)

var a = b = c = 9; // var a = 9; b = 9; c = 9;
// 多變數賦值 var a = 9,b = 9, c = 9
/*預解析時相當於 
var a;
c = 9; 
b = 9;
a = 9;
b,c為全域性作用域
*/

函式預解析

將function關鍵字宣告的函式提升到當前作用域的最前面
不提升匿名函式賦值

var func = function() {
	
}

物件

一組無序的屬性和方法的集合

物件建立

字面量建立
物件字面量 {}

var obj = {
	name:'man',
	run: function() {
		console.log('running...')
	}
}

new Object建立

var obj = new Object(); // 建立一個空物件
obj.name = 'man';
obj.run = function() {
	console.log('running...')
}

建構函式建立物件
用函式封裝類

function 建構函式名() {
	this.屬性 = 值;
	this.方法 = function() {}
}

var obj = new 建構函式名() // 建構函式建立物件必須用new關鍵字

建構函式不需要返回this

new關鍵字

記憶體中建立物件
this指向建立的物件
執行建構函式內程式碼
返回物件

訪問物件

訪問屬性

物件名.屬性名
物件名[‘屬性名’]

呼叫物件方法
3. 物件名.方法名()

遍歷物件

for (var k in obj) {
console.log(k); // k為獲取的屬性名，方法名
console.log(obj[k]) // 獲取屬性值
}

內建物件

Math

Math詳細內容

Math.max()
獲取一組資料的最大值，若引數出現非數字型放回值為NaN
Math.PI
圓周率
Math.abs()
取絕對值，會把字串隱式轉化成數值
Math.floor()
向下取整，直接去掉小數
Math.ceil()
向上取整 Math.ceil(1.1) -> 2
Math.round()
四捨五入 .5 往大的取 Math.round(-1.5) -> -1

Math.random()
返回一個隨機小數，無引數，0~1，不包括1

日期物件

是一個建構函式需要使用new 建立日期物件

var date = new Date(); // 不加引數返回系統當前時間
// 使用數字方式
var date2 = new Date(2019,10,10,3,3,3);
// Sun Nov 10 2019 03:03:03 GMT+0800 (中國標準時間)
var date3 = new Date(('1995-11-17T03:24:00');
// Fri Nov 17 1995 03:24:00 GMT+0800 (中國標準時間)

方法名	說明	程式碼
getFullYear()	獲取當前年	dObj.getFullYear()
getMonth()	獲取當前月0-11,月份記得+1	dObj.getMonth()
getDate()	獲取當天日期	dObj.getDate()
getDay()	獲取星期幾（週日0 週六6）	dObj.getDay()
getHours()	獲取當前小時	dObj.getHours()
getMinutes()	獲取當前分鐘	dObj.getMinutes()
getSeconds()	獲取當前秒	dObj.getSeconds()

獲取時間戳

var date = new Date()
// 方式1
date.valueOf()
// 方式2
date.getTime()
// 方式3
var now = +new Date() // 返回之間戳
// 方式4 H5 新增
Date.now()

倒數計時

function conutDown(time) {
	var now = Date.now();
	var inptime = +new Date(time);
	var time = (inptime - now) / 1000;
	var d = parseInt(time / 60 / 60 / 24);
	var h = parseInt(time / 60 / 60 % 24);
	var m = parseInt(time / 60 % 60);
	var s = parseInt(time % 60);
}

陣列物件

陣列建立

var arr1 = [];
var arr2 = new Array(2) // 陣列長度為2
var arr3 = new Array(2,3) // 陣列包含元素 2，3

陣列新增元素

push

給陣列追加元素，返回值是新陣列長度

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

unshift

在陣列前面追加新元素，返回值為新陣列長度

var arr = [1,2,3];
arr.unshift('a','b'); // ['a','b',1,2,3]

陣列刪除元素

pop

刪除陣列最後一個元素並返回

var arr = [1,2,3];
arr.pop() // 3

shift

刪除陣列第一個元素，並返回

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

陣列排序

reverse

翻轉陣列

var arr = [1,2,3,4]
arr.reverse() // [4,3,2,1]

sort

陣列排序(字元排序，升序)

var arr = [1,3,2,6,5,4]
arr.sort()  // 按字元規則排序
// 升序排列
arr.sort(function(a,b) {
	return a - b
})
// 降序排列
arr.sort(function(a,b) {
	return b - a
])

陣列排序，判斷元素是否存在

indexOf

返回陣列元素的索引號,只返回第一個找到的元素的索引號

若找不到元素返回 -1

var arr = ['a','b','c'];
console.log(arr.indexOf('b'));

陣列去重
原理：遍歷舊陣列，若元素不在新陣列中在新陣列中新增元素

var arr = ['a','b','c','c','d','f','g','d'];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
	if (newArr.indexOf(arr[i]) === -1) {
		newArr.push(arr[i]);
	}
return newArr
}

lastIndexOf

從後面開始查詢

var arr = ['a','b','c'];
console.log(arr.lastIndexOf('a')) // 0

陣列轉換為字串

.toString 方法

var arr = [1,2,3];
console.log(arr.toString());

join(分隔符)

var arr = [1,2,3];
console.log(arr.join(','))

concat 連線陣列

var arr1 = [1,2,3];
var arr2 = ['a','b','c'];
console.log(arr1.concat(arr2)); // 返回連線陣列的副本原陣列不會改變
// [1,2,3,'a','b','c']

slice 陣列切片

arrayObject.slice(start,end)

引數	描述
start	必需。規定從何處開始選取。如果是負數，那麼它規定從陣列尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。
end	可選。規定從何處結束選取。該引數是陣列片斷結束處的陣列下標。如果沒有指定該引數，那麼切分的陣列包含從 start 到陣列結束的所有元素。如果這個引數是負數，那麼它規定的是從陣列尾部開始算起的元素。

返回值
返回一個新的陣列，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.slice(1,5));

splice 陣列中刪除/替換元素

arrayObject.splice(index,howmany,item1,…,itemX)

引數	描述
index	必需。整數，規定新增/刪除專案的位置，使用負數可從陣列結尾處規定位置。
howmany	必需。要刪除的專案數量。如果設定為 0，則不會刪除專案。
item1, ..., itemX	可選。向陣列新增的新專案。

var arr = ['a','b','c','d'];
console.log(arr.splice(1,3,'e'));
// ['b','c','d']
console.log(arr);
// ['a','e']

字串物件

基本包裝型別

將簡單資料型別包裝成複雜物件

字串不可變

查詢字元索引

indexOf

strObj.indexOf(‘char’,[start])
沒有找到返回 -1

var str = 'abcdefg';
console.log(str.indexOf('b'));

lastIndexOf

strObj.lastIndexOf(‘char’,[start])
沒有找到返回 -1

var str = 'abcdefg';
console.log(str.lastIndexOf('b'));

根據索引返回字元

charAt

var str = 'andy';
console.log(str.charAt(3)); // y

charCodeAt

返回字元對應的ASCII碼

var str = 'andy';
console.log(str.charCodeAt(0)); // 0

strObj[index]

var str = 'andy';
console.log(str[0]);  // a

字串拼接、擷取

concat 拼接字串

strObj.concat(str1,str2,str3…)

var str = 'andy';
console.log(str.concat('red'));

substr 擷取字串

strObj.substr(start, num)
從start開始擷取幾個字元

var str = 'andy';
console.log(str.substr())

slice

strObj.slice(start,end)
從start開始到end結束，不包括end,負值表示從後面開始數

var str = 'andy';
console.log(str.slice(0,2)) // 'an'

替換字元

strObj.replace(‘被替換的字元’,‘要替換的字元’)
只替換匹配到的第一個字元

var str = 'aaaac';
console.log(str.replace('a','b'))  // 'baaac'

split

strObj.split(分隔符)

var str = 'a,b,c,d';
console.log(str.split(',')) // ['a','b','c','d']

轉換大小寫

var str = 'Andy';
console.log(str.toUpperCase());  // ANDY
console.log(str.toLowerCase());  // andy

資料型別判斷

instanceof

var arr = [];
if ~(arr instanceof Array) {
	console.log('請輸入陣列')
}

var arr = [];
Array.isArray(arr)

web APIs

DOM

文件：一個頁面就是一個文件，DOM中使用document表示
元素：頁面中的所有標籤都是元素，DOM中使用element表示
節點：網頁中的所有內容都是節點（標籤、屬性、文字、註釋），DOM中使用node表示

獲取頁面素

script 要寫在頁面元素下方

根據ID獲取

若元素存在返回元素物件，元素不存在返回null

var time = document.getElementById('time');

console.dir(time);  // 列印元素物件 更好的檢視裡面的屬性方法

根據標籤名獲取

getElementsByTagName()

獲取元素物件的集合(偽陣列)
若元素不存在返回空的偽陣列

document.getElementsByTagName()
element.getElementsByTagName()

var uls = document.getElementsByTagName('ul');
var li = uls[0].getElementsByTagName('li');

根據類名獲取

HTML5 新增
getElementsByClassName()

var boxs = document.getElementsByClassName('box');

querySelector

返回選擇器選中的第一個物件

var firstBox = document.querySelector('.box');  // 根據類選擇
console.log(firstBox);
var nav = document.querySelector('#nav');  // 根據id選擇
console.log(nav);
var li = document.querySelector('li');  // 根據標籤選擇
console.log(li)

querySelectorAll

返回選中的所有元素

var boxAll = document.querySelectorAll('.box');

獲取特殊元素

body,html

document.body // 獲取body元素

document.documentElement  // 返回html元素

事件

事件源
事件型別
事件處理程式

事件源

事件被觸發的物件(元素)

事件型別

如何觸發，比如滑鼠點選(onclick)

事件處理程式

事件觸發時執行的程式

var btn = document.getElementById('btn');  // 獲取事件源
// btn.onclick  註冊事件（繫結事件）
btn.onclick = function() {			// 新增事件處理程式
	alert('hello');					
}

滑鼠事件	觸發條件
onclick	滑鼠點選左鍵觸發
onmouseover	滑鼠進過觸發
onmouseout	滑鼠離開觸發
onfocus	獲得滑鼠焦點觸發
onblur	失去滑鼠焦點觸發
onmousemove	滑鼠移動觸發
onmouseup	滑鼠抬起觸發
onmousedown	滑鼠按下觸發

修改元素內容

element.innerText = ‘元素顯示的內容’
element.innerText 可以獲取元素內容
自動去除html標籤，去除空格，換行
不識別HTML標籤，

var btn = document.querySelector('button');
var div = document.querySelector('div');
var count = 0;
btn.onclick = function() {
    count++;
    div.innerText = count;
}

element.innerHTML = ‘元素顯示的內容’
element.innerHTML 可以獲取元素內容
W3C標準

修改元素屬性

element.屬性 = 屬性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <button>計數器</button>
    <div>0</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var count = 0;
        btn.onclick = function() {
            count++;
            div.innerText = count;
            this.disabled = true;  // this指向方法的呼叫者btn
        }
    </script>
</body>
</html>

修改樣式

element.style 行內樣式操作
元素屬性值採用駝峰命名法

display:none 隱藏元素
display:block 顯示元素

element.className 類名樣式操作

js筆記一之初識JS
2021-09-09
JS筆記
「 giao-js 」用js寫一個js直譯器
2020-11-23
JS
JS·基礎（一）
2019-02-27
JS
node.js一
2020-12-11
Node.js
JS DOM篇（一）
2020-12-15
JS
js克隆一個物件
2018-05-17
JS物件
JS快速入門（一）
2022-02-12
JS
JS進階系列-JS執行期上下文(一)
2020-10-02
JS
[JS系列一]原型的理解
2019-03-08
JS原型
js一鍵複製url
2018-08-03
JS
Three.js基礎（一）
2020-09-22
JS
js的函式function(一)
2021-01-16
JS函式Function
JS BOM篇（一）window物件
2020-12-15
JS物件
一天一個js知識
2019-01-04
JS
Next.js踩坑入門系列（一）— Hello Next.js!
2018-08-29
JS
JS基礎入門篇（一）
2019-02-16
JS
DataTable.js原始碼分析(一)
2018-10-22
JS原始碼
Node.js 知識點一
2018-11-12
Node.js
? 一文看懂 JS 繼承
2019-03-17
JS繼承
一隻腳踏入 Three.js
2019-04-14
JS
JS實現一個v-if
2018-07-16
JS
通過polyfill瞭解JS(一)
2018-09-14
JS
JS基礎入門篇（一）
2018-05-27
JS
JS常用屬性方法大全（一）
2018-06-24
JS
js隨堂初體驗（一）
2018-08-26
JS
js跨域解決方案（一）
2018-07-23
JS跨域
擼一個JS的事件管理
2018-07-26
JS事件
一隻前端小白的JS note
2018-08-07
前端JS
安利一個js節流庫
2019-09-19
JS
web前端進階篇（一）JS
2019-10-18
Web前端JS
Css in Js 一次實踐
2018-12-28
CSSJS
Node.js核心入門（一）
2018-04-01
Node.js
node.js快速入門（一）
2020-12-17
Node.js
前端與編譯原理——用JS寫一個JS直譯器
2018-12-12
前端編譯原理JS
一個高效能js動畫庫velocity.js簡介
2018-06-29
JS動畫
前端與編譯原理——用 JS 寫一個 JS 直譯器
2019-02-02
前端編譯原理JS
【js基礎】【一眼就會】js json Object String 互轉
2024-08-25
JSONObject
一段js理解nodejs中js如果呼叫c++/c的
2020-12-08
NodeJSC++