JavaScript——基础用法以及数据处理

Elric Shen

已于 2022-09-13 10:30:41 修改

阅读量427

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

于 2022-09-07 14:57:33 首次发布

本文链接：https://blog.csdn.net/Corn___/article/details/126738697

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这系列的帖子默认有Java基础，仅作为学习记录笔记，没有编程基础的小伙伴建议学一下先学一下Java

一、JS输出

JavaScript中不提供任何打印或者显示函数。

1.1 显示方案

1.1.1 window.alert()

弹窗显示：

<html>
<body>

<h2>DEMO</h2>
<p id="demo"></p>

<script>
window.alert("a");
</script>

</body>
</html>

在使用alert()后，在打开的对应浏览器会根据函数弹窗提示内容，不同的浏览器弹窗样式不同，当然也可以自己封装一个弹窗，之后会单独开一篇详说。

1.1.2 document.write()

节点写入：

<html>
<body>

<h2>DEMO</h2>
<p id="demo"></p>

<script>
document.write("a");
</script>

</body>
</html>

节点写入会直接写h5展示，可以使用节点控制做数据回显，在节点控制篇会详细说明。

<button onclick="document.write("b")">aaa</button>

同时也支持使用事件绑定函数动态修改节点内容

1.1.3 innerHTML()

节点编辑：

<html>
<body>

<h2>DEMO</h2>
<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = "b";
</script>

</body>
</html>

innerHTML()与document.write()类似都是节点控制一类，同时innerHTML也可以获取节点样式一类的属性。

1.1.4 console.log()

控制台打印：

<html>
<body>

<h2>DEMO</h2>
<p id="demo"></p>

<script>
  console.log("aaa")
</script>

</body>
</html>

与java中的System.out.print()类似，用于将内容输出在浏览器控制台，属于前端常用的debug手段之一。

二、JS语句

2.1 JavaScript程序

计算机程序是由计算机“执行”的一系列“指令”。在编程语言中，这些程序指令被称为语句。JavaScript程序就是一系列的编程语句。在HTML中由web浏览器执行。

2.2 JavaScript语句

值、运算符、表达式、关键词和注释。

分号：js换行即分号，添加分号可以在一行写多条语句，但是为了可读性建议保持与java一致的语言规范。

空白字符：js编译时会忽略空格，但是为了可读性不建议全挤在一起写。

var x = y + z;
var x=y+z;

代码块：js语句在同一个{ }花括号内组合成一个代码块。在后面函数以及作用域会详细解读。

关键词：

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if ... else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try ... catch	对语句块实现错误处理。
var	声明变量。

三、JS语法

var x, y;	// 声明变量
x = 7; y = 8;	// 赋值
z = x + y; // 运算

3.1 JavaScript值

JavaScript语句定义两种类型的值：混合值和变量值。

混合值被称为字面量，变量值被称为变量。

3.1.1 字面量

15.90
10011
"aaa"
'aaa'

数值有无小数都可，字符值由单双引号包围。

3.1.2 变量

在编程语言中，变量用于存储数据值。JavaScript使用var关键词来声明变量。“=”用于赋值。

这点与Java需要规范声明对象的类型不同，js的变量可以随意赋值，同时var声明是全局变量，在整个js中任意地方都可以使用，会存在变量提升，后面会详细说明。

var x;
x = 7;

四、 JS变量

js的表达式、关键词、注释、标识符规则与Java保持一致不会出错，字符集使用Unicode字符集。这里就省略了。

4.1 变量声明

在JavaScript中创建变量称为声明。

var a;

此时变量a是没有值的，为"undefined"使用“=”给变量赋值。

a = "aaa";

同时也可以在声明时赋值。

var a = "aaa";

支持同一行用一个var声明多个变量，之间用逗号分隔，但是并不是个好习惯

var person = "a", name = "b", price = 15000;

声明但是未定义的值为undefined

重复声明JavaScript变量：

如果再次声明某个JavaScript变量，将会被重新赋值。

var name = "a";
var name;

重新声明之后name仍然为a。

运算与Java一致不赘述。

五、JS-const/let

ES5引入了两个重要的关键字：let和const。

这两个关键字在JavaScript中提供了块作用域变量。

在ES5之前，JavaScript只有两种类型的作用域：全局作用域和函数作用域。

5.1 全局作用域和函数作用域：

var如果是在函数内部声明，则外部无法使用，即在函数作用域内声明。

如果在代码外层声明则可以在函数内部使用，即在全局声明。

5.2 let

作用与var基本一致，唯一的区别是当它在外部被声明时函数内部是无法使用的，同时两个同名变量不同的声明方式在各自的作用域内是互不影响的。

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

所以在不同作用域声明同名变量是可以的，但是在同一作用域内，用两种不同的方式声明同一个变量是不允许的。

var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

同时他解决的var的变量提升问题，也就没有了之前临时变量声明会影响其他变量的问题。

// 在此处，您可以使用 carName
var name;

// 在此处，您不可以使用 carName
let name;

5.3 const

const的作用域用法和let一致，区别在于const是不允许重新赋值的，可以理解为一个定量。

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

因此先声明再赋值的做法就不被允许了。

const PI;
PI = 3.14159265359; //错误

const从字面上来看是常数的意思，但它并没有定义常量值，它定义了对值的常量引用。因此我们不能更改常量原始值，但是可以更改常量对象的属性。

const car = {type:"porsche", model:"911", color:"Black"};

// 可以更改属性：
car.color = "White";

// 可以添加属性：
car.owner = "Bill";

对于car对象的引用始终没有该改变，所以我们可以改变对象的属性和值，同理对于集合也可以进行正常的操作。

六、JS运算

6.1 算数运算

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
--	递减

6.2 赋值运算

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

6.3 字符串级联运算

常规字符串运算：

txt1 = "aa";
txt2 = "bb";
txt3 = txt1 + " " + txt2; 
//aa bb

txt1 = "Hello ";
txt1 += "Kitty!"; 
//Hello Kitty!

字符串和数学相加：

如果是字符串和数字的运算，则输出结果为字符串

x = 7 + 8;          //15
y = "7" + 8;        //78
z = "Hello" + 7;    //Hello7

6.4 比较运算

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
? ：	三元运算符

6.5 逻辑运算

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

6.6 类型运算

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

6.7 位运算

位运算符处理32位数。

该运算中的任何数值运算都会被转换成32位的数，结果会被转换回JavaScript数。

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
\|	或	5 \| 1	0101 \| 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2