JavaScript的基础知识点_js基础所有知识点-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45683851/article/details/104109112

JavaScript的基础知识点

一、什么是JavaScript

1.定义

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

2.组成部分

javascript组成：

图1===============================

ECMAScript描述了该语言的语法和基本对象，它可以理解为是JavaScript的一个标准。

文档对象模型（DOM）描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

3.基本特点

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

4.特性

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。

以上几点来自网站： https://baike.baidu.com/item/javascript/321142?fr=aladdin

如需要知道更详细的知识，欢迎访问。

一个合格的后端人员，必须要精通 JavaScript

二、快速入门

1.引入

内部标签

<script>
    //......
</script>

外部引入

自己先创建一个.js文件，然后在.html文件中链接

格式：

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

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script标签内，写Javascript代码-->
    <script>
        /*弹窗*/
    	alert('hello,world');
    </script>

    <!--外部引入-->
    <!--注意：script标签必须成对出现-->
    <!--<script src="js/qj.js"></script>-->

    <!--不用显示定义type，也默认就是 javascript-->
    <!--<script type="text/javascript">

    </script>-->

</head>
<body>

<!--这里也可以存放-->

</body>
</html>

图2==========================

2.基本语法入门

JavaScript严格区分大小写！

<script>
    	
        // 1. 定义变量  变量类型  变量名  = 变量值;
        var score = 71;
        // alert(num);
        // 2. 条件控制
        if (score>60 && score<70){
            alert("60~70")
        }else if(score>70 && score<80){
            alert("70~80")
        }else{
            alert("other")
        }

        //console.log(score) 在浏览器的控制台打印变量！ System.out.println();
</script>

浏览器调试必须知道（蓝色下划线）：

图3=====================

3.数据类型

变量
```
var 变量名 = 要赋给变量的值;
```

number

js不区分小数和整数，Number

123 //整数123
123.1 // 浮点数123.1
1.123e3 //科学计数法
-99    //复数
NaN    // not  a  number
Infinity //表示无限大

字符串

用单引号：‘abc’

也可用双引号：“abc”
布尔值

true，false
逻辑运算

&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 真即假，假即真
比较运算符（很重要）

在JS中不用两个“=”来进行绝对比较，而用“===”进行绝对比较
```
==  等于（类型不一样，值一样，也会判断为true）
===   绝对等于(类型一样，值一样，结果true)
```
须知：
- NaN===NaN（Not a Number），这个与所有的数值都不相等，包括自己
- 只能通过 isNaN(NaN) 来判断这个数是否是 NaN
- 浮点数问题：
```
console.log((1/3) === (1-2/3))/*这种比较是错误的*/
```
  尽量避免使用浮点数进行运算，存在精度问题！
```
Math.abs(1/3-(1-2/3))/*<0.00000001/*推荐使用*/
```
null 和 undefined
- null 空
- undefined 未定义

&&	两个都为真，结果为真
\|\|	一个为真，结果为真
！	真即假，假即真

数组

Java的数值必须是相同类型的对象，而JS中不需要这样！

//保证代码的可读性，尽量使用 []
var arr = [1,2,3,4,5,'hello',null,true];

new Array(1,12,3,4,4,5,'hello');

取数组下标：如果越界了，就会报

undefined

对象

对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个不需要添加

//Person person =  new Person(1,2,3,4,5);
var person = {
    name: "张三",
    age: 3,
    tags: ['js','java','web','...']
}

取对象的值

person.name
> "张三"
person.age
> 3

4.严格检查格式

更改IDEA一些信息

图4=====================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    前提：IEDA 需要设置支持ES6语法
    'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
    必须写在JavaScript的第一行！
    局部变量建议都使用 let 去定义
    -->
    <script>
        'use strict';
        // 全局变量用var
        // 局部变量
        let i = 1;
        // ES6   let

    </script>

</head>
<body>

</body>
</html>

三、重点数据类型

1.字符串

(1) 使用单引号或双引号进行包裹

(2)转义字符，如：

\' 
\n
\t
\u4e2d  \u#### Unicode字符
\x41          Ascll字符

(3)多行字符串的编写

<script>
    //tab键上面 esc键下面的那个键
    var msg =
        `hello
        world
        你好ya
        你好`
</script>

运行后，在出现的页面单击右键，选择检查，然后选择console，后输入console.log(变量名)即可在控制台上打印出变量的值。

图5================================

(4)模板字符串

<script>
    let name = "qinjiang";
    let age = 3;

    let msg = `你好呀，${name}`
</script>

(5)字符串长度

str.length

(6)字符串的可变性，不可变

意思就是给字符串赋值后，该字符串的值将不会因以后的赋值而改变！

