JavaScript —— 语言基础

最新推荐文章于 2024-09-22 11:17:00 发布
最新推荐文章于 2024-09-22 11:17:00 发布
阅读量305 收藏
点赞数
分类专栏： # JavaScript 文章标签： javascript html5
本文为博主原创文章，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/marvelousness/article/details/119913631
版权

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 运算结果y 运算结果
+加法x=y+275
-减法x=y-235
*乘法x=y*2105
/除法x=y/22.55
%取模x=y%215
++自增x=++y66
x=y++56
–自减x=–y44
x=y–54

赋值运算符

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

运算符例子等同于运算结果
=x=yx=5
+=x+=yx=x+yx=15
-=x-=yx=x-yx=5
*=x*=yx=x*yx=50
/=x/=yx=x/yx=2
%=x%=yx=x%yx=0

比较运算符

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

运算符描述比较返回值
==等于x==8FALSE
x==5TRUE
===绝对等于（值和类型均相等）x==="5"FALSE
x===5TRUE
!=不等于x!=8TRUE
!==不绝对等于（值和类型有一个不相等，或两个都不相等）x!=="5"TRUE
x!==5FALSE
>大于x>8FALSE
<小于x<8TRUE
>=大于或等于x>=8FALSE
<=小于或等于x<=8TRUE

逻辑运算符

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

运算符描述例子
&&and(x < 10 && y > 1) 为 true
||or(x==5 || y==5) 为 false
!not!(x==y) 为 true

条件运算符

使用方法和 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>JS</code>变量</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 = "<table>";
    for (let x = 1; x < 10; x++) {
        html += "<tr>";
        for (let y = 1; y <= x; y++) {
            let r = x * y;
            r = (r < 10 ? "0" : "") + r;
            html += "<td>" + y + "×" + x + "=" + r + " &nbsp;</td>";
        }
        html += "</tr>";
    }
    html += "</table>";
    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);
}
  1. 请声明一个箭头函数, 该函数拥有两个形参 x, y。当 x > y 时，返回正数, 当 x < y 时，返回负数，当 x == y 时，返回零。
