JavaScript基础-知识点总结

最新推荐文章于 2024-04-15 08:46:58 发布

绝命毒师J

最新推荐文章于 2024-04-15 08:46:58 发布

阅读量404

点赞数 1

分类专栏： JavaEE课程学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_16657805/article/details/109151936

版权

JavaEE课程学习专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1. JavaScript简介

1. 什么是JavaScript？

JavaScript 是⼀种客户端脚本语⾔（脚本语⾔是⼀种轻量级的编程语⾔）。 JavaScript 通常被直接嵌⼊ HTML ⻚⾯，由浏览器解释执⾏ JavaScript 是⼀种解释性语⾔（就是说，代码执⾏不进⾏预编译）。特点：弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征) JavaScript语⾔中包含三个核⼼：ECMAScript基本语法、DOM(Document object model)文档对象模型、BOM(Browser object model)浏览器对象模型

2. 前端Web技术的组成：HTML、CSS、JavaScript

HTML是⼀种标记语⾔，⽤来结构化我们的⽹⻚内容并赋予内容含义，例如定义段落、标题和数据表，或在⻚⾯中嵌⼊图⽚和视频。 CSS 是⼀种样式规则语⾔，可将样式应⽤于 HTML 内容，例如设置背景颜⾊和字体，在多个列中布局内容。 JavaScript 是⼀种脚本语⾔，可以⽤来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

2. JavaScript使⽤⽅法

可以像添加CSS那样将 JavaScript 添加到 HTML ⻚⾯中。CSS 使⽤ <link> 元素链接外部样式表，使⽤ <style> 元素向 HTML 嵌⼊内部样式表，JavaScript 这⾥只需⼀个元素 <script> 。

在HTML中如何使⽤JavaScript(三种)

1. 内部JavaScript: 使⽤<script>...</script>标签

<script type="text/javascript"> 
<!--
javaScript语⾔ 
//--> 
</script>

2. 外部 JavaScript:

使⽤外部导⼊js会使代码更加有序，更易于复⽤，且没有了脚本的混合，HTML也会更加易读。

<script type="text/javascript" src="my.js"></script>

3. 内联JavaScript处理器:

就是将js代码写⼊html代码中，如在html标签的事件中或超级链接⾥。

<button onclick="javaScript语⾔"></button> 
<a href="javascript:alert('aa');alert('bb')">点击</a>

3. JavaScript基础语法

3.1 JavaScript的输出：

JavaScript 没有任何直接打印或者输出的函数。
若有显示数据可以通过下⾯不同的⽅式来输出：

window.alert() 弹出警告框
document.write() ⽅法将内容写到 HTML ⽂档中
innerHTML 写⼊到 HTML 元素
console.log() 写⼊到浏览器的控制台

参考示例：

<!DOCTYPE html> 
<html> 
    <head>
        <meta charset="UTF-8">
        <title>JavaScript实例</title> 
    </head> 
<body>
    <h3>测试JavaScript的输出</h3>
    <div id="did">div层</div>
</body> 
<script>
//弹出⼀个信息提示框 
    window.alert("Hello JavaScript!");

//输出到浏览器⻚⾯中
    document.write("这个是⻚⾯中的输出");

//通过写⼊HTML标签中，完成⻚⾯中的输出
    document.getElementById('did').innerHTML="div层中的输出";

//控制台上的输出 console.log("控制台上的输出"); 
    </script> 
</html>

3.2 变量

什么是变量？

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

为什么要使⽤变量？

使⽤变量可以⽅便的获取或者修改内存中的数据

如何使⽤变量-使⽤var声明变量

var name;

变量的赋值

var name; 
name = "zhangsan";

同时声明多个变量

var name,age,sex; 
name = 'lisi'; 
age = 20; 
sex = "man"

同时声明多个变量并赋值

var name = 'wangwu', age = 25;

3.3 变量的命名规则和规范

规则 - 必须遵守的，不遵守会报错

由字⺟、数字、下划线、$符号组成，不能以数字开头
不能是关键字和保留字，例如：for、 if、while。
区分⼤⼩写

规范 - 建议遵守的，不遵守不会报错

变量名必须有意义
遵守驼峰命名法。⾸字⺟⼩写，后⾯单词的⾸字⺟需要⼤写。例如：userName、 userPassword

4. JavaScript数据类型

JavaScript中数据类型：

值类型(基本类型)：

字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undeﬁned）、 Symbol。

