JavaScript基础语法

目录

一、书写形式

1、内联式

2、内嵌式

3、外部式

4、注释

5、输入

6、输出

6.1、alert

6.2、console.log

二、JS基础语法

1、JS中的变量

1.1、变量的创建

1.2、动态类型

2、基本数据类型

2.1、 number数字类型

2.2、string字符串类型

2.3、boolean布尔类型

2.4、undefined未定义数据类型

2.5、null空值类型

3、运算符

3.1、比较运算符

3.2、逻辑运算符

4、条件语句和循环语句

5、数组

5.1创建数组

5.2获取数组元素

5.3新增数组元素

5.4删除数组元素

6、函数

6.1 语法格式

6.2函数表达式

6.3作用域

7、对象

7.1创建对象

---

一、书写形式

和CSS一样，JS代码也可以通过行内式、内嵌式、外部式的方式嵌入到HTML代码中~

1、内联式

直接嵌入到html元素内部：

    <input type="button" value="这是一个按钮" onclick="alert('hello world')">

这种写法不常用~ 

2、内嵌式

写到script标签中：

    <script>
        alert('hello world')
    </script>

3、外部式

把JS代码写到单独的.js文件中：

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

 ★ 这种写法本质上就是把对应文件中的js代码拷贝到script标签中，这样做可以提取出多个文件中公共的一些代码，达到代码复用的效果，因此也是实际开发中最常用的写法~

4、注释

单行注释：//

多行注释：/*  */

注意：多行注释不能嵌套，否则代码会报错。

5、输入

使用prompt关键字：

prompt("这是一个输入框")

  

6、输出

6.1、alert

弹出一个对话框：

alert("hello js")

这种弹框的方式很影响用户的体验，所以在实际开发中很少用到~ 

6.2、console.log

在控制台打印一个日志(一般是给程序员看的)：

console.log("hello JavaScript");

需要在开发者工具中的控制台查看打印结果：

 ★ console是JS中的一个“对象”，. 表示取对象中的某个属性或方法，console.log就表示：使用console对象的log方法~

二、JS基础语法

1、JS中的变量

1.1、变量的创建

关键字：var、let

    <script>
        var name = "曹植";
        let age = 20;
    </script>

注意：

(1) var、let并非是变量的类型，只是用来声明name和age是一个变量；

(2) 变量的类型并没有显示写出来，具体的类型根据=后面的值来区分的；

(3) var写法是老式写法，坑比较多，而let是新式写法，比较推荐使用~

1.2、动态类型

在JS中，变量的类型可以在运行过程中发生改变：

    <script>
        let a = 10;
        //typeof用来查看变量的类型
        console.log(typeof(a));
        a = "hello";
        console.log(typeof(a));
    </script>

可以看到，a的类型从number变为了string类型~ 

2、基本数据类型

2.1、 number数字类型

在JS中，不区分整数和浮点数，统一使用number类型来表示：

    <script>
        console.log(1/2);
    </script>

2.1.1几个特殊的数字值：

(1) Infinity：无穷大，大于任何数字，表示数字已经超过了JS能表示的范围；

(2) -Infinity：负无穷大小于任何数字，表示数字已经超过了JS能表示的范围；

    <script>
        //使用一个正小数除0得到无穷大
        console.log(1.5/0);
        //使用一个负小数除0得到负无穷大
        console.log(-1.5/0);
    </script>

注意：负无穷大和无穷小不是一回事，无穷小指无限趋近于0~

(3) NaN：Not a number，表示当前的结果不是一个合法的数字。

    <script>
        console.log("hello" - 1);
    </script>

2.2、string字符串类型

2.2.1基本规则

JS中，字符串既可以使用单引号，也可以使用双引号引起来：

    <script>
        let a = 'hello';
        let b = "world";
    </script>

 ★ 如果要表示的字符串中含有单引号，就可以使用双引号引起来；

 ★ 如果要表示的字符串中含有双引号，就可以使用单引号引起来；

 ★ 否则需要使用转义字符：

2.2.2求字符串长度

使用string的length属性即可：

    <script>
        let a = 'zhangsan';
        let b = "张三";
        console.log(a.length);
        console.log(b.length);
    </script>

2.2.3字符串拼接

和Java一样，直接使用 + 来拼接，会生成一个新的字符串：

    <script>
        let a = 10;

        console.log("a = " + a);
    </script>

2.3、boolean布尔类型

在JS中，布尔类型也只有两个值：true和false，并且0表示false，非0表示true。

但是布尔类型在参与运算时，会进行隐式类型转换，true转为1，false转为0进行运算：

    <script>
        let a = true;
        console.log(a+1);
    </script>