let compare = (x, y) => x - y;
奇妙的代码
关注
专栏目录
JavaScript——基础
qq_46905110的博客
04-24 1597
JavaScript——基础初识JavaScript什么是JavaScriptJavaScript的特点JavaScript开发工具第一个JavaScript程序基本的语法规则JavaScript入门JavaScript引入方式JavaScript常用输出语句注释数据与运算函数对象事件 初识JavaScript 什么是JavaScript JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。对于一个网页来言，HTML代表了结构，CSS代表了样式，JavaScrip
网页游戏开发基础——JavaScript基础知识
gllxbc的博客
06-21 2366
　　对于初学编程的朋友来说，这篇文章有点长，而且会有点难懂。但是请不要放弃，我尽量以通俗的语言解释相关的编程概念，这里只讲解编写一个游戏需要的相关编程概念（如需要会在后面的文章中随时补充相关概念），对其余未涉及的编程概念大家可以自行搜索学习。本文都是简单的编程概念，请耐心看完，如有疑问欢迎与我交流。本人水平有限，如有错误欢迎指正。　　正如有人的地方就有江湖，有浏览器的地方就有JavaScript。...
送你101道javascript面试题(三)
jianjieX的博客
05-15 925
42. setInterval方法的返回值什么? setInterval(() => console.log("Hi"), 1000); A：一个唯一的id B：指定的毫秒数 C：传递的函数 D：undefined 答案: A 它返回一个唯一的id。 此id可用于使用clearInterval()函数清除该定时器。 43. What does this return? [..."Lydia"]; A: [“L”, “y”, “d”, “i”, “a”] B: [“Lydia”] C: [[],
for语句大概
Yianxxx的博客
09-22 104
简简单单的for语句 for语句也是先测试语句，只不过增加了进入循坏之前的初始化代码，以及循环执行后要执行的表达式，语法如下： for (initialization; expression; post-loop-expression) statement 下面是一个用例： let count = 10; for (let i = 0; i <count; i++){ console.log(i); } 以上代码在循坏开始前定义了变量i的初始值为0.然后求值条件表达式，如果求值
var与let、const的区别及变量提升（函数提升）过程解析
haonan_z的博客
11-12 2245
var与let、const 一、var声明的变量会挂载在window上，而let和const声明的变量不会： var a = 100; console.log(a,window.a); // 100 100 let b = 10; console.log(b,window.b); // 10 undefined const c = 1; console.log(c,window.c...
js冒泡算法：数组解构写法
qq_45989814的博客
10-29 110
let a=10; let b=20; [a,b]=[b,a]; console.log('a',a,'b',b); //a 20 b 10 function fn() { let arr=[1,2,6,5,9,7]; for(let i=0;i<arr.length;i++){ for(let j=i+1;j<arr.length;j++){ if(arr[i]<arr[j]){ ...
Javascript——入门基础
HMMHMH的博客
09-22 134
目录变量类型显示方式：获取元素if条件语句 变量类型 名称 类型 number 数字类型 string 字符串类型 boolean 布尔类型 undefined 未声明/定义类型 null 空类型 object 复合类型 显示方式： 参数 描述 alter() 弹框显示 console.log() 控制台显示 document.ti
JavaScript——JS基础部分
WJFLBJ的博客
08-04 700
目录 一.初识JavaScript 1.计算机组成 2.数据存储单位 3.HTML.CSS.JS关系 4.JavaScript组成 5.JS三种书写位置 5.1 行内式 5.2 内嵌式 5.3 外部式 6.JS输入输出语句 一.初识JavaScript 1.计算机组成 2.数据存储单位 bit < byte < kb < GB < TB<..... 位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位） 字节(By...
前端——JavaScript 基础
m0_74098588的博客
07-26 1049
JavaScript 简介JavaScript 简介JavaScript 是一种具有函数优先原则的轻量级、解释型、即时编译型的编程语言。函数优先原则:函数可以和其他任何变量一样对待，而且函数的优先级会被提升。轻量级:语法和 Java 类似，语法简单易学。解释型:代码在运行时直接由解释器逐行解释和执行，而不需要事先将代码编译成机器码。即时编译:在运行时将JavaScript代码编译成机器码。
JavaScript基础——变量声明
T030606的博客
04-14 506
在JavaScript中，变量是用来保存值的。要使用变量，必须项声明它。其中let关键字就是在声明变量。
走进javascript——不起眼的基础，值和分号
10-20
JavaScript是一种广泛应用于网页开发的编程语言，其基础语法中的变量值和分号使用是编写有效JavaScript代码的基础。了解这些基础知识对于编写可读性强、运行稳定的JavaScript代码至关重要。 首先，理解JavaScript中...
web前端——JavaScript基础
03-06
思维导图式笔记， 笔记来源https://blog.csdn.net/qq_38490457/article/details/109257751
javascript基础——String
10-21
JavaScript是一门广泛使用的前端脚本语言，其字符串（String）对象是该语言中使用频率极高的数据类型之一。字符串在JavaScript中可视为字符数组，提供了许多用于处理字符串的方法，这些方法使得操作字符串变得简单和...
JavaScript——DOM
03-18
JavaScript——DOM DOM，全称为“Document Object Model”，即文档对象模型，是W3C组织定义的一种标准，用于表示HTML或XML文档的结构，并提供了一种程序化访问和操作文档内容的方法。DOM允许开发者通过JavaScript或...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
最新发布
程序员阿龙的博客
09-22 4023
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 275
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
Babel
小秀的博客
09-20 687
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
vue 案例使用
buhuidage的博客
09-17 452
加上show-password就行。el-switch 按键的使用。
前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）
m0_51798113的博客
09-17 799
getTableData().tableData，其实就是去后端获取参数去了，因为这是公司的前端框架，基于vxe的，包装的方法，获取了一个表格信息，相当于获取参数。说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。
HTML、CSS、JavaScript语法手册——网页设计基础
基本的JavaScript语法包括变量定义、条件语句、循环、函数等。 JavaScript的语法与C/C++、Java等语言类似，但也有一些独特之处，如动态类型、原型继承和事件处理等。例如，声明变量可以使用`var`、`let`或`const`，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值