JaveScript基础笔记

1.JavaScript是什么

1.JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果

2.作用（做什么）

• 网页特效
• 表单验证
• 数据交互
• 服务端编程

3.JavaScript的组成

1.ECMAScript：

规定了js基础语法核心知识

比如：变量、分支语句、循环语句、对象等

2.WebApls

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等

权威网站： MDN

1.2JavaScript书写位置

1.内部JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在上面

拓展：alert（‘你好，js’）页面弹出警告对话框

 

外部JS

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面里

JS两种注释方法：

• 1.单行注释：符号// 作用：//右边一行代码被忽略 快捷键：ctrl+
• 2.块注释：符号/**/ 作用：在/*和*/之间的所有内容被忽略 快捷键：shift+ctrl+a

JS结束符

• 代表结束语句
• 英文分号;
• 可写可不写（不写的多）
• 换行符（回车）会被识别成结束符，所以一个完整的语句，不需要手动换行
• 因此在实际开发中有许多人主张书写JavaScript代码时省略结束符
• 但为了风格统一，要写结束符就每句都写，要么每句都不写。（按照团队要求）

输入输出语法

什么是语法：

人和计算机打交道的规则

我们要按照这个规则去写

1.输出语法：

document.write('要输出的内容')；

• 想body内输出内容
• 如果输出内容写的是标签，也会被解析成网页元素

alert（'要输出的内容'）；

• 页面弹出警告对话

console.log('控制台打印')

• 控制台输出语法，程序员调试使用

输入语句：

prompt('您今年多大了？')

变量

目标：理解变量是计算机存储数据的“容器”

变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

声明变量：要想使用变量，首先需要创建变量（专业说法：声明变量）

语法： let变量名

• 声明变量由两部分构成：声明关键字 变量名（表识）
• let即关键字（let：允许、许可、让、要），所谓关键字是系统提供的专门用来声明（定义）变量的词语
• 举例： let age； age即变量的名称，也叫标识符

1.怎么理解变量？它的主要作用是什么？

• 一个容器，用来存放数据的

2.变量是通过那个关键字来声明变量的？如何赋值？

• 变量通过let声明 通过=实现赋值

3.变量通过变量名来获得里面的数据

4.可以同时声明多个变量

 

变量命名规则与规范

规则：必须遵守，不遵守报错

规范：建议，不遵守不会报错，但不符合业内通识

1.规则：

• 不能用关键字 关键字：有特殊含义的字符，JavaScript内置的一些英语词汇，如：for、let、var等
• 只能用下划线、字母、数字、$组成，且数字不能开头
• 字母严格区分大小写，如Age与age是不同的变量

2.规范：

• 起名要有意义
• 遵守小驼峰命名法 第一个单词首字母小写，后面每个单词首字母大写。例：userName

数组的基本使用

目标：能够声明数组并且能够获取里面的数据

取值语法： 数组名【下标（或叫索引）】

例： let names = 【'小明', '小刚', '小红', '小丽', '小米'】

数据类型-数字类型（number）

即我们数学中学习到的数字，可以是正整数、小数、正数、负数。在JS中统称为数字类型。

注意：JS是弱数据类型，变量到底属于哪种类型，只有赋值确认后才能确定。

Java是强数据类型 例如 int a = 3 必须是整数

数据类型-字符串类型（string）

通过单引号’‘、双引号“”、或反引号``包裹的数据都叫字符串，单引号和双引号没有本质上区别，推荐单引号。

注意事项：

1.无论单引号还是双引号必需成对使用

2.单引号/双引号可以相互嵌套，但是不以自己嵌套自己（口诀：外单内双，或外双内单）

3.必要时可以使用转义符\,输出单引号或双引号

数据类型-布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值true和false，表示肯定用（true），表示否定数据用（false）

数据类型-未定义类型（undefined）

未定义是比较特殊的类型，只有一个值undefined

什么情况出现未定义类型？ 只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined。

数据类型-null（空类型）

null表示值为空

let obj = null

null和undefined区别：

1.undefined表示没有赋值

2.null表示赋值了，但是内容为空

null开发中的使用场景：将来有个变量里面存放的是一个对象，但是还没有创建好，可以先放个null

模板字符串

1.作用：

• 拼接字符串和变量
• 在没有它之前，要拼接变量比较麻烦

2.符号

• ``
• 在英文输入模式下按键盘tab键上方的键
• 内容拼接变量时，用${}包柱变量

隐式转换

某些运算被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则：

优点：

• +号两边只要有一个是字符串类型，都会把另一个转换成字符串
• 除了+以外的算数运算符 比如-*/都会把数据转换成数字类型

缺点：

• 转换类型不明确，靠经验才能总结

小技巧：+号作为正号解析可以转为number

显式转换

概念：自己写代码告诉系统该转成什么类型

转换为数字

Number（数据）

• 转成数字类型
• 如果字符串内容里有非数字，转换失败时结果为NAN（No a number）既不是一个数字

parselnt（数据）

• 只保留整数

