前端—JavaScript

1、引入JavaScript的引入方式

Script標籤內寫代碼

<script>
  // 在這裏寫你的JS代碼
</script>

引入額外的JS文件

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

2、JavaScript語言規範

註釋

// 這是單行註釋

/*
這是
多行註釋
*/

結束符

JavaScript中的語句要以分號（;）爲結束符。

3、JavaScript語言基礎

變量聲明

JavaScript的變量名能夠使用_，數字，字母，$組成，不能以數字開頭。
聲明變量使用 var 變量名; 的格式來進行聲明

var name = "Alex";
var age = 18;

注意：

變量名是區分大小寫的。

推薦使用駝峯式命名規則。

保留字不能用作變量名。

補充：

ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令。

for (let i=0;i<arr.length;i++){...}

ES6新增const用來聲明常量。一旦聲明，其值就不能改變。

const PI = 3.1415;
PI // 3.1415

JavaScript不區分整型和浮點型，就只有一種數字類型。浮點型也能用parseInt轉換成整型　

字符串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 獲得Helloworld

 

// 普通字符串
`這是普通字符串！`
// 多行文本
`這是多行的
文本`
// 字符串中嵌入變量
var name = "jason", time = "today";
`Hello ${name}, how are you ${time}?`

布爾值(Boolean)

區別於Python，true和false都是小寫。

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。

數組

var a = [123, "ABC"];
console.log(a[1]);  // 輸出"ABC"

類型查詢

算數運算符

比較運算符

邏輯運算符

4、流程控制

if-else

if-else if-else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

 

switch

for

for (var i=0;i<10;i++) {
  console.log(i);
}

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元運算

5、函數

函數中的arguments參數

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments至關於將出傳入的參數所有包含，這裏取得就是第一個元素1
}

add(1,2)

結果：

3
2
1

函數的全局變量和局部變量

 

 

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //輸出結果是？

ShenZhen

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印結果是？

BeiJing

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

ShangHai

自定義對象

建立對象

 

Date對象

建立Date對象

//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());
//方法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午夜)

JSON對象

 

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();

坑點集錦: 1.正則表達式中千萬不要寫空格 2.全局匹配模式lastindex 3.匹配的時候不傳任何參數默認匹配undefined