注意：Symbol 是 ES6 引⼊了⼀种新的原始数据类型，表示独⼀⽆⼆的值。

引⽤数据类型：对象(Object)、数组(Array)、函数(Function)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //数值类型
        console.log(typeof a); //undefined 没有定义的变量

        var a = 10; //整数
        console.log(typeof a); //number
        a = 3.14; //浮点数
        console.log(typeof a); //number

        //布尔类型：boolean： 值：true false
        a = true;
        console.log(typeof a); //boolean

        //字符串：使用单引号或双引号都可以定义子符串
        a = "Hello ...";
        console.log(typeof a); //string
        a = null;
        console.log(typeof a); //object

        //引用类型
        var b = [10,20,30]; //数组的定义
        console.log(typeof b); //数组对象object

        console.log(b instanceof Array); //true 检查对象b是否是来源于Array
        console.log(a instanceof Array); //false 检查对象a是否是来源于Array
    
        var ob = new Object();
        console.log(typeof ob); //object
        var fn = function(){} //声明一个空函数
        console.log(typeof fn); //function

        console.log("======================================");
        console.log(1.23e5); //1.23*10的5次方
        console.log("整数进制的使用");
        console.log(10); //10 十进制
        console.log(0b10); //2 二进制
        console.log(0o10); //8 八进制
        console.log(0x10); //16 十六进制（0 1 2 3 4 5 6 7 8 9 a b c d e f）
        console.log("===============十进制转成其他进制==============");
        var num = 220;
        console.log(num.toString(2)); //11011100 二进制
        console.log(num.toString(8)); //334 八进制
        console.log(num.toString(16)); //DC 十六进制

        console.log("===============其他进制转成十进制==============");
        console.log(parseInt('11011100',2)); //二进制转十进制
        console.log(parseInt('334',8)); //八进制转十进制
        console.log(parseInt('DC',16)); //十六进制转十进制

        /*
            面试案例：
            假设有15瓶水，其中有一个水有毒，
            请问至少使用几只小白鼠可以一次性试喝出来。
        */
    </script>
</head>
<body>
    <h1>JavaScript语言的数据类型</h1>
</body>
</html>

typeof 操作符获取⼀个变量的类型，返回结果如下：

undeﬁned - 如果变量是 Undeﬁned 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的 (整数、浮点数)
string - 如果变量是 String 类型的（采⽤""、 ''）
object - 如果变量是⼀种引⽤类型或 Null 类型的如： new Array()/ new String()...
function -- 函数类型

undeﬁned 和 null 的区别：

null 和 undeﬁned 的值相等，但类型不等：

typeof undefined     // undefined
typeof null          // object
null === undefined   // false
null == undefined    // true

object引⽤类型引⽤类型通常叫做类（class），也就是说，遇到引⽤值，所处理的就是对象。 Object 对象⾃身⽤处不⼤，不过在了解其他类之前，还是应该了解它。因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似， ECMAScript 中的所有对象都由这个对象继承⽽来，Object 对象中的所有属性和⽅法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。

值类型理解：变量之间的互相赋值，是指开辟⼀块新的内存空间，将变量值赋给新变量保存到新开辟的内存⾥⾯；之后两个变量的值变动互不影响，例如：

var a = 10; //开辟⼀块内存空间保存变量a的值“10”； 
var b = a; //给变量 b 开辟⼀块新的内存空间，将 a 的值 “10” 赋值⼀份保存到新的内存⾥； 
//a 和 b 的值以后⽆论如何变化，都不会影响到对⽅的值；

引⽤类型理解：变量之间的互相赋值，只是指针的交换，⽽并⾮将对象（普通对象，函数对象，数组对象）复制⼀份给新的变量，对象依然还是只有⼀个，只是多了⼀个指引。

//需要开辟内存空间保存对象，变量 a 的值是⼀个地址，这个地址指向保存对象的空间；
var a = { x: 1, y: 2 };
var b = a; // 将a 的指引地址赋值给 b，⽽并⾮复制⼀给对象且新开⼀块内存空间来保存； 
// 这个时候通过 a 来修改对象的属性，则通过 b 来查看属性时对象属性已经发⽣改变；

类型转换：

JavaScript 变量可以转换为新变量或其他数据类型：

通过使⽤ JavaScript 函数
通过 JavaScript ⾃身⾃动转换

ECMAScript 中可⽤的 3 种强制类型转换如下：
    Boolean(value) - 把给定的值转换成 Boolean 型； 
    Number(value) - 把给定的值转换成数字（可以是整数或浮点数）;
    String(value) - 把给定的值转换成字符串；