(7)大小写转换

//注意，这里是方法，不是属性了
student.toUpperCase()
student.toLowerCase()

(8)student.indexOf(‘t’)，找到对应元素的下标

(9)截取字符串substring

student.substring(1) // 从第一个字符串截取到最后一个字符串
student.substring(1,3) //[1,3)含头不含尾

以上只是简单说了一些字符串常用且重要的使用方法与注意事项，其方法还有很多，需要大家自己在实践中进行进一步的学习。

2.数组

用于存储数据

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6] ; //通过下标取值和赋值
arr[0]
arr[0] = 1

(1)长度

arr.length

注意：假如给 arr.length 赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

(2)indexOf()，通过元素获得下标索引

arr.indexOf(2)
1

(3)slice() 截取Array的一部分，返回一个新数组，类似于String中的 substring

(4)push()，pop() 对尾部进行操作

push： 压入到尾部
pop： 弹出尾部的一个元素

(5)unshift() , shift() 对头部进行操作

unshift： 压入到头部
shift： 弹出头部的一个元素

(6)排序 sort()

var arr = ["B", "C", "A"];
arr.sort();
/*会将arr变为*/
/*["A", "B", "C"]*/

(7)元素反转 reverse()

var arr = ["B", "C", "A"];
arr.reverse();
/*会将arr变为*/
/*["A", "C", "B"]*/

(8)concat（）

var arr = ["C", "B", "A"];
arr.concat([1,2,3]);
/*会产生一个新的数组为*/
/*["C", "B", "A", 1, 2, 3]*/
/*arr还是["C", "B", "A"]*/

因此： concat（）并没有修改数组，只是会返回一个新的数组

(9)连接 join()

打印拼接数组，使用特定的字符串连接

var arr = ["C", "B", "A"];
arr.join('-');
/*结果为 "C-B-A" */

(10)多维数组

arr = [[1,2],[3,4],["5","6"]];
/*arr[1][1]的值是4*/

3.对象

语法要求

var 对象名 = {
	属性名： 属性值,
    属性名： 属性值,
    属性名： 属性值
}

//定义了一个person对象，它有四个属性！
var person = {
    name: "张三",
    age: 3,
    email: "1332663789@qq.com",
    score: 521
}

在Js中， {……} 表示一个对象，键值对描述属性 xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

JavaScript中的所有的键都是字符串，值是任意对象！

(1)对象赋值

就和Java中给对象的属性赋值的方法一样。

person.name = "张三"

(2)使用一个不存在的对象属性，不会报错！

<script>
    var person = {
        name:"zhangsan",
        age:40
    }
</script>

图6================

(3)动态的删减属性，通过 delete 删除对象的属性

图7================

(4)动态的添加，直接给新的属性添加值即可

图8========================

(5)判断属性值是否在这个对象中！ xxx in xxx！

图9========================

可以总结出：每个对象都继承了toString;

(6)判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

图10============================

这里就重点强调了自身拥有！

4.流程控制

(1)if 判断

var age = 3;
if (age>3){ //第一个判断
    alert("haha");
}else if(age<5) {  //第二个判断
   alert("kuwa~");
}else { //否则,,
    alert("kuwa~");
}

(2)while循环，避免程序死循环

while(age<100){
    age = age + 1;
    console.log(age)
}

do{
    age = age + 1;
    console.log(age)
}while(age<100)

(3)for循环

for (let i = 0; i < 100 ; i++) {
    console.log(i)
}

(4)forEach 循环

var age = [12,3,12,3,12,3,12,31,23,123];

//函数
age.forEach(function (value) {
    console.log(value)
})

(5)for…in

//for(var index in object){}
for(var num in age){
    if (age.hasOwnProperty(num)){
        console.log("存在")
        console.log(age[num])
    }
}

5.Map 和 Set

(1)Map

//学生的成绩，学生的名字
// var names = ["tom","jack","haha"];
// var scores = [100,90,80];

var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); //通过key获得value！
map.set('admin',123456);  //新增或修改！
map.delete("tom"); //删除！

(2)Set :无序不重复的集合

<script>
        var set = new Set();
</script>

图11===========================

6.iterator

(1)遍历数组

//通过for of /  for  in 下标
var arr = [3,4,5]
for (var x of arr){
    console.log(x)
}

掌握：使用 iterator 来遍历迭代Map，Set ！

(2)遍历Map

var map = new Map([["tom",100],["jack",90],["haha",80]]);
for (let x of map){
    console.log(x)
}

(3)遍历Set

var set = new Set([5,6,7]);
for (let x of set) {
    console.log(x)
}

以上是JS中的一些基本知识点，后期会专门针对函数进行讲解。