JavaScript - 自学笔记

2020-08-13  本文已影响0人  Dozing

JavaScript学习

1. 简介

2. 浏览器执行JS简介

浏览器分成两个部分，渲染引擎和JS引擎

Notes: 浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换成机器语言)，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

3. JS的组成

graph TD
A[JavaScript]-->B[ECMAScript]
A[JavaScript]-->C[DOM]
A[JavaScript]-->D[BOM]

4. JS位置

JS有3种书写位置，分别为行内，内嵌和外部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.内嵌式的js -->
    <script>
        alert('Completed');
    </script>
    <!-- 3.外部js script双标签 -->
    <script src="test.js"></script>
</head>
<body>
    <!-- 1.行内式的js,直接写道元素的内部 -->
    <input type="button" value="Submit" onclick="alert('Submit Complete')">
</body>
</html>

4.1 行内式JS

4.2 外部JS

5. JavaScript输入输出语句

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

5.1 JavaScript显示数据

6. 变量

6.1 本质：变量是程序在内存中申请的一块用来存放数据的空间

使用变量的时候，一定要声明变量，然后赋值。声明变量本质是去内存申请空间

6.2 声明一个变量并赋值，称之为变量的初始化

//<script>
  //1. 用户输入姓名
  var myname = prompt('请输入你的名字')
  //2. 输出这个用户名
  alert(myname)
//</script>

6.3 同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

var age = 10,name = 'zs',sex = 'male';

6.4 变量声明特殊情况

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

6.5 变量的数据类型

变量是用来存储值的所在处。它们有名字和数据类型，变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中.JavaScript是一种弱类型或者说动态语言.这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10;             //这是一个数字型
var address = "Guangzhou" //这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型:

var x = 6;      //x为数字
var x = "Bill"; //x为字符串

6.6 数据类型的分类

JS把数据类型分为两类:

简单数据类型说明如下:

简单数据类型 说明 默认值
Number 数字型，包含整型值和浮点值，如21，0.21 0
Boolean 布尔值类型，如true,false,等价于1和0
String 字符串类型，如"张三"，注意JS里面，字符串都带引号 ""
Undefined var a;声明了变量a 但是没有给值，此时a = undefined undefined
Null var a = null;声明了变量a为空值

6.6.1 JS中八进制在数字前面加0，十六进制在数据前面加0x

数字型的三个特殊值:

console.log(Number.MAX_VALUE * 2);  //Infinity无穷大
console.log(-Number.MAX_VALUE * 2); //Infinity无穷小
console.log('老师' - 100);          //NaN

isNan()用来判断一个变量是否为非数字的类型，返回true或者false

6.6.2 字符串类型String

字符串型可以是引号中的任意文本，其语法为单引号' '和双引号""

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型 = 拼接之后的新字符串

6.6.3 布尔型Boolean

布尔型和数字型相加的时候，true的值为1，false的值为0

console.log(true+1)  //2
console.log(false+1) //1

6.6.4 Undefied和Null

一个声明后没有被赋值的变量会有一个默认值undefined(如果经行相连或者相加时，注意结果)

undefied 和数字型相加，最后结果是NaN

6.6.5 字面量

字面量是在源代码中一个固定值的表示方法

7.数据类型转换

7.1 通常使用的类型转换

8.运算符

运算符(operator)也被称为操作符，是用于实现赋值，比较和执行算数运算等功能的符号

9. 流程控制

流程结构主要有三种结构，分别是顺序结构，分支结构和循环结构

JS语言提供了两种分支语句 1. if, 2.switch

9.1 if语句：

//if...else 语句
if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

//if...else if...else 语句
if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

9.2 三元表达式：

三元表达式也能做一些简单的条件选择，有三元运算符组成的式子称为三元表达式

语法结构：

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

9.3 switch语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

Note:n的值和case里面的值相匹配的时候是全等。必须是值和数据类型一致才可以

10. 循环

10.1 for循环

for (初始化变量; 条件表达式; 操作表达式)
{
   被执行的代码块
}

10.2 while循环

while (条件)
{
   需要执行的代码
}
// do while
do
{
   需要执行的代码
}
while (条件);

11. 数组

11.1 创建数组

//1. 利用new创建数组
var 数组名 = new Array();
var arr = new Array();  //创建一个新的空数组
//2.3 利用数组字面量创建数组
var 数组名 = [];