使⽤：Number（）、parseInt() 和parseFloat（） 做类型转换 
    Number()强转⼀个数值(包含整数和浮点数)。 
    *parseInt()强转整数， 
    *parseFloat（）强转浮点数

函数isNaN()检测参数是否不是⼀个数字。 is not a number

常⻅类型转换：

5. JavaScript运算符

1. 按照操作元数的个数不同分为：⼀元运算符、⼆元运算符和三元运算符：

如下⼀元运算符

delete：⽤于删除对象中属性的   如: delete o.name; // 删除o对象中的name属性
++ -- : ⼀元加法和⼀元减法

2. 按照种类划分⼜分为如下运算符：

① 算数运算符：

算数运算符⽤于对数字执⾏算数运算：

注意：其中+号具有两重意思：字串连接和数值求和
就是加号”+“两侧都是数值则求和，否则做字串连接

② 赋值运算符

赋值运算符向 JavaScript 变量赋值

③ ⽐较运算符

④ 逻辑运算符

⑤ 位运算符

位运算符处理 32 位数。
该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

上例使用4位无符号的例子。但是JavaScript使用32位有符号数。
因此，在JavaScript中，~5不会返回10，而是返回-6。
~000000000000000000000101将返回1111111111111111111111111010
⽆符号位移（>>>）和有符号位移（>>）的区别是：有符号位移运算时如果数字为正数时位移后在前⾯补0，为负数时则在位移后在前⾯补1

⑥ 条件运算符（三元运算符）:

JavaScript 也包含了可基于某些条件向变量赋值的条件运算符。

语法
variablename = (condition) ? value1:value2

实例
var voteable = (age < 18) ? "太年轻":"⾜够成熟";

⑦ 逗号运算符

⽤逗号运算符可以在⼀条语句中执⾏多个运算。
var iNum1=1, iNum2=2, iNum3=3;

⑧ 类型运算符

instanceof 运算符与 typeof 运算符相似，⽤于识别正在处理的对象的类型。
与 typeof ⽅法不同的是，instanceof ⽅法要求开发者明确地确认对象为某特定类型。

        //typeof  instanceof
        var oStringObject = new String("hello world"); 
        console.log(oStringObject instanceof String);   // 输出 "true"
        // 判断 foo 是否是 Foo 类的实例
        function Foo(){} 
        var foo = new Foo(); 
        console.log(foo instanceof Foo)//true
        // 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
        function Aoo(){} 
        function Foo(){} 
        Foo.prototype = new Aoo();//JavaScript 原型继承
        var foo = new Foo(); 
        console.log(foo instanceof Foo)//true 
        console.log(foo instanceof Aoo)//true

3. 运算符的优先级

优先级从⾼到底
1. () 优先级最⾼
2. ⼀元运算符 ++ -- !
3. 算数运算符 先 * / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先 && 后||
7. 赋值运算符 = += -= *= /= %=

6. JavaScript流程控制

任何编程语⾔都是由⼀系列语句构成的。
⼀条语句可以是⼀个赋值语句，⼀个函数调⽤，⼀个循环，甚⾄⼀个什么也不做的（空语句）条件语句。
在任何⼀⻔程序设计语⾔中，都需要⽀持满⾜程序结构化所需要的三种基本结构:

顺序结构
分⽀结构（选择结构）
循环结构

顺序结构：在程序结构中，最基本的就是顺序结构。程序会按照⾃上⽽下的顺序执⾏。由于结构简单所以这⾥我就不多介绍

1. 分⽀结构（条件语句）：

在JavaScript中，我们可使⽤以下分⽀语句：

if 语句 - 只有当指定条件为 true 时，使⽤该语句来执⾏代码
if...else 语句 - 当条件为 true 时执⾏代码，当条件为 false 时执⾏其他代码
if...else if....else 语句 - 使⽤该语句来选择多个代码块之⼀来执⾏
switch...case语句 - 使⽤该语句来选择多个代码块之⼀来执⾏

if .. else 分⽀判断示例:

        var grade = 58; //定义一个成绩的变量

        /*
        //单分支结构
        if(grade>=60){
            console.log("考试通过了");
        }
        */

        /*
        //双分支结构
        if(grade >= 60){
            console.log("成绩及格！");
        }else{
            console.log("成绩不及格！");
        }
        */

        //多分支判断
        if(grade >= 90){
            console.log("成绩优秀！");
        }else if(grade >=75 ){
            console.log("成绩良好！");
        }else if(grade >= 60){
            console.log("成绩及格！");
        }else{
            console.log("成绩不及格！");
        }

