js笔记-基本数据类型和操作符

已于 2022-10-24 14:44:41 修改
阅读量841 收藏
点赞数 2
分类专栏： 前端 web前端 文章标签： 1024程序员节
于 2022-10-24 14:37:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41032034/article/details/127491474
版权

js简介

es是一个标准，而这个标准需要由各个厂商去实现。

不同的浏览器厂商对该标准会有不同的实现。

| 浏览器            | JavaScript实现方法 |
| ----------------- | ------------------ |
| Firefox           | SpiderMonkey       |
| Internet Explorer | JScript/Chakra     |
| Safari            | JavaScriptCore     |
| Chrome            | V8                 |

ES是JS的标准，DOM文档对象模型BOM

     ES标准
            - 基本语法
        DOM
            - 文档对象模型，用来操作网页
        BOM
            - 浏览器对象模型，用来操作浏览器
- JS的编写位置：
        1.编写到script标签中

//script标签中
     <script> js代码 </script>

       2.编写到外部的js文件中

    
 //html
      <script src="xxx.js"></script>
 

    
    ​    3.编写到标签的指定属性中

    
   
      <button onclick='js代码'></button>
            <a href="javascript:js代码"></a>
   

JS的输出语句
    警告框：


        alert('xxx');

在控制台输出日志 ***** ：

console.log('xxx');

 在网页中打印内容：        

document.write('xxxx');

单行注释 //

多行注释/**/

编写规范

1.JS中每一个语句都应该以分号结尾

  --在js中有自动添加分号的机制，所以即使不写也不会报错

2.Jsh中严格区分大小写

3.js会忽略多个空格和换行，所以通过空格和换行来对代码格式化

字面量和变量

字面量

​    字面量就是一个一个的值，像1、2、'hello'、true、NaN ...

​    所有的字面量在JS中都可以直接使用，但是一般不会这么做

变量

变量用来存储值，一个变量可以用来“存储”任意值

并且变量中“存储”的值可以任意修改

​    JS中的变量并没有直接存储值，而是存储值的内存地址

​    JS中的变量更像是一个值的别名

变量的使用

- 声明变量：
    let 变量名;
    var 变量名;（老版本）

- 为变量赋值
    变量名 = 值;

- 声明和赋值同时进行
    let 变量名 = 值;
    var 变量名 = 值;

- 声明常量
    const 常量名 = 值;

    常量只能进行一次赋值

MDN的使用

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/

- 标识符

    在js中所有可以自主命名的内容都可以认为是标识符
    像：变量名、函数名、类名、(属性名)

    mdn地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar

    规范：
    1.标识符中可以含有字母、数字、_、$，但是不能以数字开头
    2.标识符不能是js中的关键字和保留字，也不建议使用js中的函数、变量名作为标识符
    3.标识符采用驼峰命名法
        小驼峰

    首字母小写，每个单词开头大写，其余小写
    xyyyzzz --> xxxYyyZzz
        大驼峰（类名）

    首字母大写写，每个单词开头大写，其余小写
    xyyyzzz --> XxxYyyZzz

数据类型（值的类型）
基本数据类型（不可变类型）

string（字符串）
- JS中的字符串使用引号引起来

- 单引号、双引号都行，但是不要混合

- 同类型的引号不要发生嵌套

- 转义字符串，js中使用 \ 作为转义字符


    \' -->  '
    \" -->  "
    \t -->  制表符
\n -->  换行
    \\ -->  \
     

用控制台写alert()和console.log()用\n

网页中的话是document.write();

<html lang="zh"></html>

其中zh表示英文 ch表示中文

模板字符串(IE不支持)

