js基础知识大纲

js中基础知识大纲,了解记忆,总会有用到的地方

 了解重要的历史节点

+ 重点掌握WEB1.0~WEB3.0的进化史

    + 动态页面

    + 前后端分离

    + WebApp(NativeApp)

    + 全栈开发

    + 前端需要掌握的技术栈

   + ECMAScript3 / ECMAScript5 / ECMAScript6(每年6月份在版本6的基础上继续完善一版ES7~9)

浏览器内核分类

+ webkit

+ gecko

+ trident

+ blink

+ ...

JS三部分

+ ECMAScript 语法规范

+ DOM

+ BOM

变量和变量定义

+ 变量就是起了一个名字,用来存储(指向)或者代表某个值的(它是一个虚的东西,值才是实在的东西)

+ 命名规范

    + 严格区分大小写

    + 驼峰命名法

    + 基于“_、$、数字、字母” 命名,但是数字不能作为开头

    + 不能使用关键字和保留字

 定义变量的几种方式  **(重点)

+var

+let

+const定义的变量,变量指向不能随意被更改(理解为定义的是常量)

+function

+class

+import

JS中的数据类型 **(重要哦)

+ 基本数据类型(值类型 / 原始值)

+number

+string

+boolean

+null

+undefined

    + symbol

    + bigint

+ 引用数据类型

    + 对象数据类型

        + {} 普通对象

        + [] 数组对象

+/^$/正则对象

        + 日期对象

+Math数学函数对象

        + ...

    + 函数数据类型

数据类型的检测

typeof

+ 语法 =>typeof[value]

+ 返回值首先是字符串,其次包含对应的类型 =>typeoftypeof[] ==="string"

+typeofnull==="object"

+ 数组、正则、普通对象的最后检测结果都是"object",所以基于此操作,无法细分对象

+instanceof

+constructor

+ Object.prototype.toString.call()

数字类型详解 **

+NaN和isNaN

+typeofNaN==="number"

+NaN!==NaN

+ 基于isNaN检测值是否为有效数字(检测的值不是数字类型,需要默认基于Number()把其转换为数字类型,然后再检测)

+ 把其它数据类型转换为数字类型

+Number([value])

+ 字符串转换为数字:空字符串是0,字符串中只要出现任意一个非有效数字字符,结果都是NaN

+ 布尔转换为数字:true是1false是0

+null变为数字0

+undefined变为数字NaN

        + symbol不能转换为数字,否则会报错

        + 对象(或者函数)转换为数字:首先都是调用toString先转换且字符串,然后再转换为数字

+ 普通对象转换为字符串结果都是"[object Object]"

            + 数组对象转换为字符串结果是:用逗号分隔数组中的每一项 

+ [] ->''(空数组转为空字符串)

+ [10] ->'10'(数字第一步都先转化为字符串)

+ [10,20] ->'10,20'

            + 正则或者函数转换为字符串和原始看到的内容类似

+parseInt([value]) /parseFloat([value])

        + 首先把[value]值变为字符串,其次从字符串最左侧开始找,把找到的有效数字字符转换为数字,遇到一个非有效数字字符则结束查找(不论右侧是否还有数字,都不在查找了)

+Number(true) ->1

+parseInt(true) ->NaN

+Number('12px') ->NaN

+parseInt('12px') ->12

+ 一些常用的属性方法

    + 数字.toFixed(N)  保留小数点N位,返回结果是一个字符串

+Infinity无穷大

    + ...

字符串类型详解 **

+ 把其它数据类型转换为字符串

    + String([value])

    + [value].toString()

+ 加号在JS中除了数学运算,还有字符串拼接

    + 减乘除和取余都一定是数学运算(不是数字类型要转换为数字类型,然后再运算)

    + 加号两边的任意一边出现字符串,则为字符串拼接(如果加的是一个对象,其实最后也是字符串拼接,因为对象转换为数字,是先转换为字符串的)

+1+'1'==='11'