switch 分⽀判断示例:

//使用js的内置对象获取当前星期几的信息
        var w = new Date().getDay();
        console.log(w);
        switch(w){
            case 0: x = "星期日"; break;
            case 1: x = "星期一"; break;
            case 2: x = "星期二"; break;
            case 3: x = "星期三"; break;
            case 4: x = "星期四"; break;
            case 5: x = "星期五"; break;
            case 6: x = "星期六"; break;
            default: x = "无效的星期信息";
        }
        console.log(x);

2. 循环结构：

JavaScript ⽀持不同类型的循环：

for - 循环代码块⼀定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为true时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

2.1 for 循环：

for(语句1; 语句2; 语句3){ 被执⾏的代码块 }

语句1： 在循环（代码块）开始前执⾏，常⽤于初始化循环条件 
语句2： 定义运⾏循环（代码块）的条件，⽤于判断何时结束循环 
语句3： 在循环（代码块）已被执⾏之后执⾏，常⽤于递增或递减来影响语句2的判断，直⾄结束循环

示例代码：

//for循环的使用
    //循环输出1-10的值
    for(var i=1;i<=10;i++){
        //console.log(i)
        document.write(i+" ");
    }
    document.write("<br/>");
    
    //循环输出10~1的值
    for(var i=10;i>=1;i--){
        document.write(i+" ");
    }
    document.write("<br/>");
    
    //循环输出1~10的偶数值
    for(var i=1; i <= 10; i++){
        if(i%2==0){
            document.write(i+" ");
        }
    }
    document.write("<br/>");

    //循环1~100的值，并计算他们的累加值
    var sum = 0
    for(var i=1;i<=100;i++){
        //document.write(i+" ");
        sum += i; //将每次循环的值累加到变量sum中
    }
    document.write("100的累加值："+sum)
    document.write("<br/>");

2.2 for...in 循环遍历对象：

for(属性变量 in 被遍历对象){ 被执⾏的代码块 }

参考示例：

    //for...in的使用
    var ob = {"name":"张三","age":22,"sex":"男"};
    for(key in ob){
        document.write(key+":"+ob[key]+"<br/>");
    }
    

    var a = [10,20,30,40,50];
    //遍历（迭代）数组a中的每个值的下标
    for(k in a){
        document.write(k+":"+a[k]+"<br/>");
    }

2.3 while 循环

While 循环会在指定条件为真时循环执⾏代码块。

while (条件){ 需要执⾏的代码 }

注意：如果您忘记增加条件中所⽤变量的值，该循环永远不会结束。该可能导致浏览器崩溃。

参考代码：

//循环输出1-10的值
    var i = 1;
    while(i<=10){
        document.write(i+" ");
        i++;
    }
    document.write("<br/>");

    //循环输出10-1的值
    var i = 10;
    while(i>=1){
        document.write(i+" ");
        i--;
    }
    document.write("<br/>");

    //计算1~100的累加
    var i = 1;
    var sum = 0; //存储累加值的结果
    while(i<=100){
        sum += i; //累加每次循环的i
        i++;
    }
    document.write("100的累加值："+sum);

2.4 do/while 循环

do/while 循环是while循环的变体
该循环会执⾏⼀次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。
该循环⾄少会执⾏⼀次，即使条件是 false，隐藏代码块会在条件被测试前执⾏。

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

参考示例：

//do...while循环的使用
    //循环输出1~10的值
    var i = 1;
    do{
        document.write(i+" ");
        i++;
    }while(i<=10);
    document.write("<br/>");

    //循环输出10~1的值
    var i = 10;
    do{
        document.write(i+" ");
        i--;
    }while(i>=1);
    document.write("<br/>");

    //计算1~100的累加值
    var i = 1;
    var sum = 0;
    do{
        sum += i
        i++;
    }while(i<=100);
    document.write("100的累加值："+sum)

    document.write("<br/>");

2.5. 循环中的 break 和 continue 语句

break 语句⽤于跳出循环。
continue ⽤于跳过循环中的⼀个迭代。
break语句

我们已经在本教程稍早的章节中⻅到过 break 语句。它⽤于跳出 switch() 语句。
break 语句可⽤于跳出循环。
break 语句跳出循环后，会继续执⾏该循环之后的代码（如果有的话）：

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下⼀个迭代。

