前端学习笔记：JavaScript基础语法（ECMAScript）

最新推荐文章于 2023-11-13 12:08:05 发布

早八睡不醒午觉睡不够的程序猿

最新推荐文章于 2023-11-13 12:08:05 发布

阅读量684

点赞数 1

文章标签：前端 javascript ecmascript

本文链接：https://blog.csdn.net/lbcbjtlhmjq/article/details/131760850

版权

这篇笔记介绍了JavaScript的基础知识，包括ECMAScript、WebAPIs、变量、数据类型、运算符、函数、对象以及数组的操作。适合已有编程基础，特别是C语言基础的学习者。还涵盖了数据类型的检测与转换、条件判断、循环语句、字符串与数字处理等内容，以及对象的遍历和内置对象Math的使用。

摘要由CSDN通过智能技术生成

此博客参考b站：【黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76&vd_source=06e5549bf018e111f4275c259292d0da

这份笔记适用于已经学过一门编程语言（最好是C语言）的同学，如果你没有编程基础，那么这套笔记可能不适合你哦~

4、对象中有关属性的操作（增、删、查、改）

二十、拓展——基本数据类型和引用数据类型的区别

堆栈空间分配区别:

一、开发者网络平台MDN

先介绍一个前端的权威网站：MDN Web Docs (mozilla.org)

MDN是Mozilla基金会的开发者网络平台
。提供了大量关于各种HTML
、CSS
和JavaScript功能的开放、详细的文档，以及广泛的Web API参考资料

二、JavaScript的组成

1、ECMAScript

规定了js基础语法核心知识。
比如:变量、分支语句、循环语句、对象等等

2、Web APIs

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

三、引入方式

JS的引入方式与CSS基本相同

1、内部JavaScript

直接写在html文件里，用script标签包住

规范: script标签写在</body>上面

2、外部JavaScript

代码写在以.js结尾的文件里

语法: 通过script标签，引入到html页面中

外部JavaScript注意事项

1.我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将JavaScript 代码放在 HTML页面的底部附近通常是最好的策略

2.script标签中间无需写代码，否则会被忽略!

3.外部/avaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯

3、内联JavaScript

代码写在标签内部

注意: 此处作为了解即可，但是后面vue框架会用这种模式

四、结束符

JS语句结束符是分号，但是可写可不写

