Es6之代理与模块

别那么晚睡哦
0 阅读11分钟

JS基础之核心语法

在学习本章之前，我相信你们已经开始学习了前端最基本的东西：HTML，CSS

如果你还没有开始学习，那么请你学习完前面的知识再来开始学习

JS的作用跟引入

JS的作用

首先第一点，我们先要认识JS是什么？

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

这些都是官方的解释，那么通俗一点来讲，JS其实就是一个让一个网页从死的变成活的的编程语言 它可以让你的静态页面对用户的操作做出反应，从而让网页变得可交互.

如何引入JS

在 HTML 中引入 JavaScript 有多种方式，包括 内部引入、外部引入、外部脚本

其实这里跟你们前面学习的css差不多，都是有3种引用方式

  • 内部引入

​ 这种方法最直接。你就在 HTML 文件里，用一对 <script> 标签把 JS 代码包起来，放在你想让它生效的位置。

<!DOCTYPE html>
<html>
<body>
<h1>我的网页</h1>
<script>
  // 这里就是JS代码
  alert("你好，这是直接写在HTML里的JS！");
</script>
</body>
</html>

​ 优点：简单、直观，适合写几行测试代码或学习时使用

​ 缺点：如果代码多了，会让 HTML 文件变得又长又乱

  • 外部引入

​ 这是最推荐、最规范的方法。你把所有 JS 代码写在一个独立的 .js 文件里，然后在 HTML 中通过 <script src="..."> 标签来“引 入”它

​ 1.先创建一个script.js文件，里面只放js代码

// 这是 script.js 文件里的内容
alert("你好，我是从外部文件来的JS！");

​ 2.再在HTML文件内引入它

<!DOCTYPE html>
<html>
<body>
<h1>我的网页</h1>
<!-- src 属性指向你的JS文件 -->
<script src="script.js"></script>
</body>
</html>
  • 行内引入

​ 这种方法你基本可以忘了它，因为不推荐！！！！一点都不规范！！！！就是把JS代码直接写在 HTML 标签的“属性”里

<button onclick="alert('你点了一下按钮！')">点我</button>

​ 这种写法就太垃圾了，因为如果你全部js都这样子写，代码会显得十分杂乱，今天这代码是只有你跟老天爷认识，明天就是只有老天 爷认识了，不推荐使用！！！！！

  • 其实还有一种引入是 ES6 模块化引用 不过那是后话了 有兴趣的同学在学完本章js基础之后可以去看看我写的ES6基础

JS的变量（Variable）

变量是啥？其实就是数据存储的容器

对于大家都学习了java或者c或者c++ 其实就是赋值

那么在js中我们如何进行变量的声明呢 有3种方法 分别是

  • var

​ 这是JavaScript从出生就有的声明方式，但现在基本被淘汰，你只需要知道它存在，但尽量不要用它

​ 特点：

​ 1.可以多次声明同一个变量（容易搞乱）

​ 2.在赋值之前使用，不会报错，而是得到undefined（容易出bug）

​ 3.作用范围太“随意”（函数级作用域，容易泄露到外面）

console.log(a);        // undefined（因变量提升，不会报错）
var a; 				 // 变量未赋值时，默认值为 undefined
var a = 10;

var a = 20;            // 允许重复声明 看见没竟然可以重复声明 太危险了
console.log(a);        // 20

if (true) {
  var b = 30;          // b 实际属于函数/全局作用域，而非块级
}
console.log(b);        // 30（变量泄露到块外） 会泄露出去！！！
  • let

​ let 是ES6（2015年）引入的，解决了 var 的大部分缺点。当你需要改变变量的值时，就用 let

​ 特点：

​ 1.同一个作用域内，不能重复声明同一个变量（防止手误）

​ 2.必须先声明，才能使用（更符合直觉）

​ 3.作用范围更精确（块级作用域，{}内的变量外面访问不到）

let age = 18;     // 声明一个变量age，初始值18
age = 19;         // 修改变量的值（不需要重新写let）
console.log(age); // 输出：19

// 错误示范：不能重复声明
let name = "张三";
let name = "李四"; // 报错！变量name已经声明过了

// 必须先声明再使用
console.log(score); // 报错！score还没有声明
let score = 100;
  • const

​ const 和 let 同时诞生，当你不需要改变变量的值时，就用const 注意是固定的值

​ 特点：

​ 1.声明时必须立即赋值，不能先声明再赋值

