尚硅谷JavaScript基础

1. 基本语法

1.严格区分大小写

  1. 结尾,不写浏览器会自动添加,就是会消耗系统资源,有时候还会加错
  2. 忽略多个空格和换行

2. 字面量和变量

字面量
不可改变的值

变量
可以用来保持字面量

3. 标识符

所有的可以自主命名的都可以称为标识符
例:变量名、函数名、属性名

规则

  1. 不能数字开头
  2. 不能是关键字和保留字
  3. 一般采用驼峰命名
  4. 可以含有 _、字母、数字、$
20190731163548834.png

20190731163602300.png

4. 数据类型

基本数据类型 存储在栈中,有编译器自动分配,自动释放
String
Number
Boolean
Null
Undefined
Symbol(es6新增)
BigInt

引用数据类型 值存储在堆中,在栈中存储的是地址值,通过地址值找到
Object
Array
Function

typeof
检查数据类型
注意:typeof null 返回object 这是一个BUG
(26条消息) 为什么typeof(null)返回的是object_flyabovegrass的博客-CSDN博客
以二进制存储,低三位数表示数据类型,null 全是0 所以就判断成 object
000 --- 对象
1 --- 整数
010 --- 双精度浮点数
100 --- 字符串
110 ---布尔值

5. 强制类型转换

1. 转为String

方式一
调用 toString()方法
返回转换的结果

方式二
调用对应的方法
例:转换为String 就调用String(参数)方法

方式三
+‘ ’,也可以转换

2. 转为Number

方式一

调用Number(参数)方法
①String转换成 数值(纯数值)、NaN(包含非数值内容)、0(为空或者空格)
②Boolean转换成 1 、0
③Null 转换成 0
④Undefined 转换成 NaN

方式二
parseInt(参数)整数
parseFloat(参数)小数

方式三

可以使用运算符就行转换。
任何值做 加减乘除 运算都会自动转换成Number

3. 转为Boolean

方式一
调用Boolean(参数)方法
①Number 转换
除了 0 和 NaN 其余都是true
②String 转换
除了空字符串,其余都是true
③null / undefined 转换
false
④对象
true

6. 运算符

可以对一个或多个值进行运算并获取结果

1. 算数运算符

加 减 乘 除 取余 ...

对非number数值进行运算时,会先转换成number 再运算。
任何值和NaN运算,都是NaN

2. 自增和自减

i++ :自增前的值
++i :自增后的值
i-- / --i :同上

3. 逻辑运算符

! 非
&& 与 都真 为true
|| 或 只要有一个真 为true

4. 赋值运算符

= 、+= 、 -= 、*= 、/= 、%=

5. 关系运算符

\ ( > 、 < 、>= 、<= )

6. 相等运算符

== :转换类型
!= 转换类型
=== :不转换,全等才等
!== :不转换

7. 三元运算符

条件表达式 ? 语句1 :语句二;

20190731164250717.png

7. 代码块

{ }

8. if语句

if(){
}

if(){
}else{
}

if(){
}else if(){
}else{
}

9. 条件分支语句

switch(){
    case  表达式1:
        语句
        break;
    case  表达式2:
        语句
        break;
    ......
    default :
        语句
        break;
}

10. while语句

while(条件){
}

do{
}while()
至少执行一次

11. for循环

for ( ; ;){
}

12. break 和continue

不能在 if 中使用

break 用来退出switch和for
continue 跳出当前循环,执行下一次循环

13. 对象

①内建对象
es中定义的对象
例:Math、String、Number、Boolean、Function、Object

②宿主对象
js运行环境提供的对象
例:BOM、DOM

③自定义对象
自己定义的对象

14.枚举对象的属性

for...in...
for( let 变量 in 对象 ){
}
返回键名

可以自己给for...of...添加迭代器实现遍历对象

15. this

函数执行的上下文对象

①以函数形式调用,this 是window
②以方法形式调用,this 是调用的对象
③以构造函数调用,this 是新创建的对象
④call(obj),this 就是obj

16. 构造函数

