【前端】JS基础语法

JavaScript基本语法

JavaScript运行过程

.html文件是存储在硬盘上的，双击文件，浏览器就会解析代码，将数据以及指令加载到内存中，内存中的指令进而加载到CPU，执行指令

浏览器分成渲染引擎和JS引擎：

• 渲染引擎解析html+css，俗称内核
• JS引擎：也就是JS解释器

JS的组成

• ECMAScript(简称 ES): JavaScript 语法

• DOM: 页面文档对象模型(就是html文件中的所有标签，一个标签可以看作一个对象), 对页面中的元素进行操作。JS中操作这些标签对象的API就是DOM API

• BOM: 浏览器对象模型, 对浏览器窗口进行操作 JS中操作浏览器窗口的API就是BOM API

JS的引入方式

行内式

行内式是将JS代码写到开始标签的属性中

<input type="button" value="这是按钮" onclick="alert('哈哈哈')">

onclick是input标签的属性（大部分标签都有这个属性），当点击该标签时，才会触发onclick属性中的JS代码，alert()是DOM API中的一个函数，弹出一个对话框。每点击一次，就会触发一次对话框

内嵌式

内嵌式是讲JS代码写到script标签中

<script>
    alert('哈哈')
</script>

一运行就弹出该对话框

外部式

外部式是将JS代码写到一个单独的文件中，然后再使用script标签引入这个文件

<script src="js_demo.html"> </script>
//外部文件中的内容：
alert('我是外部文件')

输入输出

输入

输入可以使用prompt()函数弹出一个输入框

<script>
    prompt('请输入你的名字：')
</script>

输出

输出可以使用alert()函数以及console.log()函数:

• alert()函数是直接弹出一个对话框

<script>
    alert('这是一个对话框')
</script>

• console.log()是在控制台打印输出

<script>
    //向控制台打印输出
    console.log('这是一条日志');
</script>

console是一个JS中的对象，console.log()代表调用控制台对象的log()方法

定义变量

定义变量：

<script>
    var name = '郝少康';
    var age = 20;
    let name1 = '乔仕佳';
    let age1 = 20;
    alert(name);
</script>

使用var关键字定义一个变量，但是var只是表示是一个变量，并不表示是一个什么类型的变量。那这个变量具体是什么类型是根据初始化的值来推导的。初识化的值是一个数字，那该变量就是一个number类型，初始化的值是一个字符串，那该变量就是一个string类型。

JS中不区分整型和浮点型，数字都是number类型

也可以使用let代替var，用法一样。

查看变量类型：

<script>
    var name = '郝少康';
    var age = 20;
    var age1 = 20.5;
    console.log(typeof(name));
    console.log(typeof(age));
    console.log(typeof(age1));
</script>

字符串拼接：

<script>
    var name = prompt('请输入名字');
    var age = prompt('请输入年龄');
    var score = prompt('请输入分数');
    alert('名字：'+name+' 年龄：'+age+' 分数：'+score);
</script>

获取到的名字，年龄，分数都是string类型，都是可以类似java中一样字符串拼接的，string类型和number类型之间也是可以拼接的：

<script>
    var name = '郝少康';
    var age = 20;
    alert(name+age);
</script>

动态类型

动态类型是指一个变量在运行过程中的类型可以发生改变（JS）；与之对应的静态类型则是在运行过程中，变量的类型不能发生改变（C，Java）

<script>
    let name = 100;
    console.log(typeof(name));
    name = '10';
    console.log(typeof(name));
</script>

上面代码中name本来是number类型的，然后可以被赋值为字符串，那他就是运行过程中该变了变量的类型，所以这是动态类型。如果放到C或Java中，肯定是会编译报错的。

==注意：==如果是用var来定义的变量，那变量不管是number类型还是string类型，在控制台中显示的都是string类型，所以如果要真正显示变量的类型，得用let来定义变量。

基本数据类型

1️⃣number类型

var i = 10;
var name = '啊哈哈';
let m = 10.5;
let address = '北京';

对于整数和浮点数来说，他们都是number类型，在JS中没有明确区分

2️⃣string类型

引用字符串可以用单引号也可以用双引号，字符串也可以进行拼接

var name = '郝少康';
var name2 = "乔仕佳";

