第二天:JavaScript基本语法

一.变量及数据类型

1.变量

变量是用来临时存储数值的容器，在使用过程中可以随时改变储存的值。

2.变量的命名规则
  • 只能是 数字、字母、下划线、$，且数字不能开头；
  • 使用var关键字声明变量,如果不使用 var 则会污染全局变量。
3.变量的数据类型：
  • PHP中的数据类型，共有八种:
    对象，null，数组，整形，资源，浮点，字符串，布尔；
  • JavaScript 的数据类型，共有六种:
    对象，数值，字符串，布尔，null ,undefined
4.检测值类型
  • typeof运算符可以返回一个值的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var s = null; //object
        var u = undefined; //undefinded
        alert(typeof(s));
        alert(typeof(u));
    </script>
</body>
</html>

效果:

先弹出
image.png
再弹出
image.png
5.null 和 undefined
  • 为什么 null的类型也是object？
    这是由于历史原因造成的。1995年JavaScript语言的第一版，当时，只设计了五种数据类型（对象、整数、浮点数、字符串和布尔值），完全没考虑null，只把它当作object的一种特殊值，为了兼容以前的代码，后来就没法修改了。
    这并不是说null就属于对象，本质上就是一个特殊值，表示“没有”
    null与undefined都可以表示“没有”，含义非常相似；
    相等运算符（==）甚至直接报告两者相等:

image.png

\color{red}{总结}

  • 宽松比较时，两者相等，都表示 空 、没有、无 等含义
  • undefined的出现情况：
    (1) 变量没有值
    (2) 函数调用需要传值,但是没有传值时,函数返回值为undefined
    (3) 函数没有return时,函数的返回值为undefined
    (4) 获取对象中不存在的属性时
  • null的出现情况：
    (1) 获取一个不存在的对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        //变量没有值
        var i;
        console.log(typeof(i));

        //函数调用需要传值,但是没有传值时,函数返回值为undefined
        function f(x){
            return x;
        }
        var s = f();
        console.log(s);

        //函数没有return时,函数的返回值为undefined
        function f1(){}
        var g = f1();
        console.log(g);

        //获取对象中不存在的属性时
        var o = {};
        console.log(o.p);

        //获取一个不存在的对象
        var x = document.getElementById('x');
        console.log(x);
    </script>
</body>
</html>

效果:

控制台打印出4个undefined,1个null
image.png
  • null 的数据类型是object ,undefined数据类型就是undefined;
  • null 是表示 ‘无’ 的对象，转为数值时是 0；
    undefined 是表示‘无’ 的原始值，转为数值时NaN；

二.运算符

1.算数运算符
  • + 加法
  • - 减法
  • * 乘法
  • / 除法
  • % 系数
  • ++ 递加
  • -- 递减
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var i = 10;
        var j = i++;    //先做其他运算,再做自增运算
        var h = ++i;    //先做自增运算,再做其他运算
        console.log(j);
        console.log(h);
    </script>
</body>
</html>

效果:

控制台打印出10和12
image.png
2.比较运算符
  • == 等于
  • === 等值等型
  • != 不相等
  • !== 不等值或不等型
  • > 大于
  • < 小于
  • >= 大于或等于
  • <= 小于或等于
  • ? 三元运算符
3.逻辑运算符
  • && 逻辑与
  • || 逻辑或
  • ! 逻辑非
    其中，&& 和 || 运算的结果是：\color{red}{决定整个表达式结果的子表达式的值} 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var i = 3;
        //取反操作,先对变量进行转换,然后取反
        console.log(!i);    //false

        var a = 0;
        var b1 = 3; 
        var b2 = 4;
        var c = true;
        var d = false;
        //在JS中&&和||运算的结果是决定整个表达式结果的子表达式的值
        var x = b1||b2; //3
        var y = a||b2;  //4
        var z = c||b1;  //true

        var o = b1&&c;  //true
        var p = a&&d;   //0
        var q = b2&&d;  //false

        console.log(x);
        console.log(y);
        console.log(z);
        console.log(o);
        console.log(p);
        console.log(q);
    </script>
</body>
</html>

效果:
控制台打印出相应结果

image.png

(&&优先级比||高)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var a = 0;
        var b = 1;
        var c = true
        console.log(b || a && c);   //1
    </script>
</body>
</html>

效果:

控制台打印出1
image.png

三.流程结构

1.顺序结构：从上而下执行
2.分支结构(选择结构)

if结构不仅可以判断固定值，还可以判断范围区间。
switch结构只能判断固定值情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var a = 4;
        var b = 3;
        if(a>=5){
            console.log("大于等于5");
        }else if(a<4)
        {
            console.log("小于4");
        }else{
            console.log("4");
        }
        switch(b){
            case 3:
            console.log(3);break;
            case 4:
            console.log(4);break;
            case 5:
            console.log(5);break;
            default:
            console.log("no");
        }
    </script>
</body>
</html>

效果:

控制台打印出4和3
image.png
3.循环结构
  • continue :跳出当前循环，继续下次循环；
  • break : 跳出整个循环
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var i = 5;
        while(i>0)
        {
            console.log(i);
            i--;
        }
    </script>