11.2 数组长度

数组名.lenght

11.3 数组中新增的元素

12. 函数

函数:封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用

函数声明 - 方法1：

function functionName(parameters) {
  执行的代码
}

函数声明 - 方法2：

函数表达式

//例子
var x = function (a, b) {return a * b};

以上函数实际上是一个匿名函数(函数没有名称)。函数存储在变量中，不需要函数名称，通常通过变量名来调用。

形参用来接收实参

在声明函数时，可以在函数名称后面的小括号添加参数，这些参数称为形参。而在调用该函数时，同样需要传递相应的参数，这些参数称为实参

参数 说明
形参 形式上的参数，函数定义的时候传递的参数，当前并不知道是什么
实参 实际上的参数，函数调用的时候传递的参数，实参是传递给形参的

12.1 函数返回值

return终止函数.return语句之后的代码不被执行

JS的return只能返回一个值。如果用逗号隔开多个值，以最后一个为准

函数如果有return则返回的是return后面的值。函数没有return,则返回undefined

12.2 arguments的使用

arguments是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。只有函数才有arguments

arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点:

13. JavaScript作用域

一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域.作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，较少了名字冲突.

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值，这种结构我们称为作用域链.

14. 预解析

JS解析器运行JS分为两步:(1)预解析(2)代码执行

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

预解析分为变量预解析(变量提升)和函数预解析(函数提升)

  1. 变量提升 就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作
  2. 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

15. 对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。例如字符串，数值，数组，函数等.

15.1 创建对象

创建对象的三种方式:

15.1.1 字面量创建对象

对象字面量:就是{}里面包含了表达这个具体事物(对象)的属性和方法

var obj = {};//创建了一个空对象

//
var obj = {
    uname:'William',
    age:18,
    sex:'Male',
    sayHi:function(){
        console.log('hi~');
}shux
//1.里面的属性或者方法采取键值对的形式.键(属性名):值(属性值)
//2.多个属性或者方法中间用逗号隔开的
//3.方法冒号后面跟的是一个匿名函数

15.1.2 利用new Object创建对象

var obj = new Object();//创建一个空的对象

obj.uname = 'William';
obj.age = 18
obj.sayHi = function(){
    console.log('hi~');
}
//1.利用等号 = 赋值的方法 添加对象的属性和方法
//2.每个属性和方法之间爱用分号结束

15.1.3 构造函数

构造函数:是一个特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。可以把对象中的一些公共的属性和方法抽取出来，然后封装到这个函数里面.

构造函数里面不是普通代码，而是对象

//构造函数的语法格式
function 构造函数名(){
    this.属性 = 值；
    this.方法 = function(){
        
    }
}
//例子
function Star(uname,age,sex){
    this.name =  uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang)
    }
}
var ldh = new Star('William',18,'Male');
//1.构造函数名字首字母要大写
//2.构造函数不需要return,就可以返回结果
//3.调用构造函数 必须使用new
//4.只要new Star()调用函数就创建一个对象ldh()
//5.属性和方法前面必须添加this

利用构造函数创建对象的过程称为对象的实例化.

15.1.4 new关键字执行过程

  1. 在内存中创建一个新的空对象

  2. 让this指向这个新的对象

  3. 执行构造函数里面的代码，给这个新对象添加属性和方法

  4. 返回这个新对象(所以构造函数里面不需要return)

15.2 对象的调用：

（1）.调用对象的属性，采取 对象名.属性名

（2）.调用对象的另一种方法，对象名['属性名']

（3）.调用对象的方法 对象名.方法名()

console.log(star.name)
console.log(star['name'])
star.sayHi();

变量、属性、函数、方法总结

15.3 遍历对象属性

for....in...语句对于数组或者对象的属性进行循环操作

var obj = {
    name:'William',
    age:18,
    sex:'Male'
    fn:function(){}
}

for (var k in obj){
    console.log(k);       // k 变量 输出 得到的是 属性名
    console.log(obj[k]); //  obj[k] 得到是 属性值
}

15.4 内置对象

JavaScript中的对象分为3种：自定义对象，内置对象，浏览器对象

内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)

MDN文档：https://developer.mozilla.org/zh-CN/

上一篇下一篇

猜你喜欢

热点阅读