前端之JavaScript

時間 2019-11-11

原文原文鏈接

JavaScript

ECMAScript和JavaScript的關係

1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，但願這門語言可以成爲國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript，這個版本就是1.0版。css

該標準一開始就是針對JavaScript語言制定的，可是沒有稱其爲JavaScript，有兩個方面的緣由。一是商標，JavaScript自己已被Netscape註冊爲商標。而是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。python

所以ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。es6

ECMAScript的歷史

JavaScript的引入方式（和css同樣也有3種)

行間式，內聯式，外聯式正則表達式

js的註釋(後面都簡稱爲js)

註釋是代碼之母數組

單行註釋//瀏覽器

多行註釋/**/函數

結束符

js中都要以 ; 爲結束符學習

注意：this

變量名是區分大小寫的spa

推薦使用駝峯體，在python中推薦使用下劃線，另外關鍵字不能爲變量名且不能以數字開頭

聲明變量的2個關鍵字：

var和let，其中let是es6新增的。

區別 var聲明的變量是全局有效的let聲明的只在局部有效。

常量：

首先明確在python中是沒有常量的，但咱們墨守成規的把所有大寫的看做常量，而在js中是有常量的，由const聲明。

基本數據類型

數值類型：

在js中沒有整型和浮點型，統稱爲數值類型。

// 數字類型：number
var num = 10;
const PI = 3.14;
console.log(typeof(num), num);  // 結果：number  10

還有一種是NaN，表示不是一個數字(Not a Number）。

它是數值類型，但並非有任何數字

經常使用方法

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456

字符串類型：

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}?`

布爾值

區別於python，true和false都是小寫

var a=true;

var b=false;

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

null和undefined

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

null表示變量的值是空(null能夠手動清空一個變量的值，使得該變量變爲object類型，值爲null)，undefined則表示只聲明瞭變量，但尚未賦值。

對象：

JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。

JavaScript 提供多個內建對象，好比 String、Date、Array 等等。

對象只是帶有屬性和方法的特殊數據類型。

數組

數組對象的做用是：使用單獨的變量名來存儲一系列的值。相似於Python中的列表。

經常使用方法：

forEach：

forEach(function(currentValue, index, arr), thisValue)

參數：

splice：

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

map()

map(function(currentValue,index,arr), thisValue)

參數

可使用如下方式遍歷數組內中的元素

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

運算符：

算數運算符：

+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;
res1;
res2;
這裏因爲的x++和++x在出現賦值運算式，x++會先賦值再進行自增1運算，而++x會先進行自增運算再賦值！

比較運算符

> >= < <= != == === !==

1 == 「1」  // true  弱等於
1 === "1"  // false 強等於
//上面這張狀況出現的緣由在於JS是一門弱類型語言(會自動轉換數據類型)，因此當你用兩個等號進行比較時，JS內部會自動先將
//數值類型的1轉換成字符串類型的1再進行比較，因此咱們之後寫JS涉及到比較時儘可能用三等號來強制限制類型，防止判斷錯誤

邏輯運算符：

&& || !

賦值運算符：

= += -= *= /=

流程控制:
if -else

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

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:

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

三元運算:

var a = 1;
var b = 2;
var c = a > b ? a : b
//這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a,條件不成立返回的值爲b;三元運算能夠嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
x

函數:

JavaScript中的函數和Python中的很是相似，只是定義方式有點區別。
// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調用函數

// 匿名函數方式
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;
}

函數中的arguments參數

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

add(1,2)

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

局部變量：

在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

全局變量：

在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。

變量生存週期：

JavaScript變量的生命期從它們被聲明的時間開始。

局部變量會在函數運行之後被刪除。

全局變量會在頁面關閉後被刪除。

做用域

首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。與python做用域關係查找如出一轍！

內置對象和方法：

JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

咱們在學習基本數據類型的時候已經帶你們瞭解了，JavaScript中的Number對象、String對象、Array對象等。

注意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

自定義對象

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵。
var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍歷對象中的內容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

建立對象：

var person=new Object();  // 建立一個person對象
person.name="Alex";  // person對象的name屬性
person.age=18;  // person對象的age屬性

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對象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

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

RegExp