当前位置： 首页 > news >正文

JavaScript核心语法（1）

news 2024/11/26 21:40:21

目录

背景

1.变量

2.类型

3.运算符

4.语句

5.函数

6.数组

forEach 方法

语法

示例

基本用法

使用索引

使用箭头函数

修改数组中的元素

使用 thisArg

注意事项

结论

map 方法

map 方法的语法

map 方法的基本用法

使用箭头函数

处理对象数组

使用 index 和 array 参数

使用 thisArg

总结

7.对象

创建对象

使用对象字面量

访问对象属性

对象的方法

遍历对象属性

对象的内置方法

示例

总结

后记

背景

在这个星期，忙完了睿哥的一些任务之后，我有一两天的时间是有空的，这一两天的时间里，我大概看了一下JavaScript的核心语法，特地写一篇文章来总结一下。

我为什么要先开始学JavaScript而不是HTML和css呢？因为其实在React的框架中，这两个都用的不多，而JavaScript用的还算多，所以要学这个。一般情况下，如果你想展示一个静态的，写死的页面，那根本用不到JavaScript，就HTML和CSS就已经可以了，我直接前端把这个页面给写死，数据也写死在前端，那一个静态页面就产生了。不过现在静态页面已经太low了，根本用不上，一般都用的是动态页面。动态页面其实就是基于后端给的数据进行一些数据的呈现和渲染到页面上，只要我后端传回来的数据一直在改变，那我前端的页面也一直在改变。形成动态的效果。而想要达成这种效果，那就需要使用JavaScript了。

1.变量

在进行页面内容呈现的时候，最常用的是数据，而变量是数据存储的容器。在JavaScript中，不需要显式声明变量的类型。

var myNum = 10; // myNum 是一个数字
myNum = "Hello"; // 现在 myNum 是一个字符串

JavaScript引擎会根据赋值的内容自动推断变量的类型。例如，当你写 var myNum = 10; 时，JavaScript引擎会将 myNum 推断为一个数字类型。这种类型推断机制使得代码更加简洁，不需要显式地声明变量的类型。

在JavaScript中，变量可以通过 var、let 或 const 关键字声明。

var myNum = 10; // 使用 var 声明变量
let myOtherNum = 20; // 使用 let 声明变量
const myConstant = 30; // 使用 const 声明常量

其实变量有很多种类型，不只是存数字这么简单。

2.类型

JavaScript 中有七种原始类型，但是一般使用比较多的就4种。

  1. Number：表示数字。

    let num = 42;

  2. String：表示文本数据。

    let greeting = "Hello, World!";

  3. Boolean：表示逻辑值，只有两个可能的值：true 和 false。

    let isTrue = true;
let isFalse = false;

  4. Undefined：表示变量已声明但未赋值。

    let x;
console.log(x); 
// 输出: undefined，容器的默认值，如果输出undefined，那就代表这个容器没有装上任何值

一般可以通过打印的方式去查看变量存储的数值

3.运算符

数值运算，字符串运算，比较类运算。其实这些在真正进行前端开发的时候很少用到，我就不详细的说了。

4.语句

if else语句；for循环。

JavaScript的语句有很多，但是用的最多的也就这两个，我也只会这两个，这两个是在大学学C语言的时候学的，基本上感觉会这两个就差不多了，其他的如果不会的话，那就到时遇到再学，因为太多了，根本一个个学，记不住。

5.函数

6.数组

const numbers = [1, 2, 3, 4, 5];

数组中能讲的就是 forEach方法和 map方法了，这两个方法经常会用到。

forEach 方法

forEach 是 JavaScript 数组对象的一个方法，用于遍历数组中的每一个元素，并对每个元素执行指定的函数。它是一个简洁且常用的迭代方法，适合在需要对数组中的每个元素进行操作但不需要返回新数组的情况下使用。

语法

array.forEach(function(currentValue, index, array) {// 执行的代码
}, thisArg);
  • currentValue：当前正在处理的元素。
  • index（可选）：当前正在处理的元素的索引。
  • array（可选）：正在遍历的数组对象。
  • thisArg（可选）：执行回调时用作 this 的值（可选）。

示例

以下是一些使用 forEach 的示例：

