前端-js-基础知识学习笔记

---

什么是javaScript?
javaScript是一种基于对象和事件驱动的、运行在客服端的脚本语言

javaScript的特点?

• 是一种解释性脚本语言（代码不进行 预编译).
• 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
• 可以直接嵌入HTML页面，我建议单独写js文件有利于结构和行为的分离

javaScript的组成?

• ECMAScript ：是javascript语法，规定了js的编辑语法和基础核心知识
• DOM：页面文档对象模型 ，对页面元素进行操作
• BOM：浏览器对象模型，对浏览器窗口操作

javaScript的运用环境?

1. 表单动态校验
2. 网页特效
3. 服务端开发
4. 桌面程序、app
5. 控制物件
6. 游戏开发

三种书写方式：行内式、内嵌式、引入外部js

1. 行内式：

/* 当我们点击按钮输入唐伯虎时浏览器会弹出提示框*/
 <input type="button" value="唐伯虎" οnclick="alert('秋香姐')">

2. 内嵌式：

  <script>
        alert('hahah');//这里书写js代码
    </script>

3. 引入外部js：

<script src="js文件路径"></script> 

输入与输出

弹出输入框: prompt(‘请输入你的姓名’);
弹出输出 alert (‘计算机结果是’);展示给用户的;
输出到控制台 console.log (‘我是程序员能看到的’);

js变量

变量：就是用来存放数据的容器，本质上就是程序在内存中申请了一块用来存放数据的空间，
变量的使用： 先定义、后使用

var age; //申明一个变量名age的变量
age=10;  // 给变量名赋值
var myname='pink老师'//变量的初始化

注意事项：

• 更新变量：一个变量被重新赋值后，它原来的值就被覆盖了。
• 多个变量之间要用逗号隔开
• 声明变量的特殊性（这个就自己下去了解吧），我建议还是按照变量使用规则来。
• 变量命名：由数字 字母 下划线，美元符号💲组成、严格区分大小写、不能以数字开头、不能是关键字、保留字 比如var name、变量名必须有意义、遵守驼峰命名法：首字母小写，后面单词的首字母需要大写 myFirstName

js数据类型（分为简单数据类型和复杂数据类型 ，这里就先介绍简单数据类型）

简单数据类型包括：Number数字型、String字符串型、Boolean布尔型、Undefined 和 null

数字型：

1、数值型进制的表示
2、这里介绍一个方法：isNaN()用来判断非数字，并且返回一个值，如果是数字就返回false，不是数字就返回ture。

String字符串型：

1.字符串引号嵌套 ：js可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

<script>
alert ('您真好看“\t”呀');
</script>

2.字符串长度length

var str='123';
console.log (str.length)//输出字符串的长度，也就是字符串里面的数据个数

3.字符串拼接 +

特点：
任何数据类型都可以拼接成一个字符串类型
只要有字符串+其他数据类型最后都是字符串

//口诀：数值相加，字符相连
console.log('沙漠'+'骆驼');// 拼接成一个字符串沙漠骆驼

//变量不要写到字符串里面，通过和字符串拼接实现 引引加加的方式更方便哟！
 var age=18;
console.log ( 'pink老师'+age +‘岁’);【引引加加】

Boolean类型：
true（在参与运算时值为1）、false （在参与运算时值为0）

Undefined / null类型：

underfined 和数字相加结果是NaN
null 和数字相加结果是数字
underfined |null 和字符串相加结果是字符串拼接

数据类型的转换
在学习如何数据类型转换前，我们是不是要先知道它是那种数据类型呢？
利用typeof 获取变量的数据类型

var num=10；
console.log(typeof num);//检测num是什么数据类型

• 转换为字符串类型

方法：
1、toString()
2、String()强制转换
3、加号拼接字符串 这种放大也是经常用到的，也称为隐式转换

举例：

var num =1;

//toString方法
console.log (num.toString());

//String强制转换
alert(String（num））;

//加号拼接字符串
 alert(num+" ");

• 转换成数值型

方法：
1、parselnt(string)函数 ⚠️转换的是取整，后面带px单位时则会去掉px
2、parseFloat(string)函数 ⚠️字符型转换成数字型，包括小数
3、Number()强制转换函数
4、js隐式转换（ - * /)

举例：

/*parselnt(string)转换*/

parselnt(age);
parselnt('12');
parselnt('120px'); //可以直接去掉单位 结果120

/*parseFloat(string)转换*/

parseFloat(‘2.14’);

/*Number()强制转换函数*/

Number(变量);
Number('123');

/*js隐式转换（ -  *  /) */

console.log('12' - 0);//12

• 转换成Boolean型

代表空、否定的值会被转换成false 比如’’ 和 0、NaN、null、undefined
其余的值都会被转换成true
Boolean()函数

举例

    //转化成布尔类型
        var info1 = '你好,未来';
        var info2 =' ';
        var info3 ='0';
        console.log(Boolean(info1)); 
        console.log(Boolean(info2));
        console.log(Boolean(info3));
        

运算符

1. 算数运算符（浮点数最好不要进比较）
2. 递增递减运算符

前置递增和后置递增单独使用效果是一样的
1、++age = age=age+1 前置递增：先自加后返回值
2、age++ = age=age+1 后置递增：先返回原值 后自加

