JavaScript的基础学习(一)

最新推荐文章于 2022-08-19 18:55:42 发布
最新推荐文章于 2022-08-19 18:55:42 发布
阅读量257 收藏
点赞数 2
文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45947655/article/details/109261323
版权

JavaScript

文章目录

1.初识JavaScript

1.1什么是JavaScript

JavaScript是一门世界上最流行的脚本语言

Java和JavaScript事实上并没有什么太大的联系。

1.2历史

10天被发布出来

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到es6版本

但是大部分浏览器还只能支持es5！

2.快速入门

2.1引入JavaScript

1.内部标签

<script>
    ......
</script>

2.外部引入：

和CSS的外部引入类似，JavaS.js是单独写JS的代码页

<script src="JS/JavaS.js"></script>
2.2基本语法入门

JavaScript的语法和Java大致相同，只是JavaScript没有那么严谨而已。

“var”用于定义变量，不同Java的是不管什么类型的变量在这里都不用区分，直接var定义。

alert是弹窗提示信息。

console.log是打印信息，但你需要在浏览器的控制台才能查看结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        var num = 1;
        var zc = "ad";
        alert(num);
        if (2>1){
            alert(zc);
        }
        var abc = "xu";
        console.log(abc);

    </script>
</head>
<body>

</body>
</html>

但JavaScript需要在浏览器中多多调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jTiHrZtF-1603527330842)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20201010161701506.png)]

2.3数据类型

数值，文本，图形，音频，视频…

变量

var a = '王者荣耀';

numbe

如上所述，JavaScript并没有那么严谨，整数和小数都是一样的。

123			//整数
123.1		//浮点数
1.123e3		//科学计数法
-99			//负数
NaN			//not a number
Infinity	//表示无限大

字符串

差不多的…

布尔值

true， false

逻辑运算

&&		两个都为真，结果为真

||		一个为真，结果为真

！		否定

比较运算符

=		赋值
==		等于（即使类型不同，但值相同则判断为true）
===		绝对等于（类型和值都需要一样，为true）

尽量使用===

另外：

​ NaN===NaN是false，它与所有的数值都不相等，包括自己；

​ 只能通过isNaN（NaN）来判断这个数是否为NaN

浮点数问题：

console.log((1/3)===(1-2/3));

这个也是false，尽量避免使用浮点数，有精度问题。

null和undefined

​ null空

​ undefined未定义

数组

Java中是一系列相同类型的对象，但JavaScript不是

var arr = [1,2,3,4,5,'hello',null,true];

new Array(1,2,15,'hello');

若取数组下标越界则会

undefined

对象

对象是大括号，数组是中括号

创建一个对象：

var person = {
    name:"xu",
    age:3,
    tags:['js','java','web','...']
}

属性之间用逗号隔开，最后一个不需要添加。

取值时，仍是在浏览器的控制台取值：

person.name 

>"xu" 

person.age 

>3 

person.tags 

>Array(4) [ "js", "java", "web", "..." ]
2.4严格检查格式

这里就简单介绍一下吧，关于变量的定义大致有这样三种方式：

var，let还有const；

var声明全局变量或函数级变量，其定义的变量是可以正常修改的，不初始化值的话，运行的时候会输出undefined。

let声明块级的变量，且不能重复声明变量。

const具有上述let的特点但不同的是const声明的变量必须赋值。

所以接下来就可能出现一些问题。由于var是全局变量，那么很有可能在一个网页中其他地方声明了和var声明的相同的变量，这时就会出现混乱。所以为了避免这种情况的发生，有这样的一种格式可以帮我们运行程序时检测一些不规范的地方。

"use strict";

当你输入该代码时，就会进入一个更为严谨的运行环境当中。它会建议你使用let去定义一些变量而不是var。

并且在使用该格式之前，你会发现单单的这样一句话居然也能成功的定义并赋值一个变量，且在控制台中正常输出。

i = 1;

这显然并不严谨，所以使用"use strict"格式就可以很好地避免这种情况的发生。

3.数据类型

3.1字符串

1.正常字符串可以用 单引号或者双引号 包裹打印出

2.转义字符可以打出特殊字符或其他作用

\''			打印出''	
\n			换行
\t			空格
\u4e2d		Unicode字符，这里会输出汉字“中”
\x41		Ascll字符，这里会输出“A”

3.多行字符串编写

var msg = `这个符号
可以多行
输入
且同样多行输出
`
console.log(msg);

这个``键，是在Tab键上面，Esc键下面的那个键。

4.模板字符串

let msg = '+额外输出内容';
let age = `3岁${msg}`;
console.log(age);

这里的“${}”符号可以使大括号里面的内容加到age里面，使其变成age的内容，和“+”差不多。但这里需要注意，必须要用``键来执行这个操作，否则不会成功。

