JavaScript基础介绍，数据类型，运算符

最新推荐文章于 2023-11-17 10:47:26 发布

idiot_MAN

最新推荐文章于 2023-11-17 10:47:26 发布

阅读量199

点赞数

分类专栏：前端 javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/idiot_MAN/article/details/126192739

版权

前端同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

javascript

21 篇文章 0 订阅

订阅专栏

web三大标准：HTML(结构) + CSS（样式） +JavaScript(行为)

JavaScript

动态效果+数据交互

编程语言

编程让计算机为解决某个问题而使用某种程序设计语言编写程序代码，最终得到结果

是什么？

世界上最流行的语言之一，是一种运行在客户端的脚本语言

脚本语言不需要编译，运行过程中由**js解析器(js引擎)**逐行来进行解释并执行

现在也可以基于Node.js技术来进行服务器端编程

JavaScript作用

表单动态校验
网页特效
服务端开发(nodejs)
桌面程序
APP
控制硬件—物联网
游戏开发

浏览器执行js

浏览器分为：渲染引擎和 js引擎

渲染引擎：用来解析HTML和CSS，俗称内核，比如谷歌浏览器 blink

js引擎: js解析器，用来读取网页中的javascript代码，对其处理后运行，比如谷歌的v8

逐行执行每一句代码

js的组成*

ECMAScript语法，BOM，DOM

js的几种引入方式

行内式

可以将单行或少量js代码写在HTML标签的事件属性中(以on开头的属性) 比如onclick
单双引号要错开使用，HTML中推荐使用双引号，js中使用单引号
可读性差，在html中编写大量js代码，不方便阅读，引号容易弄混

 <input type="button" value="点我" onclick="alert('hello 17期学员 大家晚上好')">

内嵌式

可以将多行js代码写到script标签中
内嵌js是学习最常用的方式

<script>
    alert(123)
    alert(9)
</script>

外部式

适合js代码量比较大的情况
利于HTML代码的结构化，把大段的js代码独立到HTML页面之外，方便复用
引用外部js文件的script标签中间不可以写代码

新建一个js文件，xxx.js

html页面中通过script引入js文件
```
<script src="./index.js"></script>
```

js注释

// 单行注释   ctrl+/

    /* 多行注释 alt +shift+a */

js输入输出语句

alert("浏览器弹出警示框")
        console.log("浏览器控制台输出信息")

        // 浏览器弹出输入框，用户可以输入，有确定和取消按钮
        prompt("输入一个数字")

变量

什么是变量

变量就是一个装东西的盒子（大白话）

变量是用于存储数据的容器，我们通过变量名获取数据，甚至数据可以更改

变量在内存中存储

变量是程序在内存中申请的一块用来存放数据的空间，类似我们酒店的房间，一个房间可以看作是一个变量

变量使用

1.变量声明

/* 
        var是js的关键字，用来声明变量的，用该关键字声明的变量，计算机会自动为变量声明内存空间，不需要程序员管
         name是程序员定义的变量名，我们要通过变量名来访问变量
        */
        var name;   //声明了一个名称为name的变量

2.变量赋值

// 2.变量赋值
        /* 
         把等号右边的值赋值给左边的变量，变量值就是程序员保存到变量空间里的值
        */
        name = "张三";   //给name这个变量赋值为 "张三"

3.变量初始化

 // 3.变量初始化
        var aa = 123;  //声明变量并赋值---称为变量的初始化

4.变量的扩展

/* 
        一个变量被重新赋值，原来的值会被覆盖，变量值将以最后一次赋的值为准
        */
        var bb = 123;
        bb = 44;

        // 同时声明多个变量  同时声明多个变量，只需要写一个var ，多个变量名之间用逗号隔开

        var  age =23,n=34,sex="男";

5.变量的特殊情况

     var cc;
        console.log(cc);   //只声明不赋值，默认值是undefined

        // console.log(dd);   //不声明 不赋值 直接使用   报错:dd is not defined

        ee = 45;
        console.log(ee);   //不声明 只赋值  45

6.变量的命名规范

由字母，数字，下划线，$组成，如：num01，_age, $axios…
严格区分大小写， var a 和var A 是两个变量
不能以数字开头
不能是关键字，保留字 var for if else while do …
要有语义化
遵守驼峰命名法，首字母小写，后面单词的首字母要大写 myFirstName

数据类型

变量存储的数据，可以是各种类型的数据

分两类

1. 简单数据类型

Number数字

 // 简单数据类型
        // 1 Number 数字型
        var age = 23;   //整数
        var f =23.5 ;    //小数

        // isNaN() ---is not a number 判断变量是否为非数字的类型  非数字返回true ，数字返回false

        var usAge = 21;
        var isOk = isNaN(usAge);   //false
        console.log(isOk);

        var username = "lucy";
        console.log(isNaN(username));  //true

字符串

字符串可以是引号中的任意文本，语法是双引号 " " 和单引号 ‘’

// 字符串可以是引号中的任意文本，语法是双引号 " " 和 单引号  ''