​ 2.赋值后不能再改变！！！！！给我记住

​ 3.同样有 let 的块级作用域和不可重复声明等优点

const PI = 3.14159;     // 声明常量PI
// PI = 3.14;           // 报错！不能给常量重新赋值

const myName;           // 报错！const声明时必须赋值

// 但注意：如果常量存的是对象，对象内部属性可以改
const user = { name: "张三", age: 18 };
user.age = 19;          // 这是允许的！因为user这个“盒子”的指向没变
console.log(user.age);  // 输出：19

// user = { name: "李四" }; // 报错！不能把整个对象重新赋值给user

JS数据类型

​ 在学习这个之前，我需要你知道JavaScript 是一种动态类型或弱类型语言。这意味着：

​ 你不需要提前告诉 JavaScript 变量是什么类型，JavaScript 会在代码运行时，根据你赋给变量的值，自动推断并识别它的类型

​ 又有人问了，涛哥涛哥你到底在说啥？

​ 举个例子

var a = 10;        // 自动识别为 number 类型
var b = "hello";   // 自动识别为 string 类型
var c = true;      // 自动识别为 boolean 类型
var d = { name: "张三" }; // 自动识别为 object 类型

//关键是，变量的类型不是固定的，可以在程序运行过程中改变的 看下面
var x = 10;        // 此时 x 是 number
console.log(typeof x);  // 输出 "number"

x = "现在变成字符串";    // 此时 x 变成了 string
console.log(typeof x);  // 输出 "string"

x = true;           // 现在又变成了 boolean
console.log(typeof x);  // 输出 "boolean"

​ 这一点和 Java、C++ 这类静态类型语言完全不同！在静态类型语言中，你必须先声明类型（如 int a = 10;），之后也不能改变。

1.number 数字

  • 包括整数、小数、负数、科学计数法，以及三个特殊值：Infinity、-Infinity、NaN（Not a Number）
  • 不分整数和小数，统一用 64 位浮点数表示
let age = 25;           // 整数
let price = 19.99;      // 小数
let infinity = 1 / 0;   // Infinity
let notANumber = "abc" * 2;  // NaN

2.string 字符串

  • 表示文本，用 ''、"" 或 （反引号）包裹
  • 反引号支持模板字符串：可以换行、嵌入变量 ${}（ES6 语法）
let name = "张三";
let greeting = '你好';
let message = `Hello, ${name}!`;  // 模板字符串 这里其实就是相当于“Hello,张三” 是es6语法

3.boolean 布尔值

  • 只有两个值：true（真）、false（假）
  • 常用于条件判断
let isLoggedIn = true;
let isGreater = 10 > 5;  // true

4.undefined 未定义

  • 变量声明了但没有赋值时，默认值就是 undefined
  • 表示“这个变量存在，但还不知道是什么值”
let x;
console.log(x);  // undefined

5.null 空值

  • 表示**“这里明明没有东西，是我故意设为空的”**
  • 常用于手动清空一个变量的值
let user = null;  // 明确表示“没有用户”

6. bigint --大整数（ES2020引入）

  • 用于表示超出普通 number 范围的整数（2⁵³ - 1 以上）
  • 数字末尾加 n
let bigNumber = 9007199254740993n;

7.symbol 符号（ES2015引入）

  • 表示独一无二的值，常用于对象属性的键，避免属性名冲突

  • 每调用一次 Symbol() 都生成一个全新的值

    let sym1 = Symbol("id");
let sym2 = Symbol("id");
console.log(sym1 === sym2);  // false，即使描述相同

8. js的引用类型 只有这一种 object 对象

  • 只有这一种引用类型，但它可以扩展出很多子类型：Object、Array、Function、Date、RegExp、Map、Set 等

  • 存储的是内存地址（引用），而不是值本身

  • 可变：修改对象内部属性时，所有引用该对象的地方都会同步变化

    let person = { name: "李四", age: 20 };  // 普通对象
let colors = ["红", "绿", "蓝"];          // 数组（对象的子类型）
function sayHi() {}                      // 函数（本质也是对象）

JS运算符

运算符这一块相信大家都不陌生了 大家都有编程语言的基础 运算符这一块大部分都是互通的 现在我把官方的运算符文档放这里 稍后我会介绍一下一些js特有的

字符串的拼接

let a = "lhf";
let b = "like";
let c = "girl";

let d = a + b + c;

console.log(d) //输出 lhflikegirl

