JavaScriptDay1

1.什么是JavaScript

1.1 概述

JavaScript是一门世界上最流行的脚本语言

Java、JavaScript

一个合格的后端人员，必须要精通JavaScript

2.快速入门

2.1、引入javaScript

内部标签
```
<script>
	//...
</script>	
```
外部引入

abs.js
```
//...
```
test.html
```
<script src="abs.js"></script>
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--&lt;!&ndash;  script标签内，写JavaScript代码&ndash;&gt;-->
<!--  <script>-->
<!--    alert('hello,world');-->
<!--  </script>-->


<!--  外部引入-->
<!--  注意：script标签必须成对出现-->
  <script src="js/qj.js"></script>

<!--  不用显示定义type，默认就是JavaScript-->
  <script type="text/javascript">

  </script>
</head>
<body>


<!--也可以写在这里-->
</body>
</html>

2.2、基本语法入门

<!--JavaScript严格区分大小写！-->
  <script>
    // 1.定义变量  变量类型 变量名 = 变量值
    var score = 1;
    // alert(num);
    // 2.条件控制
    if(score>60 && score<70){
      alert('60~70')
    }else if(score>70 && score<80){
      alert('70~80')
    }else{
      alert('other')
    }

    //console.log(score) 在浏览器的控制台打印变量！
  </script>

浏览器必备调试须知：

2.3、数据类型

数值，文本，图形，音频，视频......

变量

var

number

JavaScript不区分小数和整数，Number

123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大

字符串

‘abc’ "abc"

布尔值

true false

逻辑运算

&& 两个都为真，结果为真

|| 一个为真，结果为真

！ 真即假 ，假即真

比较运算符！！！重要！

=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果才为true）

这是一个JS 的缺陷，坚持不要使用==比较

须知：

NaN === NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

console.log((1/3) === (1-2/3))
false

尽量避免使用浮点数进行运算，存在精度问题

null和undefined

null 空
undefined 未定义

数组

Java的数组是一系列相同类型的对象~，JavaScript中不需要这样！

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];

new Array(1,2,3,4,5,'hello',null,true)

取数组下标：如果越界了显示undefined

对象

对象是大括号，数组是中括号

每个属性之间用逗号隔开，最后一个不需要添加

<script>
    var person = {
      name:"yaning",
      age:23,
      tags:['js','java','web']
    }
  </script>

2.4、严格检查模式

<script>
    //全局变量 下面代码如果再次定义i 容易出错
	i = 1;
</script>

<!--
  前提：IDEA 需要设置支持ES6语法
  'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
  必须写在JavaScript的第一行！
  局部变量建议都使用 let 去定义~
  -->
  <script>
    'use strict';
    //局部变量 ES6 let
    let i = 1;
  </script>

3.数据类型

3.1、字符串

正常字符串我们使用单引号或双引号包裹

注意转义字符 \

\'
\n
\t
\u#### Unicode 字符
\x41 Ascll字符

多行字符串编写

//tab上面的键
var msg = `
hello
world
你好
`

模板字符串

<script>
    'use strict';
    let name = 'yaning';
    let age = 3;
    let msg = `你好呀，${name}`
  </script>

字符串长度
```
str.length
```
字符串的可变性，不可变

大小写转换

//注意，这里是方法，不是属性了
student.toUpperCase() //变成大写
student.toLowerCase() //变成小写

student.idnexOf('t') 索引 t 的位置

substring

//[)
studnet.substring(1) //从第一个字符串截取到最后一个字符串
student.substring(1,3) //[1,3)

3.2、数组

Array可以包含任一的数据类型

var arr = [1,2,3,4]
arr[0] = 1

长度
```
arr.length
```
注意：可以给长度赋值，数组大小会发生变化，如果赋值过大会填充空值，如果赋值过小，元素会丢失后面的值
indexOf，通过元素获得下标索引

字符串的 "1" 和数字1是不同的
slice() 截取Array的一部分，返回一个新数组，类似于String中的substring

push() pop() 尾部

push: 压入到尾部
pop: 弹出尾部的一个元素

unshift() shift() 头部

unshift: 压入到头部
shift: 弹出头部的一个元素

排序 sort()

(3) ['A', 'C', 'B']
arr.sort()
(3) ['A', 'B', 'C']

元素反转 reverse()
concat()

注意：concat() 并没有修改数组，只是返回一个新的数组

连接符join

打印拼接数组，使用特定的字符串连接
多维数组

数组：存储数据（如何存，如何取，方法都可以自己实现）

3.3、对象

若干个键值对

var 对象名 = {
    属性名： 属性值，
    属性名： 属性值，
    属性名： 属性值
}

var person = {
    name:"yaning",
    age: 23,
    score: 0
}

JavaScript中对象，{......}表示一个对象，键值对描述属性 xxx：xxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

JavaScript中的所有的键都是字符串，值是任意对象！

对象赋值
使用一个不存在的对象属性，不会报错！ undefined
动态的删减属性，通过delete删除对象的属性
动态的添加，直接给新的属性添加值即可

判断属性值是否在这个对象中！ xxx in xxx！

'age' in person
true
//继承
'toString' in person
true

判断一个属性是否是这个对象自身拥有的hasOwnProperty()

toString是其父类的属性 age是自身的属性

3.4、流程控制

if 判断

var age = 3;
if(age>3){ //第一个判断
    alert("haha")
}else if (age<5){ //第二个判断
    alert("nihao")
}else{ //否则
    alert("kuwa~")
}

while循环，避免死循环

var age = 3;
while(age<100){
    age = age + 1;
    console.log(age)
}

do{
    age = age + 1;
    console.log(age)
}while(age<100)

for循环

var age = 3;
for (let i = 0; i < ; i++) {
    console.log(i)
}

forEach循环

var age = [1,2,3,4,5,9];
//函数
age.forEach (function (value) {
    console.log(value)
})

3.5、Map和Set

ES6的新特性

Map:

//ES6 Map
//学生的成绩，学生的名字
// var names = ["tom","jack","haha"];
// var scores = [100,90,80];
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('jack');

Set:无序不重复的集合

3.6、iterator

迭代器（Iterator）
- 是一个具有 next() 方法的对象
- next() 方法返回一个包含value（当前值）和 done（是否完成）的对象
可迭代对象（Iterable）
- 具有 Symbol.iterator 属性的对象
- Symbol.iterator是一个返回迭代器的函数
- 原生可迭代对象：数组、字符串、Map、Set

遍历数组：

通过 for of 遍历数组元素 for in遍历数组下标

遍历map：

遍历set：

posted @ 2025-10-13 15:18 齐天大圣951 阅读(11) 评论(0) 收藏举报

刷新页面返回顶部

Sunyn-blogs