JavaScript基础

前言
一、什么是JavaScript
- 1.JavaScript概述
- 2.javaScript有什么作用
二、JavaScript快速入门
- 1.引入JavaScript
- 2.基本语法入门
- 3.数据类型与运算
- 4.严格检查格式
三、数据类型
- 1.字符串
- 2.数组
- 3. 对象
- 4.流程控制
- 5.Map 和 Set
- 6.iterator
四、函数
- 1.定义函数
- 2. 变量的作用域
五、内部对象
- 1.Date
- 2.JSON
- 3.Ajax
后记

前言

本文为JavaScript基础知识与语法介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~

一、什么是JavaScript

1.JavaScript概述

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言
JavaScript是世界上最流行的脚本语言
外观看起来像Java，因此取名为JavaScript
JavaScript兼容于ECMA标准，因此也称为ECMAScript

2.javaScript有什么作用

嵌入HTML中，与Css一样
对浏览器事件作出响应
操作HTML元素及节点
可以动态操作CSS样式
在数据被提交到服务器之前验证数据

二、JavaScript快速入门

1.引入JavaScript

内部标签

<script>window.alert("你好，王先生！");
</script>

外部引入

<script src="js/fistjs.js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--script标签内写JavaScript代码，script标签必须成对出现，不用显式定义type，默认就是JavaScript--><script type="text/javascript"></script><!--第一种方式，内部引用
<script>window.alert("你好，王先生！");</script>--><!--第二种方式，外部引用--><script src="js/fistjs.js"></script>
</head>
<body>
</body>
</html>

2.基本语法入门

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var score = 71;if (score>=0&&score<=100){if (score>90&&score<100){alert("优秀");}else if (score>80&&score<90) {alert("良好");}else {alert("及格");}}
</script>
</body>
</html>

3.数据类型与运算

javascript中的数据包含：数值，文本，图形，音频，视频….

变量

var a = 1;

number

js不区分小数和整数，Number

123//整数
123.1//浮点数
-99//负数
NaN//not a number
Infinity//表示无限大

字符串

‘abc’ 、“abc”

布尔值

true、false

逻辑运算符

&&  //两个都为真，结果为真
||    //一个为真，结果为真
!    //真即假，假即真

比较运算符

=    //赋值预算法
==    //等于（类型不一致，值一样，也会判断为true  即判断1=='1'）
===    //    绝对等于（类型一样，值一样，结果为true），这是一个JS的缺陷，要坚持用===进行比较

注意：

NaN，与所有的数值都不相等，包括自己
只能通过isNaN()来判断这个数是不是NaN

浮点数问题

console.log(1/3)===(1-2/3) //结果为false
// 尽量避免使用浮点数进行运算，存在精度问题
Math.abs(1/3-(1-2/3))<0.00000001 //结果为true

null和undifined

null：空
undefined：未定义

数组

Java的数组必须是相同类型的对象，JS中不需要这样！

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];
//取数组下标：如果越界了，就会报undefined

对象

对象是大括号，数组是中括号
每一个属性之间使用逗号隔开，最后一个不需要加逗号

var person = {name: "王先生",age: 18,tags: ['高大','帅气', '才华横溢', '大眼睛']
}

取对象的值

person.name
"王先生"
person.tags[0]
"高大"

4.严格检查格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--
前提：Idea，设置支持ES6语法
'use strict';严格检查模式，预防JavaScript随意性导致产生的一些问题
必须写在script标签内的第一行！
局部变量建议都使用let去定义
-->
<script>'use strict';let i = 1;
</script>
</body>
</html>

三、数据类型

1.字符串

正常字符串我们使用单引号或者双引号包裹
注意转义字符 \

\'
\n
\t
\u4e2d   \u#### Unicode 字符
\x41       Ascll字符

多行字符串编写

//tab 和ESC键中间的字符`` 包裹
var msg = `helloworld你好`

模板字符串

let name = '王先生';
let msg = `你好呀，${name}`;

字符串长度

str.length

字符串不可变

let student = "student"; student[1] = 1;
>1
console.log(student)
>student

大小写转换

let student = "student";
console.log(student.toUpperCase());
console.log(student.toLowerCase());