</body>
</html>

效果:

控制台打印出5,4,3,2,1
image.png

四.数组

数组是一组有序数据的集合，在内存中表现为一段连续的内存地址。

1.JS数组的声明
  • 字面量声明
  • 构造函数声明
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        //字面量声明
        var arr1 = [1,2,3,4];
        console.log(arr1);

        //构造函数声明
        var arr2 = new Array();
        arr2[0] = '1';
        arr2[1] = 1;
        arr2[2] = '3';
        console.log(arr2);
    </script>
</body>
</html>

效果:

控制台打印出两个数组
image.png
2.多维数组

数组A中的元素值是一个数组，则数组A为多维数组；

3.获取数组元素

基本语法： 数组名[元素标号]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        //多维数组
        var arr = [2,[3,4,[5,6,[7,8,[9,10]]]]];
        console.log(arr[1][2][2][2][0]) //9
    </script>
</body>
</html>

效果:

控制台打印出9
image.png
4.数组的遍历操作
  • for 循环，根据循环的语法，在循环之前，用arr.length属性获取数组的长度；
  • for…in 循环遍历数组：for...in循环不仅可以遍历对象，也可以遍历数组，毕竟数组只是一种特殊对象。
  • forEach()方法遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var arr = ['1',2,'三','Ⅳ',[4,5]];

        //for循环
        for(var i=0;i<arr.length;i++)
        {
            console.log(arr[i]);
        }
        console.log('\n');
        //for...in循环
        for(var i in arr){
            console.log(arr[i]);
        }
        console.log('\n');
        //forEach方法
        arr.forEach(function(v,k){
            console.log(v);
        })
    </script>
</body>
</html>

效果:

控制台打印出数组
image.png
5.数组的属性和方法

(1) 数组对象的常用属性

  • length属性： 返回数组的成员数量。

(2) 数组对象的常用方法

  • push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。\color{red}{注意，该方法会改变原数组}

  • pop方法用于删除数组的最后一个元素，并返回该元素。\color{red}{注意，该方法会改变原数组}

  • join方法以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。

  • concat方法用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变。

  • shift方法用于删除数组的第一个元素，并返回该元素。\color{red}{注意，该方法会改变原数组}

  • reverse方法用于颠倒数组中元素的顺序，返回改变后的数组。\color{red}{注意，该方法会改变原数组}

  • slice方法用于提取原数组的一部分，返回一个新数组，原数组不变。
    它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。
    如果省略第二个参数，则一直返回到原数组的最后一个成员。

  • splice方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，返回值是被删除的元素。
    splice的第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素\color{red}{注意，该方法会改变原数组}。

  • forEach方法用于遍历数组的所有成员，执行某种操作，forEach方法的参数是一个函数，数组的所有成员会依次执行该函数，
    它接受三个参数，分别是当前位置的值、当前位置的编号和整个数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var arr = ['1',2,'三','Ⅳ',[4,5]];

        console.log(arr.length);    //获取数组个数
        console.log("\n");

        arr.push(6);    //往数组中最后面添加元素
        console.log(arr);
        console.log("\n");

        var a = arr.pop();  //弹出数组中最后面的元素
        console.log(a);
        console.log(arr);
        console.log("\n");

        console.log(arr.join());    //以逗号作为分隔符,将所有数组成员组成一个字符串返回
    </script>
</body>
</html>

效果:

控制台打印出相应操作结果
image.png

五.函数

1.函数定义
  • 函数就是一段可以反复调用的代码块。
  • 函数接受输入的参数，不同的参数会返回不同的值。
2.函数到底有什么用？

其实就是将很多重复的代码写到一个地方，在需要执行代码的地方，直接调用函数即可。

  • 节省了我们代码的数量，使代码可以重用；
  • 使我们的程序代码，具有结构化，模块化；
  • 如果程序要求发生变化，我们只需要修改一次函数即可；
3.函数声明及调用
  • 函数的一般声明方式:function f(){}
  • 表达式声明匿名函数:var f =function(){}
  • 函数的调用:f() 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        //表达式声明匿名函数,变量指向内存中函数的位置
        var f = function()
        {
            //函数体
            console.log(2);
        }
        //函数的一般声明方式
        function f()
        {
            //函数体
            console.log(1);
        }   

        //  变量的调用比函数要有优先级
        f();    //2
    </script>
</body>
</html>

效果:

控制台打印出2
image.png
3.递归
  • 递归就是函数自己调用自己
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        //计算1+2+3+...+100
        function sum(n)
        {
            if(n==1){
                return 1;
            }else{
                return n+sum(n-1);
            }
        }
        console.log(sum(100));
    </script>
</body>
</html>

结果:控制台打印出5050
image.png
4.函数的参数及返回值