普通函数直接调用
构造函数需要new之后调用
构造函数中的方法,
function Person( name , age){
this . name = name;
this . age = age;
this . sayName = function(){}
}
sayName()可以定义在全局作用域中,可以避免在创建实例的时候多次创建函数,但是会污染全局作用域命名空间
this . sayName = fun;
function fun(){}
因此可以改为。
在原型上定义
即:Person. prototype.sayName = function(){}

创建构造函数(默认大写)
function Person(){
}

17. 原型对象

原型对象

18. call() 和 apply()

对函数调用这个方法会调用函数
可以将一个对象指定为第一个参数
此时这个对象就是函数执行时的this

call()可以将实参在对象之后依次传递
fun . call(obj , 参数1 ,参数2)
apply()需要将实参封装到一个数组中
fun . apply(obj , [ 参数1 ,参数2 ])

19. arguments

一个类数组对象
arguments . length 可以获取实参的长度

20. 垃圾回收

定义为 null 就行

21. 数组方法

数组末尾
①末尾添加一个或多个 push()返回新数组长度
②删除最后一个元素pop()返回被删除的元素

数组开头
①开头添加一个或多个 unshift()返回新数组长度
②删除第一个元素 shift()返回被删除的元素

slice
提取指定元素
slice(开始索引,结束索引),左闭右开,结束位置可选

splice
删除指定元素
splice(开始索引,删除数量,插入元素)
插入到开始位置之前,将插入元素替换被删除的元素

concat()
合并两个或多个数组 返回新数组
不影响原数组

join()
将数组转换成字符串
不影响原数组
可以指定连接符,不指定默认使用 ,
. join(‘’)

sort()
排序,直接修改原数组

知识点.png

无标题.png

reverse()
反转数组

22. Date对象

表示一个时间
var d = new Date()
var year = d . getFullYear()

方法
getFullYear()年份
getMonth()月份
getDate()日份
getDay()周几,0--周一;1--周二 ......
getTime()时间戳
now()代码执行的当前时间戳

23. Math 对象

不是一个构造函数,属于一个工具类,不用创建对象,直接使用就行

方法
abs() 取绝对值
ceil()向上取整
floor()向下取整
round()四舍五入取整

random()生成 0 - 1 之间的随机数
①生成一个 0 - X之间的随机数:Math . round(Math . random()+X)
②生成一个 X - Y 之间的随机数:Math . round(Math . random()* (Y-X)+X)

max()最大值
min()最小值
pow(X,Y) X的Y次幂
sqet()开方

24. 包装类

数据类型转换

String
Number
Boolean

25. 字符串方法

在底层,字符串以字符数组的形式保存的
例:‘Hello’ —> [ ‘H’,‘e’,‘l’,‘l’,‘o’ ]

属性和方法

length 属性
charAt() 返回字符串中指定索引的字符
charCodeAt() 返回指定位置的字符的编码(unicode)
fromCharCode() 根据字符编码获取字符
concat() 链接两个或多个字符串
indexOf(指定内容,开始位置) 返回第一次出现的index,开始位置可省略
lastIndexOf() 同 indexOf(),从后往前找
slice(开始索引,结束索引) 结束索引可以省略,结束可以是负数,倒数第几个,左闭右开
substring(开始,结束) 同上,但是结束索引不可以是负数
substr(开始索引,截取长度) 包括开始位置
split(字符串) 根据字符串截取,空串每个字符截取下来
toUpperCase() 大写并返回
toLowerCase() 小写并返回
replace(被替换的内容,替换内容) 默认替换第一个

26. 正则表达式

1. 简介

20190731172444698.png

2. 语法

20190731172500758.png

3. 量词

20190731172512449.png
20190731172522161.png
20190731172531201.png
20190731172540345.png
20190731172549854.png

27. DOM

文档对象模型

文档 --- 整个HTML网页文档
对象 --- 将网页中的每个部分都转换成一个对象
模型 --- 使用模型表示对象之间的关系,以便获取对象

20190731172619603.png

节点node

无标题.png

元素节点 --- HTML文档中的标签,--> Element

属性节点 --- 元素的属性,--> Attr

文本节点 --- HTML标签中的文本内容,--> Text

