JavaScript 基础知识学习笔记

秣凡

已于 2022-08-25 23:10:27 修改

阅读量453

点赞数

文章标签： javascript 学习前端

于 2022-07-17 20:31:10 首次发布

本文链接：https://blog.csdn.net/m0_56387086/article/details/125834282

版权

学习视频：黑马程序员JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门_哔哩哔哩_bilibili

1.Javascript导读

1.1 Javascript 的作用

1.2. HTML\CSS\JavaScript的关系

1. instanceof 运算符用来检测数组

1.Javascript导读

1.1 Javascript 的作用

1.2. HTML\CSS\JavaScript的关系

1.3 JS的组成

ECMAScript : JavaScript(常用) Jscripet:

1.4 JS放置的位置

三种方式与CSS相似。

1. 4.1 行内式的JS

直接写在元素内部。用的少

//在点击按钮button时，出现一个秋香姐
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">

1.4.2 内嵌式的JS

与CSS类似，需要双标签script。

    <script> 
        alert('编程语言，来控制电脑');
    </script>

1.4.3 外部JS

需要创建JS代码文件.js ，同时在HTML代码中加<script src=".JS代码文件地址.js"></script>

<script src="./练习.js"></script>

1.5 JavaScript的输入输出

prompt('请输入') //这是一个输入框

2. 数据类型的分类

2.1 简单数据类型

2.1.1 数字型Number

八进制：在数字前面加0 ； eg：（ 010 ） ==8

十六进制：在数字前面加 0x ; eg：0xa == 10

数字型三个特殊值：

1. Infinity，代表无穷大，大于任何数值。也可以用 Number.MAX_VALUE*2 表示

2. -Infinity，代表无穷小，小于任何数值。

3. NaN ，Not a number ，代表一个非数值。

一、 isNaN()方法

isNaN() 这个方法用来判断非数字，并且返回一个值

如果是数字返回的是 false 如果不是数字返回的是 true 。

2.1.2 字符串型String

length：在字符串中可以用 length 来获取字符串长度。

字符串拼接：可以直接用 + 来拼接字符串。

2.1.3 转义符

输出方式可以参照Java

在输出多个值的时候可以在用逗号分隔即可

2.1.4 布尔型（boolean）

2.1.5 获取变量的数据类型

2.1.6 字面量

黑色：字符型浅灰色：undefined、null

蓝色：数值型深蓝色：布尔型

2.1.7 数据类型转换

1. 转换为字符串

第三种也称为隐转换。

2. 转换为数字型（重点）

不能把字符转换成

3. 转换布尔型

3. 运算符

3.1 算数运算符

3.2 比较运算符

3.3 逻辑运算符

3.3.1 逻辑中断逻辑与

3.3.2 逻辑中断逻辑或

3.4 赋值运算符

3.5 运算符优先级

4. Javascript流程控制

continue 退出本次（当前次）循环

break 用于立即跳出整个循环（循环结束）

4.2 数组

创建数组

在这个数组中可以同时存放不同数据类型。

获取数组的长度： “数组名.length” ,可以访问数组元素的数量（数组长度）。

// 创建数组的两种方式
// 1. 字面量
var arr = [1, 2, 3]
console.log( arr[0] );

// 2. 利用new Array()
var arr1 = new Array();  //创建一个空的数组
var arr2 = new Array(2);  //这个2 表示数组长度为2 里面有两个空元素
var arr3 = new Array(2，3);  //等价于[2,3]

4.2 新增元素

改变数组的长度都的两种方式。

一、通过修改length的大小，来改变数组大小。

二、直接添加新元素

4.3 删除数组指定元素

可以直接改变length的值，来改变数据。但是无法直接删除。

5. 函数

声明函数：函数使用关键字function

        function 函数名(){
            //函数体
        }

声明函数的关键字都是小写

在函数内部，如果没有声明变量直接赋值，则此变量被视为全局变量。

调用函数

1. 在设置参数的时候可以不用管数据类型。

2. 在函数中 return 后面的语句不会被执行。

3. return返会多个值的时候，只有返回最后一个

4. 如果函数中没有return ，就会返回undefined

5.1 函数匹配问题

5.2 arguments 使用

伪数组并不是真正意义上的数组

5.3 函数的另一种声明方式

1. var 变量名 = function() {}
2. var 变量名 = function() {
        函数体；
    }

注意：1.声明的式变量名不是函数名。

2.函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数

3. 函数表达式也可以进行传递参数

6. 作用域

6.1 作用域

全局作用域：在一个script标签中，或者一个JS文件中

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

块级作用域： {} 包含的

6.2 作用域链

就近原则。

7. JavaScript预解析

在函数内部，如果没有声明变量直接赋值，则此变量被视为全局变量。

8. JavaScript对象

类似于，结构体。

8.1 创建对象

1. 利用字面量创建对象

1.  var obj = {}; //创建一个空对象
2.  var obj = {
         name: '张三丰',
         age : 20,
         sayHi: function(){
            console.log('Hi');
         }
    }

2. 利用 new Object 创建对象

var obj = new Object(); //创建一个空对象
obj.name = '张三丰'； // 可以利用追加属性的方法来添加属性
obj.sayHi = function() {
         console.log('Hi');
        }

3. 构造函数

类似于 Java语言里面的类（class）

1.构造函数名字首字母要大写

//构造函数
function Star(name, age, sex) {
    this.name = name;
    this.age  = age;
    this.sex = sex;
}

//调用函数
var zs = new Star('张三', 18, '男');

注意点：

9. 内置对象

类似于Java已经封装好的函数、方法。

查文档MDN 类似 API

9.1 Math对象

Math数学对象不是一个构造函数，

1. console.log(Math.PI); //一个属性  圆周率

// 求最大值，如果里面没有值，则返回最小值
2. console.log(Math.max(1, 99, 32)); 

3. console.log(Math.abs(-1)); //1 取绝对值

//隐式转换  会把字符串型 -1 转换成数字型
4. console.log(Math.abs('-1'));

5. console.log(Math.random());//取随机数

9.2 日期对象

Date与Java的用法类似。。。

日期格式化

在使用getMonth时，需要加1.

var date = new Date();  //格式化日期 年 月 日
console.log(date.getFullYear());// 返回当前日期的年

// 获取毫秒数 即从1970年1月i日 到 现在 的毫秒数
// 1. valueOf \ getTime
console.log(date.valueOf()); 
console.log(date.getTime()); 
// 2. 简单写法  （常用的写法）
var date1 = +new Date(); //+new Date()  返回的就是总的毫秒数
console.log(date1); 
// 3. H5 新增的 获得总的毫秒数
console.log(Date.now());