JavaScript

itzhuzhu.

已于 2022-05-05 10:04:17 修改

阅读量3.7k

点赞数 2

分类专栏：前端文章标签： javascript 前端 JavaScript基础语法

于 2021-12-06 10:44:07 首次发布

本文链接：https://blog.csdn.net/weixin_45477086/article/details/121740262

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

`JavaScript：`

JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。
脚本语言：不需要编译，就可以被浏览器直接解析执行了。
核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！
组成部分：ECMAScript、DOM、BOM
script标签要写在body下面，因为代码的执行是由上而下的，放在body前加载太慢

`JavaScript基本语法：`

`注释：`

// 单行注释 

/* 
	多行注释 
*/

`输入输出语句：`

	输入框 prompt(“提示内容”);
	弹出警告框 alert(“提示内容”);
	控制台输出 console.log(“显示内容”);
	页面内容输出 document.write(“显示内容”);

    prompt("我是输入框哦")
    alert("我是提示框哦")
    console.log("我是在浏览器的控制台哦")
    document.write("我是页面输出哦")
    document.write("<br/>")
    document.write("我是页面输出哦")

`变量和常量：`

JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。

定义局部变量 let 变量名 = 值;

    let name = "itzhuzhu";
    let age = 23;
    document.write(name + "," + age + "<br />")

定义全局变量 变量名 = 值;

全局变量前面不能加任何的修饰符

    {
      let l1 = "hehe";
      l2 = "haha";    
    }
    // document.write(l1);   出了大括号就会报错
    document.write(l2);

定义常量：

// 定义常量
const PI = 3.1415926;
// PI = 3.15;    这里常量不能改哦
document.write(PI);

`数据类型：`

typeof方法可以判断数据类型

在这里插入图片描述

<body>
<script>
    let l1 = true;
    document.write(typeof (l1) + "<br />")

    let l2 = null;
    document.write(typeof (l2) + "<br />")
    // null的类型是Object 据说是js的老bug，没修复

    let l3;
    document.write(typeof (l3) + "<br />")

    let l4 = 10;
    document.write(typeof (l4) + "<br />")

    let l5 = "itzhuzhu";
    document.write(typeof (l5) + "<br />")

    let l6 = 9.9;
    document.write(typeof (l6) + "<br />")
</script>
</body>

`运算符：`

算数运算符：
在这里插入图片描述
比较运算符：

演示：

<script>
    let num = "10";
    document.write(num + 5 + "<br/>");      // 105
    document.write(num + "5" + "<br/>");    // 105
    document.write(num - 5 + "<br/>");      // 5
    document.write(num * 5 + "<br/>")       // 50   字符串类型数字进行运算，会自动类型转换

    let num2 = 10;
    document.write(num2 == num);              // true == 只是比较值是否相同
    document.write(num === num2);             // false === 比较数据类型和值是否相同
</script>

逻辑运算符：
在这里插入图片描述
三元运算符

(比较表达式) ? 表达式1 : 表达式2;

执行流程

如果比较表达式为true，则取表达式1
如果比较表达式为false，则取表达式2

`流程控制语句:`

if语句：

<script>
    //if语句
    let month = 3;
    if (month >= 3 && month <= 5) {
        document.write("春季");
    } else if (month >= 6 && month <= 8) {
        document.write("夏季");
    } else if (month >= 9 && month <= 11) {
        document.write("秋季");
    } else if (month == 12 || month == 1 || month == 2) {
        document.write("冬季");
    } else {
        document.write("月份有误");
    }
</script>

switch 语句：

<script>
    //switch语句
    switch (1) {
        case 3:
        case 4:
        case 5:
            document.write("春季");
            break;
        case 6:
        case 7:
        case 8:
            document.write("夏季");
            break;
        case 9:
        case 10:
        case 11:
            document.write("秋季");
            break;
        case 12:
        case 1:
        case 2:
            document.write("冬季");
            break;
        default:
            document.write("月份有误");
            break;
    }
</script>

for循环：

<script>
    for (let i = 1; i <= 5; i++) {
        document.write(i + "<br>");
    }
</script>

while循环：

<script>
    let n = 1;
    while (n <= 10) {
        document.write(n + "<br>");
        n++;
    }
</script>

`数组：`

数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。

定义格式：

let 数组名 = [元素1,元素2,…];
let arr = [10,20,30];

索引范围：

从 0 开始，最大到数组长度-1

数组长度

数组名.length

<script>
    // 定义数组
    let arr = [10, 20, 30];
    arr[10] = 100;// 验证数组长度是可变的
    // 遍历数组
    for (let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br>");
    }
    document.write("==============<br>");
</script>

数组高级运算符…三个点就是高级运算符，用于数组复制、合并数组、字符串转数组

<script>
    // 定义数组
    let arr = [10, 20, 30];
    arr[10] = 100;// 验证数组长度是可变的
    // 遍历数组
    for (let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br>");
    }
    document.write("==============<br>");


    //数组的高级操作，复制数组
    let arr2 = [...arr];
    //遍历数组
    for (let i = 0; i < arr2.length; i++) {
        document.write(arr2[i] + "<br>");
    }
    document.write("==============<br>");


    //合并数组
    let arr3 = [40, 50, 60];
    let arr4 = [...arr2, ...arr3];
    //遍历数组
    for (let i = 0; i < arr4.length; i++) {
        document.write(arr4[i] + "<br>");
    }
    document.write("==============<br>");


    //将字符串转成数组
    let arr5 = [..."itzhuzhu"];
    //遍历数组
    for(let i = 0; i < arr5.length; i++) {
        document.write(arr5[i] + "<br>");
    }
</script>

`函数：`

函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果

定义格式：

function 方法名(参数列表) {
    方法体; 
    return 返回值; 
}

可变参数：

function 方法名(…参数名) {
    方法体; 
    return 返回值; 
}

匿名函数：

function(参数列表) {
    方法体; 
}

演示函数：

<script>
    // 无参无返回值方法
    function println() {
        document.write("无参无返回值方法<br/>");
    }

    // 调用方法
    println();

    // 有参有返回值方法
    function getSum(num1, num2) {
        return num1 + num2;
    }

    let sum = getSum(1, 2);
    document.write(sum);

    // 可变参数
    function getSum(...params) {
        let sum = 0;
        for (let i = 0; i < params.length; i++) {
            sum += params[i];
        }
        return sum;
    }

    let sum1 = getSum(1, 2, 3, 4, 5, 6, 7, 78, 5, 45, 65, 4, 234, 423,);
    document.write(sum1);

    // 匿名函数,   一般是需要定义变量接收的，不然没什么意义
    let fun = function () {
        document.write("我就是匿名函数，diao吧")
    }
    fun();
</script>

itzhuzhu.

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript

JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。脚本语言：不需要编译，就可以被浏览器直接解析执行了。核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！
复制链接

扫一扫