弱类型语言：像JS这种，数据类型区分度低，界限模糊，比较支持隐式类型转换的语言；

强类型语言：像Java这种，数据类型区分度高，界限明确，不太支持隐式类型转换的语言。

注意：动态类型、静态类型和强类型、弱类型，是两组不同的概念。

2.4、undefined未定义数据类型

 ★ undefined未定义数据类型中只有一个值：undefined。

如果一个变量没有被初始化，结果就是undefined。

undefined和字符串相加，会进行字符串拼接；和数字相加，结果为NaN：

    <script>
        //未初始化的变量a
        let a;
        console.log(a);
        //undefined和字符串相加
        console.log(hello+" "+a);
        //undefined和数字相加
        console.log(a + 10);
    </script>

2.5、null空值类型

null空值类型也只有一个值：null，表示当前变量是一个“空值”。

    <script>
        let a = null;
        console.log(a);
        //null和字符串相加
        console.log(a+"hello");
        //null和数字相加
        console.log(a+10);
    </script>

注意：undefined表示当前的变量未定义，null表示当前变量的值为空。 

3、运算符

JS中的运算符和Java中的用法基本相同，其中有几个不同的点：

3.1、比较运算符

==和===都是用来比较相等的，但是==会进行隐式类型转换，而===不会：

    <script>
        let a = "10";//string类型
        let b = 10;//number类型
        console.log(a==b);
        console.log(a===b);
    </script>

 

注意：不能直接使用==进行浮点数的比较，I EEE754标准表示浮点数不一定精确，比较的结果可能会和预期结果不同。

!= 和 !==比较规则同理~

3.2、逻辑运算符

在JS中，逻辑与&&和逻辑或||运算符返回的结果不是true或者false，而是表达式1或表达式2。

    <script>
        let a = 10;
        let b = a || 0;
        console.log(b);
    </script>

 ★ 上述代码中，如果a的值为真，就会把a的值赋给b，否则就把0的值赋给b。

 ★ 而&&则相反：如果a的值为假，就会把a的值赋给b，否则就把0的值赋给b：

    <script>
        let a = 10;
        let b = a && 0;//表达式左边真，右边假
        console.log("b = " + b);
        let c = false && a;//表达式左边假，右边真
        console.log("c = " + c);
        let d = true && a;//表达式两边都为真
        console.log("d = " + d);
    </script>

4、条件语句和循环语句

JS中的条件语句和循环语句的用法与Java的基本一样，这里就不赘述了~

5、数组

JS中的数组功能很多，过于灵活，和Java的数组有很大的区别~

5.1创建数组

5.1.1使用new关键字创建

    <script>
        let arr = new Array();
    </script>

5.1.2使用 [ ] 创建

    <script>
        let arr = [1,2,3,4,true,"hello",undefined];
    </script>

注意：JS中，同一个数组里的元素可以是不同类型(因为JS是动态类型的语言)。

5.2获取数组元素

 ★ 使用下标的方式访问数组元素，数组下标从0开始：

    <script>
        let arr = ["刘备","关羽","张飞"];

        //访问数组0下标元素
        console.log(arr[0]);

        //直接输入数组名，会访问整个数组
        console.log(arr);
    </script>

 ★ 如果要访问的下标超出数组范围，则结果为undefined：

    <script>
        let arr = ["刘备","关羽","张飞"];

        console.log(arr[-1]);
        console.log(arr[10]);
    </script>

5.3新增数组元素

5.3.1通过修改数组长度新增

JS中的数组长度可以随时变化的，增加数组长度，就会在数组末尾新增元素，新增元素的默认值为undefined：

    <script>
        let arr = ["刘备","关羽","张飞"];

        arr.length = 10;
        console.log(arr);
        
    </script>

5.3.2通过下标新增

如果下标超出数组范围，会在指定位置插入元素，并把中间的元素设为默认值undefined：

    <script>
        let arr = ["刘备","关羽","张飞"];

        arr[100] = "赵云";
        console.log(arr[100]);
        console.log(arr[50]);
        console.log(arr);
    </script>

 

 ★ JS中的数组也可以“当做Map来存放键值对”：

    <script>
        let arr = ["刘备","关羽","张飞"];

        arr[-1] = "赵云";
        arr["hello"] = "world";
        arr[undefined] = 999;

        console.log(arr);
    </script>

 ★ 通过代码运行结果可以发现，数组长度并没有发生变化，实际上这些键值对更像是数组这个对象中的一个自定义属性，既可以通过[ ] 访问，也可以通过 . 访问：

    <script>
        let arr = ["刘备","关羽","张飞"];

        arr[-1] = "赵云";
        arr["hello"] = "world";
        arr[undefined] = 999;

        console.log(arr.hello);

    </script>

 ★ 虽然JS支持这种操作，但我们一般不这样使用，JS里有专门的map类型来表示键值对~

