js基础阶段知识点梳理

知识点梳理"/>

js基础阶段知识点梳理

目录

一、js书写位置

1、行内式

2、内嵌式

3、外链式

二、js输入输出语句

三、变量 

1、变量声明

2、let和var的区别 

3、变量的命名规则

四、数据类型 

1、数据类型分类

2、数据类型转换 

五、运算符 

比较运算符

逻辑运算符 

 短路运算符

算术运算符 

赋值运算符

自增/自减运算符 

三元表达式（三目运算符） 

六、流程控制语句 

1、顺序

2、选择（分支）

if 多分支语句

三元运算符（三元表达式）

switch语句

3、循环（重复）

while循环

do while 循环

for循环

无限循环

七、数组

创建数组

 数组的方法

八、函数

函数声明方法

函数return语句

函数参数

 函数作用域

立即执行函数

九、对象 

对象操作

对象的遍历

Math内置对象

随机函数

 猜数字游戏

---

一、js书写位置

1、行内式

行内式：直接书写在标签身上，是一个简写的事件，所以又称之为事件属性，onclick 单击事件 点击之后出现一个弹窗

 <button onclick="alert(123)">按钮</button>

2、内嵌式

内嵌式：一般写在 head 标签 或者 body 标签下

<script>alert('hello world')</script>

3、外链式

外链式：首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中

  <script src="./js/my.js">//  alert('hi') 此处不要写代码</script>

二、js输入输出语句

