• JavaScript簡介
• js注釋
• js的引入方式
• js變數
  • 變數名的命名規范
  • js中常量
• js中資料型別
  • 數值型別
  • 字符型別
    • 字串常用方法
    • 模板字串
  • 布林值(Boolean)
    • null和undefined
  • 物件
    • 陣列
    • 常用方法
    • forEach()
    • splice()
    • map()
• 運算子
  • 算術運算子
  • 比較運算子
    • 邏輯運算子
    • 賦值運算子
• 流程控制
  • if else
  • 多分支結構
  • switch
  • for回圈
  • 三元運算
• 函式
  • 函式定義
  • 函式的全域變數和區域變數
• 內置物件和方法
  • 自定義物件
  • Date物件
    • Date物件的方法
  • Json物件
  • RegExp物件

JavaScript簡介

JavaScript是前端的一門編程語言

node.js 支持前端js代碼可以跑在后端服務器上

JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言，

JavaScript 是可插入 HTML 頁面的編程代碼，

JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行，

js也叫ECMAScript

js注釋

// 單行注釋


/*
多行注釋1
多行注釋2
*/

js的引入方式

1. script標簽內部直接書寫
2. 通過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中推薦使用加號做字串的拼接

字串常用方法

模板字串

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"

常用方法

forEach()

splice()

splice(index,howmany,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();

標籤：JavaScript

上一篇：NTP授時服務器（北斗授時產品）在廣播電視系統里的應用

下一篇：巧妙利用參考，將陣列轉換成樹形陣列