【分享】JavaScript基础入门篇

Posted on 2022-12-14  223 Views


引言

历史上恐不会有第二个编程语言走JavaScript这种路数,听说它的诞生只用了十天。
而现如今几乎不会有哪个有交互效果的网页能离开它。
然而,这款语言虽然简单,却谈不上易用,由于设计之初的种种问题,它总是能有很多稀奇古怪的坑以及特性。
此处应该插一张JavaScript真值表
然而,由于应用场景的需要,它还是不可避免的迅速占领了市场份额让大家都离不开它。
而作为我个人第二个系统学习的,勉强算是正真的编程语言且应用于实践的语言,
我个人是很喜欢用它的,虽然有很多搞不懂的地方,但并不影响我的使用。
虽然它的作者曾这么评价:"它的优秀之处并非原创,它的原创之处并不优秀"。
闲言少叙,这将会是一篇覆盖面有所偏颇的JS基础复习汇总笔记,写作初衷也不是什么学习总结,更偏向于复习回想。
毕竟在实践中可能很多知识用不到,并不是说它们不重要,而只是你还没到用到的时候,然而当用到了,却意识不到那未免有些悲哀。
固作此,大体上会是我想到哪复习到哪,将来或许想找某个知识点时我会回来看这篇文章而不是去搜索引擎中去捞。
附带,虽然2202年了,但这篇文章依旧是以ES5为基础。

基础概念

说到基础概念,有很多,比如区分大小写,保留字,标识符等等等..但既然文章开头说了是有偏颇那自然这就不会通篇介绍
这些东西随着使用,自然会融入到日常操作中,纵使如此,没有基础概念的入门笔记也是有问题的,所以
首先让我们来认识下JavaScript的数据类型吧,这同时也是很多中小企业没事干会拿来面试的问题。
以下左边是名称,'-' 后面是示例。

  • Number:数字类型-1,2,3,4
  • String:字符串-"果我们的铁骑继续前进"
  • Bollean:布尔值-"假(false)作真(true)来,真亦假"
  • undefined:未定义-"XXX?不存在的"
  • null:空值-"存在,但是不存在,我,即是虚空"
  • Object:对象-"万物起源"

ES5的数据类型就是如上几种了,前三个是原始类型。中间两个是常见的坑的出处。
最后的是JavaScript中所有的起源,在JavaScript中无论是数字还是字符或是什么杂七杂八的别的都是对象,
而JavaScript没有Class的概念,一切都是克隆自最原始的一个对象。
排除这点,对象还可以细分为函数,数组,Date和单纯的对象。这几种也被称为引用类型。
至于怎么用.....

var a = 1 //你获得了一个数字类型
var a = '1' //你获得了一个字符串
var a = true //你获得了一个布尔值
//值得一提的是
console.log(1==true) //true
console.log(1===true) //false
var a={} //你获得了一个空对象
a.b  //你获得了undefined
a.b=null //取得了null
var a = [] //你获得了数组
var function a (){} //你获得了函数
//再值得一提的是数组和对象可以通过new Array 和new Object来获得

到这里为止估计不会有几个人有疑问吧,单纯的概念简单直接。硬要说的话,上面涉及了一些隐式转换,等于和全等一类的问题。
简单介绍隐式转换:
JavaScript没有显示的数据类型申明,全看你赋值的是什么,它就是什么类型的数据,这很便利,同时带来的同样多的坑
因为这需要你在实际运行以后才能发现有问题,且不易排查。
最常发生隐式转换的为数字和字符比如:

var a = 1 //数字类型
var b ='2' //字符类型
a=a+b  //a='12' 字符类型
b=b*a // b=2 数字类型(这种做法极不靠谱不推荐)

基本就是这个调调,其它有很多很多,比如数组和对象以及什么别的东西只要它有toString(),就能转换成字符串。
这里往往会埋藏很多坑,所以当程序出现一些匪夷所思不符合预期的地方,可以先检查下数据类型。
等于与全等:
等于是==,全等则为===,区别仅仅在于前者会发生隐式转换,而后者不会,能使用全等的地方就不要使用等于,毕竟
全等少个隐式转换效率也会高不少,同时有助于控制数据类型。
*
基础概念的应用-->类型判断
类型判断是最为常见的场景之一,刚开始写程序的时候这里有时我也需要去问搜索引擎,在此稍微总结一番。

//最常用的类型判断typeof 
var a = 1,
var b = '2'
var c= [1,2,3,4]
var d = {1:2,3:4}
var e=function(){}
console.log(typeof a) //'number'
console.log(typeof b) //'string'
console.log(typeof c) //'object'
console.log(typeof d)//'object'
console.log(typeof e) //'function'

typeof通常只能用于区分字符串和数字,或者判断下是不是函数,对于对象,null,数组则是无力的,
因为它们都是Object,值得一提的是,它认识undefined,所以用来判断是否可执行和是否不存在倒是不错。

