JS基础(一)引入方式,基本语法,数据类型,类型转换,原始类型和引用类型的区别

发布时间 2024-01-11 17:32:11作者: szdbjooo

JS和python很像滴,好学,快快过一遍

一、JS引入方式

    <script>
        // js 的代码
        alert("hello alvin!")
    </script>

二、JS基本语法

打印console.log作为日志打印,在浏览器里f12检查,console可以看见。

区分大小写哦。

JS中可以用换行作为分隔符(python中),不过更推荐使用换行+分号 ; 作为分隔符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script>

    // 变量的先声明再赋值
    var x ;
    x = 10;
    console.log(x);

    // 声明并赋值

    var y = 20;


    // 一行声明多个变量

    var a = 1,b=2;
    c = 3;  // 声明了一个全局变量
    console.log(c);



     // 单行注释

     /*

    多行注释
    多行注释
    多行注释

     */

    var name = "alvin" ;var age =18;console.log(name,age);

    var q = 10;
    var w = q;
    w =20 ;


    </script>
</head>
<body>

</body>
</html>

三、JS数据类型

原始类型:字符串、数字、布尔、null、undefined

对象类型:数组、object、函数对象、日期Date、错误Error、正则RegExp、内置对象(Json、Math、arguments)

3.1 数字类型

JS中没有整形和浮点型,只有number类型

    <script>

        var x = 10;
        var y = 3.14;
        console.log(x,typeof x); // 10 "number"
        console.log(y,typeof y); // 3.14 "number"

    </script>

3.2 字符串类型

字符串创建两种方式:

  • 变量="字符串"
  • 字符串对象名称=new String(字符串)
<script>

// 字符串创建
var s1 = "hello world";
var s2 = new String("hello world") // 和Java一样 了解即可,一般用上面那种

console.log(s1.length);
console.log(s1.toUpperCase());
console.log(s1.indexOf("l"));
console.log(s1[2]);
// 切片操作
console.log(s1.slice(1,4)); // ell 顾头不顾尾 和python一样
console.log(s1.slice(0,4));
console.log(s1.slice(0,-1));//hello worl -1是从最后开始少取一个
console.log(s1.slice());
console.log(s1.slice(3)); // 缺省的情况 lo world 从3取到最后一个
console.log(s1.slice(-4,-1)); // 负数就是从右往左数,orld
console.log(s1.slice(-1,-4)); // 这样就是错的,-4在-1左边,最后不会报错,但是什么都没有 ""

// split分割方法 python也有,完全一样
var ret = s1.split(" ");
console.log(ret); // ["hello", "world"]

// substr截断方法
console.log(s1.substr(2,2));

var password = " ge llo ";
console.log(password.trim()); // ge llo 中间的空格不会去掉
console.log(password.trim().length);


</script>

3.3 布尔类型

    <script>
        
       var  b1 = false;
       var  b2 = true;

       console.log(b1,typeof b1);  // false "boolean"
       console.log(2 > 3);
       console.log(5 > 3);

       console.log(true+1);
       
    </script>

3.4 空值类型

undefined和null

  • 当声明的变量未初始化时,该变量默认是undefined
  • 当函数无明确返回值时,返回的也是undefined

值undefined实际上是从null派生来的,多以ECMAScript把他们定义为相等的。尽管值相等,含义却不同。null用于表示尚未存在的对象,如果函数或者方法返回的对象,但是找不大该对象,那就是null。

    <script>
        
      var s;
      console.log(s,typeof s);  // undefined "undefined"


      function foo() {
          console.log("foo函数")
      }
      console.log(foo()) ;  // undefined

      console.log(undefined == null)  // true
      
    </script>

四、类型转换

强制转换和自动转换。

    <script>

        //  转换number类型
        var box1 = "一共100件"; // 转换会失败
        var box2 = "100件";     // 转换会成功
        var box3 = "100";     // 转换会成功
        var ret = parseInt(box3);
        console.log(ret);   // NaN 属于number类型

        var box5 = "3.14";
        console.log(parseFloat(box5) ); // 3.14
        //
        var box6 = "3.1.4";  // 使用Number转换的数据里面必须是纯数字!!!!否则都会转换失败
        console.log(parseFloat(box6));
        console.log(Number(box6));  // NaN 很严谨,只要不是纯数字,结果就是NAN not a number
        console.log(Number(box2));  // NaN


        //  转换字符串类型   .toString()

        var x = 100;
        console.log(x.toString(),typeof x.toString());

        var b = true;
        console.log(b.toString(),typeof b.toString());


        // 转换布尔类型(零值)
        // console.log(Boolean(4>5));
        // console.log(Boolean(8>5));
        // 零值系统 就是任何一个数据类型下面只有一个值对应的是false
        console.log(Boolean("")); // FALSE 空字符串就是字符串的零值
        console.log(Boolean(0));
        console.log(Boolean(1));
        console.log(Boolean(-1));
        console.log(Boolean("0")); // TRUE
        console.log(Boolean(null));
        console.log(Boolean(undefined)); // 比较特殊的是null和undefined都是对应零值
        console.log(Boolean([]));
        console.log(Boolean({}));


        if("false"){ // TRUE
            console.log("注意哦!")
        }

        console.log(1=="1");
        console.log(1+"200",typeof (1+"200"));
        console.log(1-"200",typeof (1-"200"));

    </script>

五、原始数据类型和引用数据类型的区分

原始数据类型存放在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈空间的东西赋值到另一个栈房间,且两个原始变量互不影响。

引用值是把引用变量的名称存储在栈中,但是吧实际对象存储在堆中,且存在一个指针由变量名指向存储在堆中的实际对象,当把引用对象传递给另一个变量的时候,复制的是指向实际变量的指针,此时两者指向的其实是同一个数据,所以改变其中一个另一个的值也会随之改变。但是如果不是通过方法而是通过重新赋值,另一个的值不会随之改变。

    <script>


        // 对象类型
        var arr1=[1,2];
        arr2 = arr1;
        arr1.push(3);
        console.log(arr1);// [1,2,3]
        console.log(arr2);//[1,2,3]

        arr1=[4,5];
        console.log(arr1);//[4,5]
        console.log(arr2);//[1,2,3]

    </script>