var str ="欢迎大家";
var str1 = '大家好';

// var str3 = hello ;  报错  hello is not defined 没有使用引号，会被认为是js代码，但是js没有这个语法

// 单双引号要错开使用
var str3 = "我是 '高富帅'";
var str4 = '我是"高富帅"';

// 字符串转义符
// 类似于HTML里的特殊符号，字符串也有特殊符号，我们称为转义符
// 转义符 都是以  \ 开头的
/* 
 \n  换行符
 \\  斜杠
 '  单引号
 "  双引号
  \t tab缩进
  \b 空格

*/

alert("hello 大家好，\n\t\t\t欢迎来\b\b到 '丁鹿学堂' 17期")

// 检测字符串的长度  length
var str5 = "my name is lucy";
console.log(str5.length);  //15

// 字符串拼接  + 只要由字符串和其他类型变量/值拼接，最终的结果是字符串
console.log("沙漠"+"骆驼");    //"沙漠骆驼"
console.log("丁鹿学堂"+13) ;  //"丁鹿学堂13"
console.log("丁鹿学堂" + true); //"丁鹿学堂true"
console.log(12+13);   //25  number
console.log("12"+24);  //"1224"



var  age=12;
console.log("我的年齡是age岁");  //我的年齡是age岁
// 引引相加
console.log("我的年齡是"+age+"岁");  //我的年齡是12岁

Boolean布尔

布尔类型由两个值: true 和false,true表示真，false表示假

// 布尔型和数字型相加  true为1  false为0
var flag = true;

var flag1=false;
// true参与加法运算  当1来看
console.log(flag+1);  // 2

// false 参与加法运算  当0来看
console.log(flag1+1);  //1

undefined和null

// 一个变量只声明不赋值，值为undefined，数据类型也是undefined

        var str;
        console.log(str);  //undefined
        console.log(str + 1);  //NaN

        var str1 = undefined;
        console.log(str1 + "hello");  // "undefinedhello"
        console.log(str1 + 1);  //NaN  not a number   undefined和数字相加，最后的结果是NaN

        // 一个声明的变量给null值，里面存的值为空 (学习对象，研究null)
        var space = null;
        console.log(space + "hello");  //"nullhello"
        console.log(space + 1);  //1

2. 复杂数据类型

获取变量的数据类型 typeof

// 获取变量数据类型
var num=12;
console.log(typeof num);  //number
console.log(typeof "xiaoxiao");  //string
var bol = true;
console.log(typeof bol);  //boolean

var boll;
console.log(typeof boll);  //undefined
var bol2 = null;
console.log(typeof bol2);  //object

字面量

字面量是在源代码中一个固定值的表示法，通俗点说，就是字面量表示如何表达这个值

数字字面量  3,2,5,6
字符串字面量   "前端"
布尔字面量   true  false

数据类型转换

// 数据类型转换

// 使用表单，prompt获取过来的数据默认都是字符串类型，不能进行简单的加法运算，需要进行数据类型转换

// var s = prompt("请输入一个数字");   //点确定 s的值为输入的值   点取消 s的值为null
// console.log(typeof s)
// console.log(s+3)

// 转换为数字型

// parseInt(s)  转换为整型
// console.log(parseInt(s));  // "123" ---123  "123sss"---123  "ss23"-- NaN   "2w2" ----2   "12.4"---12
console.log(parseInt(true))  //NaN

// parseFloat() 转换为浮点型

// console.log(parseFloat(s));// "123" ---123  "123sss"---123  "ss23"-- NaN   "2w2" ----2  "12.4"---12.4
console.log(parseFloat(true))  //NaN

// 强制转换  Number
// console.log(Number(s));  //"123" ---123  "123sss"---NaN  "ss23"-- NaN   "2w2" ----NaN  "12.4"---12.4

// 隐式转换 
console.log("23"-12) ;  //11

console.log("23"*12) ;  //276

console.log("23"/12) ;  //1.9166666666666667


// 转换为字符串型
var num = 78;
console.log(typeof num.toString())

var flag =true ;
console.log(typeof flag.toString())
console.log(num.toString())  //"78"

// String() 强制转换
console.log(typeof String(90))   //string   "90"
console.log(String(true))  //"true"

// 隐式转换
// 字符串和任何类型相加都是字符串
console.log("!23"+12);  //"!12312"
console.log("!23"+true);  //"!123true"


// 转换为布尔型
console.log(Boolean(null))  //false
console.log(Boolean(undefined))  //false
console.log(Boolean("123")) //true
console.log(Boolean(123))  //true
console.log(Boolean(""))  //false
console.log(Boolean(0))   //false
console.log(Boolean(1))  //true

console.log(true + 0)  //1
console.log(false +0 )  //0
console.log(true + 1)  //2
console.log(false +1)  //1

运算符

递增递减运算符

算术运算符

x +- */%       
console.log(12+34);        
console.log(34-12);        
console.log(2*8);       
console.log(98/23);      
console.log(98%9);

递增递减运算符

