[TOC] JavaScript簡介 JavaScript是前端的一門編程語言 node.js 支持前端js代碼可以跑在後端伺服器上 JavaScript 是腳本語言 JavaScript 是一種輕量級的編程語言。 JavaScript 是可插入 HTML 頁面的編程代碼。 JavaScript 插 ...
目錄
JavaScript簡介
JavaScript是前端的一門編程語言
node.js 支持前端js代碼可以跑在後端伺服器上
JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面後,可由所有的現代瀏覽器執行。
js也叫ECMAScript
js註釋
// 單行註釋
/*
多行註釋1
多行註釋2
*/
js的引入方式
- script標簽內部直接書寫
- 通過script標簽src書寫,引入外部js文件
js變數
聲明變數使用 var或let 變數名; 的格式來進行聲明 (var聲明的是全局有效,let可以只在局部有效)
var name = 'cwz'
let name = 'neo'
變數名的命名規範
- JavaScript的變數名可以使用_,數字,字母,$組成,不能以數字開頭。
- 不能用關鍵字作為變數名
- 推薦使用駝峰體命名法
- js代碼預設是以分號作為結束符,不寫也可以
js中常量
const用來聲明常量,不能被修改
const a=3.141412;
undefined
a=3
VM862:1 Uncaught TypeError: Assignment to constant variable.
at <anonymous>:1:2
js中數據類型
數值類型
js擁有動態類型,可以類型轉換
var x; // 此時是undefined
var x = 1; // 此時x是數字
var x = "se"; // 此時x是字元串
JavaScript不區分整型和浮點型,就只有一種數字類型。
var x = 1;
undefined
typeof x // typeof 用來查看js數據類型
"number"
x = 12.22
12.22
typeof x
"number"
x = "qwe"
"qwe"
typeof x
"string"
還有一種NaN,表示不是一個數字(Not a Number),也是數值類型
字元類型
var name = 'cwz'
undefined
var info = 'qwe'
undefined
name + info
"cwzqwe"
註:js中推薦使用加號做字元串的拼接
字元串常用方法
方法 | 說明 |
---|---|
.length | 返回長度 |
.trim() | 只能移除空白,不能移除其他 |
.trimLeft() | 移除左邊的空白 |
.trimRight() | 移除右邊的空白 |
.charAt(n) | 返回第n個字元 |
.concat(value, ...) var a1 = 'hello' var a2 = 'world' a1.concat(a2) < "helloworld" |
拼接 |
.indexOf(substring, start) | 按值取索引,找不到值返回-1 |
.substring(from, to) a1.substring(1) "ello" |
根據索引取後面全部 |
.slice(start, end) | 切片 |
.toLowerCase() | 小寫 |
.toUpperCase() | 大寫 |
.split(delimiter, limit) | 分割 |
模板字元串
ES6中引入了模板字元串。模板字元串(template string)是增強版的字元串,用反引號(`)標識。它可以當做普通字元串使用,也可以用來定義多行字元串,或者在字元串中嵌入變數。
布爾值(Boolean)
js中布爾值全部小寫
var a = true;
var b = false;
與python類似,0、null、undefined、NaN、空字元串都是false
null和undefined
- null表示值是空,一般在需要指定或清空一個變數時才會使用,如 name=null;
- undefined表示聲明一個變數但未初始化,沒有給他賦值
對象
JavaScript 中的所有事物都是對象:字元串、數值、數組、函數...此外,JavaScript 允許自定義對象。
JavaScript 提供多個內建對象,比如 String、Date、Array 等等。
對象只是帶有屬性和方法的特殊數據類型。
數組
數組對象的作用是:使用單獨的變數名來存儲一系列的值。類似於Python中的列表。
var a = [123, "ABC"];
console.log(a[1]); // 輸出"ABC"
常用方法
方法 | 說明 |
---|---|
.length | 數組的大小 |
.push(ele) | 尾部追加元素 |
.pop() | 獲取尾部的元素 |
.unshift(ele) | 頭部插入元素 |
.shift() | 頭部移除元素 |
.slice(start, end) | 切片 |
.reverse() | 反轉 |
.join(seq) | 將數組元素連接成字元串 |
.concat(val, ...) | 連接數組 |
.sort() | 排序 |
.forEach() | 將數組的每個元素傳遞給回調函數 |
.splice() | 刪除元素,並向數組添加新元素。 |
.map() | 返回一個數組元素調用函數處理後的值的新數組 |
forEach()
splice()
splice(index,howmany,item1,.....,itemX)
參數:
參數 | 描述 |
---|---|
index | 必需。規定從何處添加/刪除元素。 該參數是開始插入和(或)刪除的數組元素的下標,必須是數字。 |
howmany | 必需。規定應該刪除多少元素。必須是數字,但可以是 "0"。 如果未規定此參數,則刪除從 index 開始到原數組結尾的所有元素。 |
item1, ..., itemX | 可選。要添加到數組的新元素 |
map()
運算符
算術運算符
+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;
res1;
10
res2;
12
這裡由於的x++和++x在出現賦值運算式,x++會先賦值再進行自增1運算,而++x會先進行自增運算再賦值!
比較運算符
> >= < <= != == === !===
1 == “1” // true 弱等於
1 === "1" // false 強等於
//上面這張情況出現的原因在於JS是一門弱類型語言(會自動轉換數據類型),所以當你用兩個等號進行比較時,JS內部會自動先將
//數值類型的1轉換成字元串類型的1再進行比較,所以我們以後寫JS涉及到比較時儘量用三等號來強制限制類型,防止判斷錯誤
邏輯運算符
&& || ! //與、或、非
賦值運算符
= += -= *= /=
流程式控制制
if else
var age = 20;
if (age > 18){
console.log('成年了');
}else{
console.log('未成年')
}
成年了
多分支結構
var age = 23;
if (age > 23){
console.log('猜大了');
}else if (age == 23){
console.log('猜對了');
}else {
console.log('猜小了');
}
猜對了
switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
Sunday
switch中的case子句通常都會加break語句,否則程式會繼續執行後續case中的語句。
for迴圈
for (var i=0; i<10; i++){
console.log(i);
}
// 迴圈列印0-9
三元運算
var a = 1;
var b = 2;
var c = a > b ? a : b
undefined
c
2
// 判斷條件 ?成立 :不成立
函數
函數定義
// 普通函數
function f1() {
console.log('你好啊');
}
// 調用函數與python一樣 函數名()
// 有參函數
function f2(a,b){
console.log(arguments);
console.log(a,b)
}
// arguments能接收所有傳過來的參數,組成數組的形式
// 帶返回值的函數
function sum(a, b){
return a + b;
}
sum(1, 2); // 返回3,調用函數
// 匿名函數
var sum = function(a, b){
return a + b;
}
sum(1, 2);
// 立即執行函數
(function(a,b){
return a + b;
}) (1,2)
補充:ES6中允許使用箭頭(=>)定義函數
var f = v => v;
// 等同於
var f = function(v){
return v;
}
var f = () => 5;
// 等同於
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
return num1 + num2; //這裡的return只能返回一個值,如果想返回多個值需要自己手動給他們包一個數組或對象中
}
函數的全局變數和局部變數
局部變數:
在JavaScript函數內部聲明的變數(使用 var)是局部變數,所以只能在函數內部訪問它(該變數的作用域是函數內部)。只要函數運行完畢,本地變數就會被刪除。
全局變數:
在函數外聲明的變數是全局變數,網頁上的所有腳本和函數都能訪問它。
變數生存周期:
JavaScript變數的生命期從它們被聲明的時間開始。
局部變數會在函數運行以後被刪除。
全局變數會在頁面關閉後被刪除
作用域
與python一樣
內置對象和方法
JavaScript的對象(Object)本質上是鍵值對的集合(Hash結構),但是只能用字元串作為鍵。
其實就是字典
var dic = {'name': 'cwz', 'age': 20}
{name: "cwz", age: 20}
自定義對象
定義對象關鍵字是 new
var myObject = new Object(); // 創建一個myObject對象
myObject.username = 'cwz'; // myObject對象的username屬性
myObject.password = 123; // myObject對象的password屬性
Date對象
// 不指定參數,類似於時間戳
var d1 = new Date();
console.log(d1.toLocaleString()) // 結果為:2019/11/17 下午12:17:47
console.log(d1.toLocaleDateString()) // 結果為:2019/11/17
下麵是瞭解
//方法2:參數為日期字元串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3:參數為毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4:參數為年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒並不直接顯示
Date對象的方法
var d = new Date();
//getDate() 獲取日
//getDay () 獲取星期
//getMonth () 獲取月(0-11)
//getFullYear () 獲取完整年份
//getYear () 獲取年
//getHours () 獲取小時
//getMinutes () 獲取分鐘
//getSeconds () 獲取秒
//getMilliseconds () 獲取毫秒
//getTime () 返回累計毫秒數(從1970/1/1午夜)
註意:getMonth () 獲取月份是0-11
Json對象
var obj = {'username':'cwz', 'password':'123', 'num': null}
// 對象轉化為Json字元串
var res1 = JSON.stringify(obj) // "{"username":"cwz","password":"123","num":null}"
// JSON字元串轉換成對象
var res2 = JSON.parse(res1) // {username: "cwz", password: "123", num: null}
RegExp對象
// 定義正則表達式兩種方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
// 正則校驗數據
reg1.test('jason666')
reg2.test('jason666')
/*第一個註意事項,正則表達式中不能有空格*/
// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二個註意事項,全局匹配時有一個lastIndex屬性*/
// 校驗時不傳參數
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();