• 零基础学JavaScript(二)ECMAScript 基础


    一、变量

    1. 我们JavaScript代码写在 script标签里面

    2. 我们定义一个变量名字为name,它的值是“张三”

    3. 打开开发者工具的控制台,查看打印结果

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8" />
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. <title>零基础学JavaScript(二) ECMAScripttitle>
    8. head>
    9. <body>
    10. body>
    11. <script>
    12. let name = "张三";
    13. console.log(name);
    14. script>
    15. html>

    直接下来我们,可以将name的值,修改成18

    1. <script>
    2. let name = "张三";
    3. name = 18;
    4. console.log(name);
    5. script>

     

    二、数据类型

    1. 每种编程语言都会定义数据类型,数据类型存在的目的是装对应的数据。 

    2. 目前javascript中有5种简单数据类型,1种复杂数据类型

    1、看看5种简单数据类型

    undefined --- 未定义

    null           ---  null

    Boolean   ---  布尔类型

    number   ---  数字类型

    String      ---  字符串类型 

    2.  复杂数据类型Object

    Object  --- 对象类型

    3. 使用typeof操作符,检测数据类型

    实践看一下,各种类型的数据,如何定义变量

    (一)、number、string类型

    1. <script>
    2. let name = "张三";
    3. console.log(typeof(name));
    4. name = 18;
    5. console.log(typeof(name));
    6. script>

     

    (二) boolean、undefined、null

    1. <script>
    2. //定义boolean(布尔类型)
    3. let flag = true; //可以等于false
    4. console.log(typeof(flag));
    5. //定义一个undefined类型
    6. let msg;
    7. console.log(typeof(msg));
    8. //定义一个null类型(typeof 无法检测出null的类型)
    9. let people = null;
    10. console.log(typeof(people));
    11. script>

    (三)定义一个object变量

    1. <script>
    2. //定义object类型数据,该对象表达的含义是,定义了一个人,她的名字叫索菲亚,年龄18岁,性别是一个女孩
    3. let people = {
    4. name: "索菲亚",
    5. age: 18,
    6. gander: "female"
    7. };
    8. console.log(typeof(people));
    9. script>

     

    三、操作符

    计算类的操作符: 加、减、乘、除、求余

    关系操作符:大于>、小于<、大于等于>=、小于等于<=、相等==

    布尔操作符: 逻辑非!、逻辑与&&、逻辑或||

    条件运算符:a>b?true:false

    1. 计算类的操作符: 加、减、乘、除、求余

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8" />
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. <title>零基础学JavaScript(二) ECMAScripttitle>
    8. <style>
    9. body{
    10. background-color: blueviolet;
    11. }
    12. style>
    13. head>
    14. <body>
    15. body>
    16. <script>
    17. //定义两个变量
    18. let a = 8;
    19. let b = 4;
    20. //加法
    21. console.log("计算a+b的结果",a+b);
    22. console.log("number类型+字符串类型的数字,会拼接",a+"11");
    23. console.log("number类型+用Number转化的字符串类型的数字,会执行加法",a+Number("11"));
    24. //减法
    25. console.log("计算a-b的结果",a-b);
    26. //乘法
    27. console.log("计算a*b的结果",a*b);
    28. //除法
    29. console.log("计算a/b的结果",a/b);
    30. //除法
    31. console.log("计算a%b的结果",a%b);
    32. script>
    33. html>

     2. 关系操作符: 大于>、小于<、大于等于>=、小于等于<=、相等==

    1. <script>
    2. //定义两个变量
    3. let a = 8;
    4. let b = 4;
    5. console.log("a>b ",a>b);
    6. console.log("a,a
    7. console.log("a<=b ",a<=b); //a小于等于b,肯定是假,打印值就为false
    8. console.log("a>=b ",a>=b);
    9. console.log("a==b ",a==b); //a是否等于b,肯定是假
    10. script>

    3. 布尔操作符: 逻辑非!、逻辑与&&、逻辑或||

    1. <script>
    2. /*
    3. 逻辑非:符号是!
    4. 含义:我们一般是将结果的boolean取非,也就是取相反的值
    5. */
    6. console.log("逻辑非");
    7. console.log(!false);
    8. console.log(!(2>3));
    9. /*
    10. 逻辑与:符号是 &&
    11. 含义:需要两个值同时满足true才能得到true的结果
    12. */
    13. console.log("逻辑与");
    14. console.log("只有当,一个值为true,另一个值也为true,那么结果才能为true ",true&&true);
    15. console.log("一个值为true,一个值为false,那么结果就是false ",true&&false);
    16. /*
    17. 逻辑或:符号是 ||
    18. 含义:两个值中,只要有一个值为true,那得到结果就为true
    19. */
    20. console.log("逻辑或");
    21. console.log("两个值中,只要有一个值为true,那得到结果就为true ", true||false);
    22. console.log("只有当,两个值都为false,那得到结果就为false ", false||false);
    23. script>

    4. 条件运算符:a>b?true:false 

    1. <script>
    2. let a = 1;
    3. let b = 2;
    4. let result = a>b?"哈哈哈哈":"噢噢噢噢";
    5. console.log("a是否大于b,如果大于就显示问号(?)后面的结果,如果不大于就像是冒号(:)的结果 ",result);
    6. script>

    四、语句:if 、while、for、switch

    1. if 条件语句

    1. <script>
    2. let i = 26;
    3. if(i>25){
    4. console.log("进入true条件的代码块");
    5. }else{
    6. console.log("进入false条件的代码块");
    7. }
    8. //简写
    9. if(i>25)console.log("简写,进入true条件的代码块")
    10. //多个条件语句
    11. let result = 55;
    12. if(result>90){
    13. console.log("优秀");
    14. }else if(result>80 && result<=90){
    15. console.log("良好");
    16. }else if(result>=60 && result<=80){
    17. console.log("一般");
    18. }else{
    19. console.log("不及格");
    20. }
    21. script>

    2. while语句

    while语句属于前测试循环语句,也就是说。在循环体内的代码被执行之前,就会对出口条件求值。因此,循环体内的代码有可能永远不会被执行。

    1. <script>
    2. let a = 0;
    3. while(a<10){
    4. a= a+1;
    5. }
    6. console.log("a=",a);
    7. script>

    3. for语句

    for语句也是一种前测试循环语句,但它具有执行循环之前初始化变量和定义循环后要执行代码的能力,以下是for语句的示例。

    1. <script>
    2. let count = 10;
    3. for(let i=0;i
    4. console.log("普通for循环 打印i值得变化",i);
    5. }
    6. //另一种for in写法
    7. let arr = [1,2,3,4]; //定义了一个数组
    8. for(let i in arr){
    9. console.log("for-in 打印i值得变化",i);
    10. }
    11. script>

    4. switch语句

    switch 语句用于基于不同的条件来执行不同的动作。 与if得else if很像,区别是switch性能上更好,不过目前计算机性能已经不是大问题,所以用if还是switch,看具体情况。

    1. <script>
    2. let n = 2;
    3. switch(n)
    4. {
    5. case 1:
    6. console.log("进入1");
    7. break;
    8. case 2:
    9. console.log("进入2");
    10. break;
    11. case 3:
    12. console.log("进入3");
    13. break;
    14. default:
    15. console.log("没有符合条件时,执行默认语句");
    16. }
    17. script>

    这里有个关键字break,它得意义是跳出当前循环。当n=2 命中条件后,直接跳出swith

    五、函数 

    函数对于任何语句都是核心概念。它可以封装多条语句统一执行,它用 function这个关键字声明 

    1. 先来感受一下函数

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>零基础学JavaScript(二) ECMAScripttitle>
    8. head>
    9. <body>
    10. body>
    11. <script>
    12. //用function 定了一个叫 people的函数
    13. function people(){
    14. let name = "张三";
    15. let age = 18;
    16. let bodyHeight = 180;
    17. console.log("姓名=",name);
    18. console.log("年龄=",age);
    19. console.log("身高=",bodyHeight);
    20. }
    21. //调用函数
    22. people();
    23. script>
    24. html>

     2. 理解函数的参数

    通常我们使用函数有时候还需要得到一个计算结果,比如加法函数,代码如下

    1. <script>
    2. let result = sum(1,2);
    3. console.log("打印result结果",result);
    4. function sum(sum1,sum2){
    5. return sum1+sum2;
    6. }
    7. script>

    注意三个点

    return 代表结束语句,同时将结果返回。

    sum1 是形参,代表 1 

    sum2 是形参,代表 2

    3. 加深对参数的理解

            ECMAScript函数的参数与大多数其它语言的函数参数有所不同。它不介意传递进来多少个参数,也不在乎创建来参数是什么数据类型。也就是说即便你定义的函数只接受两个参数,但在调用时未必需要传递两个参数。

            之所以这样,是因为参数的内部是用数组来表示的。我们可以用arguments来访问参数数组,比如这样

    arguments[0]  访问参数数组中第一个元素

    arguments[1]  访问参数数组中第二个元素

    1. <script>
    2. let result = sum(1,2);
    3. console.log("打印result结果",result);
    4. function sum(){
    5. console.log(arguments[0],arguments[1]);
    6. return arguments[0]+arguments[1];
    7. }
    8. script>

    六、结束语

    初学者要好好将这些案例过一下,最重要的是理解知识的结构,理解知识存在的意义,这样就可以不用记忆和练习全部,而是自己可以通过提问,找出解决方法。

    打基础的过程还是有些枯燥,接下是将引用类型数据学习一下,彻底掌握所有数据类型的使用后,就可以真正的开发功能了,再坚持坚持。

     

  • 相关阅读:
    Metabase人人可用的自助数据探索型BI软件
    MySQL 8.0.25版本下载、安装及配置(Windows 10/11 64位)详细教程【超详细,保姆级教程!!!】
    类加载机制
    05-HTTPS 秘钥库与证书(Java)
    Vue 全局事件总线
    Matlab 点云迭代加权最小二乘法(IRLS)
    java静态栈(含回文数和计算机代码展示)
    Thymeleaf学习(1)—— 表达式和属性
    基于51单片机智能IC卡水表控制系统(仿真+源程序+全套资料)
    cmake使用教程
  • 原文地址:https://blog.csdn.net/tengyuxin/article/details/133268872