JavaScript基本語法

時間  2019-12-14
標籤 javascript 基本 語法 欄目 JavaScript 简体版
原文   原文鏈接

目錄javascript

JavaScript基本介紹

介紹

JavaScript是一種運行在客戶端 的腳本語言 。JavaScript的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。java

組成

JS由ECMAScript、BOM和DOM組成。其中，ECMAScript是JS的核心，描述了語言的基本語法和數據類型，它也是一套規範，定義了一種語言的標準與具體實現。BOM叫作瀏覽器對象模型，它是一套操做瀏覽器功能的API，而且經過BOM能夠操做瀏覽器窗口。最後，DOM叫作文檔對象模型，是一套操做頁面元素的API，利用DOM能夠把HTML看作是文檔樹，經過DOM提供的API能夠對樹上的節點進行操做。python

書寫位置

寫在行內

<input type="button" value="按鈕" onclick="alert('Hello World')" />

寫在script標籤裏面

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

寫在外部js文檔裏面，而後引用

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

變量

變量的定義

var x; //申明變量
var x,y; //申明多個變量
var x = 1;//申明標量並賦值
var x = 1, y = 2;//申明多個變量並賦值

變量命令規則和規範

規則

必須遵照的，不遵照會報錯：正則表達式

  • 由字母、數字、下劃線、$符號組成，不能以數字開頭
  • 不能是關鍵字和保留字，例如：for、while。
  • 區分大小寫

規範

建議遵照的，不遵照不會報錯：express

  • 變量名必須有意義
  • 遵照駝峯命名法。首字母小寫，後面單詞的首字母須要大寫。例如：userName、userPassword

數據類型

簡單數據類型

Number類型

var x = 66; //定義一個普通的數字
var a = 0134;//在前面加一個0，表明一個八進制的數字
var b = 0x12a;//在前面加一個0x，表明一個十六進制的數字
var c = 5e+3;//科學計數法

另外還有NaN：not a number和sNaN: is not a number來進行數值判斷。json

String類型

放在雙引號或者單引號裏面的字符，如：數組

name = 'y'; //不論是什麼簡單類型，被賦予的值都叫作字面量
age = '18';

該類型和其餘語言同樣有轉義符，在此就不贅述了。另外，咱們可使用length這個方法來獲取字符串的長度：瀏覽器

var info = "YuanMing is so handsome!";
console.log(info.length);
//24

Boolean類型

和其餘語言同樣，該類型只有兩個值，true和false。dom

Undefined和Null

undefined表示一個聲明瞭沒有賦值的變量，變量只聲明的時候值默認是undefined，而null表示一個空，變量的值若是想爲null，必須手動設置。函數

複雜數據類型

即Object類型

獲取變量的類型

var age = 18;
console.log(typeof age);  // 'number'

註釋

單行註釋

//註釋內容

多行註釋

/*
* 註釋內容
* 
* 
* 
* */

數據類型轉換

轉換成字符串類型

var a = 1;
console.log(a.toString());
console.log(String(a));
//兩個方法均可以

轉換成數值類型

var a = '1';
console.log(Number(a));
var b = '123abc';
console.log(parseInt(b));//返回123，若是第一個字符是數字會解析知道遇到非數字結束，不然返回NaN
var c = '12.66abc';
console.log(parseFloat(c));//返回12.66，若是第一個字符是數字會解析知道遇到非數字結束，不然返回NaN

轉換成布爾類型

咱們使用Boolean()方法，其中0 空字符串 null undefined NaN等都會轉換成false 其它都會轉換成true。

操做符

算術運算符

+ - * / %

一元運算符

  • 前置++：先加1，後參與運算
  • 後置++：先參與運算，後加1
  • 前置-- ：先減1，後參與運算
  • 後置-- ：先參與運算，後減1
var num = 1;
var res = num++ + 1;
console.log(num)
console.log(res);
//2,2

邏輯運算符

  • &&與
  • ||或
  • ! 非

關係運算符

