JavaScript —— 语言基础

JavaScript语言基础

3.1. 数据类型、常量及变量

注释

js 语言的注释和 Java 的注释一样，单行注释以 // 开头。多行注释以 /* 开始，以 */ 结尾。

数据类型

值类型(基本类型)：

1. 字符串（String）
2. 数字(Number)
3. 布尔(Boolean)
4. 对空（Null）
5. 未定义（Undefined）

引用数据类型

1. 对象(Object)
2. 数组(Array)
3. 函数(Function)。

常量

const 用于声明常量，声明时必须进行初始化，且初始化后值不可再修改。const 是 ES2015(ES6) 新增的关键字

const PI = 3.1415926;

变量

在定义变量的时候，可以选择使用 var 或者 let 关键字。（let 也是 ES2015(ES6) 新增的关键字）

var a = 10;
let b = 1;

var 和 let 有啥区别呢？

var 变量

{var a = 10;
}
console.log(a);

let 变量

{let b = 10;
}
console.log(b);

从上例可以看到，执行第二段代码时，会在控制台抛出：Uncaught ReferenceError: b is not defined 的错误。

这也是 var 和 let 两个变量之间最大的不同。

ES6 可以使用 let 关键字来实现块级作用域。声明的变量只在 let 命令所在的代码块内有效。

在实际开发中，如果环境支持 ES6 的语法，尽可能多使用 let，而非 var。

变量的动态数据类型

• 在 js 变量的数据类型不是强类型，在执行赋值表达式的时候，其数据类型往往取决于右值的数据类型。
• js 解释器会自动识别右值的类型，从而决定了左值的数据类型。
• 可以通过 typeof 关键字来确定变量的数据类型

let x;
console.log(typeof x);// x 为 undefined
x = 5;
console.log(typeof x);// x 为 number
x = "John";
console.log(typeof x);// x 为 string

字符串转换为数字

• parseInt 函数会尝试将参数转换为 整数

let x = "20";
console.log(typeof x);// x 为 string
x = parseInt(x);
console.log(typeof x);// x 为 number

• parseFloat 函数会尝试将参数转换为 浮点数数

let x = "3.1415";
console.log(typeof x);// x 为 string
x = parseFloat(x);
console.log(typeof x);// x 为 number

3.2. 表达式与运算符

给定 y=5，算术运算符示例如下：

算术运算符

赋值运算符

给定 x=10 和 y=5，赋值运算符示例如下：

比较运算符

给定 x=5，比较运算符示例如下：

逻辑运算符

给定 x=6 和 y=3，逻辑运算符示例如下：

条件运算符

使用方法和 Java 类似：

let age = 18;
console.log(age >= 18 ? "成年" : "未成年");

利用三元运算符计算平闰年

let year = 2020;
let type = (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0) ? "闰年" : "平年";
console.log(year + "是" + type);

3.3. JavaScript 流程控制语句

分支语句

if

js 的 if 语法和 Java 一样，这里示例如下：

let age = 18;
if (age > 70) {console.log("年过古稀");
} else if (age >= 60) {console.log("花甲");
} else if (age > 50) {console.log("年过半百");
} else if (age > 40) {console.log("不惑之年");
} else if (age > 30) {console.log("而立之年");
} else if (age > 20) {console.log("弱冠之年");
} else {console.log("未成年");
}

switch

js 的 switch 语法和 Java 一样，这里示例如下：

let day = new Date().getDay();
let week = "";
switch (day) {case 0: week = "星期日"; break;case 1: week = "星期一"; break;case 2: week = "星期二"; break;case 3: week = "星期三"; break;case 4: week = "星期四"; break;case 5: week = "星期五"; break;case 6: week = "星期六"; break;default: week = "NULL"; break;
}
console.log("今天是" + week);

循环语句

while

while 循环会在指定条件为真时循环执行代码块。

let i = 0;
while(i < 10) {console.log("i=" + i);i++;
}

do…while

do/while 循环是 while 循环的变体。
该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

let i = 0;
do {console.log("i=" + i);i++;
} while (i < 10);

for

循环代码块一定的次数，其使用方法跟 Java 也是类似：

for (let i = 0; i < 10; i++) {console.log("i=" + i);
}

for/in

用于遍历对象的属性

// 遍历 localStorage
for(let key in localStorage) {let value = localStorage[key];console.log(key, value);
}
// 遍历 sessionStorage
for(let key in sessionStorage) {let value = sessionStorage[key];console.log(key, value);
}

break 和 continue

• break 语句用于跳出循环。

for (let i = 0; i < 10; i++) {if (i == 3) {break;}console.log(i);
}

• continue 用于跳过循环中的一个迭代。

for (let i = 0; i < 10; i++) {if (i == 3) {continue;}console.log(i);
}

js 读取或修改网页上的数据