5.输出字符串

输出字符串的长度：

var name = `student`;
console.log(name);
console.log(name.length);

输出字符串的第三位字符：

console.log(name[2]);

输出大写字符串（方法）：

console.log(name.toUpperCase())

输出小写字符串（方法）：

console.log(name.toLowerCase())

输出第一个出现的字符的下标：

console.log(name.indexOf('n'))

从第3个字符截取到第6个字符：

console.log(name.substring(2,5))
3.2数组

数组仍然是直接定义，且直接打印

var ayy = [1,2,3,4,5,6]
console.log(ayy)
或者ayy

打印长度

ayy.length

修改某元素的值

ayy[2] = 99

若定义数组之后，修改数组的大小

修改偏大时，多余的位置将被设置为未定义undefined

ayy.length=10

Array(10) [ 1, 2, 99, 4, 5, 6, <4 empty slots> ]

ayy[8]

undefined

修改偏小时，多余的元素将被删除

ayy.length=2
Array [ 1, 2 ]

此次是获取元素值为“2”的数组下标

ayy.indexOf(2)：
1

ayy.slice()，截取

ayy.slice(2) = [3,4,5,6]
ayy.slice(4) = [5,6]
ayy.slice(1,4) = [2,3,4]

slice(),当括号内只含单个数字x时，会将数组前x个元素舍掉，打印出余下的数组元素。

当括号内含两个数字时（x，y）时，会将前x个元素，y后面的（不包括y）元素舍掉，打印出余下的数组元素。

push（），pop（），unshift（），shift（）

ayy.push(`a`,`b`)在尾部添加某某元素
Array(8) [ 1, 2, 3, 4, 5, 6, "a", "b" ]
ayy.pop()在尾部删除一个元素
Array(7) [ 1, 2, 3, 4, 5, 6, "a"]
ayy.pop()
Array(6) [ 1, 2, 3, 4, 5, 6]

ayy.unshift(`a`,`b`)
Array(8) [ "a","b",1, 2, 3, 4, 5, 6]
ayy.shift()
Array(7) [ "b",1, 2, 3, 4, 5, 6]
ayy.shift()
Array(6) [ 1, 2, 3, 4, 5, 6]

sort（）排序和reverse（）颠倒

var arr = ["A","B","D","C"]
arr.sort()
Array(4) [ "A", "B", "C", "D" ]

arr.reverse()
Array(4) [ "D", "C", "B", "A" ]

这里需要注意的是：

sort（）是按照字符编码（ASCII）的顺序进行排序，并且为了实现这一点它还会把数组的元素都转换成字符串。谨慎使用。

reverse() 方法用于颠倒数组中元素的顺序。

concat（）和join（）

arr.concat(["A","AD"])
Array(6) [ "D", "C", "B", "A", "A", "AD" ]
arr
Array(4) [ "D", "C", "B", "A" ]

arr.join('~')
"D~C~B~A"
arr
Array(4) [ "D", "C", "B", "A" ]

concat（）方法用于连接两个或多个数组。但它只会返回一个新的数组，并不会改变原有的数组。

join（）指定你给出的字符，并用这个字符把数组内的元素连接起来，而非原来的逗号。只会返回一个新的字符串，并不会改变原有的数组。

多维数组：

arr = [[1,2,3],[4,5,6],[7,8,9]]
0: Array(3) [ 1, 2, 3 ]
1: Array(3) [ 4, 5, 6 ]
2: Array(3) [ 7, 8, 9 ]
arr[2][0] //查找第3列第一个元素
7
3.3对象

JavaScript创建对象。

var 对象名 ={

​ 属性名：属性值，

​ 属性名：属性值，

​ 属性名：属性值

}

多个属性之间用逗号隔开，最后一个属性不加逗号！

var person = {
    name: "Xu AN Jie",
    age: 3,
    email: "24736743@qq.com",
    score: 0
}

1.对象赋值

person.name = "Xu"
"Xu"

2.可以使用一个不存在的对象属性，不会报错！

person.lala
undefined

3.动态的增删属性。

可以随时增加或减少对象的属性：

delete是删除属性：

delete person.score
true
person
Object { name: "Xu AN Jie", age: 3, email: "24736743@qq.com" }

可以直接增加属性：

person.baba = "NA"
"NA"
person
Object { name: "Xu", age: 3, email: "24736743@qq.com", baba: "NA" }

4.判断属性值是否存在于这个对象中： xxx in xxx

'name' in person
true
'toString' in person
true

5.判断对象是否包含这个自定义属性而不是原型链上的属性：

person.hasOwnProperty('name')
true
person.hasOwnProperty('toString')
false

”hasOwnProperty“（）和 “…in…”的区别在于前者只会查找你自己定义的属性，而不会查找自带的属性。

