零基础学JavaScript(二)ECMAScript 基础

一、变量

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>零基础学JavaScript(二) ECMAScript</title>
  </head>

  <body>
  </body>
  <script>
    let name = "张三";
    console.log(name);
  </script>
</html>

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

<script>
    let name = "张三";
    name = 18;
    console.log(name);
</script>

 

二、数据类型

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

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

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

undefined --- 未定义

null           ---  null

扫描二维码关注公众号,回复: 16858524 查看本文章

Boolean   ---  布尔类型

number   ---  数字类型

String      ---  字符串类型 

2.  复杂数据类型Object

Object  --- 对象类型

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

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

(一)、number、string类型

 <script>
    let name = "张三";
    console.log(typeof(name));
    name = 18;
    console.log(typeof(name));
  </script>

 

(二) boolean、undefined、null

  <script>
    //定义boolean(布尔类型)
    let flag = true; //可以等于false
    console.log(typeof(flag));

    //定义一个undefined类型
    let msg;
    console.log(typeof(msg));
    
    //定义一个null类型(typeof 无法检测出null的类型)
    let people = null;
    console.log(typeof(people));
  </script>

(三)定义一个object变量

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

 

三、操作符

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>零基础学JavaScript(二) ECMAScript</title>
    <style>
      body{
        background-color: blueviolet;
      }
    </style>
  </head>

  <body>
  </body>
  <script>
   //定义两个变量
    let a = 8;
    let b = 4;
    //加法
    console.log("计算a+b的结果",a+b);
    console.log("number类型+字符串类型的数字,会拼接",a+"11");
    console.log("number类型+用Number转化的字符串类型的数字,会执行加法",a+Number("11"));
    //减法
    console.log("计算a-b的结果",a-b);
    //乘法
    console.log("计算a*b的结果",a*b);
    //除法
    console.log("计算a/b的结果",a/b);
    //除法
    console.log("计算a%b的结果",a%b);
  </script>
</html>

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

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

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

<script>
    /*
      逻辑非:符号是!
      含义:我们一般是将结果的boolean取非,也就是取相反的值   
    */
    console.log("逻辑非");
    console.log(!false);
    console.log(!(2>3));


    /*
      逻辑与:符号是 &&
      含义:需要两个值同时满足true才能得到true的结果
    */
    console.log("逻辑与");
    console.log("只有当,一个值为true,另一个值也为true,那么结果才能为true ",true&&true);
    console.log("一个值为true,一个值为false,那么结果就是false ",true&&false);
    

    /*
    逻辑或:符号是 ||
    含义:两个值中,只要有一个值为true,那得到结果就为true
    */
    console.log("逻辑或");
    console.log("两个值中,只要有一个值为true,那得到结果就为true ", true||false);
    console.log("只有当,两个值都为false,那得到结果就为false ", false||false);
  </script>

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

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

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

1. if 条件语句

<script>
    let i = 26;
    if(i>25){
      console.log("进入true条件的代码块");
    }else{
      console.log("进入false条件的代码块");
    }
    //简写
    if(i>25)console.log("简写,进入true条件的代码块")
    //多个条件语句
    let result = 55;
    if(result>90){
      console.log("优秀");
    }else if(result>80 && result<=90){
      console.log("良好");
    }else if(result>=60 && result<=80){
      console.log("一般");
    }else{
      console.log("不及格");
    }
  </script>

2. while语句

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

  <script>
    let a = 0;
    while(a<10){
      a= a+1;
    }
    console.log("a=",a);
  </script>

3. for语句

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

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

4. switch语句

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

<script>
    let n = 2;
    switch(n)
    {
        case 1:
            console.log("进入1");
            break;
        case 2:
            console.log("进入2");
            break;
        case 3:
            console.log("进入3");
            break;    
        default:
          console.log("没有符合条件时,执行默认语句");
    }
  </script>

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

五、函数 

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

1. 先来感受一下函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>零基础学JavaScript(二) ECMAScript</title>
</head>
<body>
    
</body>
<script>
    //用function 定了一个叫 people的函数
    function people(){
        let name = "张三";
        let age = 18;
        let bodyHeight = 180;
        console.log("姓名=",name);
        console.log("年龄=",age);
        console.log("身高=",bodyHeight);
    }
    //调用函数
    people();
</script>
</html>

 2. 理解函数的参数

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

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

注意三个点

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

sum1 是形参,代表 1 

sum2 是形参,代表 2

3. 加深对参数的理解

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

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

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

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

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

六、结束语

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

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

猜你喜欢

转载自blog.csdn.net/tengyuxin/article/details/133268872