前端三剑客——javascript变量与数据类型

javascript：编程语言（解释型）

大纲：

1.注释方法

2.js中断句形式（, 和 ;）

3.js存在形式与引入

4.变量与常量的声明和定义

5.基本数据类型及方法

6.数据类型的转换

7.隐式转换

8.三元表达式

注释方法

js中断句形式

“ , ”: 对象的属性和方法用 , 分割

“ ; ”: 语句的借宿用 ; 分割

js存在形式与引入

1.外部js（一般位于static目录的js文件夹下面）

引入：<script src="./static/my.js"> </script>

2.内部jjs（一般位于head标签的css样式下面或 body标签结束位置）

head标签里

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert(1);        //alert弹窗
    </script>
</head>

body标签结束位置

<body>
<h1 id="h1"><span>你好</span></h1>

<script>
    alert(h1.innerHTML);
    alert(h1.innerText);
</script>
</body>

1-> 2-> 3->

原因：单线程

3.行间js：一般写在元素的指定属性值中

变量与常量定义和声明

1，变量 var let

声明：变量首次出现用var或者let关键字进行声明，后续使用改变量无须加关键字 var全局变量 let局部变量

定义：var 变量名 = 值 let 变量名 = 值

2.常量 const

声明：用const声明

定义：const 变量名 = 值

3.超全局对象进行属性赋值不用var let const声明 name = "guoahn" 即name是全局对象Window的属性而不是一个变量

<body>
<script>
    name = 200;     //本质写法：this.name = 200  不是进行声明变量 而是对Windou对象进行属性赋值   
    console.log(this);      //Window
</script>
</body>

基本数据类型及方法

通过typeof进行查看类型 console.log(typeof num);

与python区别：1.python3中bool类型是int类型的子类而js中2者是完全不相干的数据类型

2.js中Array表象相当于python中的list

3.js中Object表象相当于python中的字典

4.js中Array类型属于Object类型

1.String类型

声明： var name = "guohan"； var name = String（“guohan”）;

常见方法： 1.length var v = name.length；

2.索引 var v = name[0];

3.切片 var v = name.substring(0，2)；

4.去除空白 var v = name.trim（）；

5.字符串重复 repeat(次数);

var content;
for (let i = 1; i <= 4; i++) {
    content = "";
    content = "*".repeat(i);
    console.log(content);
}

2.Array类型（属于Object类型）

声明： var v =["guohan","gh"]; var v = Array["guohan","gh"];

常见方法： 1.length 2.索引（改/查）

3.增： 3.1 尾部增加：v.push("你好")；

3.2 头部增加：v.unshift("你好")；

