JavaScript 知识点(从基础到进阶)

2024-09-07 21:52

本文主要是介绍JavaScript 知识点(从基础到进阶),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

   🌏个人博客主页:心.c

前言: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

表示逻辑值,只有truefalse两个值

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)  //numberconsole.log('11' + 11) //stringconsole.log('111') //stringconsole.log(+'123') //numberconsole.log(+'123' + 132) //number
显示转换:
      let str = '123'let num = Number(str) //numberlet num1 = +str //number
      let num = 123let str = String(num) //stringlet 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

到这里就讲完了,感谢大家的观看!!!

这篇关于JavaScript 知识点(从基础到进阶)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1146268

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

基本知识点

1、c++的输入加上ios::sync_with_stdio(false);  等价于 c的输入,读取速度会加快(但是在字符串的题里面和容易出现问题) 2、lower_bound()和upper_bound() iterator lower_bound( const key_type &key ): 返回一个迭代器,指向键值>= key的第一个元素。 iterator upper_bou

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听