3.4流程控制

if判断

var age = 3;

if (age == 3){
    console.log("Yes!");
}
if (age < 3){
    console.log("No!");
}
if (age > 3){
    console.log("Too Big!");
}

while循环

while(age<100){
    age = age + 1;
    console.log(age);
}

do {
            age++;
            console.log(age);
        }while (age<10)

for循环

for (let i = 0; i < 10; i++) {
    console.log(i);
}

forEach循环

forEach()函数从头到尾把数组遍历一遍。

age.forEach(function (o,p,q){
                console.log(o,p,q);
         })
1 0 Array(8) [ 1, 2, 3, 4, 5, 6, 7, 8 ]

2 1 Array(8) [ 1, 2, 3, 4, 5, 6, 7, 8 ]

3 2 Array(8) [ 1, 2, 3, 4, 5, 6, 7, 8 ]

4 3 Array(8) [ 1, 2, 3, 4, 5, 6, 7, 8 ]

5 4 Array(8) [ 1, 2, 3, 4, 5, 6, 7, 8 ]

6 5 Array(8) [ 1, 2, 3, 4, 5, 6, 7, 8 ]

7 6 Array(8) [ 1, 2, 3, 4, 5, 6, 7, 8 ]

8 7 Array(8) [ 1, 2, 3, 4, 5, 6, 7, 8 ]
//可以看出，function (o,p,q)中的第一个参数o是数组元素的值，第二个参数p是数组下标，第三个参数q就是整个数组本身。


age.forEach(function (p){
                console.log(p);
         })
1 
2 
3 
4 
5 
6 
7 
8
//假如function（）中你只填写一个参数的话，那么这个参数代表的就是数组元素的值。

for…in循环

for (变量 in 数组)
{
    在此执行代码
}

var abc = ["A","B","C","D","E","F"]
for(var num in abc){
  console.log(num)
}
0 
1
2 
3 
4 
5 
//这表示，for（变量 in 对象）的变量接收的是数组的索引（下标）
3.5Map和Set

Map：

var map = new Map([[`tom`,100],[`jack`,99],[`Rose`,80]]);
//定义Map
var name = map.get(`tom`);
console.log(name);
//获取元素并打印
map.set(`AnJie`,99);
//增加元素
map.delete(`tom`);
//删除元素元素

Set：不会显示重复的元素

var set = new Set([3,1,2,4,2,1,2,1,1,1]);
//定义Set
set.add(10);
//增加元素
set.delete(3);
//删除元素
console.log(set.has(1));
//判断set是否含有某元素
3.6iterator

…of…遍历所有元素的值

//数组遍历
var arr = [3,4,5]
for (let x of arr){
    console.log(x)
}

//数组遍历
var map = new Map([[`Xu`,99],[`An`,98],[`Jie`,100]]);
for (let x of map){
    console.log(x)
}

//数组遍历
var set = new Set([99,98,97,77])
for (let x of set){
    console.log(x)
}

4.函数

4.1定义函数

定义一个绝对值函数，方法1：

function abs(x){
            if (x>=0){
                return x;
            }else {
                return -x;
            }
        }

方法2：

