前端知識之JavaScript知識

時間 2019-12-05

標籤前端知識 javascript 欄目 JavaScript 简体版

原文原文鏈接

前端之javaScript

JavaScript
- html ：展現文檔內容的
- css：控制文檔的顯示效果
- js：控制文檔的交互效果
  - 是腳本語言
  - 一種輕量級的編程語言
  - 可插入html頁面的編程代碼
js導入方式javascript
1. 直接用Script標籤內些代碼css
  1. ```
  <script>
    // 在這裏寫你的JS代碼
  </script>
```
2. 引入額外的js文件html
  1. ```
  <script src="myscript.js"></script>
```
js語法基礎前端
- 語句以；結束，不講究縮進
- 變量聲明要加var關鍵字
- $能夠做爲變量名

js中的數據類型java

數字（number）正則表達式
- NaN
- parseInt
- parseFloat

字符串（string）編程

字符串經常使用方法json

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

字符串拼接通常使用+號進行鏈接數組

boolean（布爾值）dom
- 0，‘’，null，undefined，NaN都是false
null
- 表示值爲空，多爲手動將一個變量置爲空
undefined
- 表示變量只聲明，單沒有賦值
- 函數沒有明確指定返回值，默認返回的就是undefined

object

數組（Array）相似Python中的列表

var a1 = [11, 22, 33]
console.log(a[1]);//輸出22

經常使用方法

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

自定義對象（相似Python中的字典）
- ```
var o = {'name': '王帥', 'age': 18}
```
typeof（檢測類型）
- typeof 變量名

運算符
- 算術運算符
  - +、-、*、%、++指加一、--指-一、
- 比較運算符
  - >、<、!=、
  - == 弱等於指只判斷值是否是相等，與類型無關
    - ```
    2 == '2'//ture
```
- === 強等於即判斷值也判斷類型
- 邏輯運算
  - && 與、|| 或，！非
  - Python中的非爲not
- 賦值運算
  - =、+=、-=、*=、/=

js流程控制

if-else、if-else if-else

var a = 10;
if (a > 5){
  console.log("yes");//相似print輸出
}else {
  console.log("no");
}

for

for (var i=0;i<10;i++) {
  console.log(i);
}
//下列爲死循環，瞭解
for (;;){
    console.log("死循環");
}

while

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

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

js函數

基本函數的定義
- 注意事項：
  - 參數：傳多，傳少都不會報錯，沒有傳值至關於傳了undefined
  - 返回值：若是返回有多個值，默認返回最後一個

定義一個函數

//定義一個函數
function f1() {
  console.log("Hello world!");
}
//執行這個函數
f1()

帶返回值的函數

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

js內置對象和方法

建立對象

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

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());  //毫秒並不直接顯示
var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完全年份
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

json對象 與Python中相似

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

注意事項：
1. 正則表達式不能有空格
2. 匹配模式，經常使用g（全局匹配，找到因此的匹配，而不是隻找一個）和i模式（忽略大小寫）

//RegExp對象

//建立正則對象方式1
// 參數1 正則表達式(不能有空格)
// 參數2 匹配模式：經常使用g(全局匹配;找到全部匹配，而不是在第一個匹配後中止)和i(忽略大小寫)

// 用戶名只能是英文字母、數字和_，而且首字母必須是英文字母。長度最短不能少於6位 最長不能超過12位。

// 建立RegExp對象方式（逗號後面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配響應的字符串
var s1 = "bc123";

//RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。
reg1.test(s1);  // true

// 建立方式2
// /填寫正則表達式/匹配模式（逗號後面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true


// String對象與正則結合的4個方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正則 的內容
s2.search(/h/g);        // 0                      查找字符串中符合正則表達式的內容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正則表達式對字符串進行切割
s2.replace(/o/g, "s");  // "hells wsrld"          對字符串按照正則進行替換

// 關於匹配模式：g和i的簡單示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不區分大小寫


// 注意事項1：
// 若是regExpObject帶有全局標誌g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。
// 該屬性值默認爲0，因此第一次仍然是從字符串的開頭查找。
// 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改成字符串中本次匹配內容的最後一個字符的下一個索引位置。
// 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。
// 所以，當咱們使用test()函數執行了一次匹配以後，若是想要從新使用test()函數從頭開始查找，則須要手動將regExpObject.lastIndex的值重置爲 0。
// 若是test()函數再也找不到能夠匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置爲 0。

var reg3 = /foo/g;
// 此時 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此時 regex.lastIndex=3
reg3.test('xxxfoo'); // 仍是返回true
// 因此咱們在使用test()方法校驗一個字符串是否徹底匹配時，必定要加上^和$符號。

// 注意事項2(說出來你可能不信系列)：
// 當咱們不加參數調用RegExpObj.test()方法時, 至關於執行RegExpObj.test("undefined"), 而且/undefined/.test()默認返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

Math對象（理解）

調用方式
- Math.abs(-5) 來調用

abs(x)      返回數的絕對值。
exp(x)      返回 e 的指數。
floor(x)    對數進行下舍入。
log(x)      返回數的天然對數（底爲e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sin(x)      返回數的正弦。
sqrt(x)     返回數的平方根。
tan(x)      返回角的正切。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。