alert  弹窗 （文本输出内容）
 console.log  控制台打印输出
 prompt   提示(提示用户输入）
  document.write()  页面输出

     alert('hello')prompt('你好')document.write('hello world')console.log('hello world')

三、变量 

变量:存储数据的容器

1、变量声明

变量是用var，let关键字定义的，其中常用let定义变量

定义变量 var 变量名 = 值

    // 或 先声明 后赋值

 //先声明后赋值
var  scorescore  =  90alert(score)let age=18console.log(age)// 定义多个变量//var a,b,c =20 //  var a var b var c = 20

2、let和var的区别 

let不允许重复定义变量，var可以重复定义变量

  let不具有变量提升（必须先声明再使用）， var具有变量提升

let定义的变量具有块级作用域

// js执行这段代码时候 默认会把 var声明的变量提升console.log(num);var num  = 100// 等价于下面// var num //console.log(num);//num = 100

let age=20
let age=20//报错

3、变量的命名规则

变量命名规范：1 变量名不能是数字开头或纯数字的变量

              2  变量命名可以加下划线

              3 可以由字母 数字 下划线组成

              4 变量命名区分大小写

              5 如果变量名是由多个单词组成，使用驼峰命名

              6 命名尽量语义化

  let hobby = 'coding'let a = 100let A  = 200// let var // let 哈哈  = 666// console.log(哈哈)

四、数据类型 

1、数据类型分类

   简单数据类型 （基本数据类型）：字符串(string)， 数值型(number)， 布尔值(boolean)， null undefined  ，    symbol ， bigint

  复杂数据类型（引用数据类型）：对象(Object)、数组(Array)、函数(Function)....

2、数据类型转换 

字符串---->数字

parseInt 保留整数并转换为整数型，不会进行四舍五入

parseFloat 保留浮点数（小数点） 无论小数点后有多少位都会被保留下来

Number（）把其他类型转成数字类型

console.log(Number('123'));console.log(Number(true)); // true->1  false->0console.log(Number(null));// null->0console.log(Number(undefined));// undefined->NaN

+'123'---->123

'123'-0   '123'*1   '123'/1   隐式转换

    数字------>字符串

转换为字符串   toString  String

 语法：变量.toString    String(变量)

 语法：变量.toString    String(变量)

console.log(5+''); // '5'+''-> '5'console.log(''+5);console.log(String(100));  // '100'console.log(String(true)); //  'true'console.log(String(null)); // 'null'console.log(String(undefined)); // 'undefined'console.log((5).toString());//  输出5的十进制字符串形式console.log((5).toString(2)); //  输出5的二进制字符串形式

     其他类型----->布尔类型

    Boolean()
    0 ，null， undefined， NaN ，  ' ' ----->false
    非0数字   非空字符串....--------->tru

console.log(Boolean(0))  //falseconsole.log(Boolean(null))  //falseconsole.log(Boolean(undefined))  //falseconsole.log(Boolean(NaN))  //falseconsole.log(Boolean(''))  //falseconsole.log(Boolean(1))   //trueconsole.log(Boolean('hello'))   //true

五、运算符 

分为：比较运算符，逻辑运算符，短路运算符，赋值运算符，递增递减运算符,算数运算符

比较运算符

运算符	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于或等于右边
===	左右两边是否类型和值都相等（重点）
==	左右两边值是否相等
!=	左右值不相等
!==	左右两边是否不全等

比较运算符：==      === 用比较运算符做判断时，返回的值是true或false

= 是赋值

==  相等   首先先把两个的数据类型转换为同一种数据类型，在进行值的对比，如果值不相等就返回false，否则返回true

===   完全想等 不会进行数据类型的转换，只有数据类型和值全部相等才会返回true

true只有在不加引号的时候才会转换为1

逻辑运算符 

使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值

逻辑运算符： 主要是布尔值之间的运算，返回结果是布尔值

                      &&逻辑与    || 逻辑或        ! 逻辑非

                      逻辑与：全部为真才为真，否则为假

                      逻辑或：全为假才为假，否则是真

                      逻辑非： 主要针对布尔值的取反操作

符号	名称	特点	口诀
&&	逻辑与	符号两边有一个假的结果为假	一假则假
||	逻辑或	符号两边有一个真的结果为真	一真则真
!	逻辑非	true变false false变true	真变假，假变真

console.log(5 > 3 && 10 < 5) // true&&false  falseconsole.log(5 > 3 && 10 > 5) //  true&&true trueconsole.log(5 == 3 && 10 < 5) // false&& false falseconsole.log(5 && 6) // 6console.log(10 > 8 && 0) // 0console.log('' && 100) //''

 短路运算符

短路运算符： 逻辑与 &&    逻辑或 ||

逻辑与 &&: 如果遇到表达式为假时直接返回假，如果表达式中都为真则返回最后一个为真的表达式

逻辑或||： 如果第一个表达式的值为真，则返回表达式1； 如果第一个表达式的值为假，则返回表达式2

算术运算符 

数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

运算符	作用
+	求和
-	求差
*	求积
/	求商
%	取模（取余数），开发中经常用于作为某个数字是否被整除

console.log(1 + 2)console.log('1' + 2) // 字符串参与的加其实是拼接 '1'  + '2'   -> '12'console.log(+8)console.log('12' - 2) // 12 - 2 -> 10console.log(20 * 2)console.log(4 / 3)

赋值运算符

赋值运算符：对变量进行赋值的运算符

= 将等号右边的值赋予给左边, 要求左边必须是一个容器

运算符	作用
+=	加法赋值
-=	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

let num = 1
// num = num + 1
// 采取赋值运算符
// num += 1
num += 3
console.log(num)

自增/自减运算符 

符号	作用	说明
++	自增	变量自身的值加1，例如: x++
--	自减	变量自身的值减1，例如: x--

1. ++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用

2. ++在后（后缀式）我们会使用更多

前置递增： ++num  ，  先自增再进行运算      用自增后的值进行运算

后置递增： num++ ，   先运算再进行自增     先用原来的值进行运算  

 // let num = 10// num = num + 1// num += 1// // 1. 前置自增// let i = 1// ++i// console.log(i)// let i = 1// console.log(++i + 1)// 2. 后置自增// let i = 1// i++// console.log(i)// let i = 1// console.log(i++ + 1)

三元表达式（三目运算符） 

三元表达式： 表达式1 ? 表达式2 : 表达式3

如果表达式1成立，就返回表达式2，如果不成立就返回表达式3

  //  求两个数最大值let num1 = 10,num2 = 20num3 = 32// console.log(num1 > num2 ? num1 : num2)let max = num1 > num2 ? num1 : num2max = max > num3 ? max : num3console.log(`max=${max}`)

六、流程控制语句 

1、顺序

        按照语句先后顺序依次执行

2、选择（分支）

1.if语句

语法：

if(条件表达式) {
  // 满足条件要执行的语句
}

if双分支语句

if (条件表达式){
  // 满足条件要执行的语句
} else {
  // 不满足条件要执行的语句
}

if 多分支语句

if (条件表达式){
  // 满足条件要执行的语句
} else if(条件表达式) {
// 满足条件要执行的语句
} else if(条件表达式) {
// 满足条件要执行的语句
}...

else {
  // 不满足条件要执行的语句
}

三元运算符（三元表达式）

使用场景： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else双分支 更简单

符号：? 与 : 配合使用

// 1. 语法格式

条件 ? 表达式1 ： 表达式2

// 2. 执行过程 
// 2.1 如果条件为真，则执行表达式1
// 2.2 如果条件为假，则执行表达式2 

 <!--  题目描述:接收用户输入的分数，根据分数输出对应的等级字母A、B、C、D、E，。90分(含)以上，输出︰A80分(含)~ 90分(不含)，输出︰B70分(含)~80分(不含)，输出:C60分(含)~70分(不含)，输出:D。60分(不含)以下，输出E --><script>let score = prompt('请输入你的分数')if(score>=90){console.log('A')}else if(score>=80){console.log('B')}else if(score >=70){console.log('C')}else if(score>=60){console.log('D')}else{console.log('E')}</script>

<!-- 题目描述:请用户输入1个星期数.就将对应的英文的星期打印出来.o比如用户输入'星期一'，则页面可以打印mondayo英文自己查有道。比如星期一是monday星期二是tuesday8． --><script>// let number=+prompt('请输入1~7之间数字')// if(number===1){//     console.log('monday')// }else if(number===2){//     console.log('tuesday')// }else if(number===3){//     console.log('wednesday')// }else if(number===4){//     console.log('thursday')// }else if(number===5){//     console.log('friday')// }else if(number===6){//     console.log('saturday')// }else{//     console.log('sunday')// }let number=prompt('请输入1~7之间数字')switch(number){case '1':console.log('monday')breakcase '2':console.log('tuesday')breakcase '3':console.log('wednesday')breakcase '4':console.log('thursday')breakcase '5':console.log('friday')breakcase '6':console.log('saturday') breakcase '7':console.log('sunday')breakdefault:alert('输错了，不在范围之内')break}</script>

switch语句

 1. 语法
 switch (表达式) {
  case 值1:
    代码1
     break

  case 值2:
    代码2
     break
   ...
  default:
    代码n
 }

注意：

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

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

3. if 多分支语句开发要比switch更重要，使用也更多

3、循环（重复）

while循环

while (条件表达式) {
   // 循环体    
}

  //  2 计算1+2+...+100 5050//  1+3+5+...+99let sum = 0 // 存储最终的结果let k = 1while (k < 100) {sum = sum + kk += 2} console.log(sum)

do while 循环

     do-while 
            语法
           do {
              循环体
            }while(条件)
            执行过程

    do while 和 while 循环的区别？
    do while 至少会执行循环体一次
    while用的多点，do while用的比较少，在特定场景会使用
 

循环三要素：

1.初始值 （经常用变量）

2.终止条件

3.变量的变化量

break和continue

break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）

continue 中止本次循环，一般用于排除或者跳过某一个选项的时候，继续执行下一次循环

      

for循环

      for(表达式 1;表达式2;表达式3) {
                //  循环体
              }
              // 表达式 1 -> 变量初始化
              // 表达式2 -> 循环条件
              // 表达式3 -> 改变循环变量
      
              执行过程：1 先执行表达式1 2 执行表达式2，表2的结果是true,则执行循环体 3 循环体执行完毕,执行表达式3，然后再回到第二步
 

无限循环

1.while(true) 来构造“无限”循环，需要使用break退出循环。（常用）

2.for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。

七、数组

创建数组

数组（Array）：就是一组数据的集合，每条数据也叫元素，可以 存放任意类型的数据，每个元素以逗号分隔

创建数组：

1、 字面量     常用

var arr = [ ]

2、 new 关键字

var arr = new Arrary()

const arr = [] // 空数组const arr2 = [10, 20, 30] // 数组有3个元素,元素之间用逗号const arr3 = ['1', 2, true, [1]] // 元素类型可以不一样

 数组的方法

push 方法
    语法：数组名.push(参数)    
    功能：在数组的末尾追加一个或多个元素
    参数：一个或多个要追加的元素
    返回值：元素添加之后的数组总长度
    
unshift 方法
    语法：数组名.unshift(参数)    
    功能：在数组的前面追加一个或多个元素
    参数：一个或多个要追加的元素
    返回值：元素添加之后的数组总长度
    
  pop 方法
    语法：数组名.pop（ )    
    功能：删除数组末尾的元素
    参数：无
    返回值：被删除的元素

​    
 shift 方法
​    语法：数组名. shift （ )    
​    功能：删除数组第一个的元素
​    参数：无
​    返回值：被删除的元素

    splice()
    数组名.splice(起始索引，删除元素个数，要添加的元素，要添加的元素，....）
    返回值：被删除的元素组成的数组

数组排序 sort()
    默认按照字符串排序
    arr.sort(function (a,b){
        return   a-b    //升序
        return   b-a   //降序
    }    ）

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
indexOf() 方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。
lastIndexOf() 方法返回数组中给定元素最后一次出现的索引，如果不存在则返回 -1。该方法从 fromIndex 开始向前搜索数组。
Array.isArray( )   判断是不是一个数组
通过构造函数直接调用的方法-----静态方法
Array.isArray() 静态方法用于确定传递的值是否是一个 Array。
join( )   不传参数时，默认会用逗号把元素拼成一个字符串，有参数时，按参数拼接

    

  //选择排序  升序let arr=[5,2,1,6,9,0,7]for(let i=0;i<arr.length-1;i++){  //定义循环轮数let minIndex=i   //定义最小索引为ifor(let j=i+1;j<arr.length;j++){   //每轮进行比较，确定最小值if(arr[j]<arr[minIndex]){minIndex=j}}if(minIndex !== i){  //最小索引不等于i,交换变量let temp=arr[minIndex]arr[minIndex]=arr[i]arr[i]=temp}        }console.log(arr) //[0, 1, 2, 5, 6, 7, 9]

   //删除重复元素let arr=[0,1,0,1,23,5,6,23,5,7,4,6,0,1]for (let i = 0; i < arr.length; i++) {for (let j = i + 1; j < arr.length; j++) {if (arr[i] === arr[j]) {arr.splice(j, 1)}}}console.log(arr)

八、函数

 函数是具有某种功能的代码块，为了复用

函数声明方法

1、命名函数 （自定义函数）

语法：  function   函数名（）{

// 函数体

}

2、匿名函数

var 变量名 = function（）{

  //函数体

}

函数名最好使用动词、有意义的，如果多个单词组成需要驼峰命名     myName

function是声名函数的关键字    需要小写

函数自身不会执行，需要调用后才会执行函数内的代码

函数分为两步：1、声明函数  2、调用函数

函数return语句

          return下面的代码不执行

         return后面加上值，可以把值返回出来，如果值用逗号隔开的，值能返回最后一个值，如果值是数组就返回数组；如果值是x+y这种，

返回值是x+y的结果

        结束当前循环，可以返回值，可以结束函数体内的代码

         函数return值后，调用函数时，就已经拿到了return的这个值

     return 作用-返回一个值，并且可以让函数提前结束调用
        语法 1 return sum 不能写成
            return
            sum 

函数参数

形参： 虚拟，是声明函数时写在函数名后的小括号内，参数之间使用逗号隔开，形参时使用变量名接收

实参： 真实，是调用函数时写在小括号内的参数，参数之间使用逗号隔开

形参和实参是一一对应的关系，如果形参没有实参对应，形参拿到的就是undefined

 函数作用域

全局作用域：在整个script脚本里就是全局作用域

局部作用域：在函数内就是局部作用域

全局变量：在script脚本内的变量都是全局变量，全局变量只有浏览器关闭时才会销毁释放内存

          在全局作用域内定义相同的变量会被覆盖

局部变量：函数内的变量也叫局部变量，函数使用结束后就会立即销毁释放内存

  局部作用域声明的变量和全局变量互不干扰，在全局作用域内是不能访问局部变量的

  在局部作用域内是可以访问全局变量的

特殊情况：在局部作用域下不使用var声明的变量是全局变量（不推荐）

函数的形参也是局部变量

作用域链：一级一级朝上查找变量，自己作用域没有就会朝外面的作用域查找

函数嵌套函数时，每一个函数都是独立的作用，里层函数可以访问外层函数的变量

外层函数不能访问里层函数的变量

变量之间也是互不影响

变量查找时遵循就近原则（只对里层函数朝外层查找）

预解析：  

1、遇到var 和function 先预解析

2、代码执行

var ：js解析器遇到var时，会先变量提升，提升到当前作用域的最上方，变量赋值的位置保持不变，然后再进行代码执行

函数预解析 ： js解析器遇到function会把整个函数提升到当前作用域的最上面，其他代码还是原来的位置

立即执行函数

第一种形式 (function() { ...})()

第二种形式 (function(){}())

      // 多个自执行函数用分号隔开

   

  // 自执行函数应用场景-防止变量全局污染

      // 封装库或框架使用，这样让变量不会与其他的变量 冲突

  // IIFE -立即调用函数表达式// 第一种形式 (function() { ...})()// (function () {//   console.log(111)// })()// 第二种形式 (function(){}())// 多个自执行函数用分号隔开/*  ;(function () {console.log(123)})();(function () {console.log(456)})() */// 自执行函数应用场景-防止变量全局污染// 封装库或框架使用，这样让变量不会与其他的变量 冲突

  <!-- **⽬标：** 封装⼀个函数,可以求任意数组的和 或 平均值**要求：**函数可以传递2个参数，⽐如 handleData(arr, true) handleData 处理数据的意思参数⼀： 接受实参传递过来的数组参数⼆: 布尔类型 如果是true或者不传递参数 是求和操作， 如果传递过来的参数是 false则是求平均值 --><script>function handleData(arr,flag=true) {//  flag = truelet sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}if(flag){return sum}else{return sum/arr.length}}const arr = [1, 2, 3, 4, 5]console.log(handleData(arr,true))//15console.log(handleData(arr))//15console.log(handleData(arr,false))//3</script>

九、对象 

对象     ： 对象可以存储一个人完整的信息，对象里有属性和方法，是以键值对组成的

声明对象：object

1、字面量

访问对象的值，对象的变量名.属性名

访问对象的值，  对象的变量名[ ' 属性名']      如果不加引号就会朝内存中找这个变量  

  给对象添加属性  对象名.属性名=属性值

修改对象的属性值  对象名.属性名=属性值

对象名['属性名']添加属性

2 new关键字创建

var obj = new Object(){

            name: '属性值'

        }

        // console.log(obj)

     3、构造函数创建对象 函数名首字母大写

        function Person(name) {

            this.name = name

        }

        var person = new Person('对象')

        // console.log(person)

对象操作

    对象名都是字符串，属性名没有特殊符号的时候，字符串引号可以省略

    查-------对象名.属性名 或 对象名['属性名']   (不加引号表示变量）
    
    当里面的属性用变量存起来时用[ ]
    总结：属性名明确的话，两种形式都可以，属性名存在变量里或者属性名含有特殊符号的，只能用中括号

    

    增-------对象名.属性名=属性值

    改--------对象名.属性名=属性值

    删---------delete   对象名.属性名
    

      // 对象名都是字符串,属性名没有特殊符号的时候，字符串引号可以省略const peiqi = {uname: '佩奇',age: 20,sex: '女','a-b': 20,}console.log(peiqi['a-b'])// 查 对象名.成员 或 对象名['属性名']console.log(peiqi.uname)console.log(peiqi['uname']) // peiqi[uname] 不加引号 uname当成变量看let key = 'age'console.log(peiqi.age)console.log(peiqi.key) // undefined 访问peiqi中属性名为key的属性值console.log(peiqi[key]) // peiqi['age']console.log(peiqi['age'])// 总结 属性名明确的话 两种形式都可以，属性名存在变量里或者属性名含有特殊符号的，只能用中括号// 增peiqi.color = 'pink'peiqi.sing = function () {console.log('唱歌')}console.log(peiqi)// 改peiqi.age = 4console.log(peiqi)// 删delete peiqi.sexconsole.log(peiqi)

对象的遍历

for    in   可以遍历对象或数组

 const peiqi = {uname: '佩奇',age: 20,sex: '女','a-b': 20,}// for in 可以遍历对象或数组for (let key in peiqi) {console.log(key) //  获取的是属性名console.log(peiqi[key]) //;}const arr = [1, 2, 3]for (let k in arr) {console.log(k) // 拿到的是索引 字符串console.log(arr[k])}

Math内置对象

Math内置对象------提供一系列与数学运算相关的属性或方法
    PI-------Math.PI
    
    常用方法
    abs------绝对值       Math.abs( )
    ceil-------向上取整    Math.ceil( )
    floor-------向下取整     Math.floor( )
    max-------求最大值      Math.max( )
    min--------求最小值     Math.min( )
    pow----    求某个数的几次方
    sqrt-------求平方根
    round------四舍五入
    random-----随机数 

随机函数

 // 产生n-m之间的随机整数function getRandom(n, m) {if (n > m) {let temp = nn = mm = temp}//   return Math.round(Math.random()*(m-n))+nreturn Math.floor(Math.random() * (m - n + 1)) + n}console.log( getRandom(1,6)) 

 猜数字游戏

     //  猜字游戏 1-10的整数//  1 产生一个随机整数function getRndNum(n, m) {if (n > m) {let temp = nn = mm = temp}return Math.floor(Math.random() * (m - n + 1)) + n}const rndNum = getRndNum(1, 10)console.log(rndNum)//  2 循环8次 让用户猜测let ifor (i = 0; i < 8; i++) {const num = +prompt('请输入本次你猜的值')if (num == rndNum) {alert('真棒，这也能猜到')break} else if (num > rndNum) {alert('猜大了')} else {alert('猜小了')}}if (i === 8) {alert('你的次数已用完')}