元素的索引

sutdent.indexOf(‘t’);

substring

let student = "student";
//左闭右开[0,3)，从第一个字符串取到第二个 stu;
console.log(student.substring(0,3));

2.数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6]
//通过下标取值和赋值
arr[0]
arr[0] = 1;

长度

arr.length
// 注意：假如给arr.length赋值，数组的大小就会发生变化，如果赋值过小，元素就会丢失

indexOf：通过元素获得下标索引

arr.indexOf(2);
>1
// 注意：字符串的”1”和数字的1是不同的

slice() ：截取Array的一部分，返回一个新的数组，类似于String中的substring

arr.slice(2); //[3, 4, 5]  类似于String中的substring
arr.slice(2,4); //[3, 4]

push() ， pop() ：从数组尾部进行添加和删除元素

//push(); 压入到尾部
let arr = [1,2,3,4,5,"6","a"];
arr.push("b");
[1, 2, 3, 4, 5, "6", "a", "b"];
//pop();删除尾部
arr.pop();
[1, 2, 3, 4, 5, "6", "a"];

unshift() ，shift() ：从数组头部进行添加和删除元素

//unshift() 头部增加
let arr = [1, 2, 3, 4, 5];
arr.unshift(0);
[0, 1, 2, 3, 4, 5];
//shift(),删除头部
arr.shift();
[1, 2, 3, 4, 5];

sort()：排序

let arr = [6, 2, 8, 4, 5];
arr.sort();
[2, 4, 5, 6, 8];

reverse()：元素反转

let arr = [2, 4, 5, 6, 8];
arr.reverse();
[8, 6, 5, 4, 2];

concat()：拼接

let arr = [8, 6, 5, 4, 2];
arr.concat(['a','b','c']);
//返回一个新的数组 [8, 6, 5, 4, 2, "a", "b", "c"];
//并未改变原来的数组arr
[8, 6, 5, 4, 2];

join：连接符

// 打印拼接数组，使用特定的字符串连接
let arr = [8, 6, 5, 4, 2];
arr.join("-");
"8-6-5-4-2";

多维数组

let arr = [[1,2], [3,4], ['a','b']];
arr[1][1];
4;

3. 对象

对象定义

// 若干个键值对
// js中的对象， {…..}表示一个对象，键值对描述属性xx : xx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
// JavaScript 中的所有键都是字符串，值是任意对象！
/*var 对象名 = {属性名: 属性值,属性名: 属性值,属性名: 属性值
}*/
var person = {name : "王先生",age : 16,email : "summer@qq.com",score : 100
}

对象赋值

var person = {name : "",age : 16,email : "summer@qq.com",score : 100
}person.name="王先生";
>"王先生"
person.name;
>"王先生"

使用一个不存在的对象属性，不会报错！但会提示undefined

var person = {name : "",age : 16,email : "summer@qq.com",score : 100
}person.dog;
undefined

动态的删减属性，通过delete删除对象的属性

var person = {name : "",age : 16,email : "summer@qq.com",score : 100
}
delete person.score;
person
>{name: "王先生", age: 16, email: "summer@qq.com"}

动态的添加，直接给新的属性添加值即可

var person = {name : "",age : 16,email : "summer@qq.com",score : 100
}
person.dog = "tom";
person.tom;
>tom

判断属性值是否在这个对象中！（包含继承的属性） xx in xx

var person = {name : "王先生",age : 16,email : "summer@qq.com",score : 100
};
"age" in person;
>true;
//继承
'toString' in person
>true;

判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

var person = {name : "王先生",age : 18,email : "summer@qq.com",score : 100
};
person.hasOwnProperty("toString");
>false
person.hasOwnProperty("age");
>true

4.流程控制

if判断

var age = 3;
if(age > 3){alert("哈哈");
}else if(age < 5){alert("kuwa~");
}else{alert("heihei");
}

while循环，注意避免程序死循环

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

for循环

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

forEach循环

var age = [12,3,4,22,23,55];
//传一个函数
age.forEach(function (value,index) {console.log(value);console.log(index);
})

fo…in

//for(var index in object)
var age = [12,3,4,22,23,55];
for (var num in age){console.log(age[num]);
}

