目录
3.2.7 在头部添加和删除(unshift()、shift() )⭐
一、JavaScript简介
1.1 概述
JavaScript 是一门世界上最流行的脚本语言
一个合格的后端人员,必须要精通JavaScript
1.2 发展历史
初衷:功能不需要太强,语法简单,容易学习和部署。
1995年,他们雇佣程序员十天时间就设计完成了这种语言的第一版。
ECMAScript 是 JavaScript 的一个标准,最新版本es6 ,但是大部分浏览器还只停留在支持es5代码上。
es版本调整方法:
默认是5.1 建议选择6更加严谨,然后apply
二、快速入门
2.1 引入JavaScript
2.1.1 内部标签<script>
在<script> 标签内,写js代码,注意java规范,加分号
这个标签,可以放在html文件中的任何地方,推荐放在<head>中 或<body>开始的地方
<!-- 内部引入,-->
<script type="text/javascript">
/*在标签内,写js代码*/
alert('hello world!');/*弹窗*/
</script>
注:不用显式定义type,也默认就是javascript
2.1.2 外部引入
外部引入JavaScript文件
<!--2、外部引入-->
<!--注意:script标签必须成对出现-->
<script src="js/myjs.js"></script>
注意:script标签必须成对出现,不能写成 <script/>
2.2 基本语法入门
JavaScript语法同Java语法,严格区分大小写
<script>
/*注:JavaScript严格区分大小写*/
// 1. 用var关键字定义变量
var num = 1;
var name = "boot";
// 2. 条件判断 可以嵌套使用
if(num>0){
alert("true");
}else if(num<0) {
alert("false");
}else{
alert("none");
}
</script>
注,用var 关键字定义变量 可以不考虑类型
2.3 浏览器控制台的使用
浏览器上右键 --> 审查元素 / 检查(F12)
常用部分:
Element (元素):复刻网站时可以用这个,查看代码
Console(控制台):调试 js 代码
Source(源代码):查看源代码,跑断点
Network(网络):查看网络请求数据,抓包
Application(应用):查看cookie
1、Console控制台的使用
① 用 alert(num) 弹框输出num 的值
② 用 console.log(num) 在浏览器控制台打印变量,相当于sout (System.out.println())
2、Source 源代码的使用
打断点的步骤:
①先在左边网页(page)里选中想要调试的代码文件, ②在需要打断点的某一行 前边打上断点, 出现蓝色标志即定位成功 ③再刷新页面,即可进入断点 ④ 鼠标移动到变量附近,即可显示该变量的值
⑤断点的调试:
第一个图标:resume 将断电执行过程重启
第二个图标:如果遇到一个函数,会直接执行完这个函数,进入下一步,不显示细节
第三个图标:如果遇到一个函数,进入函数内部,进行执行
第四个图标:如果用了图标三进入了函数内部,可以用这个执行完函数的剩下部分
ps:剩下的 例如网络啥的,等我用多了 再来补充吧💪
2.4 严格检查模式('use strict';)
'use strict'; 严格检查模式,预防JavaScript的随意性导致产生的一些问题,必须写在JavaScript的第一行
局部变量 建议使用let 去定义,前提,IDEA 支持ES6语法
'use strict'; // 在JavaScript的第一行声明严格检查模式
let i = 1; // 局部变量
var j = 2; // 全局变量
k = 0; // 因为设置了严格检查模式,所以 k 会报错
三、数据类型
数值、文本、图形、音频、视频……
3.1 字符串
3.1.1 正常字符串
我们使用单引号,或者双引号,例如:
'abc' "abc"
3.1.2 注意转义字符 \
\' 输出 引号 '
\n 换行
\t table
\u#### Unicode字符,中文编码 例如:\u4e2d “中”
\x## ASCⅡ字符 例如 \x41 "A"
3.1.3 多行字符串编写 ` `
用 table 上边的 那个引号 ``,实现多行字符串编写
var message = `你好啊
how are you
谢谢你`
3.1.4 模板字符串
let name = "boot";
let age = 18;
let msg = `你好,${name}`
3.1.5 字符串长度
console.log(str.length)
3.1.6 字符串的可变性——>不可变
字符串定义后,不可变
3.1.7 大小写转换
// 注意: 这里是方法,不是属性,记得加括号()
str.toUpperCase()
str.toLowerCase()
3.1.8 根据字符获取下标(indexOf())
str.indexOf('e')
3.1.9 截取字符串(substring( , ))⭐
substring 的规则,左闭右开[)
str.substring(1,3) // [1,3)
str.substring(1) // 从第一个字符串截取到最后一个字符串
3.2 数组
Java数组必须是一系列相同类型的对象,js的数组中,类型可以不相同
3.2.1 数组声明的方式:
//方法一:
var arr = [1, 2, 3, 5, 'hello', true, null]
//方法二:
new Array(1, 2, 3, 5, 'hello', true, null);
为了保证代码的可读性,尽量使用 方法一 的方式
3.2.2 取值和赋值:
var arr = [1,2,3,4,5]; //通过下标取值和赋值
arr[0]
arr[0] = 1
如果越界了,就会 undefined
3.2.3 长度
arr.length
注意:假如给 arr.length赋值,数组大小就会发生变化,如果赋值变大,多的地方是空元素,如果赋值过小,只显示前几个,剩余元素就会丢失
3.2.4 通过元素获取下标索引(indexOf())
var arr = [1,2,3,4,5,"1","2","3"]
arr.indexOf(1)
arr.indexOf("1")
注意:字符串的“1”和数字1 是不一样的
3.2.5 截取并返回新数组(slice())
截取Array的一部分,并返回一个新数组,类似于String中的substring
var arr = [1,2,3,4,5]
arr.slice(1,3)
>(2) [2,3]
3.2.6 在尾部添加和删除(push()、pop())⭐
push():压入到尾部
pop():弹出尾部的一个元素
arr.push('1',1)
console.log(arr)
> (7) [1,2,3,4,5,'1',1]
arr.pop()
console.log(arr)
> (6) [1,2,3,4,5,'1']
3.2.7 在头部添加和删除(unshift()、shift() )⭐
unshift:压入到头部
shift:弹出头部的一个元素
var arr = [1,2,3,4,5]
arr.unshift(1)
console.log(arr)
> (6) [1,1,2,3,4,5]
arr.shift()
console.log(arr)
> (5) [1,2,3,4,5]
3.2.8 排序 sort()
升序排列
> (3) ['C','A','B']
arr.sort()
> (3) ['A','B','C']
3.2.9 元素反转 reverse()
> (3) ['C','A','B']
arr.reverse()
> (3) ['B','A','C']
3.2.10 拼接数组 concat() ⭐
> (3) ['C','B','A']
arr.concat([1,2,3])
> (6) ['C','B','A',1,2,3]
arr
> (3) ['C','B','A']
注意:concat() 并没有修改数组,只是会返回一个新的数组
3.2.11 打印数组 join()
打印拼接数组,使用特定的字符串连接
> (3) ['A', 'B', 'C']
arr.join('-')
> 'A-B-C'
3.2.12 多维数组
var arr = [[1,2],[2,3],['5',6]]
arr[1][1]
> 3
3.3 对象
1、对象的声明:
var 对象名 = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}
//定义了一个person对象,他有4个属性
//Java中的定义方法:Person person = new Person( );
var person ={
name: "boot",
age: 18,
tags: ['js','java','web','...']
}
js中,数组是中括号[],对象是大括号{ }, 键值对描述属性 XXX : XXX, 每个属性之间 用 逗号 隔开,最后一个不需要逗号!
JavaScript中的所有的键 都是字符串,值是任意对象!
2、对象赋值
person.name = "little"
> "little"
person.name
> "little"
3、对象的取值
person.name
> "boot"
person.age
> 18
使用一个不存在的对象属性,不会报错,提醒 undefined
4、动态的删减属性
通过delete删除对象的属性
delete person.name
5、动态的添加
直接给新的属性添加值即可
person.haha = "haha"
6、判断属性值是否在这个对象中
'age' in person
> true
// 继承,他的原始方法中,有toString
'toString' in person
> true
如果判断一个属性是否是这个对象自身所拥有的 用 hasOwnProperty()
person.hasOwnProperty('toString')
> false
persn.hasOwnProperty('age')
> true
3.4 流程控制
1、 if 判断
var num = 1;
if(num>0){ //第一个判断
alert("true");
}else if(num<0) { //第二个判断
alert("false");
}else{ //第三个判断
alert("none");
}
2、while循环
var num = 3;
while(num<100){
num = num + 1;
console.log(num)
}
do{
num = num + 1;
console.log(num)
}while(num < 100)
注意:避免程序死循环
3、for循环
for(let i = 0; i < 100; i++){
console.log(i)
}
4、forEach遍历 >ES5.1
var age = [1,2,3,4,5,6];
age.forEach(function (value)){
console.log(value)
})
5、for...in/of 遍历
var nums = [24,23,31,4,5];
// for(var index in object){} 用in 的时候,,是下标
for(var i in nums){
console.log(nums[i])
}
// for(Type value of object){} 用of的时候,打印具体的值
for(var num in nums){
console.log(num)
}
3.5 Map和Set
ES6的新特性
Map:
// ES6 Map
// 学生的成绩,学生的姓名
// var names = ["lucy", "jack", "xiaoming"];
// var scores = [90,99,95];
// 定义一个map
var map = new Map([['lucy', 90],['jack',99],['xiaoming',95]]);
var score = map.get('jack'); // 通过key获得value
map.set('admin', 100); // 在map里 新增或修改
map.delete('admin'); // 删除
Set:无序不重复的集合
// 声明一个 set
var set = new Set([3,1,1,1]); //set去除重复
> Set(2) {3,1}
set.delete(1); // 删除 set中的元素
set.add(2); // 新增元素
set.has(3);// 判断是否含有该元素
3.6 iterator
> ES6 新特性
for of/in 遍历数组:
// 通过for of/in 实现遍历数组
var arr = [3,4,5]
for(var i of arr){
console.log(i)
}
for of/in 遍历map:
var map = new Map([['lucy', 90],['jack',99],['xiaoming',95]]);
for(let x of map){
console.log(x)
}
for of/in 遍历set 同理:
var set = new Set([3,1,1,1]);
for(var i of set){
console.log(i)
}
3.7 其他
1、数值
js 不区分小数和整数,Number
123 // 整数123
123.1 // 浮点数123.1
1.123e3 // 科学计数法
-99 // 负数
NaN // not a number
Infinity // 表示无限大
注:(1/3)=== (1-2/3) 结果为false,因为有精度的误差
所以:尽量避免使用浮点数进行计算
拓:可以用 Math.abs(1/3-(1-2/3))<0.00000001 结果为true
2、布尔值
true false
3、逻辑运算
&& 两个都为真,结果为真
|| 一个为真,结果为真
! 非,真即假,假即真
4、比较运算符 ⭐
= 赋值符号
== 等于(类型不一样,值一样,结果true)
=== 绝对等于(类型一样,值一样,结果才为true)
这是JS的一个缺陷,坚持不要使用==
注: NaN===NaN,这个与所有的数值不相等,包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN
5、null 和 undefined
null 是 空,,undefined 是 未定义
四、函数及面向对象
4.1 函数定义
1、定义方式一 (推荐):
// 绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return 代表函数结束,返回结果!
如果没有执行return,函数执行完也会返回结果,结果就是undefined
2、定义方式二:
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){....}这是一个匿名函数。但是可以把结果赋值给abs,通过abs就可以调用函数。
3、函数的调用
abs(10) //10
abs(-1) //1
4、参数问题
JavaScript可以传任意个参数,也可以不传递参数,这样会引发一些问题:
①假设不传参数,如何规避?——在函数开始,手动抛出异常
function abs(x){
// 手动抛出异常
if(typeof x !== 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
②假设传递的参数较多?
——Ⅰ通过 arguments 拿到传递进来的所有参数,是一个数组,这是js免费赠送的关键字。
function abs(x){
console.log("x=>"+x) //控制台输出x的值
//遍历arguments里的元素
for(var i = 0; i<arguments.length;i++){
console.log(arguments[i])
}
if(x>=0){
return x;
}else{
return -x;
}
}
————问题:arguments包含所有的参数,有时候我们想使用多余的参数来进行附加操作,需要排除已有的参数。
——Ⅱ 通过 rest 获取除了一定义的参数之外的所有参数(ES6引入的新特性)
// rest 参数只能写在最后面,必须用...标识
function aaa(a,b,...rest){
console.log("a=>"+a)
console.log("b=>"+b)
console.log(rest)
}
4.2 变量作用域
1、在JavaScript中,var定义变量是作用域的。
① 在函数体中声明,在函数体外不可以使用❌ ~(非要想实现的话,参考4.3 闭包)
function aa(){
var x = 1;
x = x+1;
}
x = x + 2; // 报错: Uncaught ReferenceError: x is not defined
② 如果两个函数使用相同的变量名,只要在各自函数内部,就不冲突 🙆
function aa(){
var x = 1;
x = x+1;
}
function bb() {
var x = 1;
x = x+1;
}
③ 内部函数可以访问外部函数的成员,反之不行
function aa(){
var x = 1;
// 内部函数可以访问外部函数的成员,反之不行
function bb() {
var y = x + 1; // 2 🙆
console.log(y)
}
var z = y + 1; // ❌ Uncaught ReferenceError: y is not defined
}
④ 如果内部函数变量与外部函数变量重名,自己用自己的
function aa(){
var x = 1;
function bb() {
var x = 'a'
console.log('inner'+x) // innera
}
console.log('outer'+x) // outer1
bb()
}
假设在JavaScript中,函数查找变量从自身函数开始,由内向外查找,假设内
function f1() {
var x = 'x',
y = 'y',
z,i; // 先定义
//后边随便用
x = x +y;
z = 'z';
}
外都有同名函数变量,则内部屏蔽外部的
2、变量作用域的提升
function f1() {
var x = 'x'+y;
console.log(x); //xundefined
var y = 'y';
}
结果: xundefined
说明:js执行引擎,自动提升了 y 的声明,但是不会提升变量y的赋值
养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码维护,更改为:
function f1() {
var x = 'x',
y = 'y',
z,i; // 先定义
//后边随便用
x = x +y;
z = 'z';
}
3、全局对象
var x = 'xxx';
alert(x);
alert(window.x); // 默认所有的全局变量,都会自动绑定在window对象下;
alert()这个函数本身也是一个 window 变量
var x = 'xxx';
window.alert(x); // 该弹窗会出现🙆
var old_alert = window.alert;
old_alert(x); // 该弹窗会出现🙆
window.alert = function () {
};
//发现 alert() 失效了
window.alert(123); // 该弹窗不会出现❌
// 恢复 在重新定义一下就行
window.alert = old_alert;
window.alert(456); // 这个弹窗会出现🙆
JavaScript 实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错 refrenceError
规范:由于所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,会冲突——>如何能够减少冲突?
// 唯一全局变量空间
var OnlySpace ={};
// 定义全局变量
OnlySpace.name = 'boot';
OnlySpace.add = function (a,b) {
return a + b;
};
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题~
例如 jQuery(简化符号:$)
4、局部作用域 let
function aaaa(){
for(var i=0;i<100;i++){
console.log(i)
}
console.log(i+1); //输出101,问题? 出了这个作用域还可以使用
}
ES6 引入let关键字,解决局部作用域冲突问题
function aa(){
for(let i=0;i<100;i++){
console.log(i)
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}
建议使用 let 关键字去定义局部作用域的变量
5、常量const
在ES6之前,怎么定义常量:只有用全部大写的字母命名就是常量,不建议修改这样的值
var PI = "3.14";
console.log(PI);
PI = '123'; //可以改变这个值
console.log(PI);
在ES6 引入了常量关键字 const,只读常量
const PI = '3.14'; //只读常量
console.log(PI);
PI = '234'; // TypeError: Assignment to constant variable
建议使用 const 定义常量
4.3 方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
1、方法的定义和调用
var am = {
name:'boot',
birth: 2000,
// 定义方法
age: function () {
//今年-出生的年
var now = new Date().getFullYear();
return now - this.birth; //注意这里的this
}
}
// 属性的调用
am.name;
// 方法的调用,一定要带()
am.age();
2、this. 代表什么?——拆开上面的代码看看
function getAge() {
//今年-出生的年
var now = new Date().getFullYear();
return now - this.birth; //注意这里的this
}
var amm = {
name:'boot',
birth: 2000,
age:getAge
}
amm.age() //可以
getAge() //NaN,因为如果直接调用getAge this 指的是window,但是他里边并没有birth
this是无法指向的,是默认指向调用它的那个对象;
3、可以指向的apply
getAge.apply(amm,[]); // this,指向了amm,参数为空,可以输出age信息
五、常用内部对象
标准对象
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
1、基本使用
var now = new Date(); // 打印当前时间
now.getFullYear(); // 年
now.getMonth(); // 月 0~11 代表月
now.getDate(); // 日
now.getDay(); //星期几
now.getHours(); // 时
now.getMinutes(); //分
now.getSeconds(); // 秒
now.getTime(); //时间戳,从1970年1月1日 0:00:00 到现在的毫秒数
console.log(new Date(1234343)) ;// 通过时间戳 转为 具体时间
> Thu Jan 01 1970 08:20:34 GMT+0800 (中国标准时间)
2、转换
now = new Date(1232434354)
> Thu Jan 15 1970 14:20:34 GMT+0800 (中国标准时间)
now.toLocaleString //注意,调用是一个方式,不是一个属性!
> ƒ toLocaleString() { [native code] }
now.toLocaleString()
> '1970/1/15 14:20:34'
now.toGMTString() //转换时区
> 'Thu, 15 Jan 1970 06:20:34 GMT'
5.2 JSON
1、json 是什么?
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言
- 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率
早期,所有数据传输习惯使用XML文件。
在JavaScript中,一切皆为对象,任何js支持的类型都可以用JSON来表示
2、json的格式
- 对象都用{}
- 数组都用[]
- 所有的键值对都是用key:value
3、JSON字符串和JS对象的转化
<script>
var user = {
name: "boot",
age: 3,
sex: '女'
}
// 对象转化为json字符串 {"name":"boot", "age":3, "sex": "女"}
var jsonUser = JSON.stringify(user)
// json 字符串转化为对象
var obj = JSON.parse(' {"name":"boot", "age":3, "sex": "女"}')
</script>
5.3 Ajax
- 原生的js写法,xhr 异步请求
- jQuery 封装好的方法 $("#name").ajax("")
- axios请求