5.3.3使用push方法进行追加元素

    <script>
        let arr = [];
        for (let i = 0; i < 10; i++) {
            arr.push(i);
        }
        console.log(arr);
    </script>

5.4删除数组元素

5.4.1使用pop方法删除

    <script>
        let arr = [1,2,3,4,5];
        //pop方法会返回当前删除的元素
        //删除5
        let ret = arr.pop();
        console.log(ret);
        //删除4
        ret = arr.pop();
        console.log(ret);
        //数组此时还剩3个元素
        console.log(arr);
    </script>

5.4.2使用splice方法

splice既可以进行插入，也可以进行删除，还可以进行替换操作：

 ★ 插入

    <script>
        let arr = [1,2,3,4,5,6,7];
        //往2下标插入一个"hello"
        arr.splice(2,0,"hello");
        console.log(arr);
    </script>

splice方法有三个参数：

①第一个参数表示要替换的下标位置；

②第二个参数表示要替换的数组长度，参数是0表示不对原数组内容调整，只是新增元素；

③第三个参数表示要替换到指定位置的新元素。

 ★ 替换

    <script>
        let arr = [1,2,3,4,5,6,7];
        //把3下标元素替换成"hello"
        arr.splice(3,1,"hello");
        console.log(arr);
    </script>

 ★ 删除

    <script>
        let arr = [1,2,3,4,5,6,7];
        //删除3下标往后的3个元素
        arr.splice(3,3);
        console.log(arr);
    </script>

如果不传第三个参数的话，就可以起到删除元素的效果~

6、函数

6.1 语法格式

语法格式：

//定义函数//声明函数//创建函数

function 函数名(形参列表) {

       函数体;

       return 返回值;

}

    <script>
        //定义函数
        function add(x,y){
            return x+y;
        }
        //调用函数
        //可以传各种类型的参数
        let sum = add(10,true);
        console.log(sum);
    </script>

 ★ 由于JS是动态类型的语言，所以函数不需要写返回值，传入的参数也可以是任意类型。

注意：形参和实参的个数可以不匹配，但实际写代码的时候尽量保持匹配。

(1) 如果实参个数比形参个数多，则多出来的实参不参与函数运算；

    <script>
        function add(x,y,z){
            return x+y+z;
        }
        let sum = add(10,20,30,40,50);
        console.log(sum);
    </script>

(2) 如果形参个数比实参个数多，则多出来的形参的值为undefined。

    <script>
        function add(x,y,z){
            return x+y+z;
        }
        let sum = add(10,20);
        console.log(sum);
    </script>

number类型和undefined类型相加，结果为NaN~ 

6.2函数表达式

函数表达式是另一种定义函数的方式：把函数赋值给一个变量

    <script>
        //用一个变量来接收函数
        let add = function(){
            let sum = 0;
            //arguments这个数组包含了调用add函数时传入的所有实参的值
            for (let i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }
        console.log(add(10,20,30,40));
        console.log(add("hello",undefined));
    </script>

 ★ arguments是JS中的一个内置数组变量，包含了调用函数时传入的所有实参的值~

 ★ 在JS中，函数是一等公民：可以用变量保存，也可以作为其他函数的参数或返回值。

6.3作用域

 ★ 在JS中，如果访问一个变量，首先会在当前代码块中查找，如果当前代码块中没找到，就会继续在上级代码块中查找，一直查找到全局的作用域(<script>标签)：

7、对象

JS的对象类似于简化版的Java中的对象~

7.1创建对象

7.1.1使用{}创建对象

对象中的属性和方法使用键值对的形式来组织；

键值对之间使用 , 分割，最后一个属性后面可有可无；

键和值之间使用 : 分割；

方法的值是一个匿名函数。

    <script>
        let person = {
            name: '坤坤',
            age: 18,
            sing: function(){
                console.log(this.name+"正在唱鸡你太美");
            }
        }
        console.log(person.name);
        person.sing();
    </script>

7.1.2使用构造函数创建对象

如果需要创建多个相同的对象，可以使用构造函数的方式：

    <script>
        function Person(name,age,singMsg){
            this.name = name;
            this.age = age;
            this.sing = function(){
                console.log(singMsg);
            }
        }
        let person1 = new Person("坤坤",18,"鸡你太美");
        let person2 = new Person("鲲鲲",20,"基尼太美");
        console.log(person1.name);
        person2.sing();
    </script>

JS中虽然有“类”的概念，但是并没有封装、继承、多态的机制，所以JS不是一个“面向对象”的语言。