Day 45 JavaScript基礎

時間 2019-12-02

標籤 day javascript 基礎欄目 JavaScript 简体版

原文原文鏈接

目錄javascript

JavaScript概述

JavaScript和ECMAScript的關係

儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：css

核心（ECMAScript）
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

簡單地說，ECMAScript 描述了JavaScript語言自己的相關內容。html

JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。java

JavaScript 是可插入 HTML 頁面的編程代碼。正則表達式

JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。編程

JavaScript 很容易學習。json

JavaScript引入方式

script標籤內寫代碼

<script>
    // 這裏寫JS代碼
</script>

引入額外的JS文件

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

JavaScript語言規範和基礎

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

注意：數組

變量名是區分大小寫的。瀏覽器

推薦使用駝峯式命名規則。數據結構

保留字不能用作變量名。

補充：

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

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

const PI = 3.1415
PI = 3
// TypeError: "PI" is read-only

JavaScript數據類型

JavaScript擁有動態數據類型

var x;  //此時x是undefined
var x = 1;  // 此時x是數字
var x = "Alex"  // 此時x是字符串

數值(Number)

JavaScript不區分整型和浮點型,就只有一種數字類型

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

還有一種NaN,表示不是一個數字(Not a Number)

經常使用方法:

parseInt("123")  // 返回123
parseInt("123abc")  // 返回123
parseInt("abc")  // 返回NaN
parseFloat("123.123.123")  // 返回123.123

字符串(String)

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

經常使用方法:

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

substring和slice的區別:

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)個字符結束(不包含該位置字符)

模塊字符串

ES6中引入了模板字符串。模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠當作普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

e = `
模塊字符串`
`這是${e}`
"這是模塊
字符串"

注意:

若是模板字符串中須要使用反引號，則在其前面要用反斜槓轉義。
JSHint啓用ES6語法支持:/* jshint esversion: 6

布爾值(Boolean)

區別於Python,true和false都是小寫

var a = true;
var b = false;

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

undefined

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

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

對象(Object)

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

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

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

數組

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

var = ['tiny', 18];
console.log(a[1]);  // 輸出18

經常使用方法:

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

forEach()

語法:

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

參數:

function(currentValue, index, arr)

currentValue: 必需.當前元素

index: 可選.當前元素索引值

arr: 可選.當前元素所屬的數組對象

thisValue

可選.傳遞給函數的值通常用做"this"值.若是省略了thisValue, "this"的值爲"undefined"

var sum = 0;
var number = [1, 2, 3, 4, 5];


number.forEach(function(value){
               sum += value;
               console.log(sum);
               })

splice()

語法:

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

參數:

index: 必需.規定從何處添加/刪除元素

howmany: 必需.規定應該刪除多少元素.必需是數字,但能夠爲0

item, ... , itemX: 可選.要添加到數組的新元素

a = ["tiny", "tiny", 18];
a.splice(1, 2, "male", 24);

["tiny", "male", 24]

map()

語法:

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

參數:

function(currentValue, index, arr)

currentValue: 必需.當前元素

index: 可選.當前元素索引值

arr: 可選.當前元素所屬的數組對象

thisValue

可選.傳遞給函數的值通常用做"this"值.若是省略了thisValue, "this"的值爲"undefined"

arr1 = [11, 22, 33, 44];
arr1.map(function(value), {
         return value + 1;
         })

[12, 23, 34, 45]

補充:

類型查詢

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

補充:

typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。**

對變量或值調用 typeof 運算符將返回下列值之一：

undefined - 若是變量是 Undefined 類型的
boolean - 若是變量是 Boolean 類型的
number - 若是變量是 Number 類型的
string - 若是變量是 String 類型的
object - 若是變量是一種引用類型或 Null 類型的

運算符

算術運算符

+ - * / % ++ --

比較運算符

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

注意:

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

邏輯運算符

&& || !

賦值運算符

= += -= *= /=

流程控制

if-else

age = 18;
if (age > 18){
    console.log("小姐姐好!")
}else {
    console.log("小妹妹好!")
}

if-else if-else

age = 18;
if (age > 18){
    console.log("小姐姐好!")
}else if (age == 18) {
    console.log("好巧啊,跟我同樣大!")
}else {
    console.log('小妹妹好!')
}

switch-case

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 (let i=0;i<10;i++) {
    console.log(i)
}

while

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

三元運算

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

函數

函數定義

JavaScript中的函數和Python中的很是相似,只是定義方式優勢區別

無參函數

function f1() {
    console.log("Hello world!");
}

有參函數

function f2(a, b) {
    console.log(a, b);
}

f2(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;  
  //這裏的return只能返回一個值，若是想返回多個值須要本身手動給他們包一個數組或對象中
}

函數中arguments參數

function add(a, b) {
    console.log(a+b);
    console.log(arguments.length)
    console.log(arguments);
}

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

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

局部變量：

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

全局變量：

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

變量生存週期：

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

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

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

自定義對象

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構）

var a = {"name": "tiny", "age": 18};
console.log(a.name);
console.log(a["age"]);

注意：

ES6中提供了Map數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以當作鍵。

也就是說，Object結構提供了「字符串--值」的對應，Map結構提供了「值--值」的對應，是一種更完善的Hash結構實現。

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

math對象

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)      返回角的正切。

相關標籤/搜索

每日一句

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