JavaScript-01-基础

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请求