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教程