parseFloathe（数据）

• 可以保留小数

常见错误

1.下面可能出现的原因是什么

age is not defined

分析：

1.提示age变量没有定义过

2.很可能age变量没有声明和赋值

3.或者我们输出变量名和声明的变量不一致引起的。

 

分析：

identifier

1.提示“age”已经声明

2.很大概率是因为使用let重复声明了一个变量

3.注意let变量不允许多次声明一个变量

3.

after argument list

分析：   

1.提示参数少了）

2.很大概率是小括号不匹配，掉了一半

 

1.赋值运算符执行过程？

let  num = 18

• 赋值是等号右边给左边，要求左边必需是一个容器

2.+=、*=出现是为了简化代码，比如let num = 5，让num加10怎么写？

num+=10

一元运算符

目标：能够说出自增/减运算符前置和后置差异

自增运算符用法：

前置自增：

• 先自加在使用（++在前，先加）

let I = 1

console•log( ++i, +2)  结果是4

i先加1，i变成2后和2想加

后置自增：

• 先使用在自增（++在后，后加）

let I =1

console•log( i++ , +2)  结果是3

i是1，先和2想加运算完毕后，在加1

自增运算符用法：

but：

1.前置自增和后置自增独立使用时并没有区别

2.一般开发中我们都独立使用

3.后面 i++后置自增我们会使用相对较多

比较运算符：

 

小节：

1.=、==、===三者的区别是什么？

=号是赋值

==号是判断，只要求值相等，不要求数据类型相等，一样即可返回true

===号是全等，要求值和数据类型都一样返回才是true

开发中，请使用===

 

2.比较运算符返回的结果是什么？

只有两个结果，true（肯定）和false（否定）

逻辑运算符

 

逻辑与 （一假则假）

console.log(true && true) true

console.log(false && true) false

逻辑或 （一真则真）

console.log(false || true) true

console.log(false || false) false

逻辑非 （取反）

console.log(!true) false

console.log(! false) true

有五个值当false 来看

fasle 数字0  " "  undefined null

逻辑运算符里的短路

• 短路：只存在于&&和||中，当满足一定条件会让右边代码不执行

符号	短路条件
&&	左边为false就短路
||	左边为true就短路

原因：通过左边能得到整个式子的结果，因此没必要判断右面

运算结果：无论&&还是||，运算结果都是最后被执行的表达式值，一般用在变量赋值

运算符优先级

目标：掌握运算符优先级，能判断运算符执行顺序

 

• 一元运算符里的逻辑非优先级很高
• 逻辑与比逻辑或优先级高

表达式与语句的区别：

• 表达式计算出一个值 比如3+5 x=7
• 语句用来自行以某件事发生（做什么事） alert（） console.log（） 比如接下来学的分支语句

分支语句：

1.if语句

if语句有三种使用：单分支、双分支、多分枝

单分支使用语法：

if (条件) ｛

满足条件执行的代码

｝

括号内的条件为true时，进入打括号里执行代码

小括号里的结果若不是布尔类型时，会发生隐式转换为布尔类型

双分支语句：

if (条件) ｛

满足条件执行的代码

｝else {

不满足条件执行的代码

}

多分枝语句：

 if (条件1) ｛

代码1

｝else if (条件2) {

代码2

} else if (条件3)｛

代码3

｝else {

不满足条件执行的代码

}

释义：

• 先判断条件1，若满足条件1就执行代码1，其他不执行
• 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
• 若以上不满足则继续往下判断，以此类推
• 若以上条件都不满足，执行else里的代码n
• 注：可以写N个条件，但只演示了2个。

三元运算符

目标：能利用三元运算符执行满足条件的语句

• 其实是比if双分支 更简单的写法，有时候也叫三元表达式
• 符号：？与：配合使用
• 语法:

   条件 ？ 满足条件执行的代码： 不满足条件执行的代码

• 一般用来取值

switch语句

目标：能利用switch执行满足条件的语句

switch (数据) ｛

 case 值1：

     代码1

     break

case 值2：

    代码2

     break

default:

    代码n

      break

｝

释义：

• 找到跟小括号里数据全等的case值，并执行里面对应的代码
• 若没有===的值，则执行default里的代码
• 例：数据若跟值2全等，则执行代码2

1.switch case语句一般用于等值判断，不适合于区间判断

2.switch case一般需要配合break关键字使用 没有break会造成case穿透

断点调试

目标：掌握断点调试方法，学会通过调试检查代码

• 作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
• 浏览器打开调试界面

1.按f12打开开发者工具

2.点到sources一栏

3.选择代码文件

• 断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时就会停下来

 

while循环

循环：重复执行某段代码，而while：在。。。期间

while循环语法：

 while (循环条件) ｛

循环的代码（循环体）

｝

释义：

• 跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
• while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后在回到小括号判断条件，知道括号条件不满足，及跳出。

i = 1

while ( i <=3 ) {

document.write('循环3遍')

i++

}

while循环注意事项：

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

所以，循环需要具备三要素：

1.变量起始值

