JS前端脚本-基础知识点

素颜马尾好姑娘i 2023-02-20 13:57 38阅读 0赞

### 1、java script ###

JavaScript用于网页和用户的交互的脚本语言

### 2、html引入js的方式 ###

javascript代码必须放在script标签中，一旦加载，就会执行。  
如果有多段Script代码，就会按照从上到下，顺序执行。

#### a.在html的内部引入 ####

在body的最后一行

#### b.外部js ####

当JavaScript代码特别多时，并且都写在html里的时候，会显得比较复杂，难以维护。这时候将JavaScript代码剥离出来，单独放在一个文件中，在html中引用该文件即可。  
创建外部js文件，在html内引入

### 3、控制台的输出 ###

console.log(内容)；可在浏览器的控制台输出内容

### 4、js变量和数据类型 ###

#### a.变量声明 ####

var varName;  
let varNmae;

#### b.变量赋值时确定变量类型 ####

值的类型决定了变量的类型，并且可以改变。  
基本的数据类型：

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>undefined</td> 
   <td>声明了但是未赋值</td> 
  </tr> 
  <tr> 
   <td>Boolean</td> 
   <td>布尔</td> 
  </tr> 
  <tr> 
   <td>Number</td> 
   <td>数字</td> 
  </tr> 
  <tr> 
   <td>String</td> 
   <td>字符串</td> 
  </tr> 
  <tr> 
   <td>var</td> 
   <td>动态类型</td> 
  </tr> 
  <tr> 
   <td>typeof</td> 
   <td>变量类型判断</td> 
  </tr> 
  <tr> 
   <td>null</td> 
   <td>空/对象不存在</td> 
  </tr> 
 </tbody> 
</table>

#### c.将字符串转化成数值类型 ####

JavaScript分别提供内置函数parseInt()和parseFloat()，将字符串转化为数值  
注意：如果被转化的字符串，同时含有数字和字符，那么parseInt会一直定位数字，直到出现非字符。所以“10abc”会被转化为10

#### d.将字符串转化成布尔类型 ####

使用内置函数Boolean()转换为Boolean值  
当转换字符串时：非空即为true；  
当转化数字时：非0即为true；  
当转换对象时：非null即为true；

### 5、js中的对象 ###

JavaScript中的对象时有着属性和方法的一种特殊数据类型  
常见的对象有数字Number，字符串String，日期Date，数组Array等。

#### a.数字对象 ####

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>new Number</td> 
   <td>创建一个数字对象</td> 
  </tr> 
 </tbody> 
</table>

属性MIN\_VALUE  
属性MAX\_VALUE | 最小值 最大值  
方法toFixed | 返回一个数字的小数表达  
方法valueOf | 返回一个数字对象的基本数字类型

创建一个数字对象：var x = new Number(123);  
toFixed返回一个数字的小数表达：数字对象123通过toFixed(2) 保留两位小数:123.00  
PI 通过toFixed(3) 保留三位小数:3.142

#### b.字符串对象 ####

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>new String()</td> 
   <td>创建字符串对象</td> 
  </tr> 
  <tr> 
   <td>属性 length</td> 
   <td>字符串长度</td> 
  </tr> 
  <tr> 
   <td>方法 charAt charCodeAt</td> 
   <td>返回指定位置的字符</td> 
  </tr> 
  <tr> 
   <td>方法 concat</td> 
   <td>字符串拼接</td> 
  </tr> 
  <tr> 
   <td>方法 indexOf lastIndexOf</td> 
   <td>子字符串出现的位置</td> 
  </tr> 
  <tr> 
   <td>方法 substring</td> 
   <td>截取一段子字符串</td> 
  </tr> 
  <tr> 
   <td>方法 split</td> 
   <td>根据分隔符，把字符串转换为数组</td> 
  </tr> 
  <tr> 
   <td>方法 replace</td> 
   <td>替换子字符串</td> 
  </tr> 
 </tbody> 
</table>

#### c.数组对象 ####

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>new Array</td> 
   <td>创建数组对象</td> 
  </tr> 
  <tr> 
   <td>属性 length</td> 
   <td>数组长度</td> 
  </tr> 
  <tr> 
   <td>for / for in</td> 
   <td>遍历一个数组</td> 
  </tr> 
  <tr> 
   <td>方法 concat</td> 
   <td>连接数组</td> 
  </tr> 
  <tr> 
   <td>方法 push pop</td> 
   <td>分别在最后的位置插入数据和获取数据(获取后删除)</td> 
  </tr> 
  <tr> 
   <td>方法 unshift shift</td> 
   <td>分别在最开始的位置插入数据和获取数据(获取后删除)</td> 
  </tr> 
  <tr> 
   <td>方法 splice</td> 
   <td>删除和插入元素</td> 
  </tr> 
 </tbody> 
</table>

int len = arr.length //获取数组的长度（数组中元素的数量）  
arr.push(item); //尾部追加元素（自动扩展）  
arr.splice(beginIndex,howManyToDelete,\[item…\])  
//从beginIndex（inclusive）开始删除howManytoDelete个元素，并插入item…，如果howManytoDelete为0，则默认为插入操作；  
如果item为空，则默认为删除操作  
var peak=arr.pop() //获取并删除最后一个元素(类似于弹夹)  
var top=arr.shift() //获取并删除第一个元素（类似于队列）  
var str = arr.join(joinStr); //使用指定的joinStr将所有数组元素连成一个字符串

数组遍历：  
遍历有两种方式  
1.结合for循环，通过下标遍历  
2.使用增强for in循环遍历  
需要注意的是，在增强for in中，i是下标的意思。  
for(i in x)\{ //for in 循环  
p(x\[i\]);  
\}  
1、使用普通的for循环遍历数组  
for(i=0;i<x.length;i++)\{ //普通for循环  
p(x\[i\]);  
\}  
2、使用增强for循环遍历数组  
for(i in x)\{ //for in 循环  
p(x\[i\]);  
\}

#### d.日期对象 ####

JavaScript使用Date对象表示日期

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>new Date</td> 
   <td>创建日期对象</td> 
  </tr> 
  <tr> 
   <td>getFullYear / getMonth / getDate</td> 
   <td>年/月/日</td> 
  </tr> 
  <tr> 
   <td>getHours / getMinutes / getSeconds / getMilliseconds</td> 
   <td>时:分:秒:毫秒</td> 
  </tr> 
  <tr> 
   <td>getDay</td> 
   <td>一周的第几天</td> 
  </tr> 
  <tr> 
   <td>getTime</td> 
   <td>经历的毫秒数</td> 
  </tr> 
  <tr> 
   <td>setFullYear / setMonth / setDate / setHours / setMinutes / setSeconds</td> 
   <td>修改日期和时间</td> 
  </tr> 
 </tbody> 
</table>

#### e.自定义对象 ####

1、通过new Object()创建一个对象  
2、通过new Object创建对象有个问题，就是每创建一个对象，都得重新定义属性和函数。这样代码的重用性不好  
那么，采用另一种方式，通过function设计一种对象。 然后实例化它 。  
这种思路很像Java里的设计一种类，但是 javascript没有类，只有对象，所以我们叫设计一种对象