JS板块注意点总结

尼古拉斯_大雄
266 阅读6分钟

第一板块

js三种书写位置(与css一致)

1.行内写法 : 写在标签行内

2.内部写法 : 写在script标签内部(一般放在body标签的底部)

3.外部写法 : 写在js外部文件中,使用script标签的src属性导入

注意： 如果script标签写了src属性，就表示外部写法。此时内部的js代码不会执行。

变量

变量作用： 在内存中存储数据

1.声明变量 ： 在内存中开辟一个空间

2.变量赋值 = : 赋值运算符（把右边的数据放入左边的变量中，先执行右边的表达式）

js书写规则

1.变量名必须以： 字母、下划线_ 、符号开头，结尾可以是字母、下划线、符号开头，结尾可以是字母、下划线_ 、符号、数字（不支持在变量名中加 - ）

2.变量不能使用关键字作为变量名

image.png

3.多个单词使用驼峰命名法 : 第一个单词首字母小写，后面单词首字母大写

let和var区别

1.var是函数作用域，let是块作用域。 v2-d7696bf5cc29f02ef57bea3555b1b9c1_720w.jpeg 2.let不能在定义之前访问该变量，但是var可以。

3.let不能被重新定义，但是var是可以的。

常量和字面量

常量：用const定义，无法修改，修改则报；变量用let定义

字面量：是数据，不能出现在 = 的左边，= 的左边只能是变量

n++ 和 ++n 的区别

  1. ++n/n++; 当是独立的表达式时，前++和后++效果一样

  2. 当赋值或输出操作时，前++是先++运算后赋值， 后++是赋值后++运算

    var n =0;

    var a = n++;

    alert(a)

    alert(n)

    //输出a的值为0，n的值为1（先赋值然后++）

    var n =0;

    var a = ++n;

    alert(a)

    alert(n)

    //输出a的值为1，n的值为1（先++然后赋值）

表达式

表达式一定会有运算结果

关系表达式的运算结果一定是布尔类型

运算符

= 为赋值运算符，将右边的数据放入左边的变量中

== 为相等运算符，不判断数据类型，只比较值（也就是'11'==11，输出为true)

=== 为全等运算符，先判断数据类型，再判断值

注意

变量调用的方式常用模板字符串，格式为`${变量名}`。（注意是写在反引号当中）

第二板块

number类型中的NaN

1.NaN : number类型中一个特殊值

not a number : 不是数字，如果你的运算得不到一个数字，此时就会得到NaN

场景： NaN表示错误的运算。 产生的原因一般是代码出bug

2.NaN特点： 不能参与任何运算。 结果一律是NaN

数据类型转换-string

1.String()

2.变量名.toString()

不支持undefined/null转换，

支持二进制和十六进制转换，这种方式可以支持进制转换。 例如把 十进制转十六进制

Snipaste_2022-02-20_09-14-05.png

布尔转换-7种数据得到false

image.png

隐式转换

当运算符两边数据类型不一致的时候，编译器会先帮我们转成一样之后再计算

  1. 转数字：算术运算符 + - * / %
  2. 转字符串：连接符 +（只要有字符串就是连接符，实际开发一般用模板字符串`${}`代替）
  3. 转布尔：逻辑非 ！
console.log('10'-1); //9 转数字

console.log('10'+1); //101 转字符串

console.log(!null); //true !Boolean(null)

console.log( +'10'); //10 转换为数字

undefined和null的区别

image.png

这里可能出面试题

image.png

if括号中可以填写（if-else语句）

  1. 关系表达式：运算结果一定是布尔类型
  2. 布尔类型的值
  3. 其他的值：编译器会自动转成布尔类型，判断真假

while循环

  1. while循环适用于循环次数不明确
  2. while循环 一般会使用 break 关键字来跳出循环

第三板块

数组三要素：

  1. 元素：数组中的数据
  2. 下标：元素的位置
  3. 长度：元素的数量 image.png

数组的应用常用场景

  1. 累加和
  2. 求最大值/最小值
  3. 筛选

数组取值

  1. 下标存在：则获取元素值
  2. 下标不存在：则获取undefined

数组增删

增

数组名.shift(元素) 在数组的开头删除元素

数组名.unshift(元素) 在数组的开头增加元素

删

数组名.pop(元素) 在数组末尾删除元素

数组名.push(元素) 在数组末尾增加元素

数据类型

原始数据类型: number,string,boolean,undefined, null,object

基本类型(简单类型),值类型: number,string,boolean

复杂类型(引用类型):object

空类型:undefined,null

简单数据类型（值类型）与 复杂数据类型（引用类型）

值类型变量的数据直接存放在变量（栈空间）

引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

值类型之间传递,传递的是值

引用类型之间传递,传递的是地址(引用)

