前端——JS基础

JavaScript

JS：轻量级的客户端脚本编程语言

1. 编程语言
   html和css是标记语言
   编程语言是具备一定的逻辑的，拥有自己的编程思想（面向对象编程【OOP】，面向过程编程）
   ——面向对象：C++，Java，PHP，C#，JS
   ——面向过程：C
2. 目前JS不仅仅是客户端语言，基于NODE可以做服务器端程序，所以JS是全栈编程语言
3. 学习JS，学习它的及部分组成

JS的组成以及ES

1.JS组成

• ECMAScript（ES）：描述了该语言的核心语法和基本对象
• DOM：document object model 文档对象模型，描述处理网页内容的方法和接口，提供各种API（属性和方法）让JS可以获取或者操作页面中的HTML元素（DOM和元素）
• BOM：browser object model 浏览器对象模型，描述于浏览器进行交互的方法和接口，提供各种API让JS可以操作浏览器

2.ESMAScript

它是JS的语法规则，JS中的变量、数据类型、语法规范、操作语句、设计模式等等都是ES规定的
ES3.0被广泛应用， ES5 和ES6 没差太多

创建变量

1.变量（variable）

它不是具体的值，只是一个用来存储具体值的容器或者代名词，因为它存储的值可以改变，所以称为变量

2.创建变量的六种方式

基于ES的语法规范，在JS中创建变量有以下方式：

1. var（ES3）
2. function（ES3） 创建函数（函数名也是变量，只不过存储的值是函数类型的）、
3. let（ES6）
4. const（ES6）创建常量，常量的值不能被修改
5. import（ES6）基于ES6的模块规范导出需要的信息
6. class（ES6）基于ES6创建类

代码示例：

var[变量名]=值;
let[变量名]=值;
const[变量名]=值;
function 函数名(){
      }

const m=100;
m=200;//=>Uncaugght TypeError:Assiqnment to constant variable.不能给常量重新赋值

3.创建变量的命名规范

1. 严格区分大小写
2. 遵循驼峰命名法：按照数字、字母、下划线或者$来命名（数字不能作为名字的开头），命名的时候基于英文单词拼接成一个完整的名字（第一个单词字母小写，其余每一个有意义单词的首字母都大写）
3. 一般下划线在前面的，都是公共变量；$在前面的一般存储的是JQ元素
4. 语义化强一些：add/create/insert/del(delete)/update/remove(rm)/info/detail/log
5. 不能使用关键字和保留字：在JS中有特殊含义的叫做关键词，未来可能会成为关键字的叫做保留字

数据类型

1.数据类型的分类

数据值是一门编程语言进行生产的材料，JS中包含的值有以下这些类型

1. 基本数据类型（值类型）
   （1）数字number
   （2）字符串string
   （3）布尔boolean
   （4）null
   （5）undefined
2. 引用数据类型
   （1）对象object：普通对象 / 数组对象 / 正则对象 / 日期对象 / …
   （2）函数function
3. ES6中新增加的一个特殊的类型：Symbol，唯一的值

2.各数据类型的特点

代码示例：

[基本数据类型]
var n=13;//=>0  -13  13.2  NaN   数字类型
var s='';//""  '13'  "{}"   字符串类型
var b=true; //  布尔类型

[引用数据类型]
var o={
   name:'xiaziyi',age:20};  //普通对象
var ary=[12,23,34,45];  //数组对象
var reg=/-?(\d|([1-9]\d+))(\.\d+)?/g;  //正则对象  验证是否为有效数字的正则
function fn(){
     }  //函数对象
//Symbol类型
var a=Symbol('xiaziyi')
var b=Symbol('xiaziyi')
a==b =>false

1.数字类型：中有一个特殊的值NaN（not a number代表不是一个有效的数字，但是属于number类型的）
2.字符串类型：JS中所有用单引号或者双引号包裹起来的都是字符串，里面的内容是当前字符串中的字符（一个字符串由零到多个字符组成）
3.布尔类型：只有两个值 true真 false假
4.普通对象：由大括号包裹起来，里面包含多组属性名和属性值（包括多组键值对） { }空对象
5.数组对象：中括号包裹起来，包含零到多项内容 [ ]空数组
6.正则对象：由元字符组成一个完整的正则 / /不是空正则是单行注释
7.Symbol类型:创建出来的一个唯一的值

