JavaScript 基礎語法總結

時間  2020-08-04
標籤 javascript 基礎 語法 總結 欄目 JavaScript 简体版
原文   原文鏈接

HTML,CSS和JavaScript是網頁設計的基礎。HTML和CSS定義了靜態的效果，而JavaScript則能夠體現出一些動態的效果。在已經掌握一種或者多種編程語言的基礎下，學習JS很容易，下面看看一些基本的使用方法。javascript


1. JavaScript的位置。html

和CSS相似，咱們能夠直接寫代碼塊，也能夠引用外部文件。理論上，<script src="xxx"></script>能夠放在<head>裏面，也能夠放在<body>裏面，可是從效率考慮，若是script的連接比較慢或者錯誤，<head>裏面可能致使整個頁面半天加載不出來，所以，咱們通常推薦放在<body</body>代碼塊的底部。若是隻是暫時的測試性質的編碼，咱們甚至能夠直接在瀏覽器上的console上使用。F12或者Inspect ，而後選擇console就能夠了java


2.定義變量python

直接寫 name=‘james’ 定義了全局變量，若是在函數裏面定義，指定一個var 關鍵字，則表示局部變量編程


3.數字json

 

JS不區分float或者int，不過咱們能夠經過parseInt或者parsefloat來轉換字符c#

 例如：數組

         
    a="222.2"
    parseFlaot(a)
    222.2
    parseInt(a)
    222

        

4. 字符串 瀏覽器

