首页 > 基础资料 博客日记

JavaScript 知识点（从基础到进阶）

2024-09-10 08:00:07基础资料围观129次

文章JavaScript 知识点（从基础到进阶）分享给大家，欢迎收藏Java资料网，专注分享技术知识

   🌏个人博客主页：心.c

​

前言：JavaScript已经学完了，和大家分享一下我的笔记，希望大家可以有所收获，花不多说，开干！！！

🔥🔥🔥专题文章：JavaScript

😽感谢大家的点赞👍收藏⭐️评论✍您的一键三连是我更新的动力 💓 

目录

js的三种书写方式：

行内：

内部：

外部：

js的输入输出：

输入语法：

输入语法：

注释：

变量：

数组：

定义数组：

数组的增删改查：

数据类型：

基本数据类型：

引用数据类型：

 数据转换：

隐式转换：

显示转换：

运算符：

算数运算符：

比较运算符：

逻辑运算符： 

一元运算符：

函数：

函数声明：

函数表达式：

立即执行表达式：

箭头函数：

对象：

对象的创建：

对象增删改查： 

js的三种书写方式：

行内：
<body>
  <button onclick="alert('行内')"></button>
</body>
内部：
<body>
  <script>
    alert('内部')
  </script>
</body>
外部：

外部js标签中间不能书写东西

<body>
  <!-- 引用外部js -->
  <script src="./01.js.html"></script>
</body>

js的输入输出：

输入语法：

页面打印：

document.write('页面打印')

​

控制台打印：

console.log('控制台打印')

​

弹出界面：

  console.log('控制台打印')

 ​

输入语法：
 prompt('请输入信息')

​

注释：

单行注释：

//我是单行注释

多行注释：

/*我是多行注释*/

变量：

变量是用来储存数据的容器，简单理解就是一个盒子

    //声明并赋值一个年龄变量
    let age=18
    //输出
    alert(age)
    //声明一个年龄变量
    let age
    //赋值
    age = 18
    //输出
    alert(age)

数组：

定义数组：
let arr = [1, 2, 3, 4, 5];
console.log(arr); // 输出 [1, 2, 3, 4, 5]
数组的增删改查：

增加元素：

push ( )  向数组的末尾添加一个或多个元素

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出 [1, 2, 3, 4]

unshift ( ) 向数组的开头添加一个或多个元素

const arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // 输出 [0, 1, 2, 3]

splice ( ) 可以在任意位置插入元素，并且可以同时删除元素。

const arr = [1, 2, 3];
arr.splice(1, 0, 1.5); // 在索引1的位置插入1.5
console.log(arr); // 输出 [1, 1.5, 2, 3]

删除元素：

pop()从数组的末尾移除一个元素，并返回该元素

const arr = [1, 2, 3];
const removed = arr.pop();
console.log(arr); // 输出 [1, 2]
console.log(removed); // 输出 3

shift()从数组的开头移除一个元素，并返回该元素。

const arr = [1, 2, 3];
const removed = arr.shift();
console.log(arr); // 输出 [2, 3]
console.log(removed); // 输出 1
splice()可以从数组中删除元素，并且可以同时插入元素。 
const arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); // 从索引1开始删除2个元素
console.log(arr); // 输出 [1, 4, 5]

修改元素：

可以直接通过索引访问和修改数组中的元素

const arr = [1, 2, 3];
arr[1] = 2.5;
console.log(arr); // 输出 [1, 2.5, 3]

查询元素：

返回数组中某个元素第一次出现的位置索引，如果不存在则返回-1

const arr = [1, 2, 3, 2, 4];
const index = arr.indexOf(2);
console.log(index); // 输出 1

数据类型：

基本数据类型：

基本数据类型是值类型，它们直接存储在栈内存中，而不是通过引用访问。当赋值给另一个变量时，复制的是具体的值，而不是引用。

1.number

表示数值，包括整数和浮点数。

let num = 42;

2.string

表示文本字符串。

let str = "Hello, world!";

3.boolean

表示逻辑值，只有true和false两个值

let flag = true;

4.undifined

表示尚未赋值的变量或函数返回的未定义值。