3.****扩展：JS代码如何被运行以及运行后如何输出结果

• 如何被运行
  1.把代码运行在浏览器中（浏览器内核来渲染解析）
  js代码写在<script></script>里面
  或者当前项目新建一个js文件1-printvar a=12; alert(a)；下然后在html里面引入 <script src="js/1-print.js"></script>
  2.基于NODE来运行（NODE也是一个基于V8引擎渲染和解析JS的工具，不是语言）
  var a=12; console.log(a);
• 运行后如何输出
  1.alert：在浏览器中通过弹框的方式输出（浏览器提示框）
  注意：！！！基于alert输出的结果都会转化为字符串：把值（如果是表达式先计算出结果）通过toString这个方法转换为字符串，然后再输出！！！

var num=12;
alert(num); // =>window.alert

var str="xiaziyi";
alert(str);

alert(1+1);  =>输出'2'
alert(true); =>'true'
alert([12,23]); =>'12,23'
alert({
   name:'xxx'}); =>'[object Object]'

拓：为什么所有对象toString之后变成’[object Object]’？

toString()函数的作用是返回object的字符串表示，JavaScript中object默认的toString()方法返回字符串”[object Object]“。定义类时可以实现新的toString()方法，从而返回更加具有可读性的结果。JavaScript对于数组对象、函数对象、正则表达式对象以及Date日期对象均定义了更加具有可读性的toString()方法：

array的toString()	将返回以逗号分隔的数组成员。比如，[1,2,3].toString()会返回字符串”1,2,3″
function的toString()	将返回函数的文本定义。比如，(function(x){return x2;}).toString()会返回字符串”function(x){return x2;}”
RegExp的toString()	与function的toString()方法类似，将返回正则表达式的文本定义。比如，/\d+/g.toString()会返回字符串”/\d+/g”
Date的toString()	将返回一个具有可读性的日期时间字符串。

2.confirm：和alert的用法一致，输出结果也是字符串，差别在于提示的框中有确定和取消两个按钮，所以它是确认提示框
但是var flag=confirm(num); alert(flag);接受当前

var flag=confirm('确定要退出吗？');
if(flag){
   
//=>用户点击确定按钮
}else{
   
//=>用户点击取消按钮
}

3.prompt：在confirm的基础上增加输入框（一般不怎么用）
4.console.log：在浏览器控制台输出日志（按F12（Fn+F12）打开浏览器的控制台）

(1)Elements：当前页面中的元素和样式在这里都可以看到，还可以调节样式修改结构等
(2)Console：控制台，可以在JS代码中通过.log输出到这里，也可以在这里直接编写JS代码
(3)Sources：当前这个网站的源文件都在这里
(4)…

console.dir：比log输出的更加详细一些（尤其是输出对象数据值的时候）
console.table：把一个JSON数据按照表格的方式输出

number数据类型详细剖析

1. number数据类型

NaN：not a number 但是它是数字类型的
isNaN：检测当前值是否不是有效数字，返回true代表不是有效数字，返回false是有效数字 语法：isNaN([value])

isNaN('13'); =>flase
isNaN(true); =>flase
isNaN(false); =>flase
isNaN(null); =>flase
isNaN(undefined); =>true
isNaN({
   age:9}); =>true
isNaN([12,23]); =>true
isNaN([12]); =>flase
isNaN(/^$/); =>true
isNaN(function( ){
    }); =>true

isNaN检测的机制：

1. 首先验证当前要检测的值是否为数字类型的，如果不是，浏览器会默认的把值转化为数字类型
   把非数字类型的值转换为数字
   （1）其他基本类型转换为数字：直接使用Number这个方法转换的
   [字符串转数字]
   Number('13')->13