这是传统的js拼接字符串的方式 当然还有上文提到的现代的拼接方法--模板字符串（ES6）

现在考考你们

let a = 10;
let b = "20";

console.log(a + b); //现在这里会输出啥？

答案是输出1020

为啥呢 其实就是js的一种特性：如果 + 的两边至少有一个是字符串，那么它就不再是数学加法，而是字符串拼接。

JS的语句

很简单啊兄弟们 其实就是if else 跟 for循环 还有什么switch之类的 我相信你们都有学过了 这里我就略过了 没啥好讲的

JS 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 其实也就跟你们学习过的c跟java差不多 只不过定义方式不同

function getLhf () {
	console.log("lhf is shabi")
}

这个就是最简单的定义方法 你看其实就是function 这个关键字 + 函数名 （括号里面可填传入参数）+ 方法体 是不是很简单 一目了然

还有一种函数的定义方法叫做箭头函数 这个也是ES6推出的新语法 感兴趣的可以看我写的ES6之基础md

JS Array 数组

JavaScript 数组是一种用于在单个变量中存储多个值的特殊数据结构。与其他一些强类型语言不同，JavaScript 的数组非常灵活：它们的大小是动态的（可以随时增加或减少），并且同一个数组中可以包含不同类型的数据（如数字、字符串、对象，甚至是其他数组）

1. 创建数组

最常见且推荐的方法是使用数组字面量（方括号 []）：

JavaScript

// 创建一个包含相同数据类型的数组
const fruits = ['苹果', '香蕉', '橘子'];

// 创建一个包含混合数据类型的数组
const mixedArray = [1, 'hello', true, { name: 'Tom' }, null];

// 创建一个空数组
const emptyArray = [];

2. 访问和修改数组元素

数组的索引（Index）是从 0 开始的。你可以通过方括号语法加上索引号来访问或修改特定位置的元素。

JavaScript

const colors = ['红', '绿', '蓝'];

console.log(colors[0]); // 输出: '红' (第一个元素)
console.log(colors[2]); // 输出: '蓝' (第三个元素)

// 修改元素
colors[1] = '黄';
console.log(colors); // 输出: ['红', '黄', '蓝']

3. 核心属性：length

length 属性会返回数组中元素的数量。这在遍历数组时非常有用。

JavaScript

const animals = ['狗', '猫', '兔子'];
console.log(animals.length); // 输出: 3

4. 常用的数组方法

JavaScript 提供了大量内置方法来操作数组。以下按照功能分类介绍最常用的几个：

增删元素（会改变原数组）
  • push(): 在数组末尾添加一个或多个元素。
  • pop(): 移除并返回数组末尾的元素。
  • unshift(): 在数组开头添加一个或多个元素。
  • shift(): 移除并返回数组开头的元素。
  • splice(index, count, item1...): 在指定索引处添加、删除或替换元素。
遍历与转换（通常返回新数组，不改变原数组）
  • forEach(): 为数组中的每个元素执行一次你提供的函数（仅遍历，无返回值）。
  • map(): 遍历数组，并返回一个新数组，新数组中的元素是你提供的函数处理过的值。
  • filter(): 遍历数组，过滤出符合条件的元素，并组成一个新数组返回。
  • reduce(): 将数组中的所有元素通过一个累加器函数，最终计算为一个单一的值（比如求和）。
查找与判断
  • includes(value): 判断数组是否包含某个特定的值，返回 true 或 false。
  • indexOf(value): 返回在数组中可以找到给定元素的第一个索引，如果找不到则返回 -1。
  • find(callback): 查找并返回数组中满足条件的第一个元素的值。

JS对象

这里其实和Java的语法非常相像 这里给你们举一个例子

var obj = {
	name: 'pzt', //name其实就是这个对象的属性 熟悉Java的同学应该很开心了 因为一模一样
    age:18
}

console.log(obj.name) // 输出的时候我们使用 . 来表示是这个对象的某个属性

//这里再介绍一下如何通过for循环遍历出这个对象的每一个
for (var key in obj ) {
	console.log (key , obj[key])
}
//这里的 key 其实就是一个变量，在每次循环中会被赋值为对象的属性名（字符串类型）
//当然在es6中还有给你号的比如for...of forEach之类的

好了 这些js的最基本的核心语法我已经介绍完毕 下一个章节我会介绍JS 的 DOM 以及 Timer

祝你学习顺利！！！# JS基础之核心语法

avatar
文章
阅读
粉丝