学习笔记 JavaScript基础语法（全）

2024-03-07 1040阅读

温馨提示：这篇文章已超过387天没有更新，请注意相关的内容是否还可用！

JavaScript

文章目录

JavaScript
- 第一章——初始JavaScript
- - 1.1 浏览器执行 JS 简介
  - 1.2 JS的组成
  - - 1.2.1 ECMAScript
    - 1.2.2 DOM ——文档对象模型
    - 1.2.3 BOM ——浏览器对象模型
    - 1.3 JS的写法
    - - 1.3.1 行内式写法
      - 1.3.2 内嵌式写法
      - 1.3.3 外部js文件
      - 1.4 注释
      - 1.5 变量
      - 1.5.1 变量声明
        1.5.2 变量赋值
        1.5.3 声明多个变量
        1.6 输入与输出
        1.6.1 格式化输出
        1.6.2 输入
        第二章——数据类型
        2.1 简单数据类型：
        2.1.1 数字类型
        2.1.2 转义字符
        2.1.3 字符串类型
        2.2 获取数据类型 typeof
        第三章——操作符
        3.1 算数运算符
        3.2 递增和递减运算符
        3.3 比较运算符
        3.4 = 符号
        3.5 逻辑运算符
        第四章——流程控制
        4.1 if语句
        1. 语法结构
        2. if else语句（双分支语句）
        3. if else if 语句 ( 多分支语句 )
        4.2 三元表达式
        1. 语法结构
        4.3 分支流程控制switch 语句
        1. 语法结构
        2. 语法说明
        第五章——循环结构
        5.1 for循环
        5.1.1 语法结构
        5.2 while 循环
        5.2.1 语法结构
        5.3 do while 循环
        5.3.1 语法结构
        5.4 continue与break
        第六章——数组
        6.1 数组创建
        6.1.1 new创建
        6.1.2 利用数组字面量创建数组
        6.2 数组索引与切片
        6.2.1 索引
        6.2.2 获取数组长度
        6.3 数组相关操作
        6.3.1 数组新增元素
        1. 通过修改 length长度新增数组元素
        2. 直接通过索引进行新增元素
        第七章——函数
        7.1 函数使用
        7.1.1 声明函数
        7.1.2 调用函数
        7.2 函数参数
        7.2.1 形参和实参
        7.2.2 函数形参和实参个数不匹配问题
        7.3 函数返回值
        7.4 arguments使用
        7.4.1 arguments属性
        7.5 匿名函数
        表达式写法
        第八章——作用域
        8.1 全局作用域
        8.2 局部作用域
        8.3 块级作用域
        8.4 JavaScript预解析
        第九章——面向对象
        9.1 对象基本结构
        9.2 对象的调用
        9.3 对象创建
        9.3.1 直接创建
        9.3.2 使用 new Object创建对象
        9.3.3 使用构造函数创建对象
        9.4 遍历对象属性
        9.4.1. 语法结构
        9.4.2 代码示例
        第十章——常见内置对象
        10.1 对象定义
        10.2 一些内置对象模块
        10.2.1 Math
        10.2.2 Date
        1. 获取当前时间
        2. 日期格式化相关函数
        10.2.3——数组对象 Array
        1. 创建数组对象
        2. 判断是否为数组对象
        3.添加删除数组元素的方法
        4 .数组排序
        5. 查找数组中特定元素的索引
        6. 数组转换为字符串
        7. 数组其他补充操作
        10.2.4 字符串对象
        1. 返回字符位置
        2. 根据索引返回字符串具体值
        3. 字符串操作方法
        4. replace()方法
        5. split()方法
        6. 转换大小写
        第十一章——简单类型与复杂类型
        11.1 简单类型与复杂类型概念
        11.2 栈和堆
        11.3 简单类型的内存分配
        11.4 复杂类型的内存分配
        11.5 简单类型传参：
        11.6 复杂类型传参
        第一章——初始JavaScript
        
        1.1 浏览器执行 JS 简介
        
        浏览器分成两部分：渲染引擎和 JS 引擎
        
        渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
        
        JS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
        
        1.2 JS的组成
        
        
        
        1.2.1 ECMAScript
        
        ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
        1.2.2 DOM ——文档对象模型
        
        文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
        1.2.3 BOM ——浏览器对象模型
        
        BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等
        1.3 JS的写法
        
        行内式写法
        内嵌 JS
        外部 JS 文件
        1.3.1 行内式写法
        
        可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
        注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
        可读性差，在html中编写JS大量代码时，不方便阅读；
        引号易错，引号多层嵌套匹配时，非常容易弄混；
        特殊情况下使用
        1.3.2 内嵌式写法
        
        alert('Hello World~!');
        
        l可以将多行JS代码写到
        1.3.3 外部js文件
        
        src为js文件的路径
        这样可以单独开一个js文件，将所有JavaScript代码放在外部的一个js文件中
        1.4 注释
        
        单行注释：//
        多行注释：/注释内容/
        1.5 变量
        
        1.5.1 变量声明
        
        var a; var b;
        
        这样就声明了一个变量a
        1.5.2 变量赋值
        
        a=20;b="hello world";
        
        a，b可以被赋值为任意数据类型的值
        
        1.5.3 声明多个变量
        
        同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。
        var a = 10, b = 'yy', c = 2;
        
        1.6 输入与输出
        
        方法说明归属
        alert(msg) 浏览器弹出警示框浏览器
        console.log(msg) 浏览器控制台打印输出信息浏览器
        prompt(info) 浏览器弹出输入框，用户可以输入浏览器
        **注意：**alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。
        
        1.6.1 格式化输出
        
        alert(“提示”：+变量)
        
        alert('结果是'+result)
        
        // 1. 先弹出第一个输入框，提示用户输入第一个值 var num1 = prompt('请输入第一个值：'); // 2. 再弹出第二个框，提示用户输入第二个值 var num2 = prompt('请输入第二个值：'); // 3. 将输入的值转换为数字型后，把这两个值相加，并将结果赋给新的变量 var result = parseFloat(num1) + parseFloat(num2); // 4. 弹出结果 alert('结果是:' + result);
        
        1.6.2 输入
        
        prompt输入的变量类型均为字符串类型
        第二章——数据类型
        
        JS 把数据类型分为两类：
        
        简单数据类型（Number,String,Boolean,Undefined,Null）
        复杂数据类型（object)
        2.1 简单数据类型：
        
        在JS中八进制前面加0，十六进制前面加 0x
        2.1.1 数字类型
        
        数字类型的三个特殊值
        值说明
        Infinity 代表无穷大，大于任何数值
        -Infinity 代表无穷小，小于任何数值
        NaN Not a number，代表一个非数值
        alert(Infinity); // Infinity alert(-Infinity); // -Infinity alert(NaN); // NaN
        
        判断是否为数字——isNaN()
        var a = 21; var b = isNaN(a); console.log(isNaN(a))//false var c = "hello"; console.log(isNaN(c)); // true ，"hello"是一个非数字
        
        2.1.2 转义字符
        
        转义符说明
        \n 换行
        \\ 斜杠\
        \’ 单引号
        \" 双引号
        \t tab 缩进
        \b 空格，b 是 blank 的意思
        2.1.3 字符串类型
        
        获取字符串长度 string.length
        var a='hello world' console.log(a.length)//11
        
        字符串拼接使用 + 号
        var a='hello world ' var b='yeye for the first' console.log(a+b)//hello world yeye for the first
        
        2.2 获取数据类型 typeof
        
        var num = 24; console.log(typeof num) // 结果 number
        
        不同类型返回值
        
        
        第三章——操作符
        
        3.1 算数运算符
        
        
        
        3.2 递增和递减运算符
        
        如果需要反复给数字变量添加或减去1，可以使用递**增（++）和递减（–）**运算符来完成。
        
        前置自增：++a 先自加，后返回值
        后置自增：a++ 先返回原值，后自增
        3.3 比较运算符
        
        
        
        3.4 = 符号
        
        
        
        console.log(18 == '18');//true console.log(18 === '18');//false
        
        js里面的==号会发生一个自动转型
        3.5 逻辑运算符
        
        概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。
        第四章——流程控制
        
        4.1 if语句
        
        1. 语法结构
        
        // 条件成立执行代码，否则什么也不做 if (条件表达式) { // 条件成立执行的代码语句 }
        
        2. if else语句（双分支语句）
        
        // 条件成立执行 if 里面代码，否则执行else 里面的代码 if (条件表达式) { // [如果] 条件成立执行的代码 } else { // [否则] 执行的代码 }
        
        3. if else if 语句 ( 多分支语句 )
        
        // 适合于检查多重条件。 if (条件表达式1) { 语句1； } else if (条件表达式2) { 语句2； } else if (条件表达式3) { 语句3； .... } else { // 上述条件都不成立执行此处代码 }
        
        4.2 三元表达式
        
        1. 语法结构
        
        表达式1 ? 表达式2 : 表达式3;
        
        如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
        
        简单理解：就类似于 if else （双分支）的简写
        
        var time = prompt('请输入一个数字'); // 三元表达式表达式？表达式1 ：表达式2 var result = (time
        4.3 分支流程控制switch 语句
        
        1. 语法结构
        
        switch( 表达式 ){ case value1: // 表达式等于 value1 时要执行的代码 break; case value2: // 表达式等于 value2 时要执行的代码 break; default: // 表达式不等于任何一个 value 时要执行的代码 }
        
        2. 语法说明
        
        switch ：开关转换， case ：小例子选项
        
        关键字 switch 后面括号内可以是表达式或值，通常是一个变量
        
        关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
        
        switch 表达式的值会与结构中的 case 的值做比较
        
        如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
        
        如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
        
        第五章——循环结构
        
        5.1 for循环
        
        在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句
        5.1.1 语法结构
        
        for(初始化变量; 条件表达式; 操作表达式 ){ //循环体 }
        
        初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
        
        条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
        
        操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。
        
        5.2 while 循环
        
        while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
        5.2.1 语法结构
        
        while (条件表达式) { // 循环体代码 }
        
        说明
        ①先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
        
        ②执行循环体代码
        
        ③循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束
        
        5.3 do while 循环
        
        5.3.1 语法结构
        
        do… while 循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
        do { // 循环体代码 - 条件表达式为 true 时重复执行循环体代码 } while(条件表达式);
        
        5.4 continue与break
        
        continue：立即跳出本次循环，继续下一次循环
        
        break：break 关键字用于立即跳出整个循环（循环结束）
        
        第六章——数组
        
        6.1 数组创建
        
        6.1.1 new创建
        
        var 数组名 = new Array() ； var arr = new Array(); // 创建一个新的空数组
        
        注意 Array () ，A 要大写
        6.1.2 利用数组字面量创建数组
        
        //1. 使用数组字面量方式创建空的数组 var 数组名 = []； //2. 使用数组字面量方式创建带初始值的数组 var 数组名 = ['小白','小黑','大黄','瑞奇'];
        
        类似python中的列表
        数组的字面量是方括号 [ ]
        数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
        6.2 数组索引与切片
        
        6.2.1 索引
        
        **索引 (下标) ：**用来访问数组元素的序号（数组下标从 0 开始）。
        // 定义数组 var arr = [1,2,3]; // 获取数组中的第2个元素 alert(arr[1]);//弹出2
        
        6.2.2 获取数组长度
        
        var arr=[1,2,3] console.log(arr.length)//输出3
        
        6.3 数组相关操作
        
        6.3.1 数组新增元素
        
        1. 通过修改 length长度新增数组元素
        
        var arr = ['red', 'green', 'blue', 'pink']; console.log(arr);//['red', 'green', 'blue', 'pink'] arr.length = 7; arr[4]='black' console.log(arr)//['red', 'green', 'blue', 'pink', 'black', empty × 2]
        
        可以通过修改 length 长度来实现数组扩容的目的
        length 属性是可读写的
        2. 直接通过索引进行新增元素
        
        var arr = ['red', 'green', 'blue', 'pink']; arr[4] = 'hotpink'; console.log(arr);
        
        第七章——函数
        
        7.1 函数使用
        
        7.1.1 声明函数
        
        // 声明函数 function 函数名() { //函数体代码 }
        
        function 是声明函数的关键字,必须小写
        7.1.2 调用函数
        
        // 调用函数函数名(); // 通过调用函数名来执行函数体代码
        
        调用的时候千万不要忘记添加小括号
        7.2 函数参数
        
        7.2.1 形参和实参
        
        在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参
        
        
        参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去
        
        // 声明函数 function getSum(num1, num2) { console.log(num1 + num2); } // 调用函数 getSum(1, 3); // 4 getSum(6, 5); // 11
        
        7.2.2 函数形参和实参个数不匹配问题
        
        
        
        function sum(num1, num2) { console.log(num1 + num2); } sum(100, 200); // 形参和实参个数相等，输出正确结果 sum(100, 400, 500, 700); // 实参个数多于形参，只取到形参的个数 sum(200); // 实参个数少于形参，多的形参定义为undefined，结果为NaN
        
        注意点：
        
        在JavaScript中，形参的默认值是undefined。
        函数可以带参数也可以不带参数
        声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
        调用函数的时候，函数名括号里面的是实参
        多个参数中间用逗号分隔
        形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配
        7.3 函数返回值
        
        在定义函数的时候，用return语句代表这个函数的返回值，函数内程序一旦执行到return 语句，代表该函数执行结束
        // 声明函数 function sum（）{ ... return 918； } // 调用函数 a=sum(); // 此时 a的值就等于918，因为 return 语句会把自身后面的值返回给调用者
        
        return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。
        function add(num1，num2){ //函数体 return num1，num2; } var resNum = add(8,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值 alert(resNum); // 6
        
        7.4 arguments使用
        
        不确定有多少个参数传递的时候，可以用 arguments 来获取。
        在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。
        7.4.1 arguments属性
        
        arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
        
        具有 length 属性
        
        按索引方式储存数据
        
        不具有数组的 push , pop 等方法
        
        7.5 匿名函数
        
        表达式写法
        
        // 这是函数表达式写法，匿名函数后面跟分号结束 var fn = function(){...}； // 调用的方式，函数调用必须写到函数体下面 fn();
        
        因为函数没有名字，所以也被称为匿名函数
        这个fn 里面存储的是一个函数
        函数表达式方式原理跟声明变量方式是一致的
        函数调用的代码必须写到函数体后面
        第八章——作用域
        
        8.1 全局作用域
        
        作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
        8.2 局部作用域
        
        作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。
        8.3 块级作用域
        
        Js中没有块级作用域（在ES6之前）
        for(var a=1;a console.log(a) } console.log('局部变量a的值为：'+a)//5 console.log('打印'); } //输出了打印 name : 'yeye', age : 24, sex : '女', sayHi : function(){ alert('hello world'); } }; alert('hello'); } console.log(andy.name)//yeye /* 先使用new Object创建一个对象，然后对其属性进行赋值 */ this.name = name; this.age = age; this.sex = sex; this.sayHi = function() { alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex); } } var bigbai = new Person('大白', 100, '男'); var smallbai = new Person('小白', 21, '男'); console.log(bigbai.name); console.log(smallbai.name); console.log(key)//key为属性名 console.log(对象名[key])//输出值 // 在此执行代码 } alert('hello'); } /* 先使用new Object创建一个对象，然后对其属性进行赋值 */ for(var key in andy) { console.log(key+':'+andy[key]) } return b - a; // 降序 // return a - b; // 升序 }); console.log(arr); this.name = name; } function f1(x) { // x = p x.name = "yeye"; } var p = new Person("瑶瑶"); console.log(p.name); // 瑶瑶 f1(p); console.log(p.name); // yeye

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

值	说明
Infinity	代表无穷大，大于任何数值
-Infinity	代表无穷小，小于任何数值
NaN	Not a number，代表一个非数值

转义符	说明
\n	换行
\\	斜杠\
\’	单引号
\"	双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

JavaScript

文章目录

第一章——初始JavaScript

1.1 浏览器执行 JS 简介

1.2 JS的组成

1.2.1 ECMAScript

1.2.2 DOM ——文档对象模型

1.2.3 BOM ——浏览器对象模型

1.3 JS的写法

1.3.1 行内式写法

1.3.2 内嵌式写法

1.3.3 外部js文件

1.4 注释

1.5 变量

1.5.1 变量声明

1.5.2 变量赋值

1.5.3 声明多个变量

1.6 输入与输出

1.6.1 格式化输出

1.6.2 输入

第二章——数据类型

2.1 简单数据类型：

2.1.1 数字类型

2.1.2 转义字符

2.1.3 字符串类型

2.2 获取数据类型 typeof

第三章——操作符

3.1 算数运算符

3.2 递增和递减运算符

3.3 比较运算符

3.4 = 符号

3.5 逻辑运算符

第四章——流程控制

4.1 if语句

1. 语法结构

2. if else语句（双分支语句）

3. if else if 语句 ( 多分支语句 )

4.2 三元表达式

1. 语法结构

4.3 分支流程控制switch 语句

1. 语法结构

2. 语法说明

第五章——循环结构

5.1 for循环

5.1.1 语法结构

5.2 while 循环

5.2.1 语法结构

5.3 do while 循环

5.3.1 语法结构

5.4 continue与break

第六章——数组

6.1 数组创建

6.1.1 new创建

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

6.2 数组索引与切片

6.2.1 索引

6.2.2 获取数组长度

6.3 数组相关操作

6.3.1 数组新增元素

1. 通过修改 length长度新增数组元素

2. 直接通过索引进行新增元素

第七章——函数

7.1 函数使用

7.1.1 声明函数

7.1.2 调用函数

7.2 函数参数

7.2.1 形参和实参

7.2.2 函数形参和实参个数不匹配问题

7.3 函数返回值

7.4 arguments使用

7.4.1 arguments属性

7.5 匿名函数

表达式写法

第八章——作用域

8.1 全局作用域

8.2 局部作用域

8.3 块级作用域

相关阅读

怎么把织梦的模板替换?

dedecms怎么调用特定的栏目文档?