JavaScript 基礎

時間 2019-12-02

標籤 javascript 基礎欄目 JavaScript 简体版

原文原文鏈接

目錄javascript

ECMASript 和 JavaScript的關係：

ECMAScript是JavaScript的規格，後者是前者的實現。css

完整的JavaScript是由如下3部分組成的：

一、ECMAScript 是核心
二、DOM 文檔對象模型 Document Object model （整合js，css，html）
三、BOM 瀏覽器對象模型 Broswer object model（整合js和瀏覽器）html

JavaScript特色：

腳本語言，輕量級編程語言，可插入HTML頁面前端

JavaScript引入方式：

引入額外的JS文件：

JavaScript語言規範：

註釋：//單行註釋。 /多行註釋/
結束符號：JavaScript中的語句要以分號（；）爲結束符。java

JavaScript語言基礎

常量聲明：「const 常量名」

變量聲明：

一、變量名可使用數字、字母、下劃線、$組成，不能以數字開頭。
二、聲明變量名使用這種格式：
「var 變量名；」定義全局變量
「let 變量名；」定義局部變量，for循環的計數器就很適合let命令python

注意：

一、變量名是區分大小寫的
二、推薦使用駝峯體命名規則
三、保留字和關鍵字不能用做變量名es6

JavaScript數據類型：

JavaScript擁有動態類型
var x； // 此時x未賦值，是動態的，給他賦值數字，他就是數字，給他賦值字符串，他就是字符串正則表達式

數值（number）

JavaScript不分整型和浮點型，只有一種數字類型。
還有一種NaN，表示不是一個數字（Not a Number）編程

經常使用方法：

parseInt("123") // 返回 123
parseInt("ABC") // 返回 NaN，表示該值不是數字
parseFloat("123.456") // 返回123.456json

字符串（string）：

var a = "hello，"
var b = "beauty!"
var c = a+b;
console.log(c); //獲得hello，beauty！

字符串的經常使用方法：

.length-->返回長度
.trim()-->移除空白
.trimLight()-->移除左邊空白
.trimRight()-->移除右邊空白
.charAt(n)--> 返回第n個字符
.concat（value, ...）-->拼接
indexOf(substring, start)-->子序列位置
.substring(from, to)-->根據索引獲取子序列
.slice(start, end)-->切片
.toLowerCase()-->小寫
.toUpperCase()-->大寫
.split(delimiter, limit)-->分割

模板字符串（template string）：

這是ES6中特有的，是加強型字符串，用反引號標識，能夠看成普通字符串使用，能夠定義多行字符串，能夠在字符串中籤如變量；
這是普通字符串
多行字符串
var name='allen', age='20';
My name is ${name}, I am {age}

Boolean 布爾值：

空、0、null、undefined、NaN

對象（Object）

JavaScript中的全部事物都是對象。JavaScript容許自定義對象。
對象是帶有屬性和方法的特殊數據類型。

數組：

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

數組的經常使用方法：

.length 數組的大小
.push(ele) --> 尾部追加元素
.pop() --> 獲取尾部的元素
.unshift(ele) --> 頭部插入元素
.shift() --> 頭部移除元素
.slice(start, end) --> 切片
.reverse() --> 反轉
.join(seq) --> 將數組元素鏈接成字符串
.concat(val, ...) --> 鏈接數組
.sort() --> 排序
.forEach() --> 將數組的每一個元素傳遞給回調函數
.splice() --> 刪除元素，並向數組添加新元素。
.map() --> 返回一個數組元素調用函數處理後的值的新數組

forEach（）函數

forEach（function（currentValue，index，arr），thisValue）
做用是：for循環出每個值交給function處理

splice（）函數

splice（index，howmany，item 1,...item n）
第一個參數是起始位置，第二個參數是要刪除的個數，刪了以後把後邊的參數添加進去

ES6新引入了一種新的原始數據類型（Symbol），表示獨一無二的值。它是JavaScript語言的第7種數據類型。

typeof是用來查看JS數據類型的，是一個一元運算符號，不是一個函數，也不是一個語句。
對變量或值調用 typeof 運算符將返回下列值之一：
undefined - 若是變量是 Undefined 類型的
boolean - 若是變量是 Boolean 類型的
number - 若是變量是 Number 類型的
string - 若是變量是 String 類型的
object - 若是變量是一種引用類型或 Null 類型的

