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