![99df745e050c223c6fa7e9d50828df4f.png](https://i-blog.csdnimg.cn/blog_migrate/8691af09e1a617849b2624ca87d70002.jpeg)
文中必有不正确or不恰当的地方,目前的水平仅如此,可以喷这篇文章,但请别喷作者谢谢。文中如有错误的地方,愿意的话请告知作者 感激不尽!
目录:如何查找呢?ctrl+F 输入 第1页
- 1页 JS(1)基本知识
- (2)JS中的转义符2页 JS命名规则3页 JS中如何转换数据类型 特别注意!电话号码是字符串,而数字是不能代表电话的,例如0开头的电话!千万得记住 。
3.1 转换字符串 toString +''
3.2 转换数值 parseInt parseFloat
3.3 转换数值 isNaN
3.4 转换 数值 类型。Number 3.41 使用+ 使用-0
3.5 转换布尔类型。Boolean 3.51 使用 !! - 4页 算数运算符
4.1 基本运算符
4.2 自增自减运算符 - 5页 逻辑运算符
5.1 && 并且 可以写代码
5.2 || 或者 可以写代码
5.3 !非/不是 - 6页 关系运算符
6.1 == 与 ===
第1页
一、JS基本知识:
(1)数据类型
数据类型:包括:
1、整型 number
正0和负0 2个值在计算机中是不一样的
无穷大 正无穷大 负无穷大。
infinity、+infinity、-infinity
无法表示的数字:NAN 但是他是一个数字
2、浮点型 number
3、 字符串 string 这个要注意什么呢?就是嵌套关系!'it's,ok' 在JS中这样已经结束了!要如何打呢?
两种方案:1、'it"s,ok' 2、"it's,ok"
究极方案:使用反引号`it's,"ok"`
字符串也拥有.length 和下标【】这两种写法。
4、Boolean类型(真假)
5、符号:symbol
6、对象:object 变量中出现的情况:
undefined变量并没有赋值/ 如果一个函数,没有写return,那么默认return是undefined。
NaN 无效变量
null/no/ 空值。
(2) 转义符
n 换行 r 回车 t 代表tab 也大多数代表4个空格 代表一个
这是多数情况下使用的,其余我不知道的,我不用的基本没写,因为我懒。
第1页
第2页 JS命名规范
二、JS命名规范:
在所有的编程语言中,都遵守这样的命名规范: 开头:字下美符 如何理解嘞? 字母(a~z or A~Z ) 下划线_(英文状态下) 美元 符号
(1)严格的区分大小写 (2)不能以关键字命名(3)变量名有意义 (4) 遵循驼峰命名法 (5)所有的符号都是英文状态的下的符号 何为驼峰命名法?简单来说:就是首个单词的字母小写 其余单词的首字母大写
例如:1)oneAndTwo 2)oneOrTwo
在其他语言中:
可以是字下美人符,字母(a~z or A~Z ) 下划线_(英文状态下) 美元 人民币符号。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的命名规范</title>
<script>
//正确的命名
var age;
var GRE;
var _03;
var $01;
</script>
</head>
<body>
</body>
</html>
第2页
第三页start
3、JS中如何转换数据类型
如何转换数据类型呢? 那又如何确定是否转换成功了呢?使用typeof来验证
当然得看转那种了,这里指一般情况下
3.1 转换字符串toString
1) 转换字符串类型 常用方式:toString (这里的S要大写特别注意)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型转换:转换成字符串类型</title>
<script>
var num = 123;
// 需要另外一个变量来接收 转换的变量。
var str = num.toString();
// 转换的变量为字符串
console.log(str);
// 验证方式
console.log(typeof str);
</script>
</head>
<body>
</body>
</html>
![0a529d3b26db7fa82bfb3ec14026eb6c.png](https://i-blog.csdnimg.cn/blog_migrate/c86b7f4778732f4f3a6ebd7b17ca0215.png)
2) 是最骚的,也是最简单的,也是最好用的!那就是。就是。+''(空字符串)
![652e37a41ed08a877c4528240a3dc89b.png](https://i-blog.csdnimg.cn/blog_migrate/2f3a1c794449dfe5610b7dfde53d8b37.png)
3) 是最坑的。天坑,无比的坑,超级无敌的大坑!!
哟呵这个1.toString还不能用了?嗯,在JS这门坑B语言中呢BUG极其多,多到无法想象。
1.在JS中认为,这个是1.小数开头,你后面居然是t?就是1.t?1.t是什么?不认不认!
所以要么使用()括号括起来.
要么多写一个.为什么呢多写一个.就对了?因为1..是1.0.toString 所以嗯,就没错了!
要么给予一个空格,就是1 (空格).toString 这样浏览器就不会认为你要填写小数了。
![2221a40138d29b3c82a15cab332e3acf.png](https://i-blog.csdnimg.cn/blog_migrate/54b0dcab020f564dfdba9c1feabd5175.png)
<------------------------------------------------------------------------------------------->
3.2 转换 数值 parseInt parseFloat
2)转换 数值 类型。最常用的方式:parseInt parseFloat 注意第二个单词的首字母要大写。
这2个有什么区别呢? parseInt/pa zi/ 只能获得整数 而且不是四舍五入!是小数都不要! parseFloat能获得所有的数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型转换:转换成字符串类型</title>
<script>
var num = 123.123;
var num2 = parseInt(num);
var num3 = parseFloat(num);
console.log('num2的值:' + 't' + num2);
console.log('num3的值:' + 't' + num3);
</script>
</head>
<body>
</body>
</html>
![6cc969d37f9da9573b18feea88a3b390.png](https://i-blog.csdnimg.cn/blog_migrate/4da55a3855eef71d012b51603909ccbc.png)
注意啊!特别注意啊!就是这段字符串,从左到右执行,只要不是数字就停下来了!
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型转换:转换成字符串类型</title>
<script>
var num = '我123 .123';
var num2 = parseInt(num);
var num3 = parseFloat(num);
console.log('num2的值:' + 't' + num2);
console.log('num3的值:' + 't' + num3);
</script>
</head>
<body>
</body>
</html>
![255542f8c4d826d861b6639f1c64e1f6.png](https://i-blog.csdnimg.cn/blog_migrate/3395de2cda3fcc18a5b6164bb1374413.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型转换:转换成字符串类型</title>
<script>
var num = '12我3 .123';
var num2 = parseInt(num);
var num3 = parseFloat(num);
console.log('num2的值:' + 't' + num2);
console.log('num3的值:' + 't' + num3);
</script>
</head>
<body>
</body>
</html>
![f92eb5526eaa02a65eabf9e45af7cc28.png](https://i-blog.csdnimg.cn/blog_migrate/2b184d82a0e673f95ca470ac67f32f07.png)
<------------------------------------------------------------------------------------------->
3.3 转换数值isNaN
3)转换 数值 类型。isNaN 会让字符串是数字的转换,字母或者文字转不了。
isNaN 这个玩意,是判断 当前的值 是不是一个 非数字类型, 如果是非数字呢,返回true 是数字呢,返回false! 格式:isNaN()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num = '123'
console.log('num显示' + isNaN(num));
console.log('num测试' + typeof(num));
var num2 = 'abc'
console.log('num2显示' + isNaN(num2));
console.log('num2测试' + typeof(num2));
</script>
</head>
<body>
</body>
</html>
![53c907a7f8c3e7d354b4d3ad13d2f3a8.png](https://i-blog.csdnimg.cn/blog_migrate/d2a7dabe308df699b3e8a9c3c61c037e.png)
<------------------------------------------------------------------------------------------->
3.4 转换 数值 类型。Number
4)转换 数值 类型。Number
格式:
var str = '123';
var num = Number(str);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str = '123';
var num = Number(str)
console.log(num);
console.log(typeof num);
</script>
</head>
<body>
</body>
</html>
![3e32437c1c5dd4cc36490d1ed7a693c4.png](https://i-blog.csdnimg.cn/blog_migrate/895d9cc31f0bd3951680d99a082ce9fd.png)
这个Number 专门来治疗 Boolean 类型的,true 是1 false 是0 空值null 也是0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 测试布尔 true
var blean = true;
var num2 = Number(blean);
console.log('测试布尔true:' + 't' + num2)
console.log('测试类型:' + 't' + typeof num2);
// 测试布尔 false
var blean2 = false;
var num3 = Number(blean2);
console.log('测试布尔false:' + 't' + num3)
console.log('测试类型:' + 't' + typeof num3);
// 测试布尔 空值null
var nul = null;
var num4 = Number(nul);
console.log('测试空值null:' + 't' + num4)
console.log('测试类型:' + 't' + typeof num4);
</script>
</head>
<body>
</body>
</html>
![4ac775a27562c67f04ecf14651f5b9a5.png](https://i-blog.csdnimg.cn/blog_migrate/e7c3e097ac9d7cf02dd717ebecb6cd8f.png)
3.41 使用+号,使用 -0!狂拽炫酷吊炸天。
![d6e624b4b5f6cd32bcf74b76af7eecbe.png](https://i-blog.csdnimg.cn/blog_migrate/25fd41b5cda871a7ebc67204feebe1ee.png)
3.5 转换成Boolean
5) 转换为Boolean类型:
这哥们呢!有点兔! 格式:Boolean();
数字转布尔 除了 0 和NaN是false,其余都是true。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型转换:转换成字符串类型</title>
<script>
var num = 1;
var num2 = 0;
var num3 = NaN;
var num4 = Boolean(num);
var num5 = Boolean(num2);
var num6 = Boolean(num3);
console.log('num4的值:' + 't' + num4);
console.log('num5的值:' + 't' + num5);
console.log('num6的值:' + 't' + num6);
</script>
</head>
<body>
</body>
</html>
![fff9f9e905e55d2e4c94b1711709a017.png](https://i-blog.csdnimg.cn/blog_migrate/3ce3a74a8f909e1db944e6556abb9e77.png)
字串符转布尔 除了空值 其余都是true。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型转换:转换成字符串类型</title>
<script>
var num = '';
var num2 = '0';
var num3 = 'NaN';
var num4 = Boolean(num);
var num5 = Boolean(num2);
var num6 = Boolean(num3);
console.log('num4的值:' + 't' + num4);
console.log('num5的值:' + 't' + num5);
console.log('num6的值:' + 't' + num6);
</script>
</head>
<body>
</body>
</html>
![b36b4d132c1a4d96db06b94a7d97fefe.png](https://i-blog.csdnimg.cn/blog_migrate/f2e6b0e62b9d188f51f7b390ca26d660.png)
null 和 undefined 都会变成false
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型转换:转换成字符串类型</title>
<script>
var num = null;
var num2 = undefined;
var num4 = Boolean(num);
var num5 = Boolean(num2);
console.log('num4的值:' + 't' + num4);
console.log('num5的值:' + 't' + num5);
</script>
</head>
<body>
</body>
</html>
![c504cb57d91103c546c05b27beab45f2.png](https://i-blog.csdnimg.cn/blog_migrate/0e0b349d453d273a33a04daa20f5fb0d.png)
对象也会转为true,这里就不举例对象了。因为只要是和对象都会变成true!
3.51 今天呢,再来说一个更骚的方法:对只有更骚,没有最骚。使用!!两个感叹号。对的两个感叹号。
![7e69e132dfeaf53862b9df40cb939067.png](https://i-blog.csdnimg.cn/blog_migrate/c9f32d9e495d13f72242526582c12b0e.png)
第3页end
第4页start
算数运算符
4.1 基本运算符
顾名思义咯!算数运算符只有 + - * / %(余)
这比较简单篇幅少,和数学几乎一样,+ - 是最后算 其余的都是从左到右依次计算 然后再是加减的从左到右计算。
例:1+2*3/4%5
什么意思嘞:先算2(乘)3 再算 (除)4 之后(余)5 最后1(+)
括号会有优先级,小括号优先级最高,有括号先算括号。 还有点补充的是:'t' 空格符 与 'n' 换行符 不是运算符,只出现在输出语句里面!
重点来了!当对非数字类型 进行运算的时候,先转换为数字类型再进行计算!!如果计算不出来的话,会显示NaN 只不过这个NaN是number类型。
4.2 自增自减运算符
自增++ 自减-- 特别注意一点!!
++在前 是先计算 后赋值
++在后 是先赋值再运算!
这个玩意呢!其实很简单,但是呢有点特别复杂 ,就是++的位置不同,显示的结果可能不同,但是都进行了自增自减的运算!
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num = 0;
// 这里等于0没有什么好说的
console.log('第一个num是' + 't' + num); //0
// 之后是不是0+1?
num++
// 所以这里是1
console.log('第二个num是' + 't' + num); //1
// 之后怎么样1+1
++num
// 所以得到了2
console.log('第三个num是' + 't' + num); //2
// 那这里为什么是2呢? 这个地方得注意++的位置,
/* ++在前 是先计算 后赋值 ++在后 是先赋值再运算!
所以先赋值 所以就是显示2 其实本职上是3
*/
console.log('第四个num是' + 't' + num++); //2
// 所以这里为什么是4了!
console.log('第五个num是' + 't' + ++num); //4
</script>
</head>
<body>
</body>
</html>
![5439e72b9ee9350a0c5f2c87fc2e5320.png](https://i-blog.csdnimg.cn/blog_migrate/11e73cfff8b7d8ae6a1a767fb561b937.png)
第4页end
第5页 逻辑运算符(开始)
5.1 && 并且
&&这个玩意是 并且的意思!多数只存在条件判断中!
举个例子:
x>1 && x<10 这个的意思就是,x大于1并且小于10的数都可以
所以范围只能是 2~9 (整数为例)
&&还可以写代码的!这里呢发现了新世界的大门:之前的知识是不完整的,&&他可以返还true 和 false,还可以返回A值和B值 啥意思呢?就是A为真的时候,B为假,那么返回的是B值,A为假呢?返回A值咯,AB都为假呢?返回A值咯,简单来说谁假返回谁,都是真返回A。都为假返回A
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var a = 1;
var b = 2;
// 下面这个玩意他等于 if(a===1){c=b}
var c = a === 1 && b;
// 这个时候这个c的值是2;
console.log('c的值为:' + c);
</script>
</head>
<body>
</body>
</html>
5.2 || 或者
|| 这个玩意是 或者的意思!多数只存在条件判断中!
举个例子:
x>1 || x <10 x大于1 或者 x小于10 的都可以!
所以嘞这个范围巨大! 任何数都是可以的,
你想一想咯!
比如1?1大于1吗?不大于! 但是小于10啊! 所以就是对的。
比如说11? 大于10不行!但是他大于1啊 所以也是对的!
所以结论就是:任何数都行!
5.3 !非/不是 (个人不常用。因为太绕了不如 !=)
!这玩意就是非的意思。
咋说这个非呢?他是一个调皮的孩子 喜欢和你反正来。
例如:
!1
意思是只要不是1的统统都不行。反正就是和你反正来呗
第5页 逻辑运算符(end)
6页 关系运算符 start
6.1 == 和 ===
这里不再说明其他的关系运算符:只说一个最容易错的:
== 与 ===
== 是可以进行类型转换
=== 不可以进行类型转换
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>== 与 === 的区别</title>
<script>
var num = 123;
var num2 = '123';
console.log('两个等于出来的结果:' + (num == num2));
console.log('三个等于出来的结果:' + (num === num2));
</script>
</head>
<body>
</body>
</html>
![923f5d55067e6c94014210562cab6df9.png](https://i-blog.csdnimg.cn/blog_migrate/455f550be4fa0af0548e0e3acc649466.png)
6页 关系运算符 end
第9页、JS基本语法:var 关键字的使用。
var的基本使用方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS基本语法</title>
<script>
/* 在ES6之前的语法中,要使用JS 第一步呢就是使用关键子 var/wa/[读音]
格式: var 任意的有意义的名字=任何东西或者(什么都没有)
*/
//例:
// 这个如何理解呢?反向理解,把这个10给了这个age 所以这个age是10。
// 这个age 可以是任意的 可以是a 可以是b但是一般不推荐,因为他没有什么具体的意义
// 因为后面的变量会有很多,写的没有意义自己都会忘记,自己写的是什么玩楞。
var age = 10;
// 后面只有一个分号的时候,代表没有值,也就是说可以获得任意值。
var age;
// 在JS中后面有单引号或者双引号的时候,代表获得的这个值一定是一个字符串类型。
var age ='';
</script>
</head>
<body>
</body>
</html>
let的基本使用:(ES6的语法,更加严谨。)
规则: 1 只作用于 块的作用域 什么意思呢? { let a = 1; console.log(a); //这个a可以使用。 } cosole.log(a); //这个a无法使用。 这个变量a只能用于{}中,无法使用在外面了
![d7ef75090c66cdc9b780bcf30b4441d1.png](https://i-blog.csdnimg.cn/blog_migrate/9c2926584d1dc75dac105484d42abb21.png)
2 不能重复声明: 例如说: let a =1; 那么就不能 let a =2;
![7cb257882721ebb5bff797ecbb2cee77.png](https://i-blog.csdnimg.cn/blog_migrate/35127864f0de18420222b31fb104357d.png)
3 必须先声明再使用、否则报错 { console.log(a); let a = 1; }
![d3be8bd99473a7e55b76082710ac3b81.png](https://i-blog.csdnimg.cn/blog_migrate/ca98ea31ce19f7600edaca3b09c4d8fd.png)
、JS常用的输出、输入语句:
1、alert/e le t/ 本身就是警示的意思。所以alert就是弹出 用户输入框
格式:alert('');
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS基本语法</title>
<script>
alert('Hellow Word');
</script>
</head>
<body>
</body>
</html>
![2c4019955e5874bf36f146f065092692.png](https://i-blog.csdnimg.cn/blog_migrate/09f4340666e7aae5c6ebaee2eef25c80.png)
2、prompt/pu ruang m p t/ 本身也是提示的意思。提示用户输入内容
特别注意:prompt它输入的任何东西都是字符串。
格式:prompt('');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS基本语法</title>
<script>
prompt('随便写点什么吧');
</script>
</head>
<body>
</body>
</html>
![71b9beac4872abe8877571880f160775.png](https://i-blog.csdnimg.cn/blog_migrate/7b6ab31143d38168b383bf2eb3b70031.png)
3、console.log/keng shou 点 luo g/ 本身就是控制台的意思。控制台查看数据。
网页控制台 进入网页 右键点检查 或者按F12 都可以
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS基本语法</title>
<script>
var num = 0;
console.log(num);
</script>
</head>
<body>
</body>
</html>
![52d7a92441fcda909c45370f0289ee7e.png](https://i-blog.csdnimg.cn/blog_migrate/b1968b8ebdbe5e6d25ede09f79a921b5.png)
数组:
11页、JS中函数
基本function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数的基本使用</title>
<script>
function add() {
alert('我是执行语句');
}
/*基本的函数类型:
function 变量名(){
执行语句。
}
[其中变量名 是可以 随意更改的,function是不变的]
*/
// 函数申明之后,要调用,如何调用呢很简单,就是 写一遍 变量名();
add();
</script>
</head>
<body>
</body>
</html>
带有参数的function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数的基本调用</title>
<script>
function add(num1, num2) {
var sum = num1 + num2;
alert(num1 + '和' + num2 + '的和是' + sum);
var jianfa = num1 - num2
alert(num1 + '和' + num2 + '的差是' + jianfa);
}
// 函数写带参数的,要用逗号隔开
add(2, 1);
// 然后一样的,在add里面写上参数,里面有几个,就写几个,同样用逗号隔开。
</script>
</head>
<body>
</body>
</html>
function 和return 最简单的案例:
直接写这个就好了,因为这是一体的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 最简单的return函数,会这个就行了。其余的不用管了。
function getNum(num1, num2) {
return num1 + num2;
// 这个num1+num2 和 getNum 的num1和num2是一样的。
}
// 这个要给getNum num1 和num2 赋值
// 格式:函数名(赋值);
console.log(getNum(1, 2));
</script>
</head>
<body>
</body>
</html>
return 的注意事项:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>retrun的两种使用方式</title>
<script>
function panduan(num) {
if (isNan(num)) return;
// isNan 是判断是不是非数字的方法
// 这里的return 是结束函数
return;
// 这个return是函数的返回值。
}
// 第一种是 return 是带返回值的 第二种是不带的
/*
panduan 这个函数变量名()里面一定要至少有一个变量名来接收。
*/
panduan();
// 调用函数 并且在里面写值
</script>
</head>
<body>
</body>
</html>
argments的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>arguments</title>
<script>
function num() {
console.log('arguments.length' + '值个数是' + arguments.length)
// arguments.length 是查询有几个值。
console.log('赋值给' + 'arguments[0]' + '的是' + arguments[0]);
// arguments[] 是赋值 赋值和数组一样。
}
// 不带值的函数 使用arguments
num(1, 2);
</script>
</head>
<body>
</body>
</html>