// 我从来没用过的类型判断..instanceof
console.log(a instanceof Number) //true
console.log(b instanceof String) //true
console.log(c instanceof Array) //true
console.log(c instanceof Object) //true

知道是什么类型的前提下可以判断真假,不能判断null和undefinde,能区分Array和Object但是很麻烦,我反正没用过。

//基于原型的通用判断,最繁琐,但是万能且稳定
console.log(Object.prototype.toString.call(a) === ‘[object String]’) // true;
console.log(Object.prototype.toString.call(b) === ‘[object Number]’) // true;
console.log(Object.prototype.toString.call(c) === ‘[object Array]’) // true;
console.log(Object.prototype.toString.call(d) === ‘[object Object]’) // true;
console.log(Object.prototype.toString.call(e) === ‘[object Function]’) // true;

写法繁琐但是什么都能判断,甚至能识别Date类型,不过实际应用中最好是封装一下。
需要注意的是判断 null 和 undefined 时首字母得大写。

基础概念中其实还有诸如:JavaScript中函数是一等公民,只要你想可以玩出花来,非常适合函数式编程。
作用域链和变量提升,原型链和原型继承。
在此略过不表,入门的,基础的开发基本不会涉及到这些知识的实用部分。
举例来说假如贵公司是个自诩原生开发的从来没有过前端的创业公司突然招了个前端。
那么通常这个前端会面对修改

//这里是一个表单 里面每一个input上有一个Id
//下面是Js
var a = document.getElementById('XXX').text;
var b = document.getElementById('XXX').text;
var c = document.getElementById('XXX').text;
var d = document.getElementById('XXX').text;
....//这中间可以有很多个
var z = document.getElementById('XXX').text;
//也不一定是取值,也许是赋值,也许是清空,也是是什么别的操作,很久没写过原生的了,上面如果有拼写错误..还望海涵

总之就是这么个意思,这一点都不有趣,纯粹的堆叠起来的一大坨..
要问我何以断言,因为我从工作开始到现在修改过很多这种项目...区别在于有些可能是用Jq这么写的...

基础语法

所谓基础语法,在我看来无非就是流程控制,比如If else,do while,for循环一类,绝大多数编程语言都有,基本不需要特别记忆
虽然不同语言之间会有细微的区别和特性,那就需要在实际的生产生活中再做区分。
在这里我也不会写怎么写一个循环...这简直是刻在灵魂里的方法,没必要再提。

//在这部分我觉得有必要提出来的,多层if 和 swich
if(1){

}else if(2){

}else if(3){

}else{

}
//不得不说这种写法很常见,但更推荐swich,据说前者会全部判断一遍,而后者是通过Hash表,效率会高一些
swich(num){
case 1:

break;
case 2:

break;
case 3:

break;
default;


}
//上两种是等价的

基础部分..恩,+,-,*,/ ==,>= ,<=, 不提不提,复杂的数学运算可以单独开一个了,拿Js作科学计算似乎也不是很有意义

//我们来谈谈取整
//floor向下取整:

Math.floor(0.20); // 0
Math.floor(0.90); // 0
Math.floor(-0.90); // -1
Math.floor(-0.20); // -1
//round四舍五入

Math.round(0.2) // 0
Math.round(0.9) // 1
Math.round(-0.9) // -1
Math.round(-0.2) // 0
//ceil向上取整

Math.ceil(0.2) // 1
Math.ceil(0.9) // 1
Math.ceil(-0.9) // 0
Math.ceil(-0.2) // 0
//js有很经典的减不净问题,比如
3.29-3.28 //你以为结果是0.1?你大可去试试..
//输出:0.010000000000000231

两位小数大都有这个问题,这是个刻在灵魂中不可修复的BUG..听说很多编程语言都有,而两位小数的加减简直是购物车标准应用
所以,取整很基础,也很重要。

//&&,||, ! 与或非

var a = b || 3 //当b不存在,a被赋值为3
a=3&&b=0 //a=3 b被赋值为0 
//这两个也常用于判断条件
!true //false 可以当取反..通常应用于判断条件
var a = b=0? 3:5 //赋值a通过判断b是否等于0,等0则是3不等于则是5

与或非有时可以用于替换if else 写出简洁而难懂的业务逻辑 。
我曾经沉迷于此,最后发现还是单纯的拿来作赋值和判断条件才是它的正确用法。

结语

至此,我所认为的JavaScript基础部分就已经告一段落了,虽然这远远不够。
俗话说万丈高楼平地起,以地基为例这可能只是挖了一半的基坑,注意,只挖了一半。
用来盖个新农村风三层小楼是足够了,但是你要想盖迪拜塔趁着还没盖起来赶紧跑路吧还是。