用最短平快的方式:
JavaScript中其他复杂晦涩的部分,放在ES进阶以及vue.js中学习。
应掌握的基础:
可以获取数据的类型:
typeof 12 //number typeof '12' //string typeof true //boolean
JavaScript中可以使用单引号(' ')或双引号(" ")包裹。
同时,单引号和双引号还可以嵌套(注意:是嵌套,“单套双,双套单”都可以,但不能“双套双”):
'"大"神"小"班' "'大'神'小'班"
这样能解决一些问题,但还是不方便。
所以,ES6推出了模板字符串,使用反引号(``,在键盘上数字1前面,Tab键上方),可以:
let slagon = ` '大'神"小"班; 灵活学制! `;
let student = '王枫'; alert(`Hello,${student}!`);
演示……
复习:面向对象,什么是对象……
本质上就是一组由键值对组成的无序集合:
let student = { //花括号界定 name: '王枫', //逗号分隔 age: 21, //冒号赋值 "is-Female": true //非规范的属性名,出现了 “-” };
有可以直接把变量放到对象中,这样对象就会以变量名为属性名称,变量值为属性值进行重构:
let age = '21'; let obj = {age}; //等于:{age: 21}可以使用点(.)或者方括号([])取出对象中元素/成员的值:
student.age student["name"]
对比数组:
typeof [] //object
复习:null代表空……
但JavaScript里面还引入了一个undefined(更常用),变量未赋值前值为undefined
let fg; //没有赋值 alert(fg); //undefined
照理说,undefined应该是一个“值”。但是,无论是JavaScript文档,还是用typeof检测,undefined都是一个类型:
typeof undefined //"undefined"
再看看null:
typeof null //"object"d
好吧,马马虎虎说得过去。但区分“未定义”和“空”,实质上并没有什么卵用,除了把问题搞得更复杂——但是,这就是JavaScript,ʅ(‾◡◝)ʃ
JavaScript中:
JavaScript允许不同类型的数据间进行运算,o(>﹏<)o
而且哪怕两者之间的运算毫无逻辑可言,也“绝不报错”,那咋给结果呢?乱给!
猜一猜下面这些表达式的值是多少:
1 + '1' 1 - '1' 1 - '1a'1 + '1' 和 1- '1' 是JavaScript自己进行了类型转换,不过
至于为什么要这么转?咳咳……
但 1 - '1a' JavaScript是彻底没辙了,所以返回一个:
Not a Number,不是数值。然鹅,(*/ω\*)
typeof NaN //number
此外,JavaScript还搞出一个Infinity,表示“无穷大”(也不知道有啥用,迷呀!),@想一想@:无穷小呢?
那我们来检查一下结果值是否为NaN好不好?
1 == NaN "1" == NaN
NaN == NaN NaN != NaN
逻辑就混乱了!
所以JavaScript官方推荐,如果判断一个值是不是NaN,使用函数 isNaN()
isNaN(1 - '1a') //true isNaN(888) //false
但是,这特么有什么鬼?猜出来算我输……
isNaN(null) isNaN(true) isNaN('') isNaN(undefined)
这是JavaScript中最神奇(坑)的地方,无数bug由之而兴啊!我们由“易”到“难”:
对JavaScript而言,分支判断条件“应该”是一个结果值为bool值的表达式,注意我们这里用的是“应该”而不是“必须”,因为:
这里JavaScript会把任何变量或表达式转换成bool值!这就是所谓的truthy。
if(value):如果value不是bool值,除了 '', null,0,undefined,NaN,其他都是true。所以,再次开启神奇之旅吧:
if (3 - 2) { if ('飞哥真帅') { if ([]) {但仍然提醒同学们注意:
if (2 - 3) {
if (a = 986) {
if ('0') {
if (' ') {
猜一猜:下面的结果是啥:
3+2 == 5 3+2 == '5'
还可以接受,你以为这就意味着“宽松”?呵呵:
null == ''
那就是不宽松?
null == undefined
是不是非常无语?!
JavaScript在很早就意识到了这些问题,所以在又推出并推荐了 ===(严格比较)。其特点是:如果不是同一种类型,马上为false:
5 == '5' 5 === '5'
相对应的,还有不等于:!==,但是没有 >== 或 <==。
问题解决了么?呵呵,还有大于小于呢!
再来:
'飞哥颜值' > 8 '飞哥颜值' < 8 '飞哥颜值' == 8
飞哥的颜值是“薛定谔的猫”啊!
是因为字符串和数值相比总是为false么?看看这个:
'9' > 8 '9.' > 8 '.9' < 8 '9e' > 8 '10枚' > 1 ''<1
所以我们勉强可以解释成:不能转换成数值的字符串和数值的比较总是为false。但真的有些勉强啊……
还有null值和undefined:null == 0 null > 0 null < 0
当引入了null、undefined、[]和{}之后,你就会觉得这个世界已经疯了:
null + null null + undefined //以下undefined也一样 null + 1 null + '1'
以上都还是可以解释的,再看看这些:
[]+1 []-1 []+[] []-[] []*[] {}+{} {}+[] []+{} {}-[]
不要问为什么,问就是:
(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]
是不是觉得JavaScript这样很有趣?
希望你加班改代码的时候还这样想,^_^
复习:为什么需要异常……
而且JavaScript的错误:
这给我们的debug/维护工作带来了巨大的挑战(麻烦)!千万不要:
开发一时爽,维护火葬场
牢记:书写JavaScript代码一定要规范规范再规范!
@想一想@:实际开发中会出现这些稀奇古怪的运算么?怎么会这样呢?
一般来说,可能的原因包括:
直到事件为止,每一章一个.html文件提交。本章作业名为:data.html
<p> <a href='http://17bang.ren' target="_blank">源栈·一起帮</a>, 助你实现<span style="font-size:16px;">编程</span>梦想! </p>然后将其在控制台原样输出。
多快好省!前端后端,线上线下,名师精讲
更多了解 加: