学编程,来源栈;先学习,再交钱
当前系列: Javascript入门 修改讲义

课程说明

用最短平快的方式:

  • 让偏重于后端开发的同学,掌握JavaScript/JQuery的常规操作,能配合Bootstrap,做出看上去还将就的“一起帮”前端页面。
  • 为目标是前端岗的同学,打下基础

JavaScript中其他复杂晦涩的部分,放在ES进阶以及vue.js中学习。

应掌握的基础:


数据类型

typeof 

可以获取数据的类型:

typeof 12    //number
typeof '12'  //string
typeof true  //boolean

字符串

JavaScript中可以使用单引号(' ')或双引号(" ")包裹。

同时,单引号和双引号还可以嵌套(注意:是嵌套,“单套双,双套单”都可以,但不能“双套双”):

'"大"神"小"班'
"'大'神'小'班"

这样能解决一些问题,但还是不方便。

所以,ES6推出了模板字符串,使用反引号(``,在键盘上数字1前面,Tab键上方),可以:

  • 直接使用引号换行等(复习:转义字符
    let slagon = `
        '大'神"小"班;
        灵活学制!
    `;
  • 内插变量:使用${}作为占位符,引入变量:
    let student = '王枫';
    alert(`Hello,${student}!`);

演示……

object对象

复习:面向对象,什么是对象……

本质上就是一组由键值对组成的无序集合:

        let student = {    //花括号界定
            name: '王枫',  //逗号分隔
            age: 21,       //冒号赋值
            "is-Female": true  //非规范的属性名,出现了 “-”
        };

有可以直接把变量放到对象中,这样对象就会以变量名为属性名称,变量值为属性值进行重构:

let age = '21';
let obj = {age};     //等于:{age: 21}
可以使用点(.)或者方括号([])取出对象中元素/成员的值:
student.age
student["name"]

对比数组:

  • 数组也是object类型:
    typeof []    //object
  • 但数组有序,按顺序(下标)存放元素;对象无序,同过键找到值

null和undefined

复习:null代表空……

但JavaScript里面还引入了一个undefined(更常用),变量未赋值前值为undefined

let fg;    //没有赋值
alert(fg);     //undefined

照理说,undefined应该是一个“值”。但是,无论是JavaScript文档,还是用typeof检测,undefined都是一个类型:

typeof undefined   //"undefined"

再看看null:

typeof null    //"object"d

好吧,马马虎虎说得过去。但区分“未定义”和“空”,实质上并没有什么卵用,除了把问题搞得更复杂——但是,这就是JavaScript,ʅ(‾◡◝)ʃ

值/引用类型(复习

JavaScript中:

  • 引用类型包括:Object
  • 值类型包括:Boolean、Number 和 String(注意string!),Undefined、Null……


神奇的运算

JavaScript允许不同类型的数据间进行运算,o(>﹏<)o 

而且哪怕两者之间的运算毫无逻辑可言,也“绝不报错”,那咋给结果呢?乱给!

数值和字符串

猜一猜下面这些表达式的值是多少:

1 + '1'
1 - '1'
1 - '1a'
1 + '1' 和 1- '1' 是JavaScript自己进行了类型转换,不过
  • 1+'1'是把数字1转换成了字符串"1"
  • 1-'1'是把字符串"1"转换成了数字1

至于为什么要这么转?咳咳……

但 1 - '1a' JavaScript是彻底没辙了,所以返回一个:

NaN

Not a Number,不是数值。然鹅,(*/ω\*)

typeof NaN     //number

此外,JavaScript还搞出一个Infinity,表示“无穷大”(也不知道有啥用,迷呀!),@想一想@:无穷小呢?

isNaN()

那我们来检查一下结果值是否为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由之而兴啊!我们由“易”到“难”:

truthy

对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) {
  • 字符串0
    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代码一定要规范规范再规范!

@想一想@:实际开发中会出现这些稀奇古怪的运算么?怎么会这样呢?

一般来说,可能的原因包括:

  • 错误的用户输入,比如本来应该输入数值的,他输入了字母、汉字或其他符号。这种我们就需要对用户输入进行“限制”(复习:form选择型表单)或者“检查”(后文详述)
  • 取不到值时没有进行处理。这就尤其需要之前提到的“防御式编程”


作业

直到事件为止,每一章一个.html文件提交。本章作业名为:data.html

  1. 用一种方便的方式,使用变量pBody存储这行Html代码(注意换行、缩进和引号):
        <p>
            <a href='http://17bang.ren' target="_blank">源栈·一起帮</a>,
            助你实现<span style="font-size:16px;">编程</span>梦想!
        </p>
    然后将其在控制台原样输出。
  2. 调整pBody,让其“编程”可以被其他变量值方便的替换比如:助你实现{职业}梦想、助你实现{人生}梦想
  3. 将求助的标题(title)、正文(body)、关键字(keywords)、悬赏金额(reward)、作者(author,含Id和用户昵称)以对象形式存入变量jsBasic,并利用jsBasic按行输出上述内容
  4. 新建一个数组,尽可能多的存储进各种类型数据,过滤得到其中能够“视为”的数值的数据,比如:123、'123',并按从小到大排列
  5. 在控制台输出(用空格代替0)的杨辉三角形【难】

    提示:
    • 本质上,是在输出等腰三角形的基础上,不再输出*而是不同的数字。
    • 利用数组存储上一行的值
    • 注意0和空格的转换
学习笔记
源栈学历
键盘敲烂,月薪过万作业不做,等于没学

作业

觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 Javascript入门 中继续学习:

上一课: 已经是第一课了……

多快好省!前端后端,线上线下,名师精讲

  • 先学习,后付费;
  • 不满意,不要钱。
  • 编程培训班,我就选源栈

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码