补充：

  1. 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

  2. 堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

try catch语句

try{
//正常执行的代码
//如果出错，抛出错误
}catch(error){
//处理错误
}

字符串累加和思路（重要）

let arr = []

let str = ''

let num = null

for(let i=1;i<=4;i++){

num = +prompt("输入数字")

arr.push(num)

//下面str变量利用累加和实现数据动态渲染

str += `<div>  

<span>${arr[i-1]}</span>

<div style="height:${arr[i-1]}px"></div>

<i>第${i}季度</i>

</div>`

}

document.write(`

<div class="box">${str}</div>
 
`)

案例：根据数组生成手风琴盒子

image.png 注意：这里用使用flex默认布局，大盒子中的每个小盒子设置固定宽度（总宽度小于大盒子，留出一张图片的宽度用hover做动态伸缩）

案例：## 根据数组生成柱状图

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .box {
        width: 800px;
        height: 400px;
        margin: 50px auto;
        border-left: 1px solid #000;
        border-bottom: 1px solid #000;
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        text-align: center;
      }

      .box > div {
        width: 50px;
        height: 100px;
        background-color: pink;
        display: flex;
        /* 修改主轴方向为垂直方向 */
        flex-direction: column;
        /* 主轴对齐方式 */
        justify-content: space-between;
      }

      .box > div > span {
        margin-top: -20px;
      }

      .box > div > h4 {
        margin-bottom: -25px;
      }
    </style>
  </head>
  <body>
    <script>
      /*需求 
        (1)让用户输入四个季度数据，存入数组中
        (2)根据数组中的数据，生成页面柱状图
        */

      //声明一个数组存储数据
      let arr = []

      //1.for循环输入4次
      for (let i = 1; i <= 4; i++) {
        let num = +prompt(`请输入第${i}个季度的数据`)
        console.log(num)
        //1.1 添加到数组中
        arr.push(num)
      }
      console.log(arr)

      //2.根据数组中的数据，生成页面柱状图
      let str = ''
      for (let i = 0; i < arr.length; i++) {
            str += `<div style="height:${arr[i]}px">
                        <span>${arr[i]}</span>
                        <h4>${i+1}季度</h4>
                    </div>`
      }
      console.log(str)
      //把str输出在页面
      document.write(`<div class="box">${str}</div>`)
      
    </script>
  </body>
</html>

注意：

  1. 其中的span和h4是利用flex换轴上下顶边，可以利用顶边的那个方向设置margin（比如其中的h4只能设置margin-bottom,margin-top无效）
  2. 这里利用变量str对字符串进行累加和，实现动态增加标签

第四板块

逻辑中断

&& : 找假。 左边式子值可以转成false，则无条件返回左边式子的值，右边不执行。 反之无条件返回右边式子的值。(从左到右，式子中有假的就输出，后面的不管)

|| : 找真。 左边式子值可以转成true，则无条件返回左边式子的值，右边不执行。 反之无条件返回右边式子的值。

let res = undefined && null

console.log(res); // undefined

image.png

函数注意点

  1. return关键字后面的代码不回执行（结束函数体）
  2. break是用在 循环 和 switch-case语句 中，对函数不起作用
  3. 如果函数没有return 或者 有return但右边没有值，那么拿到的值是undefined，

开关思想

用于判断数组中是和否所有元素都满足条件

  1. 声明开关变量：一般默认值为true
  2. 遍历数组，检查每一个元素是否满足条件，如果不满足，就修改开关为false

案例：利用数组长度判断判断数组内是否有负数

image.png

案例：利用函数求最大最小值

image.png

image.png

作用域

  1. 全局作用域(全局变量) ： 在函数外面let的变量
  2. 局部作用域(局部变量) : 在函数里面let的变量
  3. 快级作用域(快级变量) ： 在分支或循环大括号中let的变量

作用域链访问规则

当我们在作用域使用变量，优先看自己作用域有没有声明，如果有就用自己的，没有就往上一级作用域找，直到最顶级，找不到则报错未定义

匿名函数 function(){ }

作用：开辟局部作用域，避免全局变量污染 没有名字的函数无法直接调用

let fn2 = function(){
    console.log("匿名函数中"）
}

匿名函数自调用

;(function(){"123"})()

注意：自调用语法，前一个语句不能省略分号

第五板块

数组和对象的区别

数组：一般用于存储相同类型的数据（阅读性没有对象高）

对象：一般用于存储不同类型的数据

数组有序存储，对象无序存储

对象语法注意

如果[]内部有引号，则解析为属性名

如果[]内部没有引号，则解析为变量名

image.png

如果不需要解析变量，取值用点语法，如有需要解析变量，取值用[]语法

image.png

补充

dcument.write() //在页面打印数据（只展现字符串格式文本）

avatar
文章
阅读
粉丝