JS簡介
JavaScript（簡稱JS） 是一種具有函式優先的輕量級，解釋型或即時編譯型編程語言雖然它是作為開發Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式、宣告式、函式式編程范式
JavaScript與Java的關系
JavaScript的基礎語法和物件體系，是模仿Java而設計的
JavaScript語言的函式是一種獨立的資料型別以及基于原型物件的繼承鏈，是與java語法最大的兩點區別
JavaScript不需要編譯，由解釋器直接執行
IT行業鄙視鏈:架構師>后端研發＞前端研發＞產品經理＞運營＞UI設計師
架構師認為：沒有我，哪有他們，架構是一切的根基
后端開發認為：前端只會“畫圖”
前端開發認為：產品經理“嘴上功夫”
產品經理認為：我的產品已經很厲害了，還需要用力運營嗎？
運營師認為：我拼盡全力拉來的用戶，都被測驗沒發現的bug搞丟了，而且UI不夠美觀互動不夠人性
ECMAScript的歷史
| 年份 | 名稱 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一個版本 |
| 1998 | ECMAScript 2 | 版本變更 |
| 1999 | ECMAScript 3 | 添加正則運算式添加try/catch |
| ECMAScript 4 | 沒有發布 | |
| 2009 | ECMAScript 5 | 添加"strict mode"嚴格模式添加JSON支持 |
| 2011 | ECMAScript 5.1 | 版本變更 |
| 2015 | ECMAScript 6 | 添加類和模塊 |
| 2016 | ECMAScript 7 | 增加指數運算子（**）增加Array.prototype.includes |
總結
JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言，
JavaScript 是可插入 HTML 頁面的編程代碼，
JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行，
JavaScript 很容易學習
js基礎
注釋語法
第一種是多行注釋"/**/",一般js檔案開頭，介紹作者，函式等資訊
/**author:xxx*day:2008-08-10*/
第二種注釋方法是最常見的"//",在程式間隨處可見,只能注釋單行
//這是一行注釋，只能注釋單行
//另一行注釋
第三種注釋不是很常見，會和html內的注釋混淆，不推薦使用
<!-這是一行注釋，只能注釋單行
引入js的多種方式
-
head內script標簽內撰寫 -
head內script標簽src屬性引入外部js資源 -
body內最底部通過script標簽src屬性引入外部js資源(最常用)
注意:頁面的下載是從上往下的 所以操作標簽js代碼一定要等待標簽加載完畢再執行才可以正常運行
結束符號
在 JavaScript 中 ; 代表一段代碼的結束，多數情況下可以省略 ; 使用回車enter替代
變數與常量
什么是變數
變數表示一些可以變化的資料，當一個資料的值需要經常改變或者不確定時，就應該用變數來表示
例如:超市中的儲物格就相當于一個變數, 里面可以存盤各種不同的東西, 里面存盤的東西也可以經常改變
什么是常量
常量表示一些固定不變的資料
例如:現實生活中人的性別其實就可以看做是常量, 生下來是男孩一輩子都是男孩, 生下來是女孩一輩子都是女孩
變數宣告
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
PI = 3
// TypeError: "PI" is read-only
基本資料型別
- 在JS中查看資料型別的方式
typeof
數值型別(Number)
- 在JS中所有的數值都是
Number型別，包括整數和浮點數（小數）
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123
NaN也屬于數值型別 意思是:不是一個數字(Not A Number)
使用typeof檢查一個NaN也會回傳一個number
parseInt("123") // 回傳123
parseInt("ABC") // 回傳NaN,NaN屬性是代表非數字值的特殊值，該屬性用于指示某個值不是數字，
parseFloat("123.456") // 回傳123.456
字符型別(String)
/*
-在JS中字串需要使用引號起來
-使用雙引號或者單引號都可以，但是不要混用
-引號不能嵌套，雙引號里面不能放雙引號，單引號不能放單引號
單引號里面可以放雙引號
*/
var str="hello";
str ='我說:"今天心情好!"';
/* 在字串中我們可以使用\作為轉義符，
當表示一些特殊符號時可以可以使用\進行轉義
\" 表示"
\' 表示'
\n 表示換行
\t 制表符
\\ 表示\
加上雙引號表示字串，不加雙引號表示變數
*/
document.write(str)
常見內置方法:
| 方法 | 說明 |
|---|---|
| .length | 回傳長度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左邊的空白 |
| .trimRight() | 移除右邊的空白 |
| .charAt(n) | 回傳第n個字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根據索引獲取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小寫 |
| .toUpperCase() | 大寫 |
| .split(delimiter, limit) | 分割 |
注意:字串拼接推薦使用加號
string.slice(start, stop)和string.substring(start, stop)：
兩者的相同點：
如果start等于end，回傳空字串
如果stop引數省略，則取到字串末
如果某個引數超過string的長度，這個引數會被替換為string的長度
substirng()的特點：
如果 start > stop ，start和stop將被交換
如果引數是負數或者不是數字，將會被0替換
silce()的特點：
如果 start > stop 不會交換兩者
如果start小于0，則切割從字串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
如果stop小于0，則切割在從字串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)
布爾型別(Boolean)
/*
Boolean布林值
布林值只有兩個，主要用來邏輯判斷
true 表示真
false 表示假
*/
var bool=false;
console.log(typeof bool);
console.log(bool);
(空字串)、0、null、undefined、NaN都是false
null與undefined
/*
Null型別的值只有一個，就是null
null這個值專門表示空的物件
使用typeof檢查一個null,會回傳object
undefined(未定義)型別只有一個，就undefind
當宣告一個變數，但是并不給變數賦值時，它的值就是undefind
使用typeof檢查一個undefind時也會回傳undefind
*/
var a=null;
console.log(typeof a);//回傳object
var b;
console.log(b)
console.log(typeof b)
物件(object)
-
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() | 回傳一個陣列元素呼叫函式處理后的值的新陣列 |
運算子
算數運算子
數學運算子就是常見的加(+)、減(-)、乘(*)、除(/)、等于(=)、求冪(**)、自增(++)、自減(--)、加等于(+=)、減等于(-=)等
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涉及到比較時盡量用三等號來強制限制型別，防止判斷錯誤
邏輯運算子
&&(與) ||(或) !(非)
運算子的優先級
| 運算子 | 介紹 |
|---|---|
| ++ – ! | 自增、自減、去反 |
| * / % | 用于number型別的乘、除、求余 |
| + - | 相加、相減 |
| > >= < <= | 用于比較的運算子 |
| == === != !== | 比較兩者是否相等 |
| & ^ | | 按位"與" 、按位"異或"、按位"或" |
| && || | 邏輯與、邏輯或 |
| ?. | 條件運算 |
| = += -= | 賦值、賦值運算 |
| ， | 多個計算 |
流程控制
順序結構
- 最基本的流程控制，按照代碼先后順序依次執行
分支結構
- 根據不同的條件去執行不同的代碼最后得到不同的結果
單if分支
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){ # 條件1
console.log("a > 5"); # 條件1成立執行的代碼
}else if (a < 5) { # 條件2
console.log("a < 5"); # 條件1不成立條件2執行的代碼
}else { # 條件1和2都不成立執行的代碼
console.log("a = 5");
}
如果分支結構中else if很多還可以考慮使用switch語法
var day = new Date().getDay();
switch (day) { # 條件
case 0: # 條件1
console.log("Sunday"); # 條件1成立執行的代碼
break; # 如果沒有break會基于某個case一直執行下去
case 1: # 條件2
console.log("Monday"); # 條件2成立執行的代碼
break;
default: # 條件都不滿足執行的代碼
console.log("...")
}
switch中的case子句通常都會加break陳述句，否則程式會繼續執行后續case中的陳述句
for回圈
for (var i=0;i<10;i++) { # 起始條件;回圈條件;條件處理
console.log(i); # 回圈體代碼
}
let dd = {'name':'jason','age':18}
for(let k in dd){
console.log(k)
}
while回圈
var i = 0;
while (i < 10) { # 回圈條件
console.log(i); # 回圈體代碼
i++;
}
三元運算
語法結構為：條件 ？ 操作1 ： 操作2， 如果條件為真，執行操作1，否則執行操作2
(條件) ? 運算式1 : 運算式2
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
10
函式
JavaScript 函式語法
JavaScript 函式通過function關鍵詞進行定義，其后是函式名和括號 ()，
函式名可包含字母、數字、下劃線和美元符號（規則與變數名相同），
圓括號可包括由逗號分隔的引數：
function 函式名(形參){
// 函式注釋
函式體代碼
return 回傳值
}
匿名函式
var s1 = function(a, b){
return a + b;
}
箭頭函式
var s1 = function(a, b){
return a + b;
}
var f = () => 5;
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
var sum = function(num1, num2){
return num1 + num2;
}
1.JS中函式的形參與實參個數可以不對應
傳少了就是undefined 傳多了不用
2.函式體代碼中有一個關鍵字arguments用來接收所有的實參
3.函式的回傳值如果有多個需要自己處理成一個整體
內置物件
JavaScript中的所有事物都是物件：字串、數字、陣列、日期，等等，在JavaScript中，物件是擁有屬性和方法的資料
var d = new Date();
//getDate() 獲取日
//getDay () 獲取星期
//getMonth () 獲取月（0-11）
//getFullYear () 獲取完整年份
//getYear () 獲取年
//getHours () 獲取小時
//getMinutes () 獲取分鐘
//getSeconds () 獲取秒
//getMilliseconds () 獲取毫秒
//getTime () 回傳累計毫秒數(從1970/1/1午夜)
let dd = {name: 'jason', age: 18}
JSON.stringify(dd) 序列化
JSON.parse(ss) 反序列化
定義正則兩種方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
1.全域模式的規律
lastIndex
2.test匹配資料不傳默認傳undefined
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539268.html
標籤：其他