5.Map 和 Set

var map = new Map([['tom',100],['jack',90],['tim',80]]);
var name = map.get('tom');//通过key获取value
map.delete('tom');//删除元素
map.set('kate',70);

Set：无序不重复的集合

var set = new Set([3,2,1]);
set.add(5);//增加元素
set.delete(3);//删除元素
set.has(1);//判断是否包含元素
set.size;//长度

6.iterator

遍历数组

//通过for of遍历值 / for in 遍历下标
var array = [1,2,3];
for (let x of array){console.log(x);
}

遍历map

var map = new Map([['tom',100],['jack',90],['tim',80]]);
for (let x of map){console.log(x);
}

遍历set

var set = new Set([3,2,1]);
for (var x of set){console.log(x);
}

四、函数

1.定义函数

定义函数的方式

// 定义方式一
function abs(x){if(x >= 0){return x;}else{return -x;}
}
// 一旦执行到return 代表函数结束，返回结果！
// 如果没有执行return ， 函数执行完也会返回结果，结果就是undefined// 定义方式二
var abs = function(x){if(x >= 0){return x;}else{return -x;}
}
// function(x){….} 这是一个匿名函数，但是可以把结果赋值给abs，通过abs可以调用函数！
// 方式一和方式二等价！

调用函数

abs(10)   //10
abs(-10)  //10
// 参数问题：JavaScript 可以传任意多个参数，也可以不传// 参数传多个的问题
function abs (x){if(typeof x!== "number"){throw "Not A Number";}if(x >= 0){return x;}else{return -x;}
}

arguments

// arguments 是一个JS免费赠送的关键字
// 代表传递进来的所有参数，是一个数组！
function abs(x){for(let i = 0;i < arguments.length;i++){console.log(arguments[i]);}if(x >= 0){return x;}else{return -x;}
}
// arguments 包含所有的参数，想使用多余的参数操作，需要排除已有参数

rest

// 获取除了已定义的参数之外所有的参数 …
function abs (x,y...rest){console.log(rest);
}

2. 变量的作用域

作用域

// 在JavaScript中， var 定义的变量实际上有作用域的
// 若设在函数体中声明，则在函数体外不可以使用
function abs(x){var a = 1;
}
a = a + 2;//Uncaught ReferenceError: a is not defined// 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function abs(){var x = 1;x = x +1;
}
function ab(){var x ="a";x = x + 1;
}// 内部函数可以访问外部函数的成员，反之则不行
function abs(x) {var a = 1;function f(a) {var b =a+1;}var c = b+1;//Uncaught ReferenceError: b is not defined
}// 假设，内部函数变量和外部函数的变量重名
function abs(x){var a = 1;function ab(y){var a ="A";console.log("内部"+a);}console.log("外部"+a);//输出外部1
}

全局函数

//全局变量
var a =1；
function f(){console.log(a);
}
f();
console.log(a);

全局对象 window

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有函数作用范围内找到，就会向外查找，如果全局作用域都没有找到，就报错

规范

// 由于我们所有的全局变量都会绑定到我们的window 上，如果不同的js文件，使用了相同的全局变量，冲突~> 如何减少冲突//唯一全局变量
var xxlApp={};
//定义全局变量
xxlApp.name = "王小姐";
xxlApp.age = function (a,b){return a + b;
}// let关键字，解决局部作用域冲突问题
function ab(){for(let i = 0;i<100;i++){console.log(i);}console.log(i);//报错
}// 怎么定义常量：ES5规定只有用全部大写字母命名的变量就是常量，建议不要修改这样的值
var PI = 3.14
console.log(PI);
PI = 123;//可以修改
console.log(PI);
//在ES6引入了常量关键字 const
const PI = 3.14; //只读变量
PI = 123; //报错 Attempt to assign to const or readonly variable
console.log(PI);

五、内部对象

1.Date

let date= new Date();
console.log(date);//Sun Dec 26 2021 22:12:50 GMT+0800 (中国标准时间)
//获取年
date.getFullYear();
//获取月(从0开始)
date.getMonth();
//获取日
date.getDate();
//获取时
date.getHours();
//获取分
date.getMinutes();
//获取秒
date.getSeconds();
//获取毫秒
date.getMilliseconds();
//getDay():获取星期几（从0开始）
//getTime():获取1970年1月1日到当前时间的毫秒数