這個和其餘語言幾乎同樣，有常見的屬性和方法。cookie

                                

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
obj.length                           長度
 
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n個字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring( from , to)              根據索引獲取子序列
obj. slice (start, end)                切片
obj.toLowerCase()                    大寫
obj.toUpperCase()                    小寫
obj.split(delimiter, limit)          分割
obj.search(regexp)                   從頭開始匹配，返回匹配成功的第一個位置(g無效)
obj.match(regexp)                    全局搜索，若是正則中有g表示找到所有，不然只找到第一個。
obj.replace(regexp, replacement)     替換，正則中有g則替換全部，不然只替換第一個匹配項，
                                      $數字：匹配的第n個組內容；
                                      $&：當前匹配的內容；
                                      $`：位於匹配子串左側的文本；
                                      $'：位於匹配子串右側的文本
                                      $$：直接量$符號



實例：×××燈，不停的循環輸出文字 

   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">歡迎領導視察工做</div>
<script>
    //定義函數
    function change(){
        //經過id獲取標籤
        var dd=document.getElementById("d1")
        //控制檯能夠查看輸出，很好的查錯方式
        console.log(dd)
        var content=dd.innerText
        console.log(content)
        //獲取第一個字符
        var f=content.charAt(0)
        //獲取子字符串
        var l=content.substring(1,content.length)
        //字符串拼接
        var new_content=l+f;
        //從新賦值
        dd.innerText=new_content
        console.log(new_content);
    }
    //定時器，每隔1000毫秒執行一下change()
    setInterval('change()',1000)
</script>
</body>


5. 布爾值， true和false，注意是小寫


  • ==      比較值相等

  • !=       不等於

  • ===   比較值和類型相等

  • !===  不等於

  • ||        或

  • &&      且


6.  數組，和python的列表差很少。


方法以下，其中splice比較特殊 他有3個參數，第一個參數表示插入的位置，第二個參數表示刪除幾個值，第三個表示插入的新值。所以splice(0,1)表示刪除第一個值，splice(0,0,20)表示第一個值前面插入一個值20


obj.length          數組的大小
 
obj.push(ele)       尾部追加元素
obj.pop()           尾部獲取一個元素
obj.unshift(ele)    頭部插入元素
obj.shift()         頭部移除元素
obj.splice(start, deleteCount, value, ...)  插入、刪除或替換數組的元素
                     obj.splice(n, 0 ,val) 指定位置插入元素
                     obj.splice(n, 1 ,val) 指定位置替換元素
                     obj.splice(n, 1 )     指定位置刪除元素
obj. slice ( )        切片
obj.reverse( )      反轉
obj.join(sep)       將數組元素鏈接起來以構建一個字符串
obj.concat(val,..)  鏈接數組
obj.sort( )         對數組元素進行排序


7. 字典  

例如

a={'name':'James','age':30} 

使用和Python同樣


8. for循環；for循環有2種形式

第一種形式        

例如直接循環數組，他輸出的是索引而不是值

     

a=[11,22,33,44]
for(var item in a){console.log(item);}
 0
 1
 2
 3
for(var item in a){console.log(a[item]);}
11
22
33
44

     直接循環字典，輸出的也是key而不是value

b={"name":"alex","age":20}
for(var item in b){console.log(item);}
name
age
undefined
for(var item in b){console.log(b[item]);}
alex
20


第二種形式, 就和其餘語言同樣；不過注意若是要輸出字典，由於字典的key的數據類型是無序散亂 所以這裏就不適合了

for(var i=1;i<a.length;i++){console.log(i)}
1
2
3
for(var i=1;i<a.length;i++){console.log(a[i])}
22
33
44


除了for循環，js也支持while循環，這個和其餘語言沒區別。

基本格式：

while (條件){
}


9. 條件語句

基本格式:

if(條件){
}
else if(條件)
{}
else{
}


另一個常見的條件語句是switch，這個東西在Python裏面是沒有的

例如

name="2"
 switch(name){
            case '1':
                age = 123;
                break;
            case '2':
                age = 456;
                break;
            default :
                age = 777;
        }
456


10. 函數

Javascript裏面有3種函數，分別是普通函數，匿名函數和自執行函數。格式以下所示。

普通函數：單獨的定義，而後再調用
            function func(){
                
            }
            
匿名函數：直接在須要調用的地方寫函數
            setInterval(function(){
                console.log(123);
            
            },5000)
            
自執行函數(建立函數而且自動執行)：
            
            
            (function(arg){
                console.log(arg);
            })(1)



11. 序列化


Python裏面能夠經過json和pickle把對象轉換成字符串，這個過程叫作序列化。json能夠轉化標準的數據類型，而pickle能夠轉化自定義的對象；


javascript裏面也能夠經過json來進行序列化和反序列化。格式是


JSON.stringify()   將對象轉換爲字符串

JSON.parse()       將字符串轉換爲對象類型


一個例子是自定義一個字典保存數據，而後序列化以後保存到cookie中。


12. eval

相似的，Python裏面有eval和exec來執行表達式。eval執行表達式，有返回值；exec能夠執行復雜的代碼，可是沒有返回值；


Javascript裏面的eval則是二者之和，能夠執行復雜的表達式和代碼，而後返回結果


13. 做用域


======== 1. 以函數做爲做用域 （let）=========

        

 其餘語言： 以代碼塊做爲做用域

xo = "alex";
function func(){
    // var xo = 'eric';
    function inner(){
        // var xo = 'tony';
        console.log(xo);
    }
    inner()
}
func()
// 報錯

       

        

Python：   以函數做爲做用域

狀況一：

def func():
    if 1==1:
        name = 'alex'
    print(name)
func()
     // 成功

 狀況二：

def func():
    if 1==1:
        name = 'alex'
    print(name)
func()
print(name)
        // 報錯


 JavaScript:  以函數做爲做用域

        

          

function func(){
    if(1==1){
        var name = 'alex';
    }
    console.log(name);
}
func()

        

======== 2. 函數的做用域在函數未被調用以前，已經建立 ========

        

        function func(){
            if(1==1){
                var name = 'alex';
            }
            console.log(name);
        }

        

 ====== 3. 函數的做用域存在做用域鏈，而且也是在被調用以前建立 ========

示例一：

 

xo = "alex";
function func(){
    // var xo = 'eric';
    function inner(){
        // var xo = 'tony';
        console.log(xo);
    }
    inner()
}
func()
------
alex

        

 示例二：


xo = "alex";
function func(){
    var xo = 'eric';
    function inner(){
        console.log(xo);
    }
    return inner;
}
var ret = func()
ret()
----
eric

  


示例三：

xo = "alex";
function func(){
    var xo = 'eric';
    function inner(){
        console.log(xo);
    }
    var xo = 'tony';
    
    return inner;
}
var ret = func()
ret()
------
tony

        

  ================= 4. 函數內局部變量 聲明提早 ==================

      

function func(){
    console.log(xxoo);
}
func();
// 程序直接報錯
function func(){
    console.log(xxoo);
    var xxoo = 'alex';
}
解釋過程當中：var xxoo;
func();
// undefined



14. Javascript面向對象

function Foo(n){
    this.name = n;
    this.sayName = function(){
        console.log(this.name);
    }
}
var obj1 = new Foo('we');
obj1.name
obj1.sayName()
var obj2 = new Foo('wee');
obj2.name
obj2.sayName()

Foo至關於構造函數

this相似於Python裏面的self，指代的對象

建立新對象經過new實現


相似的Python代碼

class Foo:
    def __init__(self,name):
        self.name = name
        
    def sayName(self):
        print(self.name)
        
obj1 = Foo('we')
obj2 = Foo('wee')


注意他們的區別在於Python把sayName這個方法保存在類裏面，而JS會分別在對象裏面都保存了一份，所以比較浪費內存。


能夠經過建立原型的方式解決這個重複的問題

function Foo(n){
        this.name = n;
    }
    # Foo的原型
Foo.prototype = {
    'sayName': function(){
        console.log(this.name)
    }
}
obj1 = new Foo('we');
obj1.sayName()
obj2 = new Foo('wee');
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程