文章目录
JavaScript
1、什么是JavaScript
1.1、概述
JavaScript是一门世界上最流行的脚本语言
java、JavaScript
一个合格的后端人员，必须要精通JavaScript
1.2、历史
https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript 它可以理解为是JavaScript的一个标准
最新版本已经到es6版本
但是大部分浏览器只停留在支持es5代码上！
开发环境— 线上环境，版本不一致
迭代了这么多版本后JavaScript的核心没有变
语言的核心：关键字、变量、流程控制、对象、数组、结构
2、快速入门
2.1、引入JavaScript
1、内部标签
<script>
//
</script>
2、外部引入
abc.js
//...
test.html
<script src="abc.js"></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- script标签内，写JavaScript代码-->
<!-- <script>
<!– 弹窗–>
alert('hello,world');
</script>-->
<!-- 外部引入-->
<!--注意：script标签必须成对出现-->
<script src="js/js.js"></script>
<!--不用显示定义type，也默认就是JavaScript-->
<script type="text/javascript">
</script>
</head>
<body>
<!--body里面也可以存放JavaScript代码-->
</body>
</html>
alert('world，hello');
2.2、基本语法入门
<!--JavaScript严格区分大小写！-->
<script>
// 1.定义变量 变量类型 变量名 = 变量值；
var score = 70; //分数
// alert (num)
// 2.条件控制
if(score>60&&score<70){
alert("60~70")
}else if(score>70&&score<90){
alert("70~90")
}else {
alert("other") //其他
}
// console.log(score) 在浏览器的控制台打印变量！ 相当于java中 System.out.println();
// console :控制台
// Sources :当前的源码目录
/*
* 多行注释
* */
</script>
浏览器必备调试须知 审查元素，快捷键F12
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xh9Y0Ii9-1622809655617)(JavaScript.assets/%E5%AE%A1%E6%9F%A5%E5%85%83%E7%B4%A0.png)]](https://i-blog.csdnimg.cn/blog_migrate/cec7e33ca8b8d0e19d54e8d7cc044ef3.png)
2.3、数据类型
数值，文本，图形，音频，视频……
变量
// 不能以数字开头
var a1 = "123";
number
JavaScript不区分小数和整数，Number
123 // 整数123
123.1 // 浮点数123.1
1.23e2 // 科学计数法
-009 // 负数
NaN // not a numner 不是一个数字
Infinity // 表示无限大
字符串
‘abc’ “abc”
布尔值
true ， false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真
比较运算符 ！！
= 赋值
== 等于（类型不一样，值不一样，也会判断为true）
=== 绝对等于(类型一样，值一样，结果为true，否则为false)
这是一个JavaScript的缺陷，坚持不要使用== 比较
须知
- NaN===NaN , 这个与所有的数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题：
// 在浏览器的控制台打印变量！
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算，存在精度问题！
判断这个值是否相等
console.log(Math.abs(1/3-(1-2/3))<0.000000001);
null 和 undefined
- null 空
- undefined 未定义
数组
一系列相同类型的对象~
java的数组必须是相同类型的对象~ ，JS中不需要这样！
//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,23,4,4,123,1.122,null);
取数组下标：如果越界了就会
undefined
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
// java中 Person person =new Person(1,2,3,4,5);
// JavaScript 中
var person = {
name:"xiaoming",
age:3,
tags:['js','java','web','...']// tags 标签
}
取对象的值
person.name
> "xiaoming"
person.age
> 3
person.tags
> (4) ["js", "java", "web", "..."]
2.4、严格检查格式 use strict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA 需要设置支持ES6语法
'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量建议都使用 let 去定义~
-->
<script>
'use strict';
// 全局变量
let i=1;
// 局部变量
// var i=1;
// 在ES6中 局部变量用 let 定义
</script>
</head>
<body>
</body>
</html>
3、数据类型
3.1、字符串
1、正常字符串我们使用 单引号，或者双引号包裹
2、注意转义字符\
(在字符串包裹内)
\' 单引号
\n 换行
\t tab
\u4e2d \u#### Unicode Unicode 字符
"\x41" Ascll字符
3、多行字符串编写 重点掌握
'use strict'
// tab 上面 esc键下面
var msg= `
hello
word
studnet`
4、模板字符串
let name = "xaioming";
let age = 3;
let msg2 = `你好，${name}`
5、字符串长度
var student = "student";
undefined
console.log(student.length)
7
6、字符串的可变性，不可变 重点掌握
7、大小写转换
// 注意，这里是方法，不是属性
console.log(student.toUpperCase())
STUDENT
---------------------
console.log(student.toLowerCase())
student
8、获取指定的下标
student.indexOf(‘s’)
console.log(student.indexOf('s'))
0
9、截取第几个到第几个之间，包含前面，不包含后面
substring 重点掌握
[)
console.log(student.substring(1,4))
tud
--------------
console.log(student.substring(1))// 从第一个字符串截取到最后
VM6391:1 tudent
3.2、数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6] // 通过下标取值和赋值
ar[0] // 取值
arr[0] = 1 // 赋值
1、长度
arr.leng
注意：假如给 arr.length 赋值，数组大小就会发生变化~ 如果赋值过小，元素就会丢失
arr.length=10;
10
console.log(arr)
VM9241:1 (10) [1, 2, 3, 4, 5, 6, 空 ×4]
arr.length=3;
3
console.log(arr)
VM9589:1 (3) [1, 2, 3]
2、indexOf ，通过元素获得下标索引
arr.indexOf(2)
1
字符串的“1”和数字 1 是不同的
var arr = [1,2,3,4,5,6,"1"]
undefined
arr.indexOf(1)
0
arr.indexOf("1")
6
**3、slice （）**截取Array的一部分，返回一个新数组，类似于String中的substring ！
arr.slice(1,3)
(2) [2, 3]
arr.slice(3)
(4) [4, 5, 6, "1"]
4、push（），pop（） 尾部插入
push: 压入到尾部
pop: 弹出尾部的一个元素
arr
(7) [1, 2, 3, 4, 5, 6, "1"]
arr.push('a','b','c')
10
arr.pop()
"c"
arr.pop()
"b"
arr.pop()
"a"
arr
(7) [1, 2, 3, 4, 5, 6, "1"]
5、unshift () shift() 头部插入
unshift : 压入到头部
shift: 弹出头部的一个元素
arr.unshift('a','b',1)
10
arr
(10) ["a", "b", 1, 1, 2, 3, 4, 5, 6, "1"]
arr.shift()
"a"
arr.shift()
"b"
6、排序 sort（）
arr
(8) [1, 1, 2, 3, 4, 5, 6, "1"]
arr.sort()
(8) [1, 1, "1", 2, 3, 4, 5, 6]
7、元素反转 reverse()
arr.reverse()
var arr= ["a","b","c"]
undefined
console.log(arr)
VM9061:1 (3) ["a", "b", "c"]
undefined
arr.reverse()
(3) ["c", "b", "a"]
8、替换 concat()
(3) ["c", "b", "a"]
arr.concat([1,2,3,4])
(7) ["c", "b", "a", 1, 2, 3, 4]
arr
(3) ["c", "b", "a"]
注意：concat（）并没有修改数组，只是会返回一个新的数组
9、连接符 join
arr
(3) ["c", "b", "a"]
arr.join('-')
"c-b-a"
10、多维数组
arr = [[1,2],[3,4],["5","6"]];
(3) [Array(2), Array(2), Array(2)]
arr[0][0]
1
数组：存储数据（如何存，如何取，方法都可以自己实现！）
3.3、对象
若干个键值对
'use strict'
var 对象名={
属性名: 属性值,
属性名: 属性值,
属性名: 属性值,
}
// 定义了一个person对象，它有四个属性！
var person={
name:"xiaoming",
age:3,
email:"12341@qq.com",
score:0
}
JS中对象，{……}表示一个对象，键值对描述属性XXXX：XXXX，多个属性之间用逗号隔开，最后一个属性不加逗号！
JavaScript 中的所有的键都是字符串，值是任意对象！
1、对象赋值
person.name
"xiaoming"
person.name="小尹"
"小尹"
2、使用一个不存在的对象属性，不会报错！
person.hahah
undefined
3、动态的删减属性 通过delete删除对象的属性
delete person.score
true
person
{name: "xiaoming", age: 3, email: "12341@qq.com"}
4、动态的添加 直接给新的属性添加值即可
person
{name: "xiaoming", age: 3, email: "12341@qq.com"}
person.hahaha="hahahha"
"hahahha"
person
{name: "xiaoming", age: 3, email: "12341@qq.com", hahaha: "hahahha"}
5、判断属性值是否在这个对象中！ XXXX in XXXX
person
{name: "xiaoming", age: 3, email: "12341@qq.com", hahaha: "hahahha"}
'age' in person
true
// 继承
'toString' in person
true
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('name')
true
3.4、流程控制
if判断
'use strict';
var age = 3;
if(age>3){ // 第一个判断
alert("haha");
}else if(age<3) {
alert("kua"); // 第二个判断
}else { // 否则
alert("zz");
}
while循环 避免死循环！
var age = 3;
while(age<100){
age = age + 1;
console.log(age)
}
do while循环
var age = 3;
do {
age = age + 1;
console.log(age)
}while(age<100);
for循环
var age = 3;
for (let i = 0; i < 100; i++) {
console.log(i)
}
forEach循环
var age = [12,23,42,4,5,6,2];
age.forEach(function (value){
console.log(value)
})
for … in
var age = [12,23,42,4,5,6,2];
// for in
// for(var index in object){}
for(var num in age){
if(age.hasOwnProperty(num)){
console.log("存在")
console.log(age[num])
}
3.5、Map 和 Set
ES6的新特性
Map：
'use strict'
// ES6 新特性 Map：集合
// new Map();
// new Set();
// 学生的成绩，学生的名字
// var names = ["tom","jack","hahaha"];
// var scores = [100,90,80];
var map = new Map([['tom',100],['jack',90],['hahaha',80]]);
var name = map.get('tom');// 通过key获得value
//插入值
map.set('admin',123);// 新增或修改
map.delete("tom"); // 删除
console.log(name);
Set：无序不重复的集合
var set = new Set([1,22,1,1,2,22,2,3]);// set可以去重!
set.add(2); // 添加!
set.delete(1); // 删除！
console.log(set.has(3));// 是否包含某个元素！
3.6、iterator
使用iterator来遍历迭代Map，Set！
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
