JS入门基础 | 青训营笔记

MATCHA
140 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第5天

JS三部分

  1. ECMAscript JavaScript语法
  2. DOM页面文档对象模型
  • 文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
  1. BOM浏览器对象模型
  • BOM (Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS三种书写位置

1. 行内式

//点击按钮，弹出hello world
input type="button" value="点我试试" onclick="alert("Hello World")"

JS中推荐使用单引号

2. 内嵌式

<script>
    alert("Hello World");
</script>

外部式

//中间不能写代码
<script scr="my.js"></script>

JS输入输出语句

方法说明归属
alert(msg)浏览器弹出警示框浏览器
console.log(msg)浏览器控制台打印输出信息浏览器
prompt(info)浏览器弹出输入框，用户可以输入浏览器

变量的初始化

var age = 18;

变量声明特殊情况

情况说明结果
var age; console.log(age);只声明 不赋值undefined
console.log(age)不声明 不赋值 直接使用报错
age=10; console.log(age)不声明 只赋值10

逻辑中断

1. 逻辑与

  • 语法：表达式1 && 表达式2
  • 如果第一个表达式的值为真，则返回表达式2
  • 如果第一个表达式的值为假，则返回表达式1

2. 逻辑或

  • 语法: 表达式1 || 表达式2
  • 如果第一个表达式的值为真，则返回表达式1
  • 如果第一个表达式的值为假，则返回表达式2
console.log( 123 || 456 );      //123
console.log( 0 || 456 );        //456
console.log( 123 || 456 || 789 );  //123

argument

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

// arguments的使用 只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
function fn() {
    // console.log(arguments); //里面存储了所有传递过来的实参arguments = [1,2,3]
    // console.log(arguments.length);
    // console.log(arguments[2]);

    //我们可以按照数组的方式遍历arguments
    for(var i = 0;i < arguments.length;i++) { 
        console.log(arguments[i]);
    }
}
fn(1, 2, 3);
fn(1, 2, 3, 4, 5);
// 伪数组并不是真正意义上的数组
// 1.具有数组的length属性
// 2.按照索引的方式进行存储的
// 3.它没有真正数组的一些方法pop() push() 等等

预解析

js引擎运行js分为两步：

  1. 预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面
  2. 代码执行：按照代码书写的顺序从上往下执行

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

  • 变量提升：把所有变量声明提升到当前作用域最前面 不提升赋值操作
  • 函数提升：把所有函数声明提升到当前作用域最前面 不调用函数

image.png

简单与复杂数据类型

数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

  • 值类型:简单数据类型/基本数据类型，在存储时变量中存储的是值本身， 因此叫做值类型string，number，boolean，undefined，null
  • 引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型 通过new关键字创建的对象(系统对象、自定义对象)， 如Object、Array、Date等
//简单数据类型null 返回的是一个空的对象 object
var timer = null;
console.log(typeof timer);
//如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给null

堆栈空间分配区别:

  1. 栈(操作系统) :由操作系统自动分配释放存放函教的参数值、局部变量的值等。其操作方式类似于数据结构中的栈; 简单数据类型存放到找里面
  2. 堆(操作系统) :存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放。由垃圾回收机制回收。复杂数据类型存放到堆里面

image.png 注意: JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语法

数据类型的内存分布

如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给null

  1. 简单数据类型是存放在栈里面里面直接开辟-个空间存 放的是值
  2. 复杂数据类型首先在栈里面存放地址十六进制表示然后这 个地址指向堆里面的数据
avatar
文章
阅读
粉丝