<  >  >=  <= == != === !==
==與===的區別：==只進行值得比較，===類型和值同時相等，則相等
var result = '55' == 55;    // true
var result = '55' === 55;   // false 值相等，類型不相等
var result = 55 === 55;     // true

賦值運算符

=   +=   -=   *=   /=   %=

運算符優先級

優先級從高到底
    1. ()  優先級最高
    2. 一元運算符  ++   --   !
    3. 算數運算符  先*  /  %   後 +   -
    4. 關係運算符  >   >=   <   <=
    5. 相等運算符   ==   !=    ===    !==
    6. 邏輯運算符 先&&   後||
    7. 賦值運算符

流程控制

順序結構

從上到下執行的代碼就是順序結構，這是程序運行的默認順序。

分支結構

if語句·

if (/* 條件表達式 */) {
  // 執行語句
}

if (/* 條件表達式 */){
  // 成立執行語句
} else {
  // 不然執行語句
}

if (/* 條件1 */){
  // 成立執行語句
} else if (/* 條件2 */){
  // 成立執行語句
} else if (/* 條件3 */){
  // 成立執行語句
} else {
  // 最後默認執行語句
}

三元運算

表達式1 ? 表達式2 : 表達式3

switch語句

switch (expression) { //在比較值時使用的是全等操做符, 所以不會發生類型轉換
  case 常量1:
    語句;
    break;
  case 常量2:
    語句;
    break;
  case 常量3:
    語句;
    break;
  …
  case 常量n:
    語句;
    break;
  default:
    語句;
    break;
}

循環結構

while語句

// 當循環條件爲true時，執行循環體，
// 當循環條件爲false時，結束循環。
while (循環條件) {
  //循環體
}

do...while語句

do {  //無論怎樣都會先執行一次代碼塊
  // 循環體;
} while (循環條件);

for語句

// for循環的表達式之間用的是;號分隔的
for (初始化表達式1; 判斷表達式2; 自增表達式3) {
  // 循環體4
}

continue和break

break:當即跳出整個循環，即循環結束，開始執行循環後面的內容（直接跳到大括號）
continue:當即跳出當前循環，繼續下一次循環（跳到i++的地方）

數組

定義

數組是一個有序的列表，能夠在數組中存聽任意的數據，而且數組的長度能夠動態的調整。且JS裏面的元素能夠是不一樣數據類型的。

建立數組

經過構造函數建立數組

var array=new Array();//定義了一個數組
ar 數組名=new Array(長度);//定義了數組，而且規定了數組的元素個數

若是數組中沒有數據,可是有長度，那麼數組中的每一個值都是undefined類型；若是在Array(多個值)，那麼這個數組中就有數據了,數組的長度就是這些數據的個數。

經過字面量的方式建立數組

var array=[];//空數組
var array=[長度];//空數組，規定了數組的長度
var arr2 = [1, 3, 4]; //建立一個包含3個數值的數組，多個數組項以逗號隔開

大體上來講，經過這種方式建立的數組與經過構造函數建立的數組同樣。

獲取數組元素

// 格式：數組名[索引]，索引從0開始
// 功能：獲取數組對應下標的那個值，若是下標不存在，則返回undefined
var arr = ['red',, 'green', 'blue'];
arr[0]; // red
arr[2]; // blue
arr[3]; // 這個數組的最大下標爲2,所以返回undefined

遍歷數組

//咱們可使用數組.length的方式獲取數組的長度
var arr=[10,20,30,40,50,60,70,80,90,100];
//小於的是數組的長度--個數
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}

新增數據元素

// 格式：數組名[索引] = 值;
// 若是下標有對應的值，會把原來的值覆蓋，若是下標不存在，會給數組新增一個元素

函數

函數的申明

函數申明

function 函數名(){
  // 函數體
}

函數表達式·

var fn = function() {
  // 函數體
};
//函數表達式後面,賦值結束後,要加分號

函數的調用

函數名();//函數名後面加()就能夠執行了

函數的參數

已知參數個數

