前端JavaScript

時間  2019-12-02
標籤 前端 javascript 欄目 JavaScript 简体版
原文   原文鏈接

目錄javascript

JavaScript 簡介

js全稱（javascript）中文是java腳本的意思 。它的由來（在互聯網剛興起的時候，網絡速度比較慢，而體驗又是放在服務器端的，因此用戶體驗度很是差，爲了瞭解這一難題，網景公司發明了livescript liverscript主要把表單驗證功能從後臺提高到了前端，由於不依賴網絡，因此用戶體驗比較好。可是因爲知名度比較差，知道的人不多，後來因爲sum公司的java語言一飛沖天，爆紅編程世界，爲了跟風，博取知名度，網景公司把livescript 改爲javascript. 後來微軟眼紅網景公司的成就，就發明了jscript。可是正由於此，致使了js的標準不一樣，因此給個大瀏覽器廠家帶來了很大的麻煩。爲了有一個統一的標準，js被提交到一個ecma組織，也正由於此，後來的js都是採用ecma標準（ECMAScript））前端

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

  • JavaScript 是腳本語言
  • JavaScript 是一種輕量級的編程語言。
  • JavaScript 是可插入 HTML 頁面的編程代碼。
  • JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。
  • JavaScript 很容易學習。

其次js的做用「加強頁面的趣味性，響應用戶的行爲」； 特色（弱解釋腳本語言，能夠被瀏覽器直接解析 不須要編譯）python

咱們如今用的最多的js版本是ECMAScript 5.1，也有用ECMAScript 6（ES6）的正則表達式

js的輸出，有兩種：編程

控制檯輸出（console.log()）不會堆文檔形成影響json

文檔中輸出 document.write("xxxx") 會對文檔形成影響數組

JavaScript引入方式

  • 在script標籤內寫代碼
<script>
  // 在這裏寫你的JS代碼
</script>
  • 在標籤內引入額外的 js 文件

<script src="myscript.js"></script>瀏覽器

JavaScript語言規範

  • 註釋服務器

    // 這是單行註釋

/*
這是
多行註釋
*/

  • 結束符

    JavaScript中的語句要以分號（;）爲結束符。

JavaScript語言基礎

變量聲明

  1. js中的變量名可使用 _，數字，字母，$組成，也不能以數字開頭
  2. 聲明變量使用 var/let 變量名; 的格式來進行聲明
var name = "qinyj"
var age = 18

注意：

在js中變量名也是區分大小寫的。

推薦使用駝峯體命名規範

保留字（關鍵字）不能用做變量名

保留字（關鍵字）列表：

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

在ES6中才新增了let、const 聲明變量的關鍵字，他們之間的區別：

  • let：聲明局部變量。只能用在let命令所在的代碼塊內有效，例如for循環的計數器就適合用let命令
  • var：聲明全局變量。
  • const：聲明常量，一旦聲明，其值不能改變。

js數據類型

js中有如下數據類型：

  • 數值（number）
  • 字符串（string）
  • 布爾值（boolean）
  • null和undefined
  • 對象（object）

typeof 用來查看js的數據類型

數值（number）

js不區分整形和浮點型，就只有一種數字類型

var a = 1;
var b = 12.34;
console.log(a);
console.log(b);


typeof a        //"number"
typeof b        //"number"

經常使用方法：

parseInt、parseFloat 就相似於python中的str、float，數據類型強轉。

parseInt("123")     //123
parseInt("ABC")     //NaN
parseFloat("123.22")    //123.22
parseFloat("ABC")       //NaN

還有一種NaN，表示不是一個數字（Not a Number）

返回NaN，就表示這個值不是數字

字符串（string）

字符串定義和python中定義同樣，也是加 ""

字符串的拼接，python中推薦使用格式化，js推薦直接用 "+"

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) 分割

在js中拼接字符串咱們通常使用 "+"。

substring 和 slice 的區別

二者均可以傳一個參數，默認從傳的參數的索引位置開始取到最後的字符串

可是若是傳兩個參數，第二個參數若是爲負數，substring返回空，slice返回從第一個參數索引開始到最後的全部值

補充：

ES6中引入了模板字符串，用來定義多行字符串，在字符串中嵌入變量的

var name = "jack",time = "today"
test = `hello ${name}`
console.log(test)   //hello jack
注意：若是模板字符串中有須要使用反引號的，則須要在其前面用反斜槓轉義。

