JavaScript 笔记

-aw_aw-

已于 2022-01-30 07:25:56 修改

阅读量458

点赞数

文章标签： javascript 前端 html

于 2022-01-16 17:14:43 首次发布

本文链接：https://blog.csdn.net/aw_cs/article/details/122513301

版权

1. JavaScript简介

1.1 JavaScript是运行在客户端的脚本语言。

1.2 JS的作用

1.3 JS的组成

（1）ECMAScript：JS语法

（2）DOM:页面文档对象模型（对元素进行操作）

（3）BOM：浏览器对象模型（对窗口进行操作）

1.4 JS 的书写位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 2.内嵌式的JS -->
  <script>
    alert('c');
  </script>
  <!-- 3.外部JS script 双标签 -->
  <script src="1.js"></script> 
</head>
<body>
  <!-- 1.行内式的JS -->
  <input type="button" value="a" onclick="alert('b')">
</body>
</html>

（1）行内式（JS中用单引号）

<input type="button" value="a" onclick="alert('b')">

（2）内嵌式

  <script>
    alert('c');
  </script>

（3）外部JS文件(script标签中间不能写代码）

<script src="1.js"></script>

2. JS注释

（1）//单行注释 ctrl + /

（2）/*多行注释

多行注释*/ shift + alt + a

3.JS输入输出语句

（1）alert(msg) 浏览器弹出警示框

（2）console.log(msg) 浏览器控制台打印输出信息

（3）prompt(info) 浏览器弹出输入框，用户可以输入

4. 变量

4.1 使用

4.1.1 声明

  <script>
   var age;    //声明一个叫age的变量
  </script>

4.1.2 应用

  <script>
    var age = prompt('请输入您的年龄：');
    alert(age);
  </script>

4.2

4.2.1 一个变量被重复赋值，以最后一次赋的值为准

4.2.2 声明变量的特殊情况

（1）只声明不赋值 undefined

  <script>
    var sex;
    console.log(sex);   //undefined
  </script>

（2）不声明，不赋值会报错

  <script>
    console.log(tel);   //报错
  </script>

（3）不声明，直接赋值使用可以使用，但不建议

  <script>
    aa = 10;
    console.log(aa);    //10
  </script>

4.3 变量命名规范

由字母，数字，下划线（_），美元符号（$）组成，不能以数字开头

5. 数据类型

5.1 介绍

JS的变量数据类型是根据等号右边的值来确定的，变量的数据类型是可以变化的。

5.2 数据类型的分类

5.2.1 简单数据类型（Number, String, Boolean, Undefined, Null）

5.2.1.1 数字型（Number）

（1）范围

  <script>
    alert(Number.MAX_VALUE);  //1.7976931348623157e+308
    alert(Number.MIN_VALUE);  //5e-324
  </script>

（2）特殊值

（a）Infinity，无穷大，大于Number.MAX_VALUE

（b）-Infinity，无穷小，小于Number.MIN_VALUE

（c）NaN，代表一个非数值

isNaN() 判断非数字，是数字返回false，不是则返回true

5.2.1.2 字符串型（String）

建议使用单引号，嵌套则外双内单，或外单内双

（1）字符串的长度

  //获取字符串的长度
  <script>
    var str = 'hello world!';
    alert(str.length);  //12
  </script>

（2）字符串的拼接

字符串 + 任何类型 = 新字符串

  <script>
    console.log(12 + 12);   //24
    console.log('12' + 12);   //1212
  </script>

5.2.1.3 布尔型（Boolean）

true = 1， false = 0；

  <script>
    console.log(true + 1);    //2
    console.log(false + 1);   //1
  </script>

5.2.1.4 undefined（未定义，变量声明但未赋值）

  <script>
    console.log(undefined + 'a');   //undefineda
    console.log(undefined + 1);     //NaN
  </script>

5.2.1.5 null（空值）

  <script>
    console.log(null + 'a');    //nulla
    console.log(null + true);   //1
  </script>

  <script>
    var time = null;
    console.log(typeof time);   //null 的类型为 object
  </script>

5.2.2 复杂数据类型（object）

5.3 数据类型转换

5.3.1转换为字符串型

5.3.2转化为数值型

（1）parseInt()

  <script>
    var age = prompt('请输入您的年龄：');   //prompt得到的值为字符串型
    console.log(parseInt(age));   //将字符串转换为int型
    console.log(parseInt('9.9'));  //9，取整
    console.log(parseInt('10kg'));  //10，自动去掉数值之后的非数值部分
    console.log(parseInt('rem10'));  //NaN，非数值部分在数值之前
  </script>

（2）parseFloat()

基本同parseInt()

（3）Number()

  <script>
    var str = '123';
    console.log(Number(str));
  </script>

（4）算数运算隐式转换

注意：如果两个字符串中间是加号，则不是隐式转换，而是字符串连接

  <script>
    console.log('123' - '120');   //3
    console.log('123' + '120');   //123120
  </script>

例子：输入两个数字，计算其和

  <script>
    var num1 = prompt('请输入第一个值：');
    var num2 = prompt('请输入第二个值：');
    var result = parseFloat(num1) + parseFloat(num2);   //必须转数值型，不然就是字符串拼接
    alert('这两个数的和为：' + result);
  </script>

5.3.3 转换为布尔型

代表空、否定的值都转换为false，如：' '、0、NaN、null、undefined

其余值转换为true

6. 运算符

6.1 算数运算符

浮点数运算存在精度问题，不可将浮点数直接比较是否相等

  <script>
    var num = 0.1 + 0.2;
    console.log(num);   //0.30000000000000004
    console.log(num == 0.3);  //false
  </script>

6.2 递增(++)和递减(--)运算符

前置递增（减）运算符：先加（减），后返回值，后置则相反

  <script>
    var a = 10;
    console.log(++a + 10);    //21
    var b = 10;
    console.log(b++ + 10);    //20
    console.log(b);           //11
  </script>

例子：

  <script>
    var e = 10;
    var f = e++ + ++e;    //1. 返回10，e = 11；2.e = 12，返回12
    console.log(f);     //22
  </script>

6.3 比较运算符

6.4 逻辑运算符

短路运算（逻辑中断）：

但有多个表达式（值）时，左边的表达式（值）可以确定结果时，就不再继续运算右边的表达式的值。

（1）逻辑与（表达式1 && 表达式2）

如果表达式1的值为真，则返回表达式2，否则返回表达式1，表达式2不执行

  <script>
    console.log(123 && 456);    //456
    console.log(0 && 456);      //0
    console.log(0 && 1+2 && 345 && 567);    //0
  </script>

（2）逻辑或（表达式1 || 表达式2）

如果表达式1的值为真，则返回表达式1，表达式2不执行，否则返回表达式2

  <script>
    console.log(123 || 456);          //123
    console.log(123 || 456 || 789);   //123
    console.log(0 || 456 || 789);     //456
  </script>

例子：

  <script>
    var num = 0;
    console.log(123 || num++);
    console.log(num);
  </script>

6.5 赋值运算符

=， -=， +=，*=，/=，%=

6.6 运算符优先级

7. 流程控制

7.1 顺序结构

7.2 分支结构

（1）if（条件表达式1）{

//执行语句1

}

else if（条件表达式2）{

//执行语句2

}

else {

//执行语句3

}

（2）三元表达式

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

如果条件表达式为真，返回表达式1的值，否则返回表达式2的值

例子：如果数字小于10，前面补零

  <script>
    var time = prompt('请您输入一个0到99的数字：');
    var result = time < 10 ? '0' + time : time;
    alert(result);
  </script>

（3）switch语句

switch（表达式）{

case value1:

执行语句1；

break；

......

default:

执行最后的语句；

}

  <script>
    var a = prompt('请输入a的值：')
    switch(a){
      case '1':
        console.log(1);
        break;
      case '2':
        console.log(2);
        break;
      default:
        console.log('others');
    }
  </script>

case的值匹配时是全等，值和数据类型都一致才可以

7.3 循环结构

（1）for循环

for(var i = 0; i <= 10; i++)
{
    log.console('10');
}

（2）while循环

var i = 1;
while(i < 3)
{
    console.log(i);
    i++;
}

（3）do while 循环

var i = 1;
do{
    console.log(i);
    i++;
}while(i <= 2)

（4）continue break

continue 跳出当前循环，继续下次循环

break 跳出整个循环

8 数组

8.1 创建数组

8.1.1 利用 new 创建数组

var 数组名 = new Array();

var arr = new Array(); // 创建一个新的空数组

8.1.2 利用数组字面量创建数组

（1）使用数组字面量方式创建空的数组

var 数组名 = [];

（2）使用数组字面量方式创建带初始值的数组

var 数组名 = ['a', 'b', 'c'];

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arr = ['a', 12, true, 28.9];

8.2 获取数组元素

数组下标从0开始

console.log(arr[2]); // true

获取不存在的元素，输出结果为undefined

console.log(arr[4]);    // undefined

8.3 数组长度（元素个数）

console.log(arr.length);    // 4

8.4 新增数组元素

（1）通过修改length长度增加数组元素

var arr1 = ['a', 'b', 'c'];
arr1.length = 4;
console.log(arr1[3]);    // undefined

（2）通过修改索引号追加数组元素

var arr2 = ['d', 'e'];
arr2[2] = 'f';
console.log(arr2[2]);    // 'f'

9. 函数

9.1 函数使用

9.1.1 声明函数

（1）利用函数关键字自定义函数（命名函数）

function 函数名() {

// 函数体

}

function sayHi() {
    console.log('Hi');
}

（2）函数表达式（匿名函数）

var 变量名 = function() {};

var fun = function() {
    console.log('a');
}
//fun 是变量名，存的是值，而函数表达式存的是函数

9.1.2 调用函数

sayHi();

9.2 函数的参数

9.2.1 形参和实参

function 函数名(形参1，形参2......) {

// 函数体

}

函数名(实参1，实参2......);

9.2.2 形参和实参的匹配问题

（1）实参个数大于形参个数，会取到形参的个数

function getSum(num1, num2) {
    console.log(num1 + num2);
}
getSum(1, 2, 3);    //3

（2）实参个数小于形参个数，形参可看做不用声明的变量，则一个变量没有接收值，则为undefined,最后结果为NaN

function getSum(num1, num2) {
    console.log(num1 + num2);
}
getSum(1);    // NaN

9.3 return

如果函数没有return语句，则返回undefined

9.4 arguments的使用

所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参

function fn() {
    console.log(arguments);
    console.log(arguments[1]);
}
fn(1, 2, 3);
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 2

arguments为伪数组

（1）可遍历

（2）具有length属性

（3）可按索引方式存储数据

（4）不具有数组的push， pop等方法

例子：

function getMax() {
    var max = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
        if(arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
console.log(getMax(1, 2, 3));    // 3

10. 作用域

10.1 全局作用域和局部作用域

全局作用域：整个script标签或者一个单独的js文件

局部作用域（函数作用域）：函数内部

10.2 全局变量和局部变量

局部变量只能在函数内部使用

函数的形参可看作局部变量

10.3 块级作用域（es6 才有）

块级作用域为{}，外部不能调用块级作用域内部的

10.4 作用域链

内部函数访问外部函数的变量，采用链式查找的方式来决定取哪个值，这种结构称为作用域链（就近原则）

var num = 10;
function fn() {
    var num = 20;
    
    function fun() {
        console.log(num);
    }
    fun();
}
fn();    // 20

11. 预解析

js 引擎运行 js 分为两步：预解析和代码执行

11.1 预解析

js 引擎会把 js 中所有的 var 和 function 提升到当前作用域的最前面

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

（1）变量提升：把所有的变量声明提升到当前的作用域前面，不提升赋值操作

console.log(num);    // undefined
var num = 10;
//相当于
var num;
console.log(num);
num = 10;

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

//对比
fun();    //报错
var fun = function() {
    console.log(22);
}
//相当于
var fun;
fun();
fun = function() {
    console.log(22);
}

（2）函数提升：把所有的函数声明提升到当前作用域的最前面，不调用函数

fn();    // 33
function fn() {
  console.log(33);
}
//相当于
function fn() {
  console.log(33);
}
fn();

11.2 代码执行

按照代码书写的顺序从上往下执行

12. 对象

对象是一组无序的相关属性和方法的集合

属性：事物的特征

方法：事物的行为

12.1 创建对象

12.1.1 利用字面量创建对象

对象字面量：{}

（1）采用键值对的形式，属性名：属性值

（2）多个属性或方法中间用逗号隔开，注意最后一个的后面一定不要跟逗号

（3）方法冒号后面跟的是一个匿名函数

var obj1 = {};    // 创建一个空对象
var obj2 = {
    uname:'aw',
    age: 18,
    sayHi: function() {
        console.log('Hi')
    }
}

12.1.2 利用 new Ojbect 创建对象

var obj = new Object();
obj.uname = 'aw';
obj.age = 18;
obj.sayHi = function() {
    console.log('Hi');
}

12.1.3 利用构造函数创建对象

function 构造函数名() {

this.属性 = 值；

this.方法 = function() {}

}

new 构造函数名（）；

（1）构造函数名字首字母大写

（2）构造函数不需要return就可返回结果（为对象）

（3）调用构造函数必须使用 new

（4）属性和方法前面必须加 this

function Star(uname, age, sex) {
    this.uname = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(song) {
        console.log(song);
}
var aws = new Star('aw', 18, '女');
aws.sing('rain');

12.2 使用对象

12.2.1 调用属性

（1）对象名.属性名

console.log(obj2.uname);

（2）对象名['属性名']

console.log(obj2['uname'];

12.2.2 调用方法

对象名.方法名（）

obj2.sayHi();

12.3 变量、属性、函数、方法

变量：单独声明并赋值，使用时直接写变量名

属性：在对象中，不需要声明，使用时为对象名.属性名或对象名['属性名']

函数：单独声明，调用时为函数名（）单独存在

方法：在对象中，调用时为对象名.方法名（）

var num = 10;
var obj = {
    age: 18,
    fn: function() {
    
    }
}
function fun() {

}
console.log(num);
console.log(obj.age);
obj.fn();
fun();

12.4 遍历对象

for...in...

var obj = {
    uname: 'aw',
    age: 18,
    sex: '女'
    fn: function() {}
}
for(var k in obj) {
    console.log(k);        // 得到属性名
    console.log(obj[k]);   // 得到属性值
}