2.终止条件（没有终止条件，循环会一直执行下去，造成死循环）

3.变量变化量（用自增或自减）

循环结束：

• continue：结束本次循环，继续下次循环
• break：跳出所在循环

for循环语句

• 也是重复执行代码
• 好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

for (声明起始值 ，循环条件 ，变化值  ) ｛

循环体

｝

循环退出

循环结束：

continue：结束本次循环，继续下次循环

break：跳出所在的循环

for循环嵌套

for (声明起始值 ; 循环条件 ; 变化值  ) ｛

  for (声明起始值;  循环条件 ; 变化值 ) {

}

｝

一个循环里再套一个循环，一般用在for循环里

遍历数组：

用循环把数组中每个元素都访问到，一般会用for循环遍历

let name = [10, 20, 30 ,40 ,50]

for (i =0; i<= name.lenght ; i++ ) {

document.write(name[i])

 

操作数组

1.数组增加新的数据

数组.push（）方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)

语法：

arr.push(元素1，...，元素n)

例如：

let arr = ['red','green']

arr.push('pink','hotpink')

console.log(arr) // ['red',''green','pink','hotpink']

1.数组增加新数据

arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

语法：

arr.unshift(元素1，...，元素n)

例如：

let arr = ['red','green']

arr.unshift('pink')

console.log(arr) // ['pink','red','green']

删除数组

数组删除元素

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值

语法：

arr.pop()

例如：

let arr = ['red','green']

arr.pop()

console.log(arr) // ['red']

数组.shift()方法从数组中删除第一个元素，并返回该元素的值

语法：arr.shift() 例如：let arr = ['red','green']

arr.shift() console.log(arr) // ['green']

数组.splice()方法 删除指定元素

语法：

arr.splice(start,deleteCount)

arr.splice(起始位置，删除几个)

解释：

start起始位置：

指定修改的开始位置（从0计数）

deletecount：

表示要移除的数组的元素的个数

可选的，如果省略则默认从指定的位置删除到最后

函数

1.为什么需要函数？

可以实现代码复用，提高开发效率

2.函数是什么？

function执行特定代码任务的代码块

函数的调用语法

//函数调用，这些函数体内的代码逻辑会被执行

函数名（）

注意：声明（定义）的函数必需调用才会真正被执行，使用（）调用函数

例子：

// 函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次

sayHi()

sayHi()

我们曾经使用的alert（），parselnt（）这种名字后面跟小括号的本质都是函数的调用

 function 函数名 （参数列表） ｛

函数体

｝

函数传参

• 声明语法

 function get some (num1)  {

           document.write(num1+num1)

}

• 参数列表：传入数据列表。声明这个函数需要传入几个数据。多个数据用逗号隔开
• 例：

调用语法

函数名（传递的参数列表）

例： getQquare（8） getSum（10，20）

调用函数时，需要传入几个数就写几个，用逗号隔开

形参和实参

形参：声明函数时在函数名右侧小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右侧小括号里的叫实参（实际上的参数）

开发中尽量保持实参和形参数量一致

 

有返回值的函数

用return返回数据

细节：

• 在函数体中使用return关键字能将内部的执行结果交给外部使用
• 函数内部只能出现一次return，并且return后面的代码不会再执行，所以return后面的数据不要换行写
• return会立即结束当前函数
• 函数可以没有return，这种情况函数默认返回值为undefined

 

作用域

 

变量有个坑 特殊情况：

如果函数内部或者块级作用域内部，变量没有声明，直接使用，也当全局变量看，但是强烈不推荐。

但是有一种情况，函数内部的形参可以看作是局部变量

匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式

语法：

let fn = function () {

函数体

}

调用： fn（） //函数体

其中函数的形参和实参使用跟具名函数一致。

立即执行函数

场景介绍：避免全局变量之间的污染

语法： 方法1：

(function () { console.log(11) })();

方法2：

(function() { console.log(11) }() );

无需调用，立即执行

立即执行函数可以防止变量污染

立即执行函数无需调用，立即执行，本质是已经调用了的。但多个立即执行函数之间需要用分号隔开

对象使用

语法：let 对象名 = {

属性 ：属性值

方法：方法值

}

对象有属性和方法组成

对象属性没有顺序，属性和值用： 分开。属性和属性之间用, 分开，最后一个不用加逗号

属性访问：声明对象，并添加了若干属性后，可以使用.或[]获得对象中属性对应的值，称之为属性访问，就是获得对象里面的属性值

对象访问属性两种写法

点形式 对象.属性

[]形式 对象['属性']

方法：

方法名：function（） {}

增删改查:

对象名.属性名=新值

 

遍历对象

 

内置对象Math

math对象是js提供的一种‘数学高手’对象

提供了一系列做数学运算的方法

方法有：

random：生成0-1之间的随机数

ceil：向上取整

floor：向下取整

max：找最大数

min：找最小数

pow：幂运算

abs：绝对值

如何生成m-n之间的随机数

Math.floor(Math.random() * (n - m +1)) + m