基本用法
const numbers = [1, 2, 3, 4, 5];numbers.forEach(function(number) {console.log(number);
});

输出：

1
2
3
4
5
使用索引
const fruits = ['apple', 'banana', 'cherry'];fruits.forEach(function(fruit, index) {console.log(index + ': ' + fruit);
});

输出：

0: apple
1: banana
2: cherry
使用箭头函数
const animals = ['cat', 'dog', 'elephant'];animals.forEach((animal, index) => {console.log(`${index}: ${animal}`);
});

输出：

0: cat
1: dog
2: elephant
修改数组中的元素（了解即可）

虽然 forEach 不会返回新数组，但你仍然可以修改原数组的元素：

const numbers = [1, 2, 3, 4, 5];numbers.forEach((number, index, array) => {array[index] = number * 2;
});console.log(numbers);

输出：

[2, 4, 6, 8, 10]
使用 thisArg

你可以使用 thisArg 参数来指定 forEach 回调函数中的 this 值：

const obj = {name: 'MyObject',printName: function() {const items = ['item1', 'item2', 'item3'];items.forEach(function(item) {console.log(this.name + ': ' + item);}, this);}
};obj.printName();

输出：

MyObject: item1
MyObject: item2
MyObject: item3

注意事项

  • forEach 不会对空数组进行操作。
  • forEach 没有返回值，总是返回 undefined。
  • forEach 方法的回调函数可以接受三个参数：当前元素 (currentValue)、当前元素的索引 (index) 和整个数组对象 (array)。
  • 如果你需要返回一个新的数组，可以考虑使用 map 方法。

结论

forEach 方法是一个简洁和强大的工具，适用于需要对数组的每个元素执行操作但不需要返回新数组的场景。

map 方法

map 方法是 JavaScript 中数组对象的一个内置方法，用于创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。map 方法不会改变原始数组。

map 方法的语法

array.map(function(currentValue, index, array) {// 返回新的元素值
}, thisArg);
  • currentValue：当前正在处理的数组元素。
  • index（可选）：当前正在处理的数组元素的索引。
  • array（可选）：正在遍历的数组对象。
  • thisArg（可选）：执行回调函数时用作 this 值。

map 方法的基本用法

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {return number * 2;
});
console.log(doubled); // 输出 [2, 4, 6, 8, 10]

在这个例子中，map 方法对数组 numbers 的每个元素调用一次提供的函数，并将返回值组成一个新数组 doubled。

使用箭头函数

你也可以使用箭头函数来简化代码：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // 输出 [2, 4, 6, 8, 10]

处理对象数组

map 方法也可以用于处理对象数组。例如，假设你有一个包含用户对象的数组，你想要创建一个包含用户名的数组：

const users = [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 35 }
];const usernames = users.map(user => user.name);
console.log(usernames); // 输出 ['Alice', 'Bob', 'Charlie']

使用 index 和 array 参数

你可以使用 map 方法的第二个和第三个参数来访问当前元素的索引和整个数组对象：

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map((number, index, array) => {return `Index ${index} has value ${number} in array ${array}`;
});
console.log(result);

输出：

['Index 0 has value 1 in array 1,2,3,4,5','Index 1 has value 2 in array 1,2,3,4,5','Index 2 has value 3 in array 1,2,3,4,5','Index 3 has value 4 in array 1,2,3,4,5','Index 4 has value 5 in array 1,2,3,4,5'
]

使用 thisArg

你可以使用 thisArg 参数来指定回调函数执行时的 this 值：

const numbers = [1, 2, 3, 4, 5];
const multiplier = {factor: 2
};const doubled = numbers.map(function(number) {return number * this.factor;
}, multiplier);console.log(doubled); // 输出 [2, 4, 6, 8, 10]

在这个例子中，this 在回调函数中被设置为 multiplier 对象，因此 this.factor 的值为 2。

总结

  • map 方法用于创建一个新数组，其结果是对原数组中的每个元素调用一次提供的函数后的返回值。
  • map 方法不会改变原始数组。
  • map 方法的回调函数可以接受三个参数：当前元素 (currentValue)、当前元素的索引 (index) 和整个数组对象 (array)。
  • 可以使用 thisArg 参数来指定回调函数执行时的 this 值。