// 函數內部是一個封閉的環境，能夠經過參數的方式，把外部的值傳遞給函數內部
// 帶參數的函數聲明
function 函數名(形參1, 形參2, 形參...){
  // 函數體
}

// 帶參數的函數調用
函數名(實參1, 實參2, 實參3);

未知參數個數

//咱們不給形參就能夠了
function f1() {
console.log(arguments.length); //經過arguments對象能夠獲取傳入的每一個參數的值
}

f1(1,2,3,4,5)//5

函數的返回值

//聲明一個帶返回值的函數
function 函數名(形參1, 形參2, 形參...){
  //函數體
  return 返回值; 
  //函數使用return語句後，這個函數會在執行完 return 語句以後中止並當即退出
}

//能夠經過變量來接收這個返回值
var 變量 = 函數名(實參1, 實參2, 實參3);
//若是函數沒有顯示的使用 return語句 ，那麼函數有默認的返回值：undefined

匿名函數與自調用

匿名函數就是沒有名字的函數，咱們能夠經過自調用方式來執行，不過該函數只能被執行一次。

(function () {
  alert("Hello,World!");
})();

做用域

大體和python裏面的做用域同樣，不過JS有一個隱式全局變量。聲明的變量沒有var,就叫隱式全局變量，能夠在全局使用。

預解析

JS代碼被執行前會先進行預解析過程，其過程以下：

  1. 把變量的聲明提高到當前做用域的最前面，只會提高聲明，不會提高賦值。
  2. 把函數的聲明提高到當前做用域的最前面，只會提高聲明，不會提高調用。
  3. 先提高變量，再提高函數
  4. 注意：函數表達式預解析執行會報錯

對象

對象的建立

調用系統的構造函數建立對象

var obj = new Object(); //建立一個對象
obj.name = "YuanMing";  //添加特徵
obj.age = 18;
obj.coding = function () {  //添加方法
console.log(obj.name+" is coding!"); //obj能夠用this替代
};

obj.coding();//YuanMing is coding!

工廠模式建立對象：

function creatPerson(name,age) { //建立一個能夠屢次建立對象的函數
var obj = new Object();
obj.name = name;
obj.age = age;
obj.eatFood = function () {
console.log(this.name+" is eating food!");
};
return obj; //必定要返回這個對象
}
var person1 = creatPerson("yuanming",18);
var person2 = creatPerson("xiaohua",17);
person1.eatFood();
person2.eatFood();

自定義構造函數建立對象

function Person(name,age) { //首字母大寫就是區別對象和函數的特徵
this.name = name;  //必須使用this，而不是obj
this,age = age;
this.eatFood = function () {
console.log(this.name+" is eating food!");
};
}
var person1 =new Person("yuanming",18);  //建立對象的時候，必須用new
var person2 =new Person("xiaohua",17);
person1.eatFood();
person2.eatFood();

字面量的方式建立對象

var obj1 = {}; //建立一個對象
obj1.name = "YuanMing";
obj1.age = 18;  //添加特徵和方法
obj1.coding = function () {
console.log(this.name+" is coding!");
};
obj1.coding(); //YuanMing is coding!

var obj2 = {
name: "xiaohua",  //把全部方法和特徵像字典同樣放入
age: 20,
coding: function () {
console.log(this.name + " is coding!")
}
}
obj2.coding(); //xiaohua is coding!

設置和獲取屬性值的另外一種方法

var obj2 = {
name: "xiaohua",  //把全部方法和特徵像字典同樣放入
age: 20,
coding: function () {
console.log(this.name + " is coding!")
}
}
//就像操做字典同樣
var obj2 = {
name: "xiaohua",
age: 20,
coding: function () {
console.log(this.name + " is coding!")
}
}
console.log(obj2["name"]);
//xiaohua
obj2["coding"]();
//xiaohua is coding!

JSON格式