在函数中，参数一共有两种形式：函数的形参、函数的实参

  • 形参：在函数定义时所指定的参数，就称之为“形参”。
  • 实参：在函数调用时所指定的参数，就称之为“实参”。
  • 返回值: 函数体内部的return语句，表示将数据返回给调用者；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        function f(a,b) //定义函数时传参为形参
        {
            return a+b; //return给函数调用者返回数据
            //后面的语句均不执行
        }
        var x = f(1,2); //调用函数时传参为实参
        console.log(x);
    </script>
</body>
</html>

结果:

控制台打印出3
image.png
  • 函数中的arguments(参数列表)对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        function f()    //定义函数时传参为形参
        {
            //arguments 是函数中的对象,这个对象中包含所有实参,实参列表以数组形式存在
            console.log(arguments)
            console.log(arguments[2])
            console.log(arguments.length)
        }
        f('1',2,'三',4,5,6); //调用函数时传参为实参
    </script>
</body>
</html>

效果:

控制台打印出相应结果
image.png
5.自调用匿名函数
  • 基本语法：(function(){}) ()
  • 为什么要有自调用匿名函数？
    在之前的程序开发中，我们都是通过有名函数来实现程序封装的，但是有名函数有一个缺点，可能在运行时会出现命名冲突。
    如果在编写程序时，我们采用自调用匿名函数，则不会产生命名冲突问题，
    所以很多框架jquery.js、ext.js等等都是采用自调用匿名函数进行封装的。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        //自调用匿名函数
        (function(){
            console.log(3);
        })();

        //自调用匿名函数实现递归
        //计算1+2+3+...+100
        var a = (function(n){
            if(n==1){
                return 1;
            }else{
                //arguments.callee代表函数自身
                return n+arguments.callee(n-1)
            }
        })(100);
        console.log(a);
    </script>
</body>
</html>

效果:

控制台打印出3和5050
image.png

六.作用域

1.变量的作用域

变量的作用域作用域指的是变量存在的范围，Javascript中变量有两种作用域：
(1) 一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取，变量也被称为全局变量可以采用两种方式创建全局变量。

  • 第一种方法是在所有函数外部使用var语句，在函数外部声明的变量都属于全局作用域。
  • 第二种方法是在声明变量的时候忽略var语句(也称为隐式全局变量)。

(2) 另一种是局部作用域，变量只在函数内部存在。称为局部变量；


1.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var b = 3;
        var i = 1;
        function f(){
            var b = 5;
            var a = 1;
            c = 4;  //不加var,c变成全局变量

            //函数内部允许访问函数外部的全局变量
            console.log(i); //1
            //函数内部的变量暂时覆盖了全局变量
            console.log(b); //5
        }
        f();
        console.log(b)  //3
        console.log(c)  //4
    </script>
</body>
</html>

效果:

控制台打印出1,5,3,4
image.png
2.变量提升

变量提升:你在一个作用域任何一个地方使用var声明变量，都会被提升到作用域开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        function f1(){
            console.log(h);
            var h = 3;
        }
        //f被调用的瞬间,函数内部所有变量声明被提升
        f1();   //不会报错,会打印undefined

        //相当于这个函数
        function f2(){
            var h;
            console.log(h);
            h = 3;
        }
        f2();   //不会报错,会打印undefined

        function f3(){
            console.log(h);
            //let声明的函数不会变量提升
            let h = 3;
        }
        f3();   //会报错
    </script>
</body>
</html>

效果:

f1,f2打印出undefined,f3报错:
image.png
3.函数的作用域

函数本身也是一个值，也有自己的作用域。它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在的作用域无关。
总之，函数执行时所在的作用域，是\color{red}{定义时}的作用域，而不是调用时所在的作用域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var a = 1;
        function x(){
            console.log(a);
        }
        function x2(){
            var a = 3;
            x();
        }
        x2();
    </script>
</body>
</html>

效果:

控制台打印出1
image.png

六.词法分析

1.代码运行的两个阶段

代码在运行时，共分为两个阶段：编译阶段、执行阶段


1.png
  • 编译阶段：声明变量、声明函数（display）、语法检查（报错）等……
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        console.log(1);
        console.log(s); 
        console.log(2   //语法错误,全部代码不执行
    </script>
</body>
</html>

效果:

直接报错
image.png
  • 执行阶段：变量的赋值、函数的调用、代码的执行等都是发生在执行阶段
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        console.log(1);
        console.log(s); //遇到错误,停止运行
        console.log(2);
    </script>
</body>
</html>

效果:
打印出1,然后报错

image.png

\color{red}{编译阶段出错无法进入执行阶段}

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342

推荐阅读更多精彩内容

  • javascript 中的函数和对象
    函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句，而且...
    道无虚阅读 4,521评论 0赞 5
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 5,096评论 0赞 21
  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,205评论 0赞 4
  • JavaScript语言精粹
    JavaScript语言精粹 前言 约定：=> 表示参考相关文章或书籍; JS是JavaScript的缩写。 本书...
    微笑的AK47阅读 575评论 0赞 3
  • 四、JavaScript 引用类型
      引用类型的值（对象）是引用类型的一个实例。   在 ECMAscript 中，引用类型是一种数据结构，用于将数...
    霜天晓阅读 1,035评论 0赞 1