3.3 索引增加：v.splice（索引位置，0，元素）； v.splice(1,0,"你好"）；

3.4 下标增加：

var data = ["guohan","gh","gg"];
data[4]=1                               //索引为4的值为1
console.log(data,data.length);          //['guohan', 'gh', 'gg', 空, 1]  5

var data = ["guohan","gh","gg"];
data["xx"]=1
console.log(data,data.length);          //['guohan', 'gh', 'gg', xx: 1]  3

4.删： 4.1 尾部删除：v.pop();

4.2 头部删除：v.shift();

4.3 索引进行删除： v.splice(索引位置，1)；

5.判断是否是数组：Array.isArray(变量) 返回boolean类型 console.log( v , Array.isArray(v))；

补充：forEach(数组的内置方法）: 遍历数组的每个元素并对每个元素进行一次指定的函数（回调函数）

//数组.forEach((当前元素，当前下标，原数组)=>{函数代码语句;});

var obj = ["guohan","gh","gg","hh"];
obj.forEach((item,key)=>{console.log(item)})        //数组.forEach((当前元素，当前下标，原数组)=>{函数代码语句;});//里面是匿名函数新写法
//obj.forEach(item=>{console.log(item)});

3.Object类型例：const obj = { name: "张三", age: 18 }; 对象的属性可以是任意数据类型的数据如 1（属性）：2（值）

声明：

方式一（直接创建有属性有方法的对象）属性名与属性值之间必须用 : 连接

<body>
<script>
    var Person = {
        name : "guohan",            //属性和方法用,隔开   属性和属性值用:
        age : 22,
        say(){
            return "你好"
        }
    };
    console.log(Person,Person.say());
    
</script>
</body>

方式二（用函数创建对象）

<body>
<script>
    function Info(name,age){
        this.name = name;
        this.age = age;
        this.say = function(){
            return "你好"
        }
    };
    var obj = new Info("guohan",22)
    console.log(obj,obj.say());
</script>
</body>

方式三（用类创建对象）

<body>
<script>
    class Person{
    constructor(name,age){              //初始化   constructor相当于python中__init__方法
        this.name = name;
        this.age = age;
    }
    say(){
        return "你好"
    }
    };
    var info = new Person("guohan",22);
    console.log(info,info.say());
</script>
</body>

方式四（创建空对象，添加属性和方法）不常用

//创建对象(Object)方式二(创建空对象再去添加属性和方法)
var Info = new Object();
Info.name = "guohan";
Info.age = 18;
Info.say = function(){
return "你好";
};
console.log(Info);

常见方法: 1.length

2.增/改/查类似python

3.删 delete info["属性"]

4.undefined类型

触发undefined条件 1.变量未进行赋值 2.变量赋值为undefined

5.null类型（本身也是对象）

相当于python中的None 只有给变量赋值为null时才有null的存在用于进行变量的初始化

数据类型的转换

String

String转Boolen

除了空字符串转为false 其他有类容的字符串（如“ ”（空格）“0”）均转换为true python中纯空格的str转bool是False

//String转Boolean
var name = "guohan";
var name1 = Boolean(name);
console.log(name1,typeof name1);    //true 'boolean'

var age = "";
var age1 = Boolean(age);
console.log(age1,typeof age1);      //false 'boolean'

String转Number

除了纯数字形式的字符串能通过Number进行转换其他符合一定条件的得通过parseInt和parseFloat方法进行转换转换 “-.5”表示－0.5可转

//String转Number
    var age = "10";
    var new_age = Number(age);
    console.log(new_age,typeof new_age);

    var num = "12岁";
    var new_num = Number(num);      //10 'number'
    console.log(new_num,typeof new_num);       //NaN 'number'  NaN是特殊的数值类型  当转换对象不符合条件时才转换成NaN
    console.log(typeof NaN);        //number

String和Array

//String转Array
    var age = "18";
    console.log(Array(age),typeof Array(age));      //['18'] 'object'

Number（较常见）

Number转Number和Number转String和String转Number

1.数值之间可以进行转换：parseInt和parseFloat（Int->Float , Float->Int) 但是Int转Float时不展示小数位

//数值之间的转换   parseInt和parseFloat
var num1 = 10;
var num2 = 3.14;
console.log(parseFloat(num1),parseInt(num2));       //整数转浮点数不加小数位 10 3

2.所有数值类型均可以转成字符串类型

3.字符串类型转数值类型：

只要是数值开头的字符串均可以通过parseInt和parseFloat进行转换注意：千分位表示的数值字符串通过这方法只能识别开头

//字符串转数值

//纯数值形式的字符串     Number
var num3 = "12.3";
console.log(Number(num3));      //12.3
console.log(parseInt(num3));    //12

//以数字开头的字符串转数值     parseInt和parseFloat
var num4 = "3.3公斤"
console.log(parseInt(num4));  //3
console.log(parseFloat(num4));    //3.3

//数值开头的千分位表示法的字符串       parseInt只能识别开头的数值并转换
var num6 = "100_200_300"
console.log(parseInt(num6));  //100

非数值开头的字符串通过parseInt和parseFloat进行转换得到NaN（特殊的数值类型）

//非数值开头的字符串转数字
var num5 = "共3元";
console.log(parseInt(num5));        //NaN

Boolean转Number和Number转Boolean

数值类型转布尔类型

只有0和NaN转成Boolean为false

//数值类型转布尔类型
console.log(Boolean(99));      //true
console.log(Boolean(0));     //false

布尔类型转数值类型

//布尔类型转数值类型
console.log(Number(true));      //1
console.log(Number(false));     //0

隐式转换

/*
隐式转换:    存在于弱类型语言如js php要求不像py那样苛刻
         +规则：俩个数值相加或者两个字符串拼接  
         -规则：两个数值相减
         与python不同：python中隐式转换主要集中于数值运算和布尔判断print(1-True)>>>0  print(1 + 1.1)>>>2.1  if 1:
                       不能print("2"-"1")    即python隐式转换要求苛刻
*/

    //数值类型和布尔类型
    console.log(1+true);    //2
    console.log(1-true);    //0

    //字符串类型和布尔类型
    console.log("guohan"+true);     //guohantrue
    console.log("1"-false);     //1
    console.log("2"-"1");           //1

三元表达式

//三元表达式
/*
    js:条件？真时返回的结果:假时返回的结果
    py:真时的返回结果 if 条件 else 假时返回的结果
*/

//js
age = 18;
var ret = age>=20?"成年人":"未成年人";
console.log(ret);

//py
age = 18
ret = "成年人" if age>=18 else "未成年人"
print(ret)

posted @ 2025-10-29 10:06 guohan 阅读(13) 评论(0) 收藏举报

刷新页面返回顶部

前端三剑客——javascript变量与数据类型

公告