-使用反单引号`来创建模板字符串

-特点：

        1.可以换行，并保留字符串中的格式

        2.在模板字符串中可以直接嵌入变量

变量的语法${变量}

let str = `hello
hello
hello
hello`
let name = '小苏';
str = `我好喜欢${name}`;

数值

在js中，所有数值包含整数和（浮点数）小数都属于number类型

--在js中可以确保大部分的整数运算得到一个精确的结果

--在js中，小数运算有可能得到一个不精确的结果

在js中不要做对精度要求很高的运算（尤其涉及到钱）

--当数值超过一定的范围后，会使用Infinity来表示

Infinity表示正无穷

--NaN也是一个特殊数字，表示Not a Number 非法数字

变量加log 自动生成代码

typeof运算符用

--来检查一个值的类型

--使用typeof检查一个字符串时，会返回string

检查一个数值时，它会返回number

let num1 = 10;
let str = "10";
console.log(type str)//string
0b表示二进制  0o表示八进制  0x表示十六进制
let num9 = ob10;//二进制
num10 = 0o10;//八进制
num11 = 0xff;//十六进制
在es中  提供了一个新数字类型bigint 表示大整数（了解）
let num10 = 100n;
console.log(num10);

布尔值、undefined和null

布尔值（boolean）

--布尔值用来进行逻辑判断

--布尔值有两个：

true 真

false 假

--使用typeof检查一个布尔值会返回boolean

null 通常用来表示一个空的对象，一个不存在的东西

null类型只有一个值 就是null

--使用typeof检查一个null时，它返回object

undefined 表示未定义的，当我们定义一个变量但是不赋值时它就是undefined

undefined类型的值只有一个，就是undefined

--使用typeof检查一个undefined时，会返回’undefined‘

基本数据类型：

--基本数据类型是构成整个js世界的基石

数值（number）

字符串（string）

布尔值（Boolean）

未定义的数据类型（undefined）

空值（null）==》返回object

--js中的所有的基本数据类型都是不可变类型

值一旦创建就不可修改

--js中的变量并不直接存储，而是存储内存的地址

变量和值的内存结构

类型转换--字符串

类型转换：将其他的数据类型转换为string number boolean

将其他类型转换为字符串

方式一：

调用被转换类型的toString()方法

--调用xxx的yyy方法 -- > xxx.yyy()

--由于null和undefined中不包含有toString()所以调用会报错 ​

let a = 10;
a = NaN;//NaN --> 'NaN'
a = true;// true --> 'true'
a = undefined;//报错
a = 33;//报错
console.log(a,typeof a);

方式二：

调用String()函数，来将被转换类型转换为字符串

--调用xxx函数---> xxx()

--原理：

对于具有toString（）方法的值，就是直接调用toString()对其进行转换

但是对于null来说，它是直接将其转换为’null‘

undefined直接转换为’undefined‘

let a = 10;
a = NaN;//NaN --> 'NaN'
a = true;// true --> 'true'
a = undefined;//undefined --> 'undefined'
a = null;//null --
a = 33;
​
console.log(a,typeof a);
a = String(a);
console.log(a,typeof a);

注意只要不重新赋赋值 变量是不会变的

类型转换--数字

使用Number()函数来将一个其他类型转换为数字

转换的情况:

字符串：

如果字符串是一个合法的数字，则直接转换为数字

如果字符串不是一个合法的数字，则直接转换为NaN

如果是空串和空格字符串会转换为0

布尔值：

true --> 1

false --> 0

除了number以外还有两个函数是专门用来将一个字符串转换为数字的

parseInt（）

--将一个字符串解析为一个 整数

--该函数会自左向右依次读取一个字符串的字符

直到找到字符串中所有合法的整数为止

parseFloat（）

--将一个字符串解析为一个小数

--字符串中只返回第一个数字。

--开头和结尾的空格是允许的。

-- 如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

let  a = '122'//123
a = '3.14';//3.14
a = 'abc';//NaN
a = '0xff'//255
a = 'Infinity';//Infinity
a = '123px'; //NaN
a = null; //0
a = undefined; //NaN
a = '';//0
a = '  ';//0
a = Number(a);
console.log(a,typeof a);
let b = '123px';
b = parseInt(b)//parse作为语句分析 美[pɑːrs]
console.log(b,typeof b);//123 "number"

类型转换--布尔值

使用Boolean()函数来静其他类型转换为布尔值

--所有没有或者错误的都会转换为false

--对于数值：

除了0和NaN，都是true

--对于字符串：

空串是false, 其他都是true

--null和undefined都是false

--一般情况下对象都会转换为true

--false 的情况

0、NaN，’‘、false、null、undefined

let a = 10;//true
let a = -44;//true
let a = 0;//true
let a = ' ';//true
let a = '';//false
a = null;  //false
a = undefined; //false
console.log(a,typeof(a));
a = Boolean(a);
console.log(a,typeof(a));//true

算数运算符（操作符）

--通过运算符可以对一个值或者多个值进行各种运算

--对一个值进行运算的运算符，称为一元运算符

对两个值进行运算，称为二元运算符

依次类推

--算数运算符

+ - * / **（幂运算） %（取模=取余数）

let result = 10 + 33;
result = 10/0;//infinity
result = 2 ** 10;//2的10次幂1024
result = 16 ** 0.5;//16的平方根
result = 16 ** 0.5;//16的平方根
result = 10 % 2;//0
result = 10 % 3;//1
result = 10 % 4;//2
//如果对于两个字符串做加法运算，则会将两个字符串拼接为一个字符串
console.log(result);

除了字符串的加法以外，对其他类型的值进行算术运算时候

都会转换为数值然后再进行运算

所以我们可以通过一个任意值-0 、*1方式来将其转换为数字

这种方式称为隐式类型转换，它的原理和Number()函数一样，会更加简单

--任何值和NaN做任何运算结果都是NaN（除了字符串加法）；

let result = 'hello' +'哈哈';
result = true + false;//1
result = 1 +true;
result = 456 * null;
result =  456 * NaN;//NaN
result = 33 - undefined;//NaN

拼串

任何值和字符串做加法时都会转换为字符串

然后再和字符串进行拼串

利用这个特点，可以通过为一个任意值 加上一个空串（‘’）的形式和String()一样，来将其转换为字符串

let a ="hello" + 123;
a = 'hello' + NaN;//'hello' + 'NaN'
a = a+'';
let b = 340;
b = 45;
console.log('b=' + b);
console.log('b=' , b);
console.log(`b=${b}`);

运算符

一元运算符

typeof

--检查一个值的类型

--一元的+（正号）

不会对数值产生任何影响

--一元的-（负号）

会对数值进行符号取反

--对于非数值类型的值进行正负运算时

它会先将其转换为数值然后再运算

--利用一元的+，可以将一个任意类型的值转换为数值，

原理和Number（）函数一样，但是更加的简单

let a = 10;
a = +a;
a = true;
console.log(a,typeof a);
a = +a;

自增和自减

自增（++）

-- 自增分为前++ 和 后++

-- 无论是++a 还是a++，对于a来说都是一样的

都会使变量a 立刻增加1

-- a++和++a返回的结果是不同的

a++ 返回的是变量自增前的值，旧值

++a 返回的是变量增后的值，新值

自减（--）

--自减分为前--（--a）和后--（a--）

--无论--a还是a--都会使变量a立刻自减1

-- a--和--a返回的结果是不同的

a-- 返回的是变量自增前的值，旧值

--a 返回的是变量增后的值，新值

//eg:1
let a =10;
//++a;
console.log('++a = ',++a);//11
console.log('a++ = ',a++);//11
console.log('a = ',a);//12
​
//eg:2
let a =10;
a = a++;//类似于a++
console.log('a = ',a)//10
​
//eg:3
//           10    12    12
let result = a++ + ++a + a;
console.log('result =',result)

赋值运算符

-用来将一个值赋值给一个变量

= =用于将符号右侧的值赋值给左边的变量

+= a+= x 等价于 a = a +x

-= a-= x 等价于 a = a -x

*=

--a*= x 等价于 a = a *x

/= a/= x 等价于 a = a /x

**=

--a**= x 等价于 a = a * *x

%= a%= x 等价于 a = a %x

//等号左面的是变量右面的是值
let a = 10;
//let b = a;
a +=5;//a = a + 5;
console.log(a);

那些情况会导致变量发生变化（为变量进行重新赋值）

1.对变量使用赋值运算符

a = xx；

a += xx

a -= xx

2.对变量使用自增和自减

a++

++a

a--

--a

逻辑运算符

！逻辑非

--!可以对一个值进行非运算（取反操作）

&& 逻辑与 （and）

--可以对符号左右两侧的值进行与运算

--如果两侧的值都是true，则返回true，否则返回false

--与运算是找false

--与运算是短路的与

如果第一个值是false，则不会去看第二个值

true || alert('你猜我');//第一个值是true，不看第二值
false || alert('你猜我');//第一个值是false，看第二值

|| 逻辑或 （or）

--可以对符号两侧的值进行或运算

--如果两侧有一个true，就返回true，否则返回false

--或运算是找true

--或运算是短路的或

如果第一个值是true，则不会看第二个值

true || alert('你猜我');//第一个值是true，不看第二值
false || alert('你猜我');//第一个值是false，看第二值

非布尔值的逻辑运算

与运算：&& 找false

--如果对非布尔值进行与运算；

会将其转换为布尔值，然后运算，最终返回原值

--如果第一个值是true，则返回第二个值

如果第一个值是false，则返回第一个值

或运算：|| 找true

--如果第一个值是false，则返回第二个值

如果第一个值是true，则返回第一个值

&&是找false
//true&&true
let result = 'hello' && 1;//1
result 1 && 'hello';//'hello'//'hello'
//true && false
result 1 && NaN;//NaN
//false && true
result NaN && 1;//NaN
||是找true
result = 1 ||'hello';//1
result = 1 || true;//1
result = NaN || 'hello'//hello
result = NaN || 0;//0
result = NaN || 3;//3

关系运算符

//小的案例 && 看false
let a = 123;
​
//将a转换为字符串，调用toString()来转
a = a && a.toString();
console.log(a,type a);
使用关系运算符时，如果关系成立则返回true，不成立则返回false

​关系运算符，用来比较两个值之间的大小等于的关系

">"

--比较左侧值是否大于右侧的值

">="

--比较左侧值是否大于等于右侧的值

< <=和上面类型

对于非数值类型的值进行大于小于的比较时，

浏览器会自动将其转换为 数字 然后再比较

注意： 如果比较两个字符串的大小，则情况比较特殊

特殊情况：

--当比较运算赋符的两侧都是字符串时，它不会将其转换为数字进行比较 而是逐位比较字符串的字符编码,利用这个特点可以对一个字符串按照字母顺序来进行排序

//1>0
let result = true > false;//true
result = 10<'55';//true
result = 10 < '5';//false
result = true < '5';//true
result = null < '5';//true
//任何值和NaN作比较最后结果都是false
result = null <= undefined;//false
result = 'c' < 'b';//true 
result = 'a' < 'b';//false  a--> 98
result = '10' < '5';//true

相等运算符

==

--相等运算符用来比较两个值是否相等

--相等运算符会对值进行自动的类型转换

如果比较的两个值的类型不同，会将其转换为相同类型然后再进行比较

通常情况下，不同类型都会转换为Number然后再比较

null 和undefined做相等比较时，会返回true

===(全等)

--全等用来检查两个值是否全等

--全等运算不会发生自动的类型转换，

如果两个值的类型不同，直接返回false

--null 和undefined做相等比较时，会返回false

console.log(10 == 10);//true
console.log(10 == "10");//true
console.log(true == "1");//true
console.log(true =="true")//false
console.log(null == 0); //false
console.log(null == undefined);//true
//NaN不和任何值相等，包括它自己
console.log(NaN == NaN);//false
console.log(NaN === NaN);//false

检查一个值是否为NaN时，需要使用函数 isNaN()

console.log(isNaN(a));

!=(不相等)

--比较两个值是否不相等

--如果不相等返回true，相等返回false

--会做自动类型转换，将两个值转换为相同的类型然后再比较

!==(不全等)

--比较两个值

--如果不全等返回true，全等返回false

--不会做自动类型转换，如果两个值的类型不同，直接返回true

条件运算符

又称为（三元运算符，三目运算符）

--语法：

条件表达式 ？语句1 : 语句2

--执行流程：

条件运算符在执行时，会先对条件进行求值判断

如果判断结果为true，则执行语句1

如果判断结果为false, 则执行语句2

false ? alert('语句1') : alert('语句2');
let num = 10;
num > 20 ? alert('num比20大！') : alert('num比20小！')
//eg:1
let a = 10;
let b = 30;
let max = a > b ? a : b;
let min = a > b ? b : a;

运算符的优先级

和数学运算一样，JS中运算符也有优先级的问题

比如：先乘除后加减

运算符的优先级根据运算符有限级表来决定

在表中，位置越靠上的优先级越高，优先级越高越先计算

优先级一样，按照从左到右的顺序依次计算

参考MDN：运算符优先级 - JavaScript | MDN

let result = 1 + 2 * 3;

优先级的表不需要记忆，遇到优先级不清楚的，可以通过（）来改变优先级

let result = (1+2)*3;
result = (1 || 2) && 3;
//可选链操作符
let a = null;
a?.toString();//undefined
​
一路小跑干前端
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS基础—数据类型
七的博客
05-24 2463
这里写目录标题一级目录二级目录三级目录 一级目录 二级目录 三级目录
【JS】基础数据类型
最新发布
dan112831905的博客
12-18 241
【JS】基础数据类型
各浏览器之间的css差异，常见IE兼容性问题
weixin_46020319的博客
01-08 1092
1、IE不支持模板字符串，需要兼容IE的项目，千万不要写模板字符串； 2、IE与谷歌等浏览器的默认字体不同，在css初始化样式的时候，最好设置一个默认字体； 3、IE9以下不支持flex布局； 4、有的IE版本不支持css设置值为none，可以写0； 5、background: url(…/images/member_right.gif) 0 -35px ; IE和chrome中 -35后面的’px’可要可不要,但是firefox则必需加上,Safari和Opera暂无测试; 6、padding属性；IE设
如何解决IE11不兼容ES6的模板字符串
热门推荐
6块腹肌的博客
06-10 1万+
IE浏览器再词法分析阶段如果遇到ES6的模板字符串，就会抛出错误，导致程序无法正常运行。 这时候需要将ES6的模板字符串改写为普通的单引号或者是双引号来代替，如果只有多行字符串，就需要在换行处使用加号进行连接，在第二行继续使用引号，如： '<li>000/li>'+ '<li>111</li>' ...
es6学习之模板字符串 ``
Ace_with_Yu的博客
05-29 554
ES6引入了一种新型的字符串字面量语法，称之为模板字符串。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外，它们看起来与普通字符串并无二致。但是它为JavaScript提供了简单的字符串插值功能，可以通过一种更加美观、更加方便的方式向字符串中插值var a = 2, b = 3 console.log(`输出a的值:${a},输出b的值：${b}`)...
关于ie中不支持$('').get(0).style
菲你莫属的博客
09-19 815
关于ie坑死人的bug之一
关于ie浏览器不支持es6的模板字符串
weixin_44363296的博客
01-08 2202
使用es6的模板字符串用ie打开会抛出错误 例如: 原来的切换是这么写的 //全局变量 2 -- 右侧项目窗口 html 内容并追加到页面 var generateContainer = $('body.full-height-layout'); var data = `<div class="right-wind-box" close-state="open"> <div class="arrow-btn">
第2章 JavaScript数据类型--1（概述和基本数据类型）—读书笔记
bailizx
11-28 182
目录 2.1 JavaScript数据类型 2.2 Undefined类型和Null类型 2.3 Boolean类型 2.4 Number类型 2.5 String类型 2.1 JavaScript数据类型 1 数据类型 基本数据类型（五种）：Undefined、Null（空对象的引用）、Boolean（布尔值）、Number（数值）、String（字符串） 一种复杂数据类型：...
javascript从入门到跑路—–小文的js学习笔记（3）———javascript中的数据类型
01-20
在本文中，我们将探讨JavaScript中的数据类型，以及如何使用`typeof`操作符来检测变量的数据类型。 首先，`typeof`是一个JavaScript的关键字，用于检测变量或表达式的数据类型。它可以返回一个字符串，表示变量的...
JavaScript数据类型学习笔记分享
11-24
在这篇学习笔记中，我们将探讨JavaScript中的主要数据类型，包括引用类型、Object类型和Array类型。 1. 引用类型 引用类型的值是对象，它们是引用类型的一个实例，提供了数据和功能的组合。这种数据结构常被称为类...
IE11兼容性问题完美解决（用户代理字符串）
09-11
IE11兼容性问题完美解决（用户代理字符串），用于解决win8/win8.1下IE11的兼容性问题
JavaScript数据类型学习笔记
10-22
在JavaScript中，数据类型分为两种：基本数据类型（简单数据类型）和复杂数据类型。 基本数据类型包括Undefined、Null、Boolean、Number和String。这些类型的值在内存中占据固定大小的空间，它们是非引用类型，意味...
ie浏览器不支持es6 模板字符串_javascript常问面试题：获取浏览器页面有多...
weixin_35578119的博客
01-04 734
第一种：set (ES6新特新)new Set(document.getElementsByTagName('*')).size第二种：遍历去重function unique(arr){ var newArr = []; for(var i = 0; i < arr.length; i++){ for(var j = i+1; j < arr....
chrome js获取当前机器名_js常见兼容性问题
weixin_42231085的博客
12-23 973
1.关于获取行外样式currentStyle和getComputedStyle出现的兼容问题我们都知道js通过style不可以获取行外样式，如果我们需要获取行外样式就会使用这两种ie下：currentStylechrome,FF下：getComputedStyle 第二个参数的作用是获取伪类元素的属性值//封装一个获取行外样式的函数（兼容所有浏览器，包括低版本ie6,7）function getS...
IE11兼容
spfLinux的博客
04-02 1865
最近在做一个项目的时候，发现如下IE11兼容性问题：（1）js中不支持使用模板字符串（反引号）；（2）new ActiveXObject只能在IE下使用，谷歌浏览器下不能使用；（3）前面封装的ajax.js在IE11下不能使用，有兼容性问题；（4）html中有代码需要js中的函数，例如onclick，那么需要的文件或者函数必须放在该html代码段上方。在谷歌浏览器下，是可以放在下方的。...
深入浅出ES6（四）：模板字符串
work hard
03-17 5910
在上一篇文章中，我说过要写一篇风格迥异的新文章，在了解了迭代器和生成器后，是时候来品味一些不烧脑的简单知识，如果你们觉得太难了，还不快去啃犀牛书！ 现在，就让我们从最简单的知识学起吧！ 反撇号（`）基础知识 ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 "外，它们看起来与普通
JavaScript高级程序设计核心笔记-ECMAScript与DOM解析
"《JavaScript高级程序设计》笔记涵盖了JavaScript的基础到高级概念，包括其历史、实现方式、在HTML中的使用，以及基本语法、数据类型、操作符、语句和最佳实践。JavaScript起源于Netscape公司的开发，由ECMAScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值