Java程序员学习【Javascript】这一篇就够了

2024-01-09 00:40:16

Javascript是一种脚本语言,可以用来更改页面内容,控制多媒体,制作图像、动画等等

js 代码位置

<script>
	// js 代码
</script>

引入 js 脚本

<script src="js脚本路径"></script>

1. 变量与数据类型

1-1. 声明变量

let ★

 let 变量名 =;

let 声明的变量可以被多次赋值,例如

let a = 100;  // 初始值是 100
a = 200;	  // ok, 被重新赋值为 200

const ★

const 修饰的叫常量只能赋值一次

const b = 300; // 初始值是 300
b = 400;	   // error, 不能再次赋值

注意:const 并不意味着它引用的内容不可修改,例如

const c = [1,2,3];
c[2] = 4; 	        // ok, 数组内容被修改成 [1,2,4]
c = [5,6];			// error, 不能再次赋值

var

var 声明的变量可以被多次赋值,例如

var f = 100;
f = 200;

1-2. 基本类型

undefined 和 null

  1. 执行表达式或函数,没有返回结果,出现 undefined
  2. 访问数组不存在的元素,访问对象不存在的属性,出现 undefined
  3. 定义变量,没有初始化,出现 undefined

例如:

console.log(1);  	// 函数没有返回值, 结果是  undefined
let a = 10;		 	// 表达式没有返回值, 结果是 undefined
let b = [1,2,3];
console.log(b[10]); // 数组未定义元素是 undefined
let c = {"name":"张三"};
console.log(c.age); // 对象未定义属性是 undefined
let d;
console.log(d);		// 变量未初始化是 undefined

二者共同点

  • 都没有属性、方法
  • 二者合称 Nullish

二者区别

  • undefined 由 js 产生
  • null 由程序员提供

string ★

js 字符串三种写法

let a = "hello";  // 双引号
let b = "world";  // 单引号
let c = `hello`;  // 反引号

模板字符串(Template strings)

需求:拼接 URI 的请求参数,如

/test?name=zhang&age=18
/test?name=li&age=20

传统方法拼接

let name = ; // zhang li ...
let age = ; // 18 20 ...

let uri = "/test?name=" + name + "&age=" + age;

模板字符串方式

let name = ; // zhang li ...
let age = ; // 18 20 ...

let uri = `/test?name=${name}&age=${age}`;

number 和 bigint ★

number 类型标识的是双精度浮动小数,例如

10 / 3;   // 结果 3.3333333333333335

既然是浮点小数,那么可以除零

10 / 0;	  // 结果 Infinity 正无穷大
-10 / 0;  // 结果 -Infinity 负无穷大

浮点小数都有运算精度问题,例如

2.0 - 1.1; // 结果 0.8999999999999999

字符串转数字

parseInt("10"); 	// 结果是数字 10 
parseInt("10.5");	// 结果是数字 10, 去除了小数部分
parseInt("10") / 3; // 结果仍视为 number 浮点数, 因此结果为 3.3333333333333335

parseInt("abc");	// 转换失败,结果是特殊值 NaN (Not a Number)

要表示真正的整数,需要用 bigint,数字的结尾用 n 表示它是一个 bigint 类型

10n / 3n;			// 结果 3n, 按整数除法处理

boolean ★

  • Truthy
  • Falsy

在 js 中,并不是 boolean 才能用于条件判断,你可以在 if 语句中使用【数字】、【字符串】… 作为判断条件

let b = 1;

if(b) { // true
    console.log("进入了");
}

这时就有一个规则,当需要条件判断时,这个值被当作 true 还是 false,当作 true 的值归类为 truthy,当作 false 的值归类为 falsy

下面值都是 falsy

  • false
  • Nullish (null, undefined)
  • 0, 0n, NaN
  • "" '' `` 即长度为零的字符串

剩余的值绝大部分都是 truthy

有几个容易被当作 falsy 实际是 truthy 的

  • "false", "0" 即字符串的 false 和 字符串的零
  • [] 空数组
  • {} 空对象

1-3. 对象类型

Function ★

定义函数
function 函数名(参数) {
    // 函数体
    return 结果;
}

function add(a, b) {
    return a + b;
}
调用函数
函数名(实参);
add(1, 2);     // 返回 3

js 中的函数调用特点:对参数的类型个数都没有限制,例如

add('a', 'b');  // 返回 ab
add(4, 5, 6);   // 返回 9, 第三个参数没有被用到, 不会报错
add(1);			// 返回 NaN, 这时 b 没有定义是 undefined, undefined 做数学运算结果就是 NaN
默认参数
function pagination(page = 1, size = 10) {
    console.log(page, size);
}
匿名函数
(function (参数) {
    // 函数体
    return 结果;
})


(function(a,b){
    return a + b;
})

第一种场景:定义完毕后立刻调用

(function(a,b){
    return a + b;
})(1,2)

第二种场景:作为其它对象的方法,例如

html

<p id="p1">点我啊</p>

此元素有一个 onclick 方法,会在鼠标单击这个元素后被执行,onclick 方法刚开始是 null,需要赋值后才能使用。
js

document.getElementById("p1").onclick = (function(){
    console.log("鼠标单击了...");
});

1-4. 动态类型

2. 运算符与表达式

3. 控制语句

4. API

文章来源:https://blog.csdn.net/weixin_44147535/article/details/135466201
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。