我的笔记

JS基础语法与表达式

Lán2022年11月1日
大约 8 分钟

JS基础语法与表达式

ECMAScript是JavaScript的标准
1997年,欧洲计算机制造商协会(ECMA)设置了JavaScript的标准,命名为ECMAScript

JavaScript的书写位置

在<body>中<script>标签，在内部书写JavaScript代码

将代码单独保存为.js格式文件,然后在HTML文件中使用<script src=""></script>这样的形式引入它

JavaScript不能脱离HTML网页运行（NodeJS将成为JavaScript独立的运行平台）

输出语句

alert()语句，弹出警告框

console.log()语句，控制台输出

变量

声明变量

var a = 5;

变量的合法命名：
只能由字母、数字、下划线、$组成，但不能以数字开头
不能关键字或保留字
变量名大小写敏感，a和A两个不同的变量

这些规则就是标识符的命名规则，函数、类名、对象的属性等也都要遵守这个命名规则。

一个变量只定义，但没有赋初始值，默认值是undefined
一个变量只有被var定义，并赋初始值之后，才算正式初始化完成

如果不用var定义，而直接将值赋予它，虽不引发报错，但会产生作用于问题。

使用逗号同时声明和初始化两个变量

var a = 0, b = 0;

变量声明提升

你可以提前使用一个稍后才声明的变量，而不会引发异常
在执行所有代码前，JS有预解析阶段，会预读所有变量的定义
变量声明提升只提升定义，不提升值
变量声明提升是提升至当前作用域的所有语句之前

数据类型

JS中的两大类数据类型

  • 基本数据类型
    • Number
    • String
    • Boolean
    • Undefined
    • Null
  • 复杂数据类型
    • Object
    • Array
    • Function
    • RegExp
    • Date
    • Map
    • Set
    • 等等

typeof运算符
使用typeof运算符可以检测值或者变量的类型

Number

所有数字不分大小、不分整浮、不分正负，都是数字类型
小数中0可以省略

科学计数法

var a = 3e8;// 300000000 var b = 2e-4; //0.0002

不同进制的数字
二进制数值以0b开头， 0b10 => 2
八进制数值以0开头，017 => 15
十六进制以0x开头，0xf => 15

一个特殊的数字型值Nan
NaN（not a number），即“不是一个数”，但它是一个数字类型的值

typeof NaN; //number

0除以0的结果是NaN，事实上，在数学运算中，若结果不能得到数字，其结果往往都是NaN
NaN有一个奇怪的性质，不自等

String

加号可以用来拼接多个字符串

‘a’+‘b’ // 'ab'

字符串的length属性表示字符串的长度

字符串常用的方法

  • charAt() 获取指定位置字符串
  • substring() 提取子串
  • substr() 提取子串
  • slice() 提取子串
  • toUpperCase() 将字符串变为大写
  • toLowerCase() 见字符串变为小写
  • indexOf() 检索字符串

charAt(index)方法得到指定位置字符，位置从0开始 substring(a,b)方法得到从a开始到b结束（不包括b处）的子串，如果省略第二个参数，返回的子串会一直到字符串结尾。a可以大于b，数字顺序将自动调整为小数在前
substr(a,b)方法得到从a开始的长度为b的子串，b可以省略，表示到字符串结尾，a可以是负数，表示倒数位置（倒数位置从-1开始）
slice(a,b)方法得到从a开始到b结束（不包括b处）的子串，参数a可以是负数，参数a必须小于参数b
indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置，如果没有出现，则返回-1

boolean

布尔类型

Undefined

一个没有被赋值的变量的默认值是undefined，而undefined的类型也是undefined
即： undefined又是值，又是一种类型，这种类型只有它自己一个值

Null

null表示空，它是空对象
当我们需要将对象销毁、数组销毁或者删除事件监听时，通常将他们设置为null
用typeof检测null值，结果是object

数据类型的转换

其他值 -> 数字

使用Number()函数，纯数字字符串能变为数字，不是纯数字的字符串将转为NaN。布尔值真为1，假为0。

Number('123'); //123 Number('abc'); // NaN Number(''); //0 Number(' '); //0

Number(true); //1 Number(false); //0

Number(undefined); //NaN Number(null); //0

parseInt()函数的功能是将字符串转为整数，该函数会自动截掉第一个非数字字符之后的所有字符。其中.也是一个非数字字符，如果字符串不是以数字开头的，则转为NaN

parseInt(‘2.11’); //2 parseInt('3.14是圆周率'); //3 parseInt(‘圆周率是3.14’); //NaN parseInt('3.99'); // 3

parseFloat()函数的功能是将字符串转为浮点数

parseFloat(‘2.11’); //2.11 parseFloat('3.14是圆周率'); //3.14 parseFloat(‘圆周率是3.14’); //NaN parseFloat('3.99'); // 3.99 parseFloat(true); //NaN parseFloat(false); //Nan

其他值 -> 字符串

使用String()函数，数字转为字符串时，变为‘长得相同’的字符串，科学计数法和非10进制数字会转为10进制的值

String(123); // '124' String(123.4); // '123.4' String(2e3); // '2000' String(NaN); // 'NaN' String(Infinity); // 'Infinity' String(0xf); // '15'

String(true); // 'true' String(false); // 'false'