var json = {
"name":"YuanMing",
"age":18,
"hometown":"MeiShan"
}
for(var key in json){
console.log(key+"--->"+json[key]); //在真正意思上的JSON數據裏面不能使用對象.key的方式
}
\\name--->YuanMing
\\age--->18
\\hometown--->MeiShan

內置對象

MDN官網

基本包裝類型

爲了方便操做基本數據類型，JavaScript還提供了三個特殊的基本類型：String/Number/Boolean，咱們能夠在這三種基本類型後面直接操做。

Math對象

Math.PI                     // 圓周率
Math.random()               // 生成隨機數
Math.floor()/Math.ceil()     // 向下取整/向上取整
Math.round()                // 取整，四捨五入
Math.abs()                  // 絕對值
Math.max()/Math.min()        // 求最大和最小值
Math.sin()/Math.cos()        // 正弦/餘弦
Math.power()/Math.sqrt()     // 求指數次冪/求平方根

隨機取數的演示：

console.log(parseInt(Math.random()*5)) //*5表示[0,5)之間

Data對象

var date = new Date(); 
date.valueOf;//獲取當前時間，距1970年1月1日（世界標準時間）起的毫秒數

// HTML5中提供的方法，有兼容性問題
var now = Date.now();   

// 不支持HTML5的瀏覽器，能夠用下面這種方式
var now = + new Date();         // 調用 Date對象的valueOf() 

toString()      // 轉換成字符串
// 下面格式化日期的方法，在不一樣瀏覽器可能表現不一致，通常不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

getTime()     // 返回毫秒數和valueOf()結果同樣，valueOf()內部調用的getTime()
getMilliseconds() 
getSeconds()  // 返回當前的秒數
getMinutes()  // 返回當前的分鐘數
getHours()    // 返回當前的小時數
getDay()      // 返回星期幾
getDate()     // 返回當前月的第幾天
getMonth()    // 返回月份，從0開始
getFullYear() //返回4位的年份  如 2016

Array對象

//檢測一個對象是不是數組：
instanceof
Array.isArray() //HTML5中提供的方法，有兼容性問題

toString()      //把數組轉換成字符串，逗號分隔每一項
alueOf()        //返回數組對象自己
pop()           //取出數組中的最後一項，這個值將被移除
shift()         //取出數組中的第一個元素，這個值將被移除
unshift()       //在數組最前面插入項，返回數組的長度
reverse()       //翻轉數組
sort();         //即便是數組sort也是根據字符，從小到大排序
concat()        //把參數拼接到當前數組
slice()         //從當前數組中截取一個新的數組，不影響原來的數組，參數start從0開始,end從1開始
splice()        //刪除或替換當前數組的某些項目，參數start, deleteCount, options(要替換的項目)
indexOf() or lastIndexOf()   //獲取該元素的索引，若是沒找到返回-1
join()          //方法將數組的全部元素鏈接到一個字符串中
every()         //判斷是否所有都知足條件
from()          //複製一個同樣的數組
find()          //返回第一個符合條件的值
forEach()       //返回每個元素
map()           //把數組中的值，進行相同的操做
filter()        //篩選值
some()          //判斷是否至少一個知足條件

String對象

charAt()        //獲取指定位置處字符
charCodeAt()    //獲取指定位置處字符的ASCII碼
str[0]          //HTML5，IE8+支持 和charAt()等效
concat()        //拼接字符串，等效於+，+更經常使用
slice()         //從start位置開始，截取到end位置，end取不到
substring()     //從start位置開始，截取到end位置，end取不到
substr()        //從start位置開始，截取length個字符
indexOf()       //返回指定內容在元字符串中的位置
lastIndexOf()   //從後往前找，只找第一個匹配的
trim()          //只能去除字符串先後的空白
to(Locale)UpperCase()   //轉換大寫
to(Locale)LowerCase()   //轉換小寫
String.fromCharCode(101, 102, 103);  //把ASCII碼轉換成字符串
search()         //查詢字符內容，用正則表達式
replace()       //把字符串中的什麼替代成什麼
split()         //以什麼爲標準，分割字符串
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程