3. 比较运算符

<

=
<=
== 判断 会转型 console.log(18==‘18’)结果是true 默认转换数据类型，这里会把字符串转换成数值型
!=
=== 全等 就是一模一样，要求两边的值还有数据类型要相等
!== 不全等于

4. 逻辑运算符 & || ！

逻辑中断的原理：当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值
语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

逻辑中断的原理：当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值
语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1 后面就不用计算了
如果第一个表达式的值为假，则返回表达式2

5. 赋值运算符

= 直接赋值
+=、-= num+=2相等于num=num+2
*= 、=、%= num =2相等于num=num2

运算符优先

流程控制
流程控制分类：顺序结构、分支结构、循环结构
顺序结构：很简单就是按照我们书写代码的先后顺序来执行
分支结构 ：
根据不同的条件执行不同的代码，从而得到最终的结果。
首先在这里介绍两个关键字： break、continue
break 表示立即退出整个循环
continue 表示立即跳出本次循环，继续下一洗循环 （本次循环体中continue之后的代码就会少执行一次）

• if语句

1、
if（条件表达式） {
//执行语句
}
else {
//执行语句
}

2、多分支语句 多选一
if（表达式1） {
/ /若条件符合执行的代码；
}
else if (表达式2) {
}
。
。
。
else {
最后的语句;
}

• 三元表达式
  如果表达式结果为真就执行表达式1，如果表达式结果为假就执行表达2. 一定会有个返回值

条件表达式 ？ 表达式1 ：表达式2;

• switch语句

多支语句
针对一系列特定的值的选项时

switch (表达式){
case value1:
执行语句1;
break;//退出循环
case value2:
执行语句2;
break;
…
default:
执行最后的语句;
}
⚠️ 表达式经常写变量 变量的值与case里面的值匹配时候要是全等的

数组
概念：数组可以把一组数据存储起来 ，是一组数据的集合
其中的每一个数据被称作元素，在数组中可以存放任意类型的元素。 数组是一种将一组数据存储在单个变量名下的优雅方式

创建数组的方式

• 利用new创建数组
  Array第一个字母一定要大写

var arr =new Array();//创建量一个空的数组

• 利用数组字面量创建数组
  数组里面的数据一定要用逗号分隔，里面的数据叫数组元素

var 数组名 =[ ] ; //使用数组字面量方式创建的数组
var 数组名 = [ '小白'，‘小黑’] //带初始值的数组

获取数组元素

• 利用索引的方式
  索引就是也就是数组的下标，用来访问数组里面的数据 下标是从0开始的

格式 数组名 [ 索引号]

var arr=[1,2,3,4,5];
console.log (arr[0]);//这里得到的就是数组arr里面的第一个数据 1

遍历数组

如果需要将数字里面的元素全部取出来，除了利用索引的方式，还有什么简单的方法吗？肯定有啦 答案就是循环在读取里面的内容的时候，此时需要知道数组的长度，那么我们又用到了length这个属性啦 它能够动态检测数组元素的个数
直接上才艺！

       var arr=[2,6,1,77,52,25,7];
       for (var i=0 ;i<arr.length;i++) {
                console.log(arr[i]);
        }

新增数据元素的方法

• 修改length的长度来实现数组扩容

length 可读写的
arr.length =5 // 将数组的长度修改为5 默认值undefined

        var arr=[1,3,'pink'];
         arr.length=4;
        console.log(arr);

效果图 可以看到数组的长度为4 增加了一个空间，但是里面没有赋值 所以就是空的，后期自己赋值就可以了

• 利用索引号追加数组元素

arr[5]=‘pink;
如果里面有索引，就是替换数组元素
不要直接给数组名赋值，否则里面的数据都没有了

    var arr = [1, 3, 'pink'];
        arr[3]=1;
        console.log(arr);

通过索引的方式就直接给数组又赋了一个值，数组的长度发生变化了，一定要注意不能直接给数组名赋值哟



接下来我们就来看两个典型的例子，检测你到底懂了没

1、冒泡排序 从小到大排列

这里需要明白的内容就是两个数如何交换位置，就是通过第三个变量，临时存储的方式 ，所以我们要申明一个temp变量作为中间变量
结果图：

代码：

var arr=[5,4,3,2,1];//申明一个数组并赋初值
var temp=0; // 用于后面两个值进行交换时，中间变量
for(var i = 0; i < arr.length-1; i++) {//这个循环是判断数组总共要比较多少趟
    for(var j = 0;j < arr.length-i-1;j++) { //里面的每个数据要比较的次数
       if(arr[j]>arr[j+1]) { //当前的值大于后面的值时，执行下面的语句进行交换位置，就要利用到我们的第三方变量 
          temp=arr[j];
          arr[j]=arr[j+1];
          arr[j+1]=temp;
       }
    
    }
    
}
  console.log(arr);

1、乘法表

其实代码很简单，就是思路要清楚明了
结果图：

代码：

var num='';
for(var i=1; i <= 9 ;i++) { //这里是控制有9行
  for(var j=1 ;j <= i) { //这里是控制每行有多少个
     num =num + j + '*' + i + '=' + j * i + '\t';
  }
  num=num + '\n' ;//里面的循环完了就添加一个换行
}
console.log(num);