文档节点 --- 整个HTML文档,--> document
网页中所有的节点都是它的子节点
document对象作为window对象的属性存在,可以直接使用。

事件简介

用户和浏览器之间的交互行为

文档的加载

浏览器加载一个页面,按照自上向下的顺序加载
onload事件会在整个页面加载完成后才出发

27.1 DOM查询

NodeList都是类数组对象

getElementById()
getElementsByTagName() 返回类数组对象
getElementsByClassName()
getElementsByName()
childNodes 注意这里没有括号,当前节点的所有子节点
firstChild 第一个子节点
lastChild 最后一个子节点
parentNode 当前节点的父节点
previousSibling 前一个兄弟节点
nextSibling 后一个兄弟节点

documentElement属性 保存的是HTML根标签
document . all 页面中所有元素,类数组对象

querySelector(‘ 选择器 ’)
querySelectorAll( ) 返回数组

createElement()创建元素节点对象
createTextNode()
appendChild(子节点)向父节点中添加一个新的子节点
insertBefore(新节点,旧节点)在指定子节点前插入新的子节点
replaceChild(新节点,旧节点)替换
removeChild()删除节点

28. for循环与响应函数的执行顺序

20190731173307824.png

29. 事件

1. 事件对象

当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为参数传递进响应函数

2. 事件的冒泡

事件的向上传导,当后代元素的事件被触发时,其祖先元素的相同事件也被触发。

取消冒泡
event . cancelBubble = true

3. 事件的委派

btn . onclick = function(){}

将事件统一绑定给元素的共同的祖先元素,这样后代元素上的事件被触发时,就会冒泡到祖先元素

4. 事件的绑定

绑定方式
方式一:
addEventListener()
参数:

  1. 事件的字符串,不需要写on
  2. 回调函数,当事件触发时函数被调用
  3. 是否在捕获阶段触发,布尔值,一般为false
    可以绑定多个响应函数,按照绑定顺序执行,即从上到下
    支持ie9及以上
    this 是绑定事件的对象
btn . addEventListener('click', function(){}, false)

方式二:
直接添加
对象 . 事件 = 函数
的形式绑定响应函数
只能同时为一个元素的一个事件绑定一个响应函数
如果绑定多个函数就会被后面的覆盖

btn . onclick = function(){}

方式三:
attachEvent()
参数:

  1. 事件的字符串,需要写on
  2. 回调函数
    实行顺序和addEventListener()相反
    this 是window
btn . attachEvent('onclick' , function(){})

支持ie8及一下

5. 自定义响应函数

20190731173648368.png

6. 事件的传播

无标题.png
20190731173715390.png

7. 事件

鼠标事件
onclick 点击事件
onmousemove 移动事件
onwheel 滚轮事件

键盘事件
onkeydown 按键被按下 ,一直按着不松手,事件就会一直被触发
onkeyup 按键被松开,不会连续触发

30. BOM

浏览器对象模型
BOM对象
Window:代表整个浏览器的窗口,同事也是网页中的全局对象,全局中的变量 / 函数都作为window的属性 / 方法保存
Navigator:当前浏览器的信息,可以借此识别不同的浏览器
Location:当前浏览器的地址栏信息,或操作浏览器跳转页面
History:浏览器历史记录,可以操作历史记录。但是由于隐私问题,只能操作前后翻页,不能获取到具体的历史记录
Screen:用户的屏幕信息。可以获取用户的显示器的相关信息,主要用于移动端。

1. Navigator

2. Location

方法
assign()跳转页面
reload()重新加载页面,刷新
replace()替换页面,调用后跳转页面

3. History

属性和方法
length 属性,可以获取当前访问的链接数量
back()
forward()
go()

4. Screen

31.定时调用

var timer = setInterval(function(){},时间)
参数

  1. 回调函数,每隔一段时间就会调用一次
  2. 间隔时间
    clearInterval(timer)关闭定时器
    参数: 定时器变量

32. 延时调用

var timer = setTimeout(function(){},时间间隔)
只执行一次
参数
回调函数,延时后被调用
延长时间

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

推荐阅读更多精彩内容