转换

data.toLocaleDateString();//'2021/12/26'
data.toJSON();//'2021-12-26T14:12:50.650Z'

2.JSON

早期，所有的数据传输习惯都使用XML文件！
JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript 中一切皆为对象，任何js支持的类型都可以用JSON来表示。
格式：对象都用{}，数组都用[]，所有的键值对都用key:value。

JSON字符串和JSON对象的转换

var user = {name: "张三",tags: ['学习','吃饭', '打豆豆']
}
//JSON对象转换字符串
JSON.stringify(user);//'{"name":"张三","tags":["学习","吃饭","打豆豆"]}'
//字符串转JSON对象
JSON.parse(jsonUser);//{name: '张三', tags: Array(3)}

JSON和JS对象的区别

var obj = {name:"王小姐",age:16};
var json = '{"name":"王小姐","age":"16"}';

3.Ajax

原生的js写法 xhr 异步请求
jQuery 封装好的方法 $(“#name”).ajax(“”)
axios 请求

后记

本文下接：【JavaScript详解】一文掌握JavaScript基础知识（下）
Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~

【JavaScript详解】一文掌握JavaScript基础知识（上）相关推荐

详解PCB线路板覆铜基础知识
所谓覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.覆铜又分为大面积覆铜和网格覆铜.下面,就详解PCB线路板覆铜基础知识: 一.覆铜需要注意的问题: 1.不同地的单点连 ...
超详细图文详解，灾备通用基础知识以及华为的灾备产品介绍
前言本文主要介绍容灾相关基础知识,包括容灾的定义.作用,并描述容灾的衡量标准,以及实现容灾需要用到的相关产品.主要介绍华为灾备产品BCManager,并详细讲解BCManager实现灾备时的相关知识 ...
c++ 多核cpu序列号_详解CPU几个重点基础知识
作者 | 骏马金龙责编 | 阿秃关于CPU和程序的执行 1.程序的运行过程,实际上是程序涉及到的.未涉及到的一大堆的指令的执行过程. 当程序要执行的部分被装载到内存后,CPU要从内存中取出指令,然 ...
详解CPU几个重点基础知识
戳蓝字"CSDN云计算"关注我们哦! 作者 | 骏马金龙责编 | 阿秃关于CPU和程序的执行 1.程序的运行过程,实际上是程序涉及到的.未涉及到的一大堆的指令的执行过程. 当程 ...
JVM垃圾回收面试题详解，java开发语言基础知识
所以这种算法已经没人用了. 2.2 可达性分析法 2.2.1 什么是可达性可达性分析法就是目前的主流算法,也是java正在使用的算法. 它的做法是,通过一系列被称为"GC Roots&qu ...
Javascript详解
Javascript详解案例一:使用JS完成注册页面的校验案例介绍用户在提交表单是,需要对用户填写的数据进行校验.因为用户如果输入非法内容,则会导致服务器的压力过大,因此,一般提供前端校验和后 ...
JavaScript详解一
问题?JavaScript详解 1.在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域是局部的). 您可以在不同的函数中使用名称相同的局 ...
flex+php ria应用开发实战详解光盘,《Flex+PHPRIA应用开发实战详解-梁文新版》学习日记2...
这本书真是折磨啊,今天看到了XML解析部分,文章在介绍函数及其参数时很是仔细,但是这本没有把源码最终写清楚,总是少一部分,xml和php对大小写不是很敏感,均能读出来,今天也遇到一个乱码问题,希望这方 ...
flex+php ria应用开发实战详解,《Flex+PHP RIA应用开发实战详解-梁文新版》学习日记2...
这本书真是折磨啊,今天看到了XML解析部分,文章在介绍函数及其参数时很是仔细,但是这本没有把源码最终写清楚,总是少一部分,xml和php对大小写不是很敏感,均能读出来,今天也遇到一个乱码问题,希望这方 ...

【JavaScript详解】一文掌握JavaScript基础知识（上）