约定:为了风格统一，结束符要么每句都写，要么每句都不写 (按照团队要求）

五、输入、输出语法

1、输出语法

2、输入语法

注：prompt以及表单取过来的值默认是字符串类型

六、字面量的概念

在计算机科学中，字面量 (literal) 是在计算机中描述的事/物

比如:

我们工资是: 1000 此时 1000 就是数字字面量

‘黑马程序员’字符串字面量

还有接下来我们学的 [ ] 数组字面量 { } 对象字面量等等

七、变量的基本使用

JS是一门若数据类型的编程语言。

C语言中，声明变量时用int、double、char等严格区分数据类型，而JS声明不同数据类型的数据均用let 变量名

1、变量的声明

变量命名规则和C语言相同

2、数组变量的声明

第二种是使用函数声明，但习惯上用第一种

3、常量的声明

八、数据类型——基本数据类型

1、数字类型 (Number)

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

通俗地讲，NaN的意思是：这不是一个数字

NaN不等于任何值，包括它本身

例如：'老师'- 2 结果是NaN

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

例如：NaN + 2 结果是NaN

2、字符串类型 (string)

通过单引号 (") 、双引号("")或反引号(``)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号

反引号可以格式预留

注意事项

单引号/双引号可以互相嵌套，但是不以自已嵌套自已(口诀: 外双内单，或者外单内双）

必要时可以使用转义符 \ ，输出单引号或双引号

字符串拼接

字符串拼接:

+ 运算符可以实现字符串的拼接

模板字符串

使用场景

拼接字符串和变量

内容拼接变量时，用${ }包住变量

字符串的比较

字符串比较，是比较的字符对应的ASCII码

从左往右依次比较

如果第一位一样再比较第二位，以此类推

3、布尔类型 (boolean)

表示肯定或否定时在计算机中对应的是布尔类型数据

它有两个固定的值 true 和 false，表示肯定的数据用 true (真)，表示否定的数据用 false (假)

4、未定义类型 (undefined)

未定义是比较特殊的类型，只有一个值 undefined

只声明变量，不赋值的情况下，变量的默认值为 undefined

5、null (空类型)

JavaScript中的 null仅仅是一个代表“无”、“空”或“值未知”的特殊值

null是一个对象数据类型

null和 undefined 区别:

undefined 表示没有赋值
null 表示赋值了，但是内容为空

null开发中的使用场景:

官方解释: 把null作为尚未创建的对象

大白话: 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

九、检测数据类型

通过 typeof 关键字检测数据类型

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式:

1.作为运算符: typeof x (常用的写法)
2. 函数形式: typeof(x)

换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用第一种写法

十、类型转换

prompt以及表单取过来的值默认是字符串类型，故有时需要进行数据的类型转换

1、隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则:

+号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

+号作为正号解析可以转换成数字型，例如+prompt()

任何数据和字符串相加结果都是字符串

2、显示转换

1、Number(数据)

转成数字类型
如果字符串内容里有非数字，转换失败时结果为 NaN (Not a Number) 即不是一个数字NaN也是number类型的数据，代表非数字

把'12px'转化成数字型，px会被自动忽略，但如果是abc12这种字母开头的，就不能正常转化为数字

2、parselnt(数据)

只保留整数

3、parseFloat(数据)

可以保留小数

4、String(数据)

转换成字符串

另一种写法：变量.toString()
括号里面可以跟进制

5、Boolean(数据)

记忆: ""、0、undefined、null、false、NaN 转换为布尔值后都是false，余则为 true

十一、=、==、===、!=、!==

= 单等是赋值

== 可判断不全相等或完全相等（左右两边值是否相等）

===可判断全等（左右两边是否类型和值都相等）

开发中判断是否相等，强烈推荐使用===

!=的范围比!==的范围更窄，===比==的范围更窄

!=和===是一对，!==和==是一对

例如

'2'==2 //真
2==2 //真

'2'===2 //假
2===2 //真

'2'!=2 //真
'2'!==2 //假

十二、ASCII码表

把表放在这没别的，就是以后要用的时候方便找

十三、运算符优先级

和C语言一样一样的

十四、分支语句、循环语句

JS的分支、循环语句和C语言一样一样的，这里就不详细介绍了。只介绍一下三元运算符数字补0案例

数字补0案例

需求: 用户输入1个数，如果数字小于10，则前面进行补0，例如需显示02、09等数字，为后续实现倒计时做铺垫

代码：

let num = +prompt(请您输入一个数字:')

num = num < 10 ? '0' + num : num

数字补0案例相关例题：转换时间案例

需求，用户输入秒数seconds，浏览器自动进行时间转换并显示：seconds秒转化为xx时xx分xx秒

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换时间</title>
</head>

<body>
    <script>
        let seconds = +prompt('请输入秒数：')
        let minutes = parseInt(seconds / 60)
        let hour = parseInt(minutes / 60)
        seconds = seconds % 60
        minutes = minutes % 60
        document.write(`${seconds}转换为${hour > 10 ? hour : '0' + hour}时${minutes > 10 ? minutes : '0' + minutes}分${seconds > 10 ? seconds : '0' + seconds}秒`)
    </script>
</body>

</html>

十五、操作数组

1、增

数组名.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

数组名.unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

2、删

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值

数组.shift()方法从数组中删除第一个元素，并返回该元素的值

数组.splice() 方法删除指定元素

语法:arr.splice(起始位置，删除几个元素)

3、排序

数组.sort() 方法可以排序

十六、函数

1、函数声明语法

2、函数命名规范

命名规则和变量命名规则一致

尽量使用小驼峰命名法命名，且前缀尽量用动词，如get、set等

3、函数调用语法

4、函数参数

函数可以有一个或多个参数，也可以没有参数

下面的例子有实参时，执行时x=0,y=0，无实参时，按传入的实参执行

5、函数返回值

可以返回一个值或多个值，返回多个值时用数组返回

return [num1,num2,num3] //返回多个值

6、函数细节补充

1、若存在两个函数名相同的函数，则后面的会覆盖前面的函数

2、在Javascript中实参的个数和形参的个数可以不一致
如果形参过少会自动填上undefined(了解即可)
如果实参过多那么多余的实参会被忽略(函数内部有一个arguments,里面装着所有的实参)

3、变量有一个坑：如果函数内部，变量没有声明，直接赋值，也当全局变量看。但是强烈不推荐这样写

十七、匿名函数

匿名函数：

没有名字的函数，无法直接使用

使用方式:

1、函数表达式

2、立即执行函数

1、函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式

语法：

调用函数的方法和具名函数一样

2、立即执行函数

场景介绍:避免全局变量之间的污染

语法：

(function(){}()) //写法一
(function(){})() //写法二

注意:多个立即执行函数要用;隔开，要不然会报错

3、具名函数和匿名函数的不同点

具名函数的调用可以写在任意位置（可以在函数声明前调用，也可以在函数声明后调用）

匿名函数必须先声明再调用

十八、逻辑中断

短路:只存在于 &&和中，当满足一定条件会让右边代码不执行

原因:通过左边能得到整个式子的结果，因此没必要再判断右边运算

结果:无论 && 还是儿，运算结果都是最后被执行的表达式值，一般用在变量赋值

十九、数据类型——引用数据类型（对象）

这里的对象类似于C语言中的结构体，但与结构体不同的是，对象不仅包含属性（也就是变量），还包含方法（也就是操作该对象的函数）。所以，用C++中的“类”的概念来类比会更加合适

1、对象声明语法

2、对象使用

对象外面叫变量，对象里面叫属性；对象外面叫函数，对象里面叫方法

3、对象中的属性

1、数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的

2、属性都是成对出现的，包括属性名和值，它们之间使用英文冒号分隔
多个属性之间使用英文逗号分隔（不要忘了逗号！！！）

3、属性就是依附在对象上的变量

4、属性名可以使用' '或" "，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

4、对象中有关属性的操作（增、删、查、改）

一张图就搞定了

补充：查的两种方式

5、对象中的方法

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数

1.方法是由方法名和函数两部分构成，它们之间使用英文冒号分隔

2.多个属性之间使用英文逗号分隔

3.方法是依附在对象中的函数

4.方法名可以使用' '或" "，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

调用：

对象名.方法名（参数）

6、遍历对象

一般不用这种方式遍历数组，主要是用来遍历对象

for in语法中的 k 是一个变量,在循环的过程中依次代表对象的属性名

由于k 是变量，所以必须使用[ ]语法解析

一定记住: k 是获得对象的属性名，对象名[k] 是获得属性值

7、遍历数组对象

例题：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历数组对象</title>
    <style>
        th,
        td{
            border:1px solid #9b9b9b;
        }

        table tr:nth-child(1){
            background-color: #ccc;
        }

        table tr:not(:first-child):hover{ /*:not(:first-child)的意思是除了第一个*/
            background-color: #ccc;
        }

        table{
            margin: 50px auto;
            height: 200px;
            width: 500px;
            text-align: center;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    
    <script>
        let students = [
        {name:'小明',age:18,gender:'男',hometown:'广东省'},
        {name:'小红',age:19,gender:'女',hometown:'河南省'},
        {name:'小刚',age:17,gender:'男',hometown:'江西省'},
        {name:'小丽',age:18,gender:'女',hometown:'浙江省'}
        ]

        document.write(`<table>`)
            document.write(`
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        `)
        for(let i=0;i<students.length;i++)
        {
           document.write(`
            <tr>
                <td>${i+1}</td>
                <td>${students[i].name}</td>
                <td>${students[i].age}</td>
                <td>${students[i].gender}</td>
                <td>${students[i].hometown}</td>
            </tr>
           `)
        }
        document.write(`</table>`)
    </script>
</body>
</html>

浏览器预览效果