Number('13px')->NaN 如果当前字符串中出现任意一个非有效数字字符，结果则为NaN
   Number('13.5')->13.5 可以识别小数
   [布尔转数字]
   Number(true)->1
Number(false)->0
   [其他]
   Number(undefined)->NaN
Number(null)->0
   （2）把引用数据类型转换为数字：先把引用值调取toString转换为字符串，然后再把字符串调取Number转换为数字
   [对象]
   ({}).toString()->'[object Object]'->NaN
   [数组]
   [12,23].toString()->'12,23'->NaN
[12].toString()->'12'->12
   [数组]
   /^$/.toString()->'/^$/'->NaN
   ！！注意！！：
   Number（‘’）->0
[ ].toString()->' '
=>isNaN([ ]):false

2. 当前检测的值已经是数字类型，是有效数字返回false，不是返回true（数字类型中只有NaN不是有效数字，其余都是有效数字）

2. parseInt / parseFloat

等同于Number，同样是为了把其他类型的值转换为数字类型
和Number的区别在于字符串转换分析上

Number：出现任意非有效数字字符，结果就是NaN
parseInt：把一个字符串中的整数部分解析出来
parseFloat：是把一个字符串中小数（浮点数）部分解析出来

注意： 从字符串最左边字符开始查找有效数字字符，并且转换为数字，但是一旦遇到一个非有效数字字符，查找结束

parseInt('13.5px') =>13
parseFloat('13.5px') =>13.5
parseInt('width:13.5px') =>NaN  

3. NaN的比较

NaN和谁都不相等，包括自己

NaN==NaN:false

检查一个变量num存储的值是否为一个有效数字，只能使用 if (isNaN（num）)

布尔数据类型

• 只有true false 两个值

• 将其他数据类型转换为布尔类型
  （1）Boolean
  （2）！ 先转布尔再取反
  （3）！！等于没取反，直接转换为布尔类型

• 注意： JS中只有 0 NaN 空字符串 null undefined 这五个值转换为布尔类型的false，其余转换为true

undefined数据类型

null 和 undefined 都代表空或者没有
null：空对象指针 一般都是人为手动的先赋值null，后面的程序中我们会再次给他赋值
undefined：未定义 不是人为手动控制，大部分都是浏览器自主为空，后面的程序中可以赋值也可以不赋值

object对象数据类型

如何理解对象（借鉴）

• 所谓对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成。
  键名与键值之间用冒号分隔。如果对象内部包含多个键值对，每个键值对之间用逗号分隔。
• 从两个层次来理解：
  （1）“对象”是单个实物的抽象。
  一本书、一辆汽车、一个人都可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。当实物被抽象成“对象”，实物之间的关系就变成了“对象”之间的关系，从而就可以模拟现实情况，针对“对象”进行编程。
  （2）“对象”是一个容器，封装了“属性”（property）和“方法”（method）。
  所谓“属性”，就是对象的状态；所谓“方法”，就是对象的行为（完成某种任务）。比如，我们可以把动物抽象为animal对象，“属性”记录具体是那一种动物，“方法”表示动物的某种行为（奔跑、捕猎、休息等等）。
• 其次，典型的面向对象编程语言（比如C++和Java），存在“类”（class）这样一个概念。所谓“类”就是对象的模板，对象就是“类”的实例。JavaScript语言没有“类”，而改用构造函数（constructor）作为对象的模板。
• 前面说过，“对象”是单个实物的抽象。所以，通常需要一个模板，表示某一类实物的共同特征，然后“对象”根据这个模板生成。
  所谓“构造函数”，就是专门用来生成“对象”的函数。它提供模板，作为对象的基本结构。一个构造函数，可以生成多个对象，这些对象都有相同的结构。
• 普通对象：
  1.由大括号包裹起来的
  2.由零到多组属性名和属性值（键值对）组成

属性是用来描述当前对象特征的，
属性名是当前具备这个特征，属性值是对这个特征的一个描述
（专业语法：属性名称为键【key】,属性值称为值【value】，一组属性名和属性值称为一组键值对）

对像的常规操作（对键值对的增删改查）

var obj={
   
name:'xiaziyi',
age