• 【JavaScript】JavaScript基础篇

    目录

    🍊一. 初识JavaScript

    🍈二. JavaScript的书写格式

    🥭三. JavaScript的基础语法 

    🌴1. 变量的用法

    🌾2. 基本数据类型

    🌵3. 运算符 

    🌴4. 条件语句

    🌾5. 循环语句

    🌵6. 数组 

    🌴7. 函数

    🌵8. 对象

    🍊一. 初识JavaScript

    JavaScript简称JS，是一个脚本语言，通过解释器运行，主要在客户端（浏览器）运行，现在也可以基于node.js在服务端运行

    🍀JavaScript能做的事情：

    • 网页开发（复杂的特效和用户交互）
    • 网页游戏开发
    • 服务器开发（基于node.js）
    • 桌面程序开发（如VSCode）
    • 手机app开发 

    🍁JavaScript与HTML和CSS之间的联系：

    HTML：网页的结构（骨架）
    CSS：网页的样式（皮）
    JavaScript：网页的功能（魂）

    🍃JavaScript的组成：

    • ECMAScript：JavaScript语法
    • DOM：页面文档对象模型，对页面的元素进行操作
    • BOM：浏览器对象模型，对浏览器窗口进行操作

    🍈二. JavaScript的书写格式

    • 行内式：直接嵌入到html元素内部 
    <input type="button" value="按钮" onclick="alert('你好呀')">
    • 内嵌式：写到script标签中
    1. <script>
    2.     alert("哈哈");
    3. script>

    🧂注意：script标签可以写在body标签中，也可以写在body标签外

    • 外部式：写到单独的.js文件中
    <script src="hello.js">script>
    alert("hello word!");

    • 注释：

    🥕单行注释：//
    🥕多行注释：/* */

    1. //注释
    2. /* 
    3.    注释1
    4.    注释2
    5. */

    🧂注意：多行注释/**/不能嵌套 

    • 输入prompt：弹出一个输入框
    1.     <script>
    2.         prompt("请输入姓名：");
    3.         prompt("请输入年龄：");
    4.     script>

    • 输出alert：弹出一个警示对话框，输出结果 
    1.     <script>
    2.         alert("姓名年龄输入完毕！");
    3.     script>

    • 输出console.log：在控制台打印一个日志
    1.     <script>
    2.         console.log("这是一条日志");
    3.     script>

    重要概念：

    🥕console是一个js中的对象
    🥕.表示对象中某个属性或者方法，可以理解成“的”
    🥕console.log就可以理解成：使用“控制台”对象“的”log方法 

    🥭三. JavaScript的基础语法 

    🌴1. 变量的用法

    🥕创建变量： 

    1.     <script>
    2.         var a = 10;
    3.         var name = "张三";
    4.         let flag = true;
    5.     script>

    var与let都可以创建变量，他俩只表示这是一个变量，而不指定具体的类型，具体类型由后面具体的赋值确定 

    var与let的区别是作用域不同，后面会介绍

    🥕使用变量：

    1.     <script>
    2.         var a = 10;
    3.         var name = "张三";
    4.         let flag = true;
    5.         a = 20; //修改变量的值
    6.         console.log(name); //控制台打印变量
    7.     script>

    👁️‍🗨️代码示例：创建变量接收输入，然后再输出

    1. var name = prompt("请输入姓名：");
    2. var age = prompt("请输入年龄：");
    3. var gender = prompt("请输入性别：");
    4. alert("姓名："+name+"\n"+"年龄："+age+"\n"+"性别："+gender);

    + 表示字符串的拼接
    \n 表示换行 

    🥕理解动态类型

    JS的变量类型是程序运行过程中才确定的，随着程序的运行，变量的类型可能会发生改变

    1. var a = 10;
    2. var name = "小花";
    3. a = "张三";
    4. name = 10;

    🌾2. 基本数据类型

    🥕Number数字类型

    JS不区分整数和浮点数，统一用数字类型来表示

    可以用不同的进制表示：

    1. var a = 10;  //十进制
    2. var b = 07;  //八进制，以0开头
    3. var c = 0xa; //十六进制，以0x开头
    4. var d = 0b10;//二进制，以0b开头

    特殊的数字值：

    • Infinity：无穷大，大于任何数字，表示数字已经超过了JS能表示的范围
    • -Infinity：负无穷大，小于任何数字。表示数字已经低于了JS能表示的范围
    • NaN:表示当前的结果不是一个数字 
    1. var max = Number.MAX_VALUE;
    2. console.log(max*2); //得到Infinity
    3. console.log(-max*2);//得到-Infinity
    4. console.log("haha"-10);//得到NaN

    注意：

    • 负无穷大和无穷小不是一回事，无穷小是无限趋近0，值为1/Infinity
    • “haha”-10得到NaN，但是“haha”+10不是NaN，而是进行字符串拼接得到“haha10”
    • 可以使用isNaN判断是不是一个数字：
    1. console.log(isNaN(10)); //true
    2. console.log(isNaN("haha"-10));  //false

    🥕String字符串类型

    字符串字面量需要用单引号或者双引号引起来

    1. var a = "aaa";
    2. var b = 'bbb';
    3. var c = ccc;  //运行出错

    如果字符串中已经包含了引号咋办？

    1. var msg = "my name is 'zhangsan'"; //正确，双引号包裹单引号
    2. var msg = 'my name is "zhangsan"'; //正确，单引号包裹双引号
    3. var msg = "my name is \"zhangsan\""; //正确，使用转义字符，\"表示内部的引号
    4. var msg = "my name is "zhangsan""; //出错

    转义字符：

    • \n，表示换行
    • \\，表示\
    • \'，表示'
    • \"，表示"
    • \t ，表示制表符

    求字符串的长度：使用String的length属性即可

    1. var s = "haha";
    2. console.log(s.length); //4
    3. var c = "hello";
    4. console.log(c.length); //5

    字符串拼接：使用+进行拼接

    1. var a = "hello";
    2. var b = "word";
    3. console.log(a+b);//helloword

    数字和字符串也可以拼接

    1. var a = "my age is ";
    2. var b = 16;
    3. console.log(a+b); //my age is 16

      

    🥕Boolean布尔类型

    表示真true或假false，参与运算时当作1和0

    1. var a = true;
    2. var b = false;
    3. console.log(2+a+b);//3

    注意：实际开发不这么用 

    🥕undefined未定义的数据类型

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

    1. var a;
    2. console.log(a);//undefined

    undefined和字符串相加，结果为字符串拼接的结果

    1. var a;
    2. console.log(a+"haha"); //undefinedhaha

      

    undefined和数字相加，结果为NaN，表示不是一个数字类型 

    1. var a;
    2. console.log(a+10);//NaN

    🥕null空值类型

    null表示当前变量为一个“空值”

    1. var a = null;
    2. console.log(a+10); //10
    3. console.log(a+"haha"); //nullhaha

    注意：null和undefined都为取值非法情况，但是侧重不一样，null表示当前的值为空（相当于有一个空盒子），undefined表示当前变量未定义（相当于连盒子都没有）

    🌵3. 运算符 

    JavaScript中的运算符和Java中的运算符基本相同，此处不详细介绍，可以参考：初学Java------Java的基本程序设计结构_XH学Java的博客-CSDN博客 

    🥕算数运算符：

    • +
    • -
    • *
    • /
    • %

    🥕赋值运算符和复合赋值运算符：

    • =
    • +=
    • -=
    • *=
    • /=
    • %=

    🥕自增自减运算符：

    • ++
    • --

    🥕比较运算符：

    • <
    • >
    • <=
    • >=
    • ==（会进行隐式类型转换）
    • !=
    • ===（不会进行隐式类型转换）
    • !== 

    🥕逻辑运算符：用于计算多个boolean表达式的值，此处与Java中略有不同

    • &&
    • ||
    • !

    不同：Java中严格要求表达式两边为boolean类型，但是JavaScript中可以为数值类型 

    对于数值型，哪个数值能确定最终表达式的值，结果就为哪个值 

    👁️‍🗨️比如：

    2&&3，3才确定了最终为true，结果就为3
    3&&0，0确定了最终为false，结果为0
    2||3，2就可以确定最终为true，结果为2
    0||3，3确定了最终结果为true，结果为3 

    1. console.log(2&&3); //3
    2. console.log(3&&0); //0
    3. console.log(2||3); //2
    4. console.log(0||3); //3

    🥕位运算符：

    • &
    • |
    • ~
    • ^ 

    🥕移位运算符：

    • <<
    • >>
    • >>>

    🌴4. 条件语句

    🥕if语句

    与Java中用法相同

    👁️‍🗨️示例：判断一个数是奇数还是偶数 

    1. var num = 10;
    2. if(num == 1){
    3.     console.log(num+"既不是偶数也不是奇数");
    4. }else if(num % 2 == 0){
    5.     console.log(num+"是偶数");
    6. }else {
    7.     console.log(num+"是奇数");
    8. }

    🥕三元表达式 

    与Java用法相同

    👁️‍🗨️示例：将一个boolean表达式的值取反

    1. var a = true;
    2. a = a?false:true;
    3. console.log(a);

    🥕switch分支 

    与Java用法相同

    👁️‍🗨️示例：用户输入一个数，判断是星期几

    1. var day = prompt("请输入一个数字：");
    2. switch(parseInt(day)){ //day为一个字符串，必须转为数字
    3.     case 1:
    4.         alert("星期一");
    5.         break;
    6.     case 2:
    7.         alert("星期二");
    8.         break;
    9.     case 3:
    10.         alert("星期三");
    11.         break;
    12.     case 4:
    13.         alert("星期四");
    14.         break;
    15.     case 5:
    16.         alert("星期五");
    17.         break;
    18.     case 6:
    19.         alert("星期六");
    20.         break;
    21.     case 7:
    22.         alert("星期天");
    23.         break;
    24.     default:
    25.         alert("输入有误");   
    26. }

    🌾5. 循环语句

    🥕while循环

    与Java用法相同

    👁️‍🗨️示例：打印1到10

    1. var num = 1;
    2. while(num <= 10){
    3.     console.log(num);
    4.     num++;
    5. }

    🥕for循环

    与Java用法相同

    👁️‍🗨️示例：计算5的阶乘

    1. var result = 1;
    2. for(var i = 1;i <= 5;i++){
    3.     result *= i;
    4. }
    5. console.log(result);

    🥕continue与break

    与Java的用法相同，continue跳出本趟循环，继续执行下一次循环，break结束整个循环

    🌵6. 数组 

    🥕数组的创建

    • 使用new关键字创建
    var arr = new Array();
    • 使用字面量方式创建
    var arr = [1,2,3,"hehe",5,true];

    👁️‍🗨️注意：

    JavaScript使用[]包裹数组元素，而不是{}
    JavaScript不要求数组中是同一类型元素

    🥕获取数组元素

    使用下标方式获取数组元素，从0开始

    1. var arr = [1,2,3,"hehe",5,true];
    2. console.log(arr[0]);
    3. console.log(arr[3]);
    4. console.log(arr[5]);

    👁️‍🗨️注意：如果下标超过数组读取范围，则结果为undefined

    console.log(arr[100]);

    🥕新增数组元素

    • 通过修改length新增
    1. var arr = [1,2,3,4];
    2. arr.length = 6;
    3. console.log(arr[5]); //新增元素默认值为undefined
    4. console.log(arr);

    • 通过下标新增

    如果下标超过范围赋值元素，则会给指定位置插入新元素

    1. var arr = [];
    2. arr[2] = 3;
    3. console.log(arr);
    4. console.log(arr[0]); //[0]和[1]都是undefined

    • 使用push进行元素追加

    👁️‍🗨️示例：将一组数的奇数放到一个新数组中

    1. var arr = [1,2,3,4,5,6,7,8,9];
    2. var newArr = [];
    3. for(var i = 0;i < arr.length;i++){
    4.     if(arr[i] == 1){
    5.         continue;
    6.     }
    7.     if(arr[i] % 2 != 0){
    8.         newArr.push(arr[i]);
    9.     }
    10. }
    11. console.log(newArr);

    🥕删除数组中的元素

    使用splice方法删除数组中的元素，第一个参数表示从下标为几开始删除，第二个参数表示要删几个

    1. var arr = [1,2,3,4,5];
    2. arr.splice(2,2);//删除3，4
    3. console.log(arr);//打印1，2，5

    🌴7. 函数

    🥕函数的创建格式：

    1. function 函数名 (参数列表) {
    2.     函数体;
    3.     return 返回值;
    4. }

    👁️‍🗨️示例：创建一个可以实现两数和的函数

    1. function add1(a,b){ //带有返回值的函数
    2.     return a+b;
    3. }
    4. function add2(a,b){ //没有返回值的函数
    5.     console.log(a+b);
    6. }
    7. console.log(add1(1,2));
    8. add2(3,4);

    👁️‍🗨️注意：

    • 实参和参数1的个数可以不匹配
    • 实参个数比形参个数多，多出的不参与运算
    • 实参个数比形参个数少，多出的形参值为undefined
    1. function sum(a,b,c){
    2.     console.log(a+b);
    3. }
    4. sum(10,20,30); //10+20 = 30
    5. sum(10); //10+undefined = NaN

    另一种函数创建的格式：

    1. var add = function(){
    2.     var sum = 0;
    3.     for(var i = 0;i < arguments.length;i++){
    4.         sum += arguments[i];
    5.     }
    6.     return sum;
    7. }
    8. console.log(add(10,20,30));//60
    9. console.log(add(1,2,3));//6
    10. console.log(typeof add);//function

    说明：

    • function(){}定义了一个匿名函数，用变量来表示，后面就可以用这个变量来调用函数了
    • arguments为传入的参数，将参数作为一个数组
    • typeof表示类型 

    🥕作用域

    • 全局作用域：在整个script标签，或者单独的js文件中生效 
    • 局部作用域/函数作用域：在函数内部生效
    1. var a = 10;//全局变量
    2. function test (){
    3.     var a = 20;//局部变量
    4.     console.log(a);//优先找自己的局部变量，若没有则找全局变量
    5. }
    6. test();

    创建变量如果不写var或者let，得到的是一个全局变量

    1. function test(){
    2.     a = 10;
    3.     b = 20;
    4. }
    5. test();
    6. console.log(a);
    7. console.log(b);

    🥕var与let的区别

    作用域不同

    1. function test(){
    2.     var a = 10;
    3.     let b = 20;
    4. }
    5. console.log(b); //报错
    6. console.log(a); //报错

    👁️‍🗨️说明：在函数中var与let定义的变量，在函数外边都不能使用 

    1. while(1 > 0){
    2.     var a = 10;
    3.     let b = 20;
    4.     break;
    5. }
    6. console.log(a);
    7. console.log(b);

    👁️‍🗨️说明：在条件/循环中var定义的变量外边还能用，let定义的变量外边用不了 

    🌵8. 对象

    JavaScript与Java中的对象概念差不多，只是具体使用语法差别较大

    🥕对象的创建

    • 使用{}创建对象：
    1. var student = {
    2.     name: "张三",
    3.     age: 23,
    4.     sex: "男",
    5.     play: function(){
    6.         console.log("正在玩耍");
    7.     }
    8. };

    👁️‍🗨️注意：也可以使用student.name = "xxx";这样的方式来增加属性

    student.height = 230; //新增了height属性

    🧂属性和对应的值用键值对的形式来组织
    🧂键值对之间用“，”分割，最后一个属性“，”可有可无
    🧂键和值用: 分割
    🧂方法的值是一个匿名函数

    👁️‍🗨️对象属性和方法的使用：

    1. console.log(student.name);
    2. console.log(student.age);
    3. student.play();//调用方法要加()

    • 使用new Object()创建对象：
    1. var student = new Object();
    2. student.name = "牛魔王";
    3. student.age = 500;
    4. student.play = function(){
    5.     console.log("正在吃唐僧肉");
    6. }
    7. console.log(student.name);
    8. console.log(student.age);
    9. student.play();

    • 使用构造函数创建对象：
    1. function 构造函数名(参数列表){
    2.     this.属性 = 值;
    3.     this.方法 = function...
    4. }
    5. var obj = new 构造函数名(实参);

    👁️‍🗨️示例：创建几个猫咪对象

    1. function Cat(name,color,type,sound){
    2.     this.name = name;
    3.     this.color = color;
    4.     this.type = type;
    5.     this.miao = function(){
    6.         console.log(sound);
    7.     }
    8. }
    9. var nuomi = new Cat("糯米","白色","波斯猫","喵喵~");
    10. var wanzi = new Cat("丸子","灰色","中华田园猫","咪咪");
    11. var tuanzi = new Cat("团子","黑色","狸猫","喵呜");
    12. console.log(wanzi);
    13. nuomi.miao();

    👁️‍🗨️注意：

    🧂在构造方法中使用this关键字表示当前正在构建的对象
    🧂构造函数的名字一般是大写的
    🧂构造函数不需要return
    🧂创建对象的时候要使用new关键字

  • 相关阅读:
    通过代码加解析的方式带领大家分析 ：数组与指针的关系
    kali的安装与配置
    JAVA主要API
    Vue.js+Node.js全栈开发教程：Vue.js指令修饰符详解
    米尔AM62x核心板助力新一代工业4.0升级
    Docker学习
    热销产品缺货,滞销产品积压？WMS系统如何打造智能仓储
    【狂神】SpringMVC笔记（一）之详细版
    为什么我建议在复杂但是性能关键的表上所有查询都加上 force index
    智慧运维：基于 BIM 技术的可视化管理系统
  • 原文地址：https://blog.csdn.net/qq_58710208/article/details/125880980