如果某个元素被设置了 id 的属性，在 js 中能直接作为变量来使用。

<h1 id="title">变量h1>
<script>console.log(title);
script>

然而获取元素内的数据，可以使用 innerHTML 或者 innerText

<h1 id="title"><code>JScode>变量h1>
<script>console.log(title.innerHTML);console.log(title.innerText);
script>

• innerHTML：用于获取或设置元素内的 HTML 内容
• innerText：用于获取或设置元素内的 文本 内容

针对表单元素，如 input 元素，可以使用 value 属性来获取或设置其内容

<input id="username" value="timor" />
<script>console.log(username.value);username.value = "Jenkins";console.log(username.value);
script>

js 读取或修改网页上元素的样式

js 可以通过元素的 style 属性来修改元素的样式

<div id="container">div>
<script>container.style.width = "100px";container.style.height = "100px";container.style.backgroundColor = "red";container.style.border = "2px solid #795548";container.style.borderRadius = "100px";
script>

案例

1. 尝试通过 document.write 在网页上输出一个九九乘法表的表格，表格的边框大小设置为 0，如下图所示：

代码参考：

<script>let html = "";for(let x =1; x <10; x++){html +="";for(let y =1; y <= x; y++){let r = x * y;r =(r <10?"0":"")+ r;html +="";}html +="";}html +="
     
           
" + y + "×" + x + "=" + r + "  
 
 
";document.write(html);
script>

3.4. 函数

函数的定义

• 标准函数

js 使用关键字 function 定义函数。

function functionName(parameters) {// code here...
}

这里需要注意的是，在声明形式参数的时候，是不需要使用 let 或 var 关键字的。
以求两个数的和为例子，定义一个函数：

// 定义 sum 函数
function sum(a, b) {return a + b;
}
// 调用 sum 函数
let c = sum(3, 4);
console.log(c);

• 匿名函数

使用 function 关键字声明函数的时候没有指明函数名称时，就被称之为匿名函数。
但它需要借助于赋值表达式，使其赋予给一个变量或常量，才能被调用。
所以，匿名函数一般是作为在赋值表达式的右值出现的。

// 定义 sum 函数
const sum = function (a, b) {return a + b};
// 调用 sum 函数
let c = sum(3, 4);
console.log(c);

• 箭头函数

ES6 新增了箭头函数。它类似于我们所熟知的 lambda 表达式。
如果方法体只有一行代码，则可以省略掉一对 {}

// 定义 sum 函数
const sum = (a, b) => {return a + b};
// 调用 sum 函数
let c = sum(3, 4);
console.log(c);

函数的参数

在定义函数的形参的时候，有以下几点规则：

1. 不需要使用 let 或 var 关键字
2. 不需要为参数显示指定类型
3. 实参和形参在类型、数量和顺序如果不一致，不会引发异常

// 定义 sum 函数
function sum(a, b) {return a + b;
}
// 调用 sum 函数
let c = sum(3, 4);// 输出结果 7
console.log(c);
c = sum("你", "好", 5.6);
console.log(c);// 输出结果 你好
c = sum(2020);
console.log(c);// 输出结果 NaN，表示非数字

所以，在 js 函数内部对入参进行有限性检测是非常有必要的

// 定义 sum 函数
function sum(a, b) {if(typeof a == "number" && typeof b == "number") {return a + b;}return null;
}
// 调用 sum 函数
let c = sum(3, 4);
console.log(c);// 输出结果 7
c = sum("你", "好", 5.6);
console.log(c);// 输出结果 null
c = sum(2020);
console.log(c);// 输出结果 null

• 默认参数

当某个参数没有被传值的时候，默认是可以有值的。

// 定义 sum 函数
function sum(a, b = 10) {return a + b;
}
// 调用 sum 函数
let c = sum(2020);
console.log(c); // 输出结果 2030

• 参数集合

当函数声明的时候并未没有显示声明任何形参的时候，可以是使用内置的 arguments 对象获得所有的参数。
把它当作是数组来处理，可以获取对应下标的实参的值

// 定义 sum 函数
function sum() {for(let i = 0; i < arguments.length; i++) {let argument = arguments[i];console.log(i, argument);}
}
// 调用 sum 函数
sum(2020, true, 3.1415, "timor", sum);

案例

1. 请声明一个标准函数 factorial, 该函数拥有一个形参 num。参数的缺省值为 1, 返回 num 的阶乘结果。

/*** 求一个非负整数的阶乘* @param num 非负整数* @returns {number}*/
function factorial(num) {if (num < 0) {return;}return num < 2 ? 1 : num * factorial(num - 1);
}

2. 请声明一个箭头函数, 该函数拥有两个形参 x, y。当 x > y 时，返回正数, 当 x < y 时，返回负数，当 x == y 时，返回零。

let compare = (x, y) => x - y;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！