如果需要反復的给数字变量添加和减去1，可以使用递增（++）递减(–)运算符

++ – 可以放到变量的前面（前置递增）也可以放到变量的后面（后置递增）

递增递减运算符必须和变量配合使用

var num = 3;

num += 1;    //num = num +1  把=右边的值赋给等号左边  4

num -= 1;   //num = num -1   3

num *= 7;   //num = num * 7   21

num /=2 ;   // num = num / 2;   10.5

num %= 3   //num = num % 3;`  1.5
// console.log(num)


// 前置递增就是自加1   ++num  类似于  num = num +1

var num1 = 10;
num1 ++;   //11

++ num1;  //12

// 前置递增 和后置递增如果单独使用，效果一样，都是自增，类似于 num1 = num1 +1


// 先加1 (自身自增变为13 ) 后运算
console.log(++num1 + 10);   //23   num1 = 13
// 后置递增  先运算 后自增
console.log( num1++ +10);   //23   num1 = 14

/* 
前置递增 和后置递增如果单独使用，效果一样，都是自增，类似于 num1 = num1 +1
前置递增 先自身加1 后运算
后置递增  先运算 后加1
*/


// console.log( num1++ *10)



var age=13;
++ age;
var b = ++age +2;
console.log(age,b)  //15,17
// --------------------


var i = 10;
alert(10 + i++);  //alert(20) i =11

// --------------

var b = 2;
var c = 3;
console.log(b++ +c);  //5   b=3  c =3
console.log(b)  //3
console.log(++b + c)  //b=4  7
console.log(b);  //4
console.log(b++ + ++c);  //c =4  4+4=8 b=5
console.log(b + "," +c)  //5,4

// 左边后置加的时候为5   后面的是前置  但是左边先的，结束加1  所以有++b = 7
console.log(b++ + ++b);  //5 + (6+1) =12
console.log(b)  //7


// 递减

var bb = 13;
bb --;
-- bb;
console.log(bb)  //11

console.log(bb-- - --bb)   //11 - (10-1)=2

// console.log(--bb - bb--);  //10 -10 =0`2`2

比较运算符

两个数据进行比较使用的运算符，比较运算符会返回一个布尔值 true/false

        // 小于号  <
        console.log(4<9);  //true
        // 大于号  >
        console.log(8>10);  //false

        // 大于等于
        console.log(9>=9);  //true

        // 小于等于
        console.log(3<=2); //false

        // 不等于
        console.log(3!=5);  //true

        // ==   只判断值
        // 默认转换数据类型，把字符串型的数字转换为数字型  值相等就行
           console.log(13=="13");  //true
           console.log(3==5);  //false

           console.log("hello"=="liudh"); //false

        // ===   值和数据类型都必须相等
        console.log(13==="13");  //false

逻辑运算符

/* 
&& 逻辑与 and   true && false
|| 逻辑或 or    true || false
！ 逻辑非  not  !true
*/

// 两侧都为true 结果为true  只要有一侧为false 结果是false
console.log(true && true);   //true
console.log(true && false);  //fase
console.log(false && true);  //fase
console.log(false && false);//fase

console.log(3>5 && 3>2);   //false && true   false
console.log(3<5 && 3>2) ;  //true && true    true

    // console.log(1 && 0);


// 逻辑或   两侧都为false 结果才为false 只要有一侧为true 结果就是true
console.log(true || true);   //true
console.log(true || false);  //true
console.log(false || true);  //true
console.log(false || false);//fase

console.log(3>5 || 3>2);   //false && true   true
console.log(3<5 || 3>2) ;  //true && true    true


// 逻辑非
console.log(!true);   //false
console.log(!false);  //true
console.log("---------------------------------------------------")



/* 
短路运算原理：有多个表达式(值)时，左侧的表达式可以确定结果时，就不再继续运算右边的表达式的值



*/

// 逻辑与
// 表达式1 && 表达式2
// 第一个表达式值为真，返回第二个表达式
// 第一个表达式为假，返回第一个表达式
console.log((3+4)&&9);  //9
console.log(1&&0);  //0
console.log(0&&1);  //0

console.log("-------------")
// 逻辑或
// 表达式1 || 表达式2
// 第一个表达式值为真，返回第1个表达式
// 第一个表达式为假，返回第2个表达式
console.log((3+4)||9);  //7
console.log(1||0);  //1
console.log(0||1);  //1


var num;
console.log(num&&num>3)  ;  //
console.log("-------------")

console.log(null && 5);  //null
console.log(undefined && 7) // undefined
console.log("123"&&8);  //8
console.log(""&&8);  //""

三目(三元)运算符

// 条件?'表达式1':"表达式2"

var num = 2;

num>2?console.log(23):console.log(34)

var b = num>1?"hello":"word";
console.log(b)

运算符优先级

优先级                    运算符
1                         小括号
2                         ++  -- ！
3                         算数运算符   先 * / %  后 + -
4                          >  >=  <
5                          == !=  ===
6                           先&& 后 ||
7                             =