跟着大神学JavaScript之边学边记（一）

最新推荐文章于 2025-08-17 18:01:03 发布

若非个hello丶world

最新推荐文章于 2025-08-17 18:01:03 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JavaScript 学习笔记

本文链接：https://blog.youkuaiyun.com/qq_21282443/article/details/83748950

前端专栏收录该内容

9 篇文章

订阅专栏

本文记录了作者跟随专家系统学习JavaScript的过程，涵盖了数据类型、数组、对象、字符串操作及ES6新特性等内容，适合初学者和希望巩固JavaScript基础的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后一篇文章跟着大神学JavaScript之边学边记（二）—>

有目录了，好棒

跟着大神学JavaScript

跟着大神学JavaScript

前言：

工作中或多或少都会写点页面相关的东西，主要原因是工作中使用用的框架太落后了[/无奈]，在经历了开发进度慢、边用变查的困境后，咬咬牙，决定挤出时间跟大神系统的学习一遍JavaScript。
此博文主要记载学习过程中一些不熟悉的用法或ES6中的新特性。
参考：

快速入门

JavaScript介绍

Js引用方式一本有两种：

将js代码直接写在<script> </script>语句块中
将代码文件写在单独的文件中（后缀名.js）,而后通过<script src='/example.js' ></scirpt>引用。

语法：

以;结尾，如果不手动写，浏览器也会自动加上，但不建议。
语法块包含在{ ... }中
// 为单行注释， /* */为多行注释

数据类型

Number：不区分证书与浮点数，且注意计算机无法正确的标识浮点数，于是一减去三分之二并不等于三分之一（等式布尔计算结果为false）

举例	说明
123	整数
0.456	小数
NaN	Not a Number，无法计算结果时，返回此值。不等于任何数字，包括自身。于是NaN === NaN会返回false，通过isNaN()方法判断值是否为NaN
Infinity	无限大，当数值超过JS表示的最大值时，返回此值
0x 1a3f	十六进制数字

比较运算： js中 ==与===大不相同，两个等号的逻辑比较，会自动转换数据类型后在比较，会有一些莫名奇妙的结果。而是三个等号的比较不会转换类型，若类型不一样，直接返回false。强烈建议使用===
null与undefined：绝大部分情况下效果一样，null表示空，undefined表示未定义，多用于判断方法内参数是否传递
数组：数组中可以是所有的数据类型，且同一个数组中并不强制要求类型一样。索引从0开始。
对象：一组键值对组成的无序集合

var person = {
	name:"IG",
	age:18,
	tags:["LPL","S8","冠军"]
}

通过对象变量.属性名获取对象的属性,eg: person.name
strict模式：在js中，若未使用var申明变量就使用的，即使变量定义在内层语句块中，其变量作用域也会上升至全局变量。从而会引发不必要的bug，而在js首行使用'use strict';声明使用严格模式，不允许在未声明变量的情况下使用变量。

字符串

ES6新特性：

以反括号括起来的语句块，被认为是多行字符串，不需要通过\n达到换行效果
使用${name}可以在字符串中直接引用已声明的变量

var name = 'Bob';
var message = `ES6
换行
again`;
console.log('${name} say : ${message}');
console.log(`${name} say : ${message}`);

输出结果
注意：有单引号'包括的语句块不会识别$引用，只有用反括号·包括的语句块会识别$引用,反括号位于键盘ESC下方，Tab键上方。

┌─────┐ ┌─────┬─────┬─────┬─────┐
│ ESC │ │ F1  │ F2  │ F3  │ F4  │
│     │ │     │     │     │     │
└─────┘ └─────┴─────┴─────┴─────┘
┌─────┬─────┬─────┬─────┬─────┐
│  ~  │  !  │  @  │  #  │  $  │
│  `  │  1  │  2  │  3  │  4  │
├─────┴──┬──┴──┬──┴──┬──┴──┬──┘
│        │     │     │     │
│  tab   │  Q  │  W  │  E  │
├────────┴──┬──┴──┬──┴──┬──┘
│           │     │     │
│ Caps Lock │  A  │  S  │
└───────────┴─────┴─────┘

常用方法	举例	结果	说明
toUpperCase()	‘abc’.toUpperCase();	ABC	转为大写
toLowerCase()		‘ABC’.toLowerCase()	abc
indexOf()	‘Hello,world’.indexOf(‘Hello’) ‘Hello,world’.indexOf(‘Hi’)	0 -1	查找匹配字符串开始位置的索引（从0开始）,当无匹配时返回`-1`
substring()	‘Hello’.substring(1,3) ‘Hello’.substring(2)	el llo	截取字符串，两个参数时，截取[start, end)区间内字符。一个参数时，截取[start, length）区间内字符

数组

特点：

可以包含任意类型的元素，且不必统一
可以通过索引赋值、取值
修改length属性，会修改数组大小
对超过当前length大小索引赋值时，会修改数组大小
方法：

方法	说明
slice()	与字符串的substring()类似，且可以不传递参数，此时会截取整个数组，达到数组拷贝的效果
push()	在数组末尾插入一到多个数据，取决于参数，用逗号分隔
pop()	在数组末位移除一个元素
unshift()	与push()用法一致，在数组开始处插入数据
shift()	在数组开始处删除数据
sort()	对数组进行排序，可以采用默认排序也可以自定义排序规则
reverse()	反转，将数组的排序反过来
splice(start, len, …)	作用： 1. 从start处删除len个元素， 2. 在删除处添加之后参数传递的数据 3. 返回被删除的元素
concat()	不修改当前数组，将连接后的数组返回
join()	将数组用指定的连接符连接起来