運算符：

算術運算符：+ - * / % ++ --

x++和++x在出現賦值運算式，x++會先賦值再進行自增1運算，而++x會先進行自增運算再賦值！

比較運算符：

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

邏輯運算符：&& || ！

賦值運算符： = += -= *= /=

流程控制：

if 流程控制

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流程控制

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

switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

for循環

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

while循環

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

三元運算：

var a = 1；
var b = 2；
var c = a > b ? a : b

求c的值，條件判斷a>b，成立就取a，不成立就取b。

能夠嵌套使用:

var a = 1, b = 2;
var c = a > b ? a : (b=='5') ? a : b;
c的值爲2

函數

函數定義：

JavaScript中的函數和python中的很是類似，只是定義方式有點區別

普通函數定義：

function f1（）{console.log（"hello world!"）}

帶參數的函數：

function f2(a,b){
    console.log(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;
}

若是箭頭函數不須要參數或須要多個參數，就使用圓括號表明參數部分：
不須要參數：
var f = () => 5;
等同於：
var f = function(){return 5};
須要多個參數：
var sum = (num1, num2) => num1 + num2;
等同於：
var sum = function（num1, num2){
return num1+num2;
}

函數中的arguments參數
arguments也接收了全部傳入的參數，下面例子中arguments接收了3個參數
function add(a,b,c){
consloe.log(b+c);
consloe.log(arguments.length);
consloe.log(arguments[0]);
}
add(1,2,3)
結果顯示：
5
3
1

注意：函數只能返回一個值，若是要返回多個值，只能將其放在數組或對象中返回。

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

局部變量：

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

全局變量：

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

變量生存週期：

JavaScript變量的聲明週期從他們被聲明開始，
局部變量會在函數運行後被刪除。
全局變量會在頁面關閉後被刪除。

做用域：

首先在函數內部查找變量，找不到則到外層函數查找，追捕找到最外層。與python做用域查找順序類似。
例1、
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}

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

例2、
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); //輸出結果是？

例3、
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret(); //輸出結果是？

詞法分析：

JavaScript中在調用函數的那一瞬間，會先進行詞法分析。

詞法分析的過程：

當函數調用的前一瞬間，會先造成一個激活對象：Active Object（AO），並會分析如下3個方面：
1:函數參數，若是有，則將此參數賦值給AO，且值爲undefined。若是沒有，則不作任何操做。
2:函數局部變量，若是AO上有同名的值，則不作任何操做。若是沒有，則將此變量賦值給AO，而且值爲undefined。
3:函數聲明，若是AO上有，則會將AO上的對象覆蓋。若是沒有，則不作任何操做。

函數內部不管是使用參數仍是使用局部變量都到AO上找。

看兩個例子：

例一：

var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
}
foo(); // 問：執行foo()以後的結果是？
結果是：
22

例二：

例二解析：

詞法分析過程：
一、分析參數，有一個參數，造成一個 AO.age=undefine;
二、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，所以不作任何處理
三、分析函數聲明，有一個 function age(){...} 聲明，則把原有的 age 覆蓋成 AO.age=function(){...};

最終，AO上的屬性只有一個age，而且值爲一個函數聲明

執行過程：
注意：執行過程當中全部的值都是從AO對象上去尋找

一、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，因此第一個輸出的一個函數
二、這句 var age=22; 是對 AO.age 的屬性賦值，此時AO.age=22 ，因此在第二個輸出的是 2
三、同理第三個輸出的仍是22, 由於中間再沒有改變age值的語句了

內置對象和方法：

JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。
咱們在學習基本數據類型的時候已經帶你們瞭解了，JavaScript中的Number對象、String對象、Array對象等。
注意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

自定義對象：

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵。

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()); //毫秒並不直接顯示

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

補充：

交互數據的格式

python後端前端js
json.dumps JSON.stringify
json.loads JSON.parse

python後端經常使用的內置函數

map 映射
zip 拉鍊
filter 過濾
reduce 多個進去一個出來

python中往列表中添加數據的方法

1.append 尾部追加
l = [1,2]
l.append([1,2,33,4])
l = [1,2,[1,2,33,4]]
2.insert 按照索引插入
3.extend 擴展列表
內部其實就是for循環+append
l = [1,2]
l.extend([1,2,3,4])
l = [1,2,1,2,3,4]