布爾值（boolean）

js中的布爾值區別於python，true和false 都是小寫。

a = true

在js中空、0、null、undefined、NaN都是false。

null和undefined

null值表示爲空。能夠手動清空一個變量的值

undefined表示只聲明瞭變量，但尚未賦值。

var a = null
a       //null
var b = undefined
b       //undefined

對象（object）

js 中全部事物都是對象。對象是帶有屬性和方法的特殊數據類型。

數組對象：

相似於python中的列表

var a = [123,"abc"]
typeof a    //"object"
a[1]        //"abc"

a.push(666)
a           // [123, "abc", 666]
a.pop()     //刪除一個元素
a           //[123, "abc"]

經常使用方法：

方法 說明
.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){console.log()}})

bb      //[1, 2, 3, 4, 5]
bb.forEach(function(bb,index,arr){console.log(bb,index,arr)})
1 0 [1, 2, 3, 4, 5]
2 1 [1, 2, 3, 4, 5]
3 2 [1, 2, 3, 4, 5]
4 3 [1, 2, 3, 4, 5]
5 4 [1, 2, 3, 4, 5]

bb，第一列是數組的每一個元素
index，第二列是每一個數組元素的索引
arr，第三列輸出當前數組的全部值

splice()語法：

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

參數 描述
index 必需。規定從何處添加/刪除元素。 該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。
howmany 必需。規定應該刪除多少元素。必須是數字，但能夠是 "0"。 若是未規定此參數，則刪除從 index 開始到原數組結尾的全部元素。
item1, ..., itemX 可選。要添加到數組的新元素 
ll      //[11, 22, 33, 44, 55, 66]
ll.splice(1,2)
ll      //[11, 44, 55, 66]

map()：

js運算符

算術運算符

+ - * / % ++ --
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涉及到比較時儘可能用三等號來強制限制類型，防止判斷錯誤

邏輯運算符

&& || !

賦值運算符

= += -= *= /=

js流程控制

if 判斷

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

swith

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

for

for (var 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
//這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a,條件不成立返回的值爲b;三元運算能夠嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

x
10

函數

python中定義函數關鍵字：def

js中定義函數關鍵字：function

// 普通函數定義
function f1() {
 console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
 console.log(arguments);  // 內置的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;     // 第一個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[0]);//arguments至關於將出傳入的參數所有包含，這裏取得就是第一個元素1
}

add(1,2)



function f(a,b) {
    if (arguments.length==2 ){
        console.log(a,b)
    }else if(arguments.length>2){
        console.log("參數傳多了")
    }else {
        console.log("參數傳少了")
    }
    
}

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

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

局部變量：

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

全局變量：

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

var abc = 100

function test() {
    /*var*/ abc = 10        //在函數內部使用var定義變量是局部變量，沒法修改全局變量，若是要修改去掉var便可。
    console.log(abc)
}
test()
console.log(abc)

js中函數做用域

首先在函數內部查找變量，找不到去外層函數查找，逐步找到最外層。與python中做用域關係查找同樣！

幾個例子：

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

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

ShenZhen
var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印結果是？

BeiJing

js函數中的閉包，與python中同樣

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

js中內置對象和方法

JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

注意：

var s1 = "abc" 和 var s2 = new String("abc")的區別

typeof s1
"string"
typeof s2
"object"

自定義對象

js中的對象本質上是鍵值對的集合，可是隻能用字符串做爲key

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

遍歷對象中的內容：

for (var i in a){
  console.log(i, a[i]);
}

建立對象：

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

編寫代碼，將當前日期按「2017-12-27 11:11 星期三」格式輸出。

function showTime() {
    var d = new Date();
    var year = d.getFullYear();
    var month = d.getMonth();
    var day = d.getDate();
    var hour = d.getHours();
    var minute = d.getMinutes();
    var date = d.getDay();

    switch (date) {
        case 0:
        date = "星期日";
        break;
        case 1:
        date = "星期一";
        break;
        case 2:
        date = "星期二";
        break;

        case 3:
        date = "星期三";
        break;

        case 4:
        date = "星期四";
        break;

        case 5:
        date = "星期五";
        break;

        case 6:
        date = "星期六";
        break;
        }

    var info = `${year}-${month}-${day} ${hour}:${minute} ${date}`
    console.log(info)
}

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

Match 對象

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)      返回角的正切。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程