JavaScript-01-基础
2021-02-22
后端工程师必须要会JavaScript
1、快速入门
1.1、引入JavaScript
1、外部引用
<script src="js/01、js"></script>
2、直接引用
<!-- 这里可以写js -->
<script>
alert("你好啊");
</script>
1.2、基本语法
// 1.定义变量
var num = 1;
var name = "asd";
// 2.条件控制
if (num >= 1) {
alert("true");
} else if (num >= 3) {
alert("false");
} else {
alert("on");
}
1.3、控制台基本使用
调节控制台的字体大小?
ctrl + + / - 就可以控制字体的大小
1.4、数据类型
0、变量
var $a
var _s
var d2
var 王者荣耀
1、数字
123 // 整数
123.1 // 浮点数
1.123e7 // 科学计数法
-88 // 负数
NAN // 非数
Infinity // 无穷大
2、字符串
'abc' "abc"
3、布尔值
true, false
4、逻辑预算
&& || !
5、比较运算符
=
1 "1"
== 等于 (类型不一样,值一样,也会判断为true)
=== 绝对等于
(坚持不要用 ==
)进行比较
// ==
if (1 == "1") {
console.log("==");
} else {
console.log("不==");
}
// 不===
if (1 === "1") {
console.log("===");
} else {
console.log("不===");
}
注意
NaN == NaN
这个数与所有的数值都不相等,包括自己- 只能通过
isNaN(NaN)
进行判断
避免使用浮点数计算,有精度问题
// false
console.log((1 / 3) === (1 - 2 / 3));
// 1
console.log(Math.abs(1 / 3 - (1 - 2 / 3) < 0.00000001));
6、null 和 undefined
- null 空
- undefined 未定义
7、数组
var nums = [1, 2, 3, 4, 5, "el", '123', null, true];
arr = new Array(1, 3, 55.3, NaN);
8、对象
// 对象是大括号
var person = {
name: "liu",
age: 2,
tags: ['js', 'java', 'python']
}
1.5、严格检查模式
<script>
// 使用严格模式 要放在第一行
'use strict';
// 全局变量
var idx = 1;
console.log(idx);
// 局部变量用 let
let l_idx = 1;
</script>
2、数据类型
2.1、字符串
1、单引号,双引号
2、转移字符
\'
\n
\t
\u4e2d \u### Unicode字符
\x41 AscII字符
3、多行字符
var msg = `
niahosd
jqweoj
`
4、模板字符串
// 模板字符串
let name = "liu";
let age = 3;
// EL 表达式
let msg = `你好,${
name},年龄是${
age}`
5、字符串长度
str.length
6、字符串不可变
7、大小写转换
// 这里是方法,不是属性
stu.toUpperCase()
stu.toLowerCase()
8、获取下标
stu.indexOf('i');
// 2
9、获取字串substring
stu = "liu";
// 从第 2 个位置到最后
stu.substring(1);
// 不包括后者 返回l
stu.substring(0, 1);
3.2、数组
可以包含任意类型
1、长度可以变化
arr = [1, 2];
arr[0] = 2;
console.log(arr.length);
// 赋值之后 数组变大 后面就是空值了
arr.length = 4;
// 数组变小,丢失数据
arr.length = 1;
2、indexOf
,通过元素获取下标
arr.indexOf(2);
// 1 和 "1" 是不同的
3、slice() 切片
slice(1);
slice(0, 3); // 不包括后面
4、添加删除元素
arr.push('a', 'v'); // 在后面压入
arr.pop(); // 删除最后一个元素
5、unshift() shift()头部
arr.unshift('a', 'b'); // 在头部压入
arr.shift(); // 弹出头部一个元素
6、排序
arr = [1, 2, 3, 4, 5, 6, 3, 3]
arr.sort()
// [1, 2, 3, 4, 5, 6, 3, 3]
arr.sort().reverse()
// [6, 5, 4, 3, 3, 3, 2, 1]
7、元素反转
arr.reverse()
8、拼接数组 concat
new_arr = arr.concat([1, 2, 3])
[6, 5, 4, 3, 3, 3, 2, 1, 1, 2, 3]
9、连接符join
arr.join('0')
10、多维数组
arr = [[1, 2], ["5", "6"]];
arr[1][1];
// "6"
3.3、对象
1、赋值
person = {
name:"liu",
age:3,
}
2、使用一个不存在的对象属性不会报错,只会 undefined
3、动态删减属性
delete person.name;
// true
4、添加
person.haha = "haha";
5、判断这个属性值是否在对象中
"age" in person
// true
// 继承
'toString' in person
6、判断一个属性是否是这个对象拥有的 hasOwnProperty
person.hasOwnProperty("name")
// true
3.4、流程控制
1、if
var age = 3;
if (age > 3) {
alert("haha");
} else if (age < 5) {
alert("asd");
}
2、for
for (let i = 0; i < 100; ++i) {
console.log(i);
}
3、forEach
var age = [1, 2, 3, 4, 5, 6];
age.forEach(function (value) {
console.log(value);
})
4、for in
// for in
for (var num in age) {
if (age.hasOwnProperty(num)) {
console.log("存在");
}
}
3.5、Map和Set
1、Map
// 太麻烦了
var names = ["tom", 'jack', 'haha'];
var scoces = [100, 76, 99];
var map = new Map([['tom', 100], ['javk', 55], 'aad', 97]);
name = map.get('tom');
map.set('admin', 33);
map.add('4', 3);
map.delete('4');
2、Set 去重
var set = new Set([3, 1, 2]);
set.add(2);
set.delete(2);
// 是否包含某个元素
console.log(set.has(2));
3.6、iterator
1、数组
arr = [1, 2, 3, 4];
for (var x in arr) {
console.log(x);
}
2、Map
var map = new Map([['tom', 100], ['javk', 55], ['aad', 97]]);
for (let x of map) {
console.log(x);
}
3、Set
// Set
var set = new Set([3, 44, 55, 3, 44]);
for (let x of set) {
console.log(x);
}
3、函数
3.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;
}
}
var abs = function (x) {
console.log("x =>" + x);
for (var i = 0; i < arguments.length; ++i) {
console.log(arguments[i]);
}
}
3.2、变量作用域
1、函数体内的
function f1() {
var x = 1;
x += 1
}
x = x + 2;
// Uncaught ReferenceError: x is not defined
2、两个函数嵌套
- 互不相关
function f1() {
var x = 1;
x = x + 1;
}
function f2() {
var x = "A";
x = x + 'b';
}
下面是错误的
function f1() {
var x = 1;
x = x + 1;
function f2() {
var y = 2;
}
var z = x + y; // 不能访问f2内部的 y
}
- 就近原则
function f1() {
var x = 1;
function f2() {
var x = '2';
console.log("inner" + x);
}
console.log("outer" + x);
}
- 全部变量
// alert()随便用的。。
var x = "123";
window.alert(x);
var old_alert = window.alert;
window.alert = function () {
};
// alert失效
window.alert(123);
// 恢复
window.alert = old_alert;
window.alert("修复了");
规范
定义自己的命名空间里面去,防止修改其他全局变量
// 唯一全局变量
var liuapp = {
};
// 定义全局变量
liuapp.name = 'liu';
liuapp.add = function (a, b) {
return a + b;
}
window.alert(liuapp.add(2, 3));
jQuery =
$()
局部作用域let
function f1() {
for (var i = 0; i <= 10; ++i) {
;
}
// 11
console.log(i); // 出了作用域,还能使用
}
// let
function f1() {
for (let i = 0; i < 10; ++i) {
;
}
// Uncaught ReferenceError: i is not defined
console.log(i); // 错误了
}
常量 const
const PI = 3.14;
console.log(PI);
PI = 3; // 错误
console.log(PI);
3.3、方法
1、定义方法
- 基本
var delicacy = {
name: "liu",
birth: 1999,
// 方法
age: function () {
var now = new Date().getFullYear();
// 跟Java一样用this
return now - this.birth;
}
}
// delicay.age 是属性
// deliacy.age() 是方法
// 22
- 使用外面的函数
function getAge() {
var now = new Date().getFullYear();
// 跟Java一样用this
return now - this.birth;
}
var delicacy = {
name: "liu",
birth: 1999,
age: getAge
}
// delicacy.age() 不是属性! 是函数
// 22
apply
getAge()
// NaN
getAge.apply(delicacy) // this 指向了delicacy
// 22
4、内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {
}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
4.1、Date
var now = new Date();
console.log(now.getFullYear()); // 年
console.log(now.getMonth()); // 月
console.log(now.getDate()); // 日
console.log(now.getDay()); // 星期几
console.log(now.getHours()); //时
console.log(now.getMinutes()); // 分
console.log(now.getSeconds()); // 秒
console.log(now.getTime()); // 时间戳 从1970.01.01 0:00 开始的
now = new Date(1413974579686); // Wed Oct 22 2014 18:42:59 GMT+0800 (中国标准时间)
now.toLocaleDateString(); // "2014/10/22"
4.2、JSON
var user = {
name: 'liu',
age: 23,
sex: '男'
};
// 对象转JSON
var json_user = JSON.stringify(user);
console.log(json_user);
// JSON字符串转对象
var obj = JSON.parse(json_user);
console.log(obj);
{
"name":"liu","age":23,"sex":"男"} // json
{
name: "liu", age: 23, sex: "男"} // 对象属性没有""
4.3、Ajax
- 原生js写法,xhr异步请求
- jQuery 封装好的方法
$("#name").ajax("")
- axios请求