var abs = function(x){
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

abs(10)=10
abs(-10)=10

arguments会将实际输入所有的参数接收为数组。

这里你只定义了一个，但arguments可以将你输入的参数全部接收

var abs = function(x){
    console.log("x->"+x);
    for (var i = 0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
}

abs(1,2,3,4)
x->1 
1 
2 
3 
4

rest和arguments大致相同，可以把rest理解为arguments的升级版

var abs = function(x,y,...rest){
    console.log(`x->`+x);
    console.log(`y->`+y);
    console.log(rest);
}

abs(1,2,4,456,456,456)
x->1 
y->2 
Array(4) [ 4, 456, 456, 456 ]

这次先到这里…

weixin_45947655
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习基础学习心得
10-24
JavaScript基础深度原理学习心得，从中可以领略到JavaScript比较有深度的知识理解 JavaScript基础深度原理学习心得，从中可以领略到JavaScript比较有深度的知识理解
Javascript 基础知识学习
岳来的博客
11-23 5904
javascript 基础学习
JavaScript学习（基础）
m0_49034593的博客
08-19 1228
js基础
javaScript学习笔记（一）js基础
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 73万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 16万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
javascript基础学习代码总结
01-18
还有写对于javascript对应的知识点案例。每个文件里都会有很多的注释信息，方面阅读和学习。 ...2.每个模块代码都有注释可用来...4.适合于没有javascript基础或javascript基础不扎实想要学习js知识点的人群参考和学习。
Javascript 入门基础学习
10-29
习.net已经近2年了，最近学习Ajax时发现自己的很多技术功底很是欠缺，比如JavaScript。今后我会将我正在学习的也写成笔记，有时间的话将以前的东西整理整理也传上来。
JavaScript基础学习笔记
10-25
黑马视频记录下来的学习笔记
javascript基础语法学习笔记
10-23
主要为大家分享了javascript基础语法学习笔记，帮助大家夯实javascript基础知识，感兴趣的小伙伴们可以参考一下
基于matlab实现的数值计算及金融运用 ,金融时间序列数据分析 ,MATLAB和其他软件数据连接.rar
最新发布
05-02
基于matlab实现的数值计算及金融运用 ,金融时间序列数据分析 ,MATLAB和其他软件数据连接.rar
使用SegNet进行语义分割-python源码.zip
05-02
使用SegNet进行语义分割-python源码.zip
JSP企业电子投票系统 2.zip
05-02
JSP企业电子投票系统 2
EmotionVGGnet情绪识别-python源码.zip
05-02
EmotionVGGnet情绪识别-python源码.zip
基于matlab实现的遗传算法、模拟退火算法、禁忌搜索算法求解VRP问题的matlab程序.rar
05-02
基于matlab实现的遗传算法、模拟退火算法、禁忌搜索算法求解VRP问题的matlab程序.rar
大数据Python科学计算库-Numpy实战:numpy代码
05-02
大数据Python科学计算库-Numpy实战:numpy代码 练习题.ipynb 9-读写.ipynb 8-随机模块.ipynb 7-运算.ipynb 6-数组 生成.ipynb 5-数组形状.ipynb 4-排序.ipynb 3-数值计算. ipynb 2-array结构.ipynb 1-Numpy概述.ipynb 1- Numpy概述.ipynb 2-array结构.ipynb 3-数值计算.ipy nb 4-排序.ipynb 5-数组形状.ipynb 6-数组生成.ipynb 7-运算.ipynb 8-随机模块.ipynb 9-读写.ipynb 练习题.i pynb
基于统计分析的地面搜索最短耗时的计算方案设计.doc
05-02
本文档是课题研究的研究报告内含调研以及源码设计以及结果分析
基于BlazePose+KNN实现人体姿态健身计数算法python源码+项目说明.zip
05-02
基于BlazePose+KNN实现人体姿态健身计数算法python源码+项目说明.zip 项目描述： 实现基于mediapipe的人体姿态识别的AI健身自动计数功能 支持健身动作：1、俯卧撑 2、深蹲 3、引体向上 4、仰卧起坐 创建时间：2022.11.28 完成时间：2022.11.28 如何训练新的健身动作模型？ 1、修改mian函数 2、首先在fitness_pose_images_in的文件夹下存储对应健身的初态动作与末态动作图像 3、修改videoprocess.py文件中的代码，flag模式选择部分，注意class_name必须与fitness_pose_images_in文件夹下的文件名字保持一致 4、修改videoprocess.py文件中的代码，flag模式选择部分，注意class_name必须与fitness_pose_images_in文件夹下的文件名字保持一致 5、修改trainingsetprocess.py文件中的代码，flag模式选择部分，注意 文件名 必须与fitness_pose_images_in文件夹下的文件名字保持一
dijkstra 算法说明和基础应用介绍.docx
05-02
Dijkstra 算法，又称为迪杰斯特拉算法，是一种用于解决单源最短 路径问题的经典算法。它的核心思想是通过逐步确定起点到其他顶 点的最短路径来求解。该算法被广泛应用于图论和网络路由等领域。 Dijkstra 算法的基本步骤如下： 1. 创建一个距离数组 dist[] ，用于存储起点到各个顶点的最短距离。 将起点的最短距离初始化为 0，其他顶点的最短距离初始化为无穷 大。 2. 创建一个集合 S ，用于存储已经找到最短路径的顶点。 3. 重复以下步骤，直到集合 S 包含所有顶点： a. 从距离数组 dist[]中选择最小值对应的顶点 v，将 v 加入集合 S。 b. 更新距离数组 dist[] ： - 对于每个与 v 相邻的顶点 u，如果通过顶点 v 可以获得更短的 路径，则更新 dist[u]为更短的距离。 c. 重复步骤 a 和 b，直到集合 S 包含所有顶点。 4. 最终，距离数组 dist[]中存储的就是起点到各个顶点的最短路径。 下面通过一个简单的例子来说明 Dijkstra 算法的具体过程。假设有 一个带权有向图，其中的顶点和边分别如下所示：
学习javascript
05-30
1. 学习基础语法：学习 JavaScript 的基础语法，例如变量、函数、循环、条件语句等。 2. 掌握 DOM 操作：学习如何使用 JavaScript 操作 HTML 页面上的元素，例如创建、修改、删除元素等。 3. 学习事件处理：学习...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值