let x;
console.log(x); // 输出 undefined

5.null

表示空值或空对象指针。

let nothing = null;
引用数据类型：

1.对象

对象是键值对的集合，是最常用的复合数据类型之一。对象可以包含属性（键值对）和方法（函数）。

let person = {
  name: "Alice",
  age: 30,
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

2.数组

数组是一种特殊的对象，用于存储有序的元素列表。数组的元素可以是任何类型的数据。

let numbers = [1, 2, 3, 4, 5];
let mixed = ["apple", 42, true, {name: "Alice"}];

console.log(numbers[0]); // 输出 1
console.log(mixed[3].name); // 输出 "Alice"

3.函数

函数也是一种对象，可以作为值进行传递，并且可以作为对象的属性或方法。

function greet(name) {
  console.log("Hello, " + name + "!");
}

 数据转换：

隐式转换：
    console.log(11 + 11)  //number
    console.log('11' + 11) //string
    console.log('111') //string
    console.log(+'123') //number
    console.log(+'123' + 132) //number
显示转换：
      let str = '123'
      let num = Number(str) //number
      let num1 = +str //number
      let num = 123
      let str = String(num) //string
      let str1 = num.toStrign() //string

运算符：

算数运算符：
运算符描述示例
+加法5 + 3
-减法5 - 3
*乘法5 * 3
/除法5 / 3
%取模（求余数）5 % 3
**幂运算（次方）2 ** 3
比较运算符：
运算符描述示例
==等于（值相等即可）5 == "5"
===严格等于（值和类型都相等）5 === "5"
!=不等于5 != 3
!==严格不等于5 !== "5"
<小于5 < 3
>大于5 > 3
<=小于等于5 <= 5
>=大于等于5 >= 5
逻辑运算符： 
运算符描述示例
&&逻辑与（AND）true && false
||逻辑或（OR)true && false
!逻辑非（NOT）!true
一元运算符：
++前置/后置自增++x 或 x++
--前置/后置自减--x 或 x--
+正号（强制转换为数字）+5
-负号（取反）-5
!逻辑非!true
typeof获取变量的类型typeof x
delete删除对象的属性delete obj.prop

函数：

函数声明：
function greet(name) {
    console.log("Hello, " + name + "!");
}
函数表达式：
const greet = function(name) {
    console.log("Hello, " + name + "!");
};
立即执行表达式：
(function(name) {
    console.log("Hello, " + name + "!");
})("Charlie");

箭头函数：
const greet = (name) => {
    console.log("Hello, " + name + "!");
};

对象：

对象的创建：

使用字面量方式创建：

    //定义对象
    let obj = {
      name: '阿伟',
      age: 12,
      phone: 12323232323
    }
    console.log(obj)

使用构造函数创建

const person = new Object();
2person.name = "Bob";
3person.age = 25;
对象增删改查： 

增加属性：

使用标点：

const person = {};
person.name = "Alice";
person.age = 30;

使用括号：

const person = {};
person["name"] = "Alice";
person["age"] = 30;

修改属性：

const person = {
    name: "Alice",
    age: 30
};

person.age = 31;

删除属性：

const person = {
    name: "Alice",
    age: 30
};

delete person.age;

查找对象属性：

const person = {
    name: "Alice",
    age: 30
};

const keys = Object.keys(person);
console.log(keys); // 输出 ["name", "age"]
const person = {
    name: "Alice",
    age: 30
};

const values = Object.values(person);
console.log(values); // 输出 ["Alice", 30]
const person = {
    name: "Alice",
    age: 30
};

const entries = Object.entries(person);
console.log(entries); // 输出 [["name", "Alice"], ["age", 30]]

遍历对象： 

const person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

for (const key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(`${key}: ${person[key]}`);
    }
}
// 输出
// name: Alice
// age: 30
// city: New York

到这里就讲完了，感谢大家的观看！！！


文章来源:https://blog.csdn.net/2301_81253185/article/details/141997840
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：Java 项目现在基于注解开发
下一篇：cross-plateform 跨平台应用程序-05-Flutter 介绍

相关文章

最新发布

点击排行

本站推荐

标签云