+1+ ['10] ===110'

+ 基于ES6中的模板字符串(反引号 或者叫 两个撇)可以方便字符串拼接

```

//=> ${} 就是把一个变量的值或者一个JS表达式运行的结果,拼接到模板字符串中

letn=10;

letstr=`N的值是:${n}`;

```

布尔类型详解 **

+ 把其它数据类型转换为布尔类型

+ 规律:只有“0、NaN、null、undefined、空字符串”五个值最后变为FALSE,其余都会转换为TRUE

+ Boolean([value])

+ ![value] 转换为布尔再取反

+ !![value] 转换为布尔

+----

    + 在条件判断中,最后的结果都是转换为布尔

    + ...

对象数据类型详解 **

+ 对象的组成:零到多组键值对组成的(key:value / 属性名:属性值),每一组之间用逗号分隔

+ 关于对象键值对的操作(增删改查)

    + 对象的属性名不能重复

    + 对象.属性名  => 这样操作属性名不能是数字

+ 对象[属性名]  => obj['n']和obj[n]是不一样的,前者属性名就是n,候着是把n变量存储的值作为属性名拿过来操作的(假设n是100,此时相当于obj[100])

基本数据类型和引用数据类型的区别 *(很重要)

-数据检测内容 

+ 堆内存(HEAP)和栈内存(STACK)

+ 栈内存

    + ECStack 执行环境栈

+ EC(G)全局执行上下文

+ VO(G)全局变量对象

+ let a =12

+ 创建12这个值,存放到栈内存中(栈内存是用来执行代码和存储基本类型值的)

+ 创建变量a存储到 VO(G)

+ 最后让a指向12这个值 (=赋值的意思就是值的指向)

+ 堆内存

+ let obj = {xxx:'xxx'}

        + 创建对象值(引用数据类型不能直接存储到栈内存中)

+ 创建一个堆内存,有一个16进制地址(AAAFFF000)

            + 把对象中的键值对存储到堆中

            + 把堆内存的地址存放到栈内存中,供变量指向

+ 创建变量obj,存储到VO(G)

+ 让obj指向堆内存的地址 AAAFFF000

    + 后期obj.xxx的所有操作,都是先基于地址找到堆内存,从而来操作堆内存中的内容

DOM的一些操作 **

+ document.getElementById

+ document.body

    + JS中获取的元素都是对象数据类型的(有自己对应的堆内存,堆内存中存储着很多内置的属性和方法,这些属性方法就是用来操作DOM元素的)

        + id

        + className

        + tagName

        + innerHTML

        + innerText

        + style = 对象  操作当前元素的“行内”样式

        + onclick

        + ...

+ context.getElementsByTagName

    + 获取到的是一个“类数组”元素集合 HTMLCollection

    + 操作起来和数组类似(基于索引获取某一项以及循环操作等)

JS中常用的操作语句 **

+ 判断语句

+if、elseif、else

    + 三元运算符

        + 语法  条件?成立:不成立;

+ 基于null/undefined占位

        + 多个事情基于括号包起来,逗号分隔

        + 三元嵌套

+switchcase

+ 每一种case都是===判断

        + == 和 === 的区别

+ 循环语句

+for循环:指定循环次数或者遍历数组

        + 四步操作

+break

+continue

+forin循环:变量对象中的键值对的

        + 优先按照从小到大遍历数字属性

    + ...

JS中常用的输出方式

+ console

+.log

+.dir

+.table

+.time/.timeEnd

+.warn

    + ...

+ 浏览器弹出窗口(输出的结果都会变为字符串)

    + alert

    + confirm

    + prompt

+ 向页面中输出内容的(输出的结果都会变为字符串)

+ document.write

+ 元素.innerHTML

+ 元素.innerText

    + ...

函数(function)

一个处理事情的方法,例如:洗衣机就是一个函数

1.生产洗衣机

把洗衣服的操作的集成在一起

相当于一个函数:函数的目的就是把实现一个功能的代码进行封装,以后再想实现这个功能,我们只需要执行方法即可,无需再把代码写一遍 => “低耦合、高内聚”:减少页面中的冗余代码,提高代码的重复使用率

2.让洗衣机运行

执行函数

函数两部分:定义函数、执行函数(光定义函数是没有用的,只有把函数执行,才能起到对应的作用)


没有学不会的东西只要你肯努力

-----------------------------------------------------------------------------------努力成为:前端晨

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容