JavaScript上
1.什么是JavaScript
JavaScript是一门世界上最流行的脚本语言
Java和JavaScript没有关系
后端人员也需要精通JavaScript
2.快速入门
内部标签
<script>
//......
script>
外部引入
abc.js
//...
test.html
<script arc="abc.js">script>
例子
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="js/yhk.js">script>
head>
<body>
<script type="text/javascript">
<!--这里也可以存放-->
script>
body>
html>
alert('hello,world');
2.1 基本语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
//1.定义变量 变量类型 变量名 = 变量值;
var score=1;
alert(score);
//2.条件控制
if(score>60 && score<70){
alert("60~70");
}else if(score>=70 && score<80){
alert("70~80");
}else{
alert("80~90");
}
//console.log(score);在浏览器的控制台打印变量
//可以在浏览器进行调试
script>
head>
<body>
body>
html>
2.2 数据类型
数值，文本，图形，音频，视频
number
js不区分小数和整数
123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-99
NaN //not a num
Infinity //无限大
字符串
‘abc’ “abc”
布尔值
true false
逻辑运算
&& 两个为真，结果为真
|| 一个为真，结果为真
! 非运算
比较运算
= 赋值
== 等于（类型不一样，纸一样，也会判断为true）
=== 强等于（类型相同，值一样，才会判断为true）
这是一个js的缺陷，坚持不要用 == 比较
须知：
- NaN===NaN,这个与所有的数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题：
console.log((1/3) === (1-2/3))
应尽量避免使用浮点数进行运算，存在精度问题
console.log(Math.abs(((1/3)-(1-2/3))<0.0000001))
null和undefine
数组
java中必须是一组相同类型的对象，js中不需要
两种定义方式
//为保证代码的可读性，应尽量用[]
var arr=[1,2,3,4,5,'hello'];
new Array(1,12,3,4,4,'hello');
对象
对象是大括号，数组是中括号
2.3 严格检查模式
定义全局变量用var
定义局部变量用let
<script>
'use strict';//严格检查模式，必须写在第一行
//全局变量
var i=1;
//局部变量
let j=2;
</script>
3.数据类型
3.1 字符串
-
正常字符串使用 单引号，或者双引号包裹
-
注意转义字符
\' \n \t \u4e2d \u#### unicode字符 \x41 Ascll字符 -
多行字符串编写
//tab上面 esc下面 let msg=`第一行 第二行 第三行`; console.log(msg); -
模板字符串
let name='yhk'; let age=22; let msg=`你好啊，${name}` -
字符串长度
str.length
-
字符串的可变性：不可变
-
大小写转换
//这里是方法，不是属性 student.toUpperCase() student.toLowerCase() -
student.indexOf(‘t’)
-
substring
包含前面，不包含后面 student.substring(1)//从第一个字符截取到最后一个 student.substring(1,3)
3.2 数组
Array可以包含任意的数据类型
var arr= {1,2,3,4,5}
-
长度
arr.length注意：加入arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
-
indexOf,通过元素获得下标索引
arr.indexOf(2) 1字符串的"1"和数字1是不同的
-
slice()截取Array的一部分，返回一个新数组。类似于String中的substring
-
push，pop
push:压入到尾部 pop:弹出尾部的一个元素 -
unshift()，shift()头部
unshift:压入到头部 shift：弹出头部的一个元素 -
排序sort()
-
元素反转
arr.reverse() -
concat()
这个方法并没有修改数组，只是返回一个新的数组
-
连接符join
打印拼接数组，使用特定的字符串连接
(3) ["c","b","a"] arr.join('-') "c-b-a" -
多维数组
arr = [[1,2],[3,4],["5","6"]]; arr[1][1] 4
3.3 对象
var 对象名 ={
属性名：属性值,
属性名：属性值,
属性名：属性值
}
var person ={
name:"yhk",
age:21,
email:"1234567"
}
JavaScript中的所有的键都是字符串，值都是对象
-
对象赋值
person.name="yhkyhk" -
使用一个不存在的对象属性，不会报错。会返回undefined
person.haha undefined -
动态的删减属性，通过delete删除对象的属性
delete person.name true person -
动态的添加，直接给新的属性添加值即可
person.haha="haha" "haha" person -
判断属性值是否在某个对象中
'age' in person true //继承 'toString' in person true -
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toString') false person.hasOwnProperty('age') true
3.4 流程控制
if判断
循环：while，for，dowhile，forEach
var age = [12,3,12,3,12,312]
//方法1
age.forEach(function (value) {
console.log(value)
})
//方法2
for(var num in age){
console.log(age[num])
}
3.5 Map和Set
Map:
var map = new Map([['tom',100],['java',99],['hh',80]]);
var name = map.get('tom');
map.set('admin',123456);
console.log(name);
Set:无序不重复的集合
var set = new Set([3,1,1,1]);
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
3.6 iterator
//遍历数组
var arr=[3,4,5];
for (var x of arr){
console.log(x);
}
//遍历Map
var map = new Map([['tom',100],['java',99],['hh',80]]);
for(let x of map){
console.log(x);
}
//遍历Set
var set = new Set([5,6,7,7]);
for(let x of set){
console.log(x);
}
4.函数及面向对象
4.1 定义函数
//在java中的定义方法
public 返回值类型 方法名(){
return 返回值;
}
//在JavaScript
function abs(x){//例子（绝对值函数）
if(x>=0){
return 0;
}else{
return -x;
}
}
//定义方法二
var abs = function(x){//匿名函数，但是可以把结果赋给abs，通过abs调用函数
if(typeof x !== 'number'){
throw 'not a number';
}
if(x>=0){
return 0;
}else{
return -x;
}
}
如果没有执行return，函数执行完也会返回结果，就是undefined
参数问题：JavaScript可以传任意个参数，也可以不传参数
arguments
arguments是js免费赠送的一个关键词，代表的是传递进来的所有的参数
问题：arguments包含所有的参数，有时想用剩余的参数来进行附加的操作，需要排除已有的参数
rest
ES6新引入的特性，获取除了已经定义的参数之外的所有参数
function aaa(a,b,...rest){
}
//rest参数只能卸载最后面，必须用...标识
4.2 变量的作用域
在JavaScript中，var定义变量实际上是由作用域的。
假设在函数体中声明，则在函数体外无法使用
function aj(){
var x=1;
x=x+1;
}
x=x+2;//报错Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名，并不冲突
内部函数可以访问外部函数的成员
提升变量的作用域
function aj2(){
var x='x'+y;
console.log(x);
var y='y';
}
//相当于
function aj2(){
var y;
var x='x'+y;
console.log(x);
y='y';
}
结果：xundefined
说明：js执行引擎，自动提升了y的声明，不是不会给y赋值
这个是在JavaScript建立之初就存在的特性。要养成规范，将所有的变量都定义在函数头部，便于代码维护。
function aj2(){
var x=1,
y=x+1,
z,i,a;
//之后随意用
}
全局函数
//全局变量
x=1;
function f(){
console.log(x);
}
f();
console.log(x);
全局对象window
var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量都自动绑定到window
alert()这个函数本身也是window下的一个变量
JavaScript实际上只有一个全局变量，任何变量（函数也可视为一个变量），假设没有在函数定义范围内，就会往外查找，如果在全局作用域内都没有找到，报错RefrenceErrror
规范
由于我们所有的全局变量都会绑定到window上，如果不同的js文件使用了相同·的全局变量，会导致冲突。
//唯一全局变量
var yhk={};
//定义全局变量
yhk.name='yanhaokang';
yhk.add= function (a,b){
return a + b;
}
把自己的代码全部放入自己定义的唯一名字中，解决冲突问题
jQuery等价于$
局部作用域let
function aaa(){
for(let i=0; i<100 ;i++){
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}
常量const
const PI= '3.14'; //定义只读变量
console.log(PI);
PI='123'; //Uncaught TypeError: Assignment to constant variable
console.log(PI);
4.3 方法
就是把函数放在对象的里面，对象只有两个东西：属性和方法
var yhk = {
name:'闫浩康',
birth:1999,
age: function (){
//今年 - 出生的年
var now =new Date().getFullYear();
return now-this.birth;
}
}
//属性
yhk.name;
//方法，一定要带()
yhk.age();
//可以将function拆开------>
function getAge(){
//今年 - 出生的年
var now =new Date().getFullYear();
return now-this.birth;
}
var yhk = {
name:'闫浩康',
birth:1999,
age: getAge
}
apply
在js中可以控制this的指向
getAge.apply(yhk,[]);//this指向了yhk，参数为空
5.常用对象
typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
5.1 Date
基本使用
var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日 0-11
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一
console.log(new Date(1578106175991));
转换
Sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
now.toLocaleString()
'2022/4/6 22:19:24'
now.toGMTString()
'Wed, 06 Apr 2022 14:19:24 GMT'
5.2 JSON
json是什么
json是一种轻量级的数据交换格式
bson是二进制的json
在JavaScript中，一切皆为对象，任何js支持的类型都可以用json表示
格式：
- 对象用{}
- 数组用[]
- 所有的简直对都是用key:value
JSON字符串和js对象的转化
var user = {
name:'yhk',
age:21,
sex:'男'
}
//对象转化为json字符串
var jsonuser = JSON.stringify(user);
//json 字符串转化为对象
var obj = JSON.parse('{"name":"yhk","age":21,"sex":"男"}');
JSON和js对象的区别
var obj = {a:'hello',b:'sad'}
var json = '{"a":"hello","b":"sad"}'
5.4 Ajax
- 原生的js写法，xhr异步请求
- jQuery封装好的方法$(“#name”).ajax(“”)
- axios请求
5.5 面向对象编程
原型:
var Student = {
name:'yhk',
age:21,
run:function (){
console.log(this.name+ " run...");
}
}
var xiaoming = {
name:"xiaoming"
}
xiaoming.__proto__ = Student; //指向原型，类似于继承
class继承
class关键字实在ES6引入的
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello');
}
}
class XiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
myGrade(){
alert('我是小学生');
}
}
var xiaoming =new Student();
var xiaohong = new XiaoStudent();