示例：

    //循环输出1~10的值
    for(var i=1; i<=10; i++){
        if(i == 5){
            break; //退出当前循环
        }
        document.write(i+" ")
    }
    document.write("<hr/>");


    //循环输出1~10的值
    for(var i=1; i<=10; i++){
        if(i == 5){
            continue; //跳过本次循环继续下一次
        }
        document.write(i+" ")
    }
    document.write("<hr/>");

7. JavaScript函数

1. JavaScript的函数

函数是什么-函数（function）是⼀段完成指定任务的已命名代码块。函数可以遵照给它的⼀组值或参数完成特定的任务，并且可能返回⼀个值。
在JavaScript中有两种函数：⾃定义函数与系统函数。
函数的优越性：

控制程序设计的复杂性
提⾼软件的可靠性
提⾼软件的开发效率
提⾼软件的可维护性
提⾼程序的重⽤性

标准格式：

function 函数名（[参数列表..]）{ 函数体。。。 [return 返回值;] }

JavaScript三种定义函数⽅法：

第⼀种是使⽤function语句定义函数如上⾯格式
第⼆种是使⽤Function()构造函数来定义函数（不常⽤）

var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);
如： var 函数名 = new Function(”x”,”y”,”var z=x+y;return z;”);

第三种是在表达式中定义函数

var 函数名 = function(参数1，参数2，…){函数体};

例如：

//定义 var add = function(a,b){
    return a+b; 
} 
//调⽤函数
document.write(add(50,20));

函数的使⽤：

//通过函数名直接调⽤函数 
//函数名(参数1，参数2，…)
myadd(10,20);

//函数⾃调⽤ (function () { 
    console.log("Hello Function！"); 
})();

arguments 对象

在函数代码中，使⽤特殊对象 arguments，开发者⽆需明确指出参数名，就能访问它们。
arguments是⼀个对象，是⼀个伪数组，arguments[索引]---->实参的值
也可以访问这个值，即第⼀个参数的值（第⼀个参数位于位置 0，第⼆个参数位于位置 1，依此类推）。
arguments.length--->是实参的个数

关于变量作⽤域：

由于函数的出现导致了变量的定义分为函数内定义和函数外定义，即全局和局部变量
全局变量:在函数外使⽤var声明的变量就是全局变量，全局变量可以在⻚⾯的任何位置使⽤
全局变量,如果⻚⾯不关闭，那么就不会释放,就会占空间，消耗内存。

局部变量:在函数内使⽤var关键字定义的变量是局部变量，即出了函数外边⽆法获取。

隐式全局变量:没有使⽤var声明的变量，就叫隐式全局变量，在函数外可以获取到。

全局变量是不能被删除的，隐式全局变量是可以被删除的（使⽤delete）
定义变量使⽤var是不会被删除的，没有var是可以删除的

函数外⾯定义的变量是全局变量，函数内可以直接使⽤。
在函数内部没有使⽤var定义的=变量则为全局变量。

函数中的返回值：

如果⼀个函数中有return ，那么这个函数就有返回值
如果⼀个函数中没有return ，那么这个函数就没有返回值
如果⼀个函数中没有明确的返回值，那么调⽤的时候接收了，结果就是undeﬁned
(没有明确返回值:函数中没有return或函数中有return,但是return后⾯没有任何内容)
函数内容执⾏遇到return，则⽴刻执⾏返回，且下⾯的代码是不会被执⾏的

2. 系统中常⽤的内置函数：

        //内置函数：
        /*
        escape()    //字串编码
        unescape()    //字串反编码
        *eval()        //将参数字符串作为脚本代码来执行。
        *isNaN()      // is not a number (不是一个数值)
        *parseInt()
        *parseFloat()
        */

绝命毒师J

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
JavaScript基础-知识点总结

1. JavaScript简介1. 什么是JavaScript？JavaScript 是⼀种客户端脚本语⾔（脚本语⾔是⼀种轻量级的编程语⾔）。 JavaScript 通常被直接嵌⼊ HTML ⻚⾯，由浏览器解释执⾏ JavaScript 是⼀种解释性语⾔（就是说，代码执⾏不进⾏预编译）。特点：弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征) JavaScript语⾔中包含三个核⼼：ECMAScript基本语法、DOM(Document object model)文档对象模型、BOM
复制链接

扫一扫