String(indefined); // 'undefined' String(null); // 'null'

使用toString()方法，几乎所有值都有toString()方法

其他值 -> 布尔值

使用Boolean()函数，数值类型转为布尔值时，0和NaN转为false，其他数字都转为true。空字符串转为false，其他都转为true。undefined和null转为fasle

Boolean(123); // true Boolean(0); // false Boolean(NaN); // false Boolean(Infinity); // true Boolean(-Infinity); // true

Boolean(''); // false Boolean('abc'); // true Boolean('false'); // true

Boolean(undefined); // false Boolean(null); // false

小测试：使用prompt()接收参数，编写一个计算器程序

复杂数据类型

复杂数据类型都是“引用类型”

表达式和运算符

表达式种类

  • 算术
  • 关系
  • 逻辑
  • 赋值
  • 综合

算术运算符

  • 加 +
  • 减 -
  • 乘 *
  • 除 /
  • 取余 %

隐式类型转换
如果参与数学运算的某操作数不是数字型，那么JavaScript会自动将此操作数转为数字型。除了加号，有连接操作符含义。 隐式转换的本质是内部调用Number()函数

3 * '4'; //12 true + true; //2 false + 2; //2 3 * '2day'; //NaN 3 + undefined; //NaN

有关IEEE754
在JavaScript中，有些小数的数学运算不是很精准

0.1 + 0.2; //0.30000000000000004

JavaScript使用了IEEE754二进制浮点算术标准，这会使一些个别的小数运算产生“精度丢失”问题
IEEE754二进制浮点数算术标准是计算机底层编译标准
解决办法：在进行小数运算时，要调用数学的toFixed()方法保留指定的小数位数

幂和开根号
JS中没有提供幂计算和开根号的运算符，需要使用Math对象的相关方法进行计算。

Math.pow(2,3); //2的3次方 Math.sqrt(81); //81根号运算9

向上取整和向下取整

Math.ceil(2.4); //向上取整 3 Math.floor(2.4); //向下取整 2 Math.ceil(-2.4); //2 Math.floor(-2.5); //-3

关系运算符

  • 大于 >
  • 小于 <
  • 大于或等于 >=
  • 小于或等于 <=
  • 等于 ==
  • 不等于 !=
  • 全等于 ===
  • 全不等于 !===

相等和全等

  • 两个等号==运算符不比较值的类型，它会进行隐式转换后比较值是否相等

  • 三个等号===运算符，不仅比较值是否相同，也比较类型是否相同

    5 == '5'; //true 5 === '5'; //false

    1 == true; //true 1 === true; //false

    0 == false; //true 0 === false; //false

    0 == undefined; //false 0 === undefined; //false

    undefined == null; //true undefined === null; //false

    NaN == NaN; //false NaN === NaN; //false

null和undefined用==比较涉及隐式强制转换，ES5规范中规定

  • 如果x为null，y为undefined，则结果为true
  • 如果x为undefined，y为null，则结果为true

null和undefined用===比较结果为false，因为类型不同

  • typeof null -> object
  • typeof undefined -> undefined

NaN不自等，isNaN()函数可以用来判断变量值是否为NaN，但isNaN()也不好用，它的机理是：只要该变量传入Number()的执行结果是NaN，则isNaN函数都会得到true。

isNaN(undefined); //true isNaN('3天'); //true isNaN(null); //false

不相等和不全等

!= 表示不相等，!==表示不全等

JS中没有连比
判断a是否介于3到15之间

逻辑表达式

  • 非 !
  • 与 &&
  • 或 ||

非运算符

!true //false !false //true !0 //true !undefined //true !'' //true !'hell' //false

!!true //true !!false //false !!0 //false !!'' //false !!'hello' //true

可以使用两个!!查看某个的值是正性还是假性

短路计算
a && b运算中：a真，表达式值为b；a假，表达式为a

3 && 6 //6 6 && 3 //3 undefined && 3 //undefined 15 && undefined //undefined null && 2 //null '' && 16 //'' NaN && undefined //NaN

a || b运算中：a真，表达式值为a；a假表达式值为b

3 || 6 //3 6 || 3 //6 0 || 3 //3 null || undefined //undefined 'a' || 'b' //'a' NaN || null //null

逻辑运算顺序
逻辑运算的优先级是：非 -> 与 -> 或

赋值运算符

  • 赋值 =
  • 快捷赋值
    • +=
    • -=
    • *=
    • /=
    • %=
  • 自增 ++
  • 自减 --

赋值运算也产生值，等号后面的值将作为“赋值运算的值”

var a; console.log(a = 4); //4

这就意味着，可以连续使用赋值运算符

var a, b, c; a = b = c = 15;

自增和自减
a++ 先用再加，++a先加在用

var a = 3; var b = a++; console.log(a); //4 console.log(b); //3

var a = 3; var b = ++a; console.log(a); //4 console.log(b); //4

综合表达式

综合运算的运算顺序
运算顺序： 非运算 -> 数学运算 -> 关系运算 -> 逻辑运算

5 < 3 + 3; //true 3 > 2 && 8 > 4 +3; //true 3 > 2 && 8 > 4 + 4; //false !13 < 5-3; //true !13 < 5 -5; //false

上次编辑于: 2022/11/2 11:12:45
贡献者: lanjd,lanjd