map 方法在数据转换和处理时非常有用，特别是在需要对数组进行映射操作时。

7.对象

在 JavaScript 中，对象（Object）是一种数据结构，用于存储键值对（key-value pairs）。对象是 JavaScript 中最重要的数据类型之一，几乎所有的 JavaScript 程序都离不开对象。

创建对象

使用对象字面量

对象字面量是创建对象的最常用方式：

const person = {name: 'Alice',age: 25,greet: function() {console.log('Hello, my name is ' + this.name);}
};
访问对象属性

你可以使用点符号（dot notation）来访问对象的属性：

console.log(person.name); // 输出 'Alice'

对象的方法

对象的方法是作为对象属性的函数。你可以在对象字面量中定义方法，或者动态地添加方法：

const person = {name: 'Alice',age: 25,greet: function() {console.log('Hello, my name is ' + this.name);}
};person.greet(); // 输出 'Hello, my name is Alice'

遍历对象属性（了解即可）

你可以使用 for...in 循环遍历对象的可枚举属性：

for (let key in person) {if (person.hasOwnProperty(key)) {console.log(key + ': ' + person[key]);}
}

对象的内置方法（了解即可）

JavaScript 对象有一些内置方法，例如：

  • Object.keys(obj)：返回一个包含对象所有可枚举属性名的数组。
  • Object.values(obj)：返回一个包含对象所有可枚举属性值的数组。
  • Object.entries(obj)：返回一个包含对象所有可枚举属性的键值对数组。

示例

const person = {name: 'Alice',age: 25,greet() {console.log('Hello, my name is ' + this.name);}
};console.log(Object.keys(person)); // 输出 ['name', 'age', 'greet']
console.log(Object.values(person)); // 输出 ['Alice', 25, function greet() { ... }]
console.log(Object.entries(person)); // 输出 [['name', 'Alice'], ['age', 25], ['greet', function greet() { ... }]]person.greet(); // 输出 'Hello, my name is Alice'

总结

  • 对象 是一种用于存储键值对的数据结构。
  • 对象可以通过 对象字面量创建。
  • 对象的属性可以通过 点符号  访问。
  • 对象的方法是作为对象属性的函数。
  • 可以使用 for...in 循环 遍历对象的属性。
  • JavaScript 提供了一些内置方法来操作对象，例如 Object.keys、Object.values 和 Object.entries。

后记

其实JavaScript的语法肯定不止这么多，但是其实用的最多的也就这些，我个人感觉这些只要搞懂了，一般情况就足以应对了，不会说像看天书一样，如果真的遇到不懂的，那就到时候针对不懂的去查一下就好了。


http://www.mrgr.cn/news/78125.html

相关文章：

  • 反向代理服务器的用途
  • element-ui 中el-calendar 日历插件获取显示的第一天和最后一天【原创】
  • pyhton django web集群基于linux定时任务
  • Vue 3 自定义插件开发
  • Java将PDF保存为图片
  • 《Python基础》之数据容器
  • oneplus6线刷、trwp、magisk(apatch)、LSPosed、Shamiko、Hide My Applist
  • 卷积神经网络学习记录
  • WPF中如何让Textbox显示为一条直线
  • Selenium 包介绍
  • 高标准农田智慧农业系统建设方案
  • React-useEffect的使用
  • 免费实用在线AI工具集合 - 加菲工具
  • 加菲工具 - 好用免费的在线工具集合
  • 【Python】分割秘籍！掌握split()方法，让你的字符串处理轻松无敌！
  • 代码管理之Gitlab
  • 【深度学习】【RKNN】【C++】模型转化、环境搭建以及模型部署的详细教程
  • docker compose 使用记录
  • ThingsBoard规则链节点：Azure IoT Hub 节点详解
  • C51相关实验
  • docker 安装arm架构mysql8
  • Leetcode（双指针习题思路总结，持续更新。。。）
  • solr 远程命令执行 (CVE-2019-17558)
  • 用 Python 从零开始创建神经网络（十）：优化器（Optimizers）（持续更新中...）
  • 丹摩征文活动｜实现Llama3.1大模型的本地部署
  • WebGIS地图框架有哪些?