3️⃣boolean类型

boolean有两种取值：true false

<script>
    var tmp1 = false;
    var tmp2 = true;
    console.log(tmp1+1);
    console.log(tmp2+1);
</script>

boolean类型有一个特殊的地方，在于可以和数字进行运算，实际上是把布尔类型隐式的转换为数字类型，false转换为0，true转换为1。这点和C语言类似，和Java不同

如果一门语言非常支持隐式类型转换，那就是弱类型语言，比如JS

如果一门语言不太支持隐式类型转换，那就是强类型语言，比如Java

强弱类型指的是类型之间的界限是否清晰，界限越严格类型越强。

✅强弱类型和动态静态类型区分：

强弱类型是指类型在需要的场合下是否能发生隐式类型转换，只是在运算的时候转换一下类型参与运算，但变量的原类型不改变。动态类型是可以直接把变量的原类型改变，静态类型是运行时变量的原类型不能发生改变

<script>
    // 弱类型（变量的类型在需要转换的场合下可以发生转换）
    var tmp1 = false;
    var tmp2 = true;
    console.log(tmp1+1);
    console.log(tmp2+1);
    // 动态类型（变量类型在运行过程中发生改变）
    var name = '哈哈';
    name = 10;
    alert(name);
</script>

4️⃣undefined类型

这个类型只有一个值：undefined

如果一个东西没有被定义，然后去访问，就会得到一个undefined

<script>
    // 访问未定义的变量
    var a;
    console.log(a);
    // 访问未定义的属性
    var str = 'dfhk';
    console.log(str.a);
</script>

以上两种情况都会得到一个值：undefined

undefined既是一个类型，又是一个值

另外，由于JS是一个弱类型，undefined可以和字符串进行拼接，拼接时把undefined类型的值：undefined转换为一个string类型进行拼接

但是如果undefined类型和数字进行相加，就会得到一个NAN（not a number）

5️⃣null类型

这个类型也是只有一个值：null

<script>
    //a就是一个null类型变量
    var a = null;
    //null类型和数字相加
    console.log(a+10);
    //null类型和字符串拼接
    console.log(a+"哈哈")
</script>

6️⃣object类型

JS中没有类这一概念，所有的对象都是object类型。

---

此外，在数据类型这一块还有一个官方承认的BUG：

<script>
    console.log(typeof(undefined));
    console.log(typeof(null));
</script>

undefined这个值的类型确实是undefined类型，但是null这个值的类型却是object类型，这时官方承认的一个BUG，只不过一直没有改正。

运算符

运算符和java大部分是一样的，只有一点区别，那就是比较相等符号：

• ==比较是否相等（会进行隐式类型转换）
• ===比较是否相等（不会进行隐式类型转换）

<script>
    var a = 10;
    var b = '10';
    console.log(a==b);
</script>

像这样使用==比较是否相等就会将数字转换为对应的字符串再比较，那所以结果自然就是true。

如果使用===：

<script>
    var a = 10;
    var b = '10';
    console.log(a===b);
</script>

使用===不会进行隐式类型转换，所以结果是false

分支循环

分支循环语句和java那里一样，都是while循环，for循环，if else语句，switch case语句

数组

创建数组

1️⃣方式一：

<script>
    var arr = new Array();
    arr[0] = 10;
    arr[1] = '哈哈';
    console.log(arr);
</script>

2️⃣方式二：

<script>
    var arr = [];
    arr[0] = 10;
    arr[1] = '哈哈';
    console.log(arr);
</script>

3️⃣方式三:

<script>
    var arr = [10,'哈哈',null];
    console.log(arr);
</script>

JS中数组中的元素可以不要求统一，可以是不同类型

访问数组

<script>
    var arr = [10,'哈哈',null];
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    // 不合法下标则返回undefined
    console.log(arr[-1]);
    console.log(arr[10]);
</script>

新增数组元素

新增数组元素的几种方式：

1️⃣通过修改数组的长度

<script>
    var arr = [10,'哈哈',null];
    //如果修改后的长度大于原数组长度，就新增元素，如果小于，就删除数组元素
    arr.length = 10;
    for(var i = 0;i<arr.length;i++){
        console.log(arr[i]);
    }
</script>

可见新增的元素是undefined类型

2️⃣通过下标新增：

<script>
    var arr = [10,'哈哈',null];
    arr[10] = 10;
    console.log(arr);
</script>

通过下标新增，中间元素就是undefined类型

但是如果下标是负数，或者是其他类型如：string，那就会在数组中新增键值对

<script>
    var arr = [10,'哈哈',null];
    arr[-1] = 10;
    arr['郝少康'] = '学生'
    console.log(arr);
</script>

但是虽然新增了键值对，但是并不算作数组长度，数组长度还是不变

3️⃣使用push追加元素

使用push()追加元素会在数组的末尾进行追加：

<script>
    var arr = [10,'哈哈',null];
    arr.push('hello');
    arr.push('兔总裁');
    console.log(arr);
</script>

删除数组元素

使用splice()函数删除元素：

<script>
    var arr = [10,'哈哈',null];
    arr.push('hello');
    arr.push('兔总裁');
    // 从1下标开始，删除三个元素
    arr.splice(1,3);
    console.log(arr);
</script>

使用splice()替换元素：

<script>
    var arr = [10,'哈哈',null];
    arr.push('hello');
    arr.push('兔总裁');
    // 从1下标开始，删除一个元素，并且将娃哈哈和农夫山泉从下标1处依次插入
    arr.splice(1,1,'娃哈哈','农夫山泉');
    console.log(arr);
</script>

函数

定义函数

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

使用function关键字定义一个函数，和java区别：

• 不用指明返回值类型，也就是返回什么类型都可以
• 形参不用指明类型，所以什么类型的数据都可以传入

函数的定义和调用的先后顺序没有要求。

对于上面的add()函数，要求传入两个参数

• 如果传入的参数个数多于2，则多出的参数不参与运算
• 如果传入的参数个数少于2，则多出的形参为undefined

---

如果要想设计一个函数，对于传入的N个实参都可以作求和运算，函数怎么设计：

<script>
    function add(){
        let sum = 0;
        for(let i=0;i<arguments.length;i++){
            arguments[i] = arguments[i] || 0;
            sum+=arguments[i];
        }
        return sum;
    }
    let ret = add(10,30,50,undefined);
    console.log(ret);
</script>

在JS的函数中会内置一个形参数组，从形参数组中取出形参，然后累加，返回，就可以计算N个数值相加。

arguments[i] || 0 ：|| 左边运算数如果是true，则该表达式返回第一个运算数，如果左边运算数是false，则该表达式返回右边运算数，另外undefined和null也看作false，所以如果传入的是一个undefined或者null，则会转换为0再相加。

使用函数表达式定义函数：

<script>
    var add = function(x,y){
        return x+y;
    }
    let ret = add(10,30);
    console.log(ret);
</script>

实际上是把一个匿名函数初始化给一个变量了，这个变量就代指这个函数，后续就可以使用这个变量调用方法，这个变量add的类型是function

变量作用域

<script>
    // 全局变量
    var num1 = 100;
    var add = function(){
        //局部变量
        var num1 = 10;
        return num1;
    }
    let ret = add();
    console.log(ret);
</script>

局部变量的作用域是代码块内，全局变量的作用域是整个script标签，JS中同样也遵循局部变量优先的原则

另外函数也可以作为函数参数，函数返回值，函数还可以在函数中定义

对象

在JS中创建一个对象，并不需要先有一个类，JS中所有的对象，都是同一个类型：object

创建对象

<script>
    //创建一个对象
    let people = {
        //定义属性
        name : '蔡徐坤',
        age : 25,

        //定义方法
        sing : function(){
            console.log(this.name + '唱歌');
        },
        jump : function(){
            console.log(this.name + '跳');
        }
    }
    console.log(people.name+people.age);
    people.sing();
    people.jump();
    //添加属性
    people.id = 100;
    //添加方法
    people.rap = function(){
        console.log(this.name + 'rap');
    }
    //调用添加的方法
    people.rap();
</script>

此时创建的pepole对象类型就是object类型

对象中既可以定义属性，也可以定义方法，属性和方法都是键值对

并且，在JS中还可以动态的添加属性和方法，创建完对象后，还能再给对象添加属性和方法