前端--javaScript之簡單介紹

時間 2019-11-09

標籤前端 javascript 簡單介紹欄目 JavaScript 简体版

原文原文鏈接

一.javaScript(如下簡稱js)的歷史

1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其更名ScriptEase.(客戶端執行的語言)css
Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.後更名叫Javascripthtml
微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.java
爲了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 做爲標準（ISO/IEC-16262）。今後，Web 瀏覽器就開始努力（雖然有着不一樣的程度的成功和失敗）將 ECMAScript 做爲 JavaScript 實現的基礎。EcmaScript是規範.python

二.ECMAScript

儘管ECMAScript是一個重要的標準,但他並非js惟一的部分,固然,也不是惟一被標準化的部分.實際上,一個完整的js實現是由如下3個不一樣部分組成的:面試

核心(ECMAScript)正則表達式

文檔對象模型(DOM) Document object model(整合js,css,html)數組

瀏覽器對象模型(BOM)Broswer object model(整合js和瀏覽器)瀏覽器

js在開發中絕大多數狀況是基於對象的,也是面向對象的.dom

簡單地說,ECMAScript描述了一下內容:函數

語法

類型

語句

關鍵字

保留字

運算符

對象(封裝,繼承,多態)基於對象的語言,使用對象.

三.js基礎

1.js的引入方式

　　1.直接編寫:

<script>
    alert("hello world!")
</script>

　　2.導入文件:

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

2.js的變量

　　1.聲明變量時不用聲明變量類型,所有使用var關鍵字

var a = 3;

　　2.一行能夠聲明多個變量,而且能夠是不一樣類型

var name = "corn" , age = 21;

　　3.變量命名,首字母只能是字母,下劃線,美圓符號$,三選一,餘下的字符能夠是任意字符,且區分大小寫

3.常量和標識符

常量:直接在程序中出現的數據值

標識符:

　　1.由不是數字開頭的字母,數字,下劃線(_),美圓符號($)組成

　　2.經常使用於表示函數,變量等的名稱

　　3.例如:_abc.$abc,abc,abc123是標識符,而1abc不是

　　4.js語言中表明特定含義的詞稱爲保留字,不容許程序再定義爲標識符

關鍵字:

4.js的數據類型

數據類型有:

number        ------　　數值
boolean       ------　　布爾值
string        ------　　字符串
undefined     ------　　undefined
null          ------　　null

數字類型:

　　不區分整型數值和浮點型數值

字符串類型(string):

是由Unicode字符,數字,標點符號組成的序列;字符串常量首尾由單引號或雙引號括起;js中沒有字符類型;經常使用特殊字符在字符串中表達;

字符串中特殊部分必須加上右斜槓\;經常使用的轉義字符 \n:換行\` ; \':單引號 ; \":雙引號 ; \\:右斜槓

布爾類型(boolean):

Boolen類型僅有兩個值:true和false,也表明1和0,實際運算中true = 1,false = 0

布爾值也能夠看做on/off,yes/no,1/0對應true/false

Boolean值主要用於js的控制語句,例如:

if (x==1){
        y=y+1;
}else{
        y=y-1;    
        }

Null和Undedined類型

Undefined類型

1.Undefined類型只有一個值,即undefined.當聲明的變量未初始化時,該變量的默認值是undefined.

2.當函數無明確返回值時,返回的也是值"undedined".

Null類型

另外一種只有一個值的類型是Null,它只有一個專用值null,即它的字面量.值undefined其實是從值null派生來的,所以ECMAScript把它們定義爲相等的.

儘管這兩個值相等,但它們的含義不一樣.undefined是聲明瞭變量但未對其初始化時賦予該變量的值,null則用於表示還沒有存在的對象(在討論typeof運算符時,簡單的介紹過這一點).若是函數或者方法要返回的是對象時,返回的一般是null.

四.運算符

運算符分類

算數運算符：
    +   -    *    /     %求餘       ++ 自增       -- 自減　　　　(++i:先計算後賦值,i++:先賦值後計算)

比較運算符：
    >  >=  <   <=  !=  ==  === !== 等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所作的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。

邏輯運算符：
     &&   ||   ！

賦值運算符：
    =  +=   -=  *=   /=

字符串運算符：
    +  鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算

五.流程控制

順序結構(從上向下執行)

分支結構

循環結構

分支結構:

　　1.if.....else結構

if (表達式1) {
    語句1;
}else if (表達式2){
    語句2;
}else if (表達式3){
    語句3;
} else{
    語句4;
}

　　2.if.....else if.....else結構

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

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

for循環的另外一種形式:

for( 變量 in 數組或對象)
    {
        執行語句
        ……
    }

while循環:

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

三元運算:

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

六.string對象(字符串)

1.字符串對象的建立

字符串建立(兩種方式)

　　1)變量 = "字符串"

　　2)字符串對象名稱 = new String(字符串)

//        方式一
          var s = 'sffghgfd';
//        方式二
          var s1 = new String('  hel lo ');
          console.log(s,s1);
          console.log(typeof(s)); //object類型
          console.log(typeof (s1)); //string類型

2.字符串對象的屬性和函數

-------屬性
x.length         －－－－獲取字符串的長度

------方法
 x.toLowerCase()        －－－－轉爲小寫
 x.toUpperCase()        －－－－轉爲大寫
 x.trim()               －－－－去除字符串兩邊空格       


－－－－字符串查詢方法

x.charAt(index)         －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index爲要獲取的字符索引

x.indexOf(index)－－－－查詢字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的數組，若是沒有匹配則返回null
x.search(regexp)        －－－－search返回匹配字符串的首字符位置索引

                        示例：
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 結果爲"world"
                        alert(str3);     // 結果爲15
                        

－－－－子字符串處理方法

x.substr(start, length) －－－－start表示開始位置，length表示截取長度
x.substring(start, end) －－－－end是結束位置

x.slice(start, end)     －－－－切片操做字符串
                        示例：
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //結果爲"cd"
                            
                            alert(str3); //結果爲"efgh"
                            
                            alert(str4); //結果爲"cdefg"
                            
                            alert(str5); //結果爲"fg"

x.replace(findstr,tostr) －－－－    字符串替換

x.split();                 －－－－分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strArray=str1.split(",");
                                alert(strArray[1]);//結果爲"二"
                                
x.concat(addstr)         －－－－    拼接字符串

方法的使用

<script>
//        ========================
//        字符串對象的建立有兩種方式
//        方式一
          var s = 'sffghgfd';
//        方式二
          var s1 = new String('  hel lo ');
          console.log(s,s1);
          console.log(typeof(s)); //object類型
          console.log(typeof (s1)); //string類型

//        ======================
//        字符串對象的屬性和方法
//           1.字符串就這麼一個屬性
        console.log(s.length);  //獲取字符串的長度

//           2.字符串的方法
        console.log(s.toUpperCase()) ; //變大寫
        console.log(s.toLocaleLowerCase()) ;//變小寫
        console.log(s1.trim());  //去除字符串兩邊的空格(和python中的strip方法同樣，不會去除中間的空格)
////           3.字符串的查詢方法
        console.log(s.charAt(3));  //獲取指定索引位置的字符
        console.log(s.indexOf('f')); //若是有重複的，獲取第一個字符的索引,若是沒有你要找的字符在字符串中沒有就返回-1
        console.log(s.lastIndexOf('f')); //若是有重複的，獲取最後一個字符的索引
        var str='welcome to the world of JS!';
        var str1 = str.match('world');  //match返回匹配字符串的數組，若是沒有匹配則返回null
        var str2 = str.search('world');//search返回匹配字符串從首字符位置開始的索引，若是沒有返回-1
        console.log(str1);//打印
        alert(str1);//彈出
        console.log(str2);
        alert(str2);


//        =====================
//        子字符串處理方法
        var aaa='welcome to the world of JS!';
        console.log(aaa.substr(2,4)); //表示從第二個位置開始截取四個
        console.log(aaa.substring(2,4)); //索引從第二個開始到第四個，注意顧頭不顧尾
        //切片操做（和python中的同樣，都是顧頭不顧尾的）
        console.log(aaa.slice(3,6));//從第三個到第六個
        console.log(aaa.slice(4)); //從第四個開始取後面的
        console.log(aaa.slice(2,-1)); //從第二個到最後一個
        console.log(aaa.slice(-3,-1));


//        字符串替換、、
        console.log(aaa.replace('w','c')); //字符串替換，只能換一個
        //而在python中所有都能替換
        console.log(aaa.split(' ')); //把字符串按照空格分割
        alert(aaa.split(' ')); //把字符串按照空格分割
        var strArray = aaa.split(' ');
        alert(strArray[2])
    </script>

七.Array對象(數組)

1.建立數組的三種方式

建立方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

建立方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

建立方式3:
var arrname = new Array(長度); 
            //  初始化數組對象:
                var cnweek=new Array(7);
                    cnweek[0]="星期日";
                    cnweek[1]="星期一";
                    ...
                    cnweek[6]="星期六";

2.數組的屬性和方法

//        ====================
//        數組對象的屬性和方法
          var arr = [11,55,'hello',true,656];
//      1.join方法
        var arr1 = arr.join('-'); //將數組元素拼接成字符串，內嵌到數組了，
        alert(arr1);                //而python中內嵌到字符串了
//        2.concat方法(連接)
        var v = arr.concat(4,5);
        alert(v.toString())  //返回11,55,'hello',true,656,4,5
//        3.數組排序reserve  sort
//        reserve:倒置數組元素
        var li = [1122,33,44,20,'aaa',2];
        console.log(li,typeof (li));  //Array [ 1122, 33, 44, 55 ] object
        console.log(li.toString(), typeof(li.toString())); //1122,33,44,55 string
        alert(li.reverse());  //2,'aaa',55,44,33,1122
//         sort :排序數組元素
        console.log(li.sort().toString()); //1122,2,20,33,44,aaa  是按照ascii碼值排序的
//        若是就想按照數字比較呢?（就在定義一個函數）
//        方式一
        function intsort(a,b) {
            if (a>b){
                return 1;
            }
            else if (a<b){
                return -1;
            }
            else{
                return 0;
            }
        }
        li.sort(intsort);
        console.log(li.toString());//2,20,33,44,1122,aaa

//        方式二
        function Intsort(a,b) {
            return a-b;
        }
        li.sort(intsort);
        console.log(li.toString());
        // 4.數組切片操做
        //x.slice(start,end);
        var arr1=['a','b','c','d','e','f','g','h'];
        var arr2=arr1.slice(2,4);
        var arr3=arr1.slice(4);
        var arr4=arr1.slice(2,-1);
        alert(arr2.toString());//結果爲"c,d"
        alert(arr3.toString());//結果爲"e,f,g,h"
        alert(arr4.toString());//結果爲"c,d,e,f,g"
//        5.刪除子數組
        var a = [1,2,3,4,5,6,7,8];
        a.splice(1,2);
        console.log(a) ;//Array [ 1, 4, 5, 6, 7, 8 ]
//        6.數組的push和pop
//        push:是將值添加到數組的結尾
        var b=[1,2,3];
        b.push('a0','4');
        console.log(b) ; //Array [ 1, 2, 3, "a0", "4" ]

//        pop；是講數組的最後一個元素刪除
        b.pop();
        console.log(b) ;//Array [ 1, 2, 3, "a0" ]
        //7.數組的shift和unshift
        unshift: 將值插入到數組的開始
        shift: 將數組的第一個元素刪除
        b.unshift(888,555,666);
        console.log(b); //Array [ 888, 555, 666, 1, 2, 3, "a0" ]

        b.shift();
        console.log(b); //Array [ 555, 666, 1, 2, 3, "a0" ]
//        8.總結js的數組特性
//        java中的數組特性：規定是什麼類型的數組,就只能裝什麼類型.只有一種類型.
//        js中的數組特性
//            js中的數組特性1：js中的數組能夠裝任意類型,沒有任何限制.
//            js中的數組特性2： js中的數組,長度是隨着下標變化的.用到多長就有多長.
    </script>

八.日期

1.建立data對象

建立date對象
//        方式一：
        var now = new Date();
        console.log(now.toLocaleString()); //2017/9/25 下午6:37:16
        console.log(now.toLocaleDateString()); //2017/9/25
//        方式二
        var now2 = new Date('2004/2/3 11:12');
        console.log(now2.toLocaleString());  //2004/2/3 上午11:12:00
        var now3 = new Date('08/02/20 11:12'); //2020/8/2 上午11:12:00
        console.log(now3.toLocaleString());

        //方法3：參數爲毫秒數
        var nowd3=new Date(5000);
        alert(nowd3.toLocaleString( ));
        alert(nowd3.toUTCString()); //Thu, 01 Jan 1970 00:00:05 GMT

2.data對象的方法---獲取日期和時間

獲取日期和時間
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完全年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(從1970/1/1午夜)

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

十.Function對象(重點)

1.函數的定義

function 函數名 (參數){ <br>    函數體;

    return 返回值;

}

功能說明：

可使用變量、常量或表達式做爲函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類能夠表示開發者定義的任何函數。

用 Function 類直接建立函數的語法以下：

var 函數名 = new Function("參數1","參數n","function_body");

雖然因爲字符串的關係，第二種形式寫起來有些困難，但有助於理解函數只不過是一種引用類型，它們的行爲與用 Function 類明確建立的函數行爲是相同的。

示例：

var  func2 = new Function('name',"alert(\"hello\"+name);");
    func2('haiyan');

注意:js函數加載執行與python不一樣,它是總體加載完纔會執行,因此執行函數放在函數聲明上面或下面均可以:

f();//----->OK
      function f(){
       console.log("hello")
      }
f();//----->OK

2.Function對象的屬性

如前所說,函數屬於引用類型,因此它們也有屬性和方法.

好比,ECMAScript定義的屬性 length聲明瞭函數指望的參數個數

alert{func1.length}

3.Function的調用

//    ========================函數的調用
    function fun1(a,b) {
           console.log(a+b)
    }
    fun1(1,2);// 3
    fun1(1,2,3,4); //3
    fun1(1); //NaN
    fun1(); //NaN
    console.log(fun1())

//    ===================加個知識點
    var d="yuan";
    d=+d;
    alert(d);//NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會獲得一個NaN數據
    alert(typeof(d));//Number
    NaN特色:
    var n=NaN;
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);
    alert(n!=NaN);//NaN參與的全部的運算都是false,除了!=

    =============一道面試題、、
    function a(a,b) {
        console.log(a+b);
    }
    var a=1;
    var b=2;
    a(a,b)   //若是這樣的話就會報錯了，不知道是哪一個a了。

4.函數的內置對象arguments

//    函數的內置對象arguments,至關於python中的動態參數
    function add(a,b){
        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]
    }
    add(1,2)
//     ------------------arguments的用處1 ------------------
    function ncadd() {
        var sum = 0;
        for (var i =0;i<arguments.length;i++){
//            console.log(i);//打印的是索引
//            console.log(arguments);//Arguments { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 等 2 項… }
            console.log(arguments[i]);//1,2,3,4,5
            sum +=arguments[i]
        }
        return sum
    }
    ret = ncadd(1,2,3,4,5,6);
    console.log(ret);


//     ------------------arguments的用處2 ------------------

    function f(a,b,c){
        if (arguments.length!=3){
            throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
        }
        else {
            alert("success!")
        }
    }

    f(1,2,3,4,5)

5.匿名函數

/    =======================
    // 匿名函數
    var func = function(arg){
        return "tony";
    };

// 匿名函數的應用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
    })('123')

6.RegExp對象

//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

相關標籤/搜索

每日一句

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