JavaScript

JavaScript是脚本语言，编程语言 解释性语言 单线程的

浏览器的内核

• 谷歌浏览器 Webkit内核（v8引擎）Blink
• 火狐浏览器 Gecko内核
• 欧朋浏览器 Presto内核
• IE浏览器 Trident内核
• Safari浏览器 Webkit内核(发明者)

导入JavaScript的三种方式

• 行内使用
• 内联方式
• 外部引入

内嵌导入和外链导入不能合并在一起，如果当前是外链导入的，那么在Script脚本块中编写的所有代码都不会被执行，js代码一般放在body的末尾，要先保证元素的加载成功，才可以在js中获取到。

---

JavaScript的三部分组成

• ECMAScript(ES):规定了js的一些基础核心的知识(变量，数据类型，语法规范，操作语句等)
• DOM：document object model 文档对象模型，里面提供了一些属性和方法，可以让我们操作页面中的元素
• BOM：browser object model 浏览器对象模型，里面提供了一些属性和方法，可以让我们操作浏览器

---

JavaScript数据类型

基本数据类型（值类型）

• number： 数字
• string： 字符串 => 使用单双引号包裹起来的值
• boolean： 布尔 => true false
• null： 空对象指针
• undefined： 未定义

引用数据类型

• object对象数据类型
  • {} 普通对象
  • [] 数组
  • /^$/ 正则
• function函数数据类型 function fn(){};

js数据类型的检测

• typeof: 检测数据类型的运算符
• instanceof: 检测某个实例是否属于这个类
• constructor： 获取当前实例的构造器
• Object.prototype.toString.call: 获取当前实例的所属类信息

typeof
使用typeof检测，返回的结果都是一个<u>''字符串''</u>，字符串中包含的内容证明了值是属于什么类型的，结果有六种，number,string,boolean，object,function,undefined
局限性

• typeof null的结果不是“null“而是“object”：因为null虽然是单独的一个数据类型，但是他原本的意思是空对象指针，浏览器使用typeof检测的时候就会把它按照对象来检测
• 使用typeof无法区分具体的object对象数据类型

typeof 12 => "number"
typeof(12) => "number"
var num = 13;
typeof num => "number"
typeof NaN => "number"
typeof 'zzp' => "string"
typeof true => "boolean"
typeof null => "object"
typeof [1,2,3] => "object"
typeof undefined => "undefined"

boolean布尔

Boolean() 方法 =>把其他类型的值转化为布尔类型

• 只有 0，NaN，空字符串，null，undefined ('没有空格') 这六个数据值转换为布尔类型是false，其余的都是true
• 数字除了0和null，都会转换为true
• 字符串除了空字符串之外都是true
• 对象也会转换为true
• ! 的作用
  • != 不等于
  • 取反：先把值转换为布尔类型，然后再取反
• !! 的作用:再取反的基础上再取反，相当于没有做操作，但是已经吧其他类型的值转化为布尔类型了，和Boolean是相同的效果

string字符串

在js中，单引号和双引号包起来的都是字符串
常用方法：

• a.toString()
• charAt charCodeAt
• substr substring slice
• toUpperCase toLowerCase
• indexOf lastIndexOf
• split
• replace
• match

number数字

类型：0 12 -12 12.5 NaN(not a number) typeof NaN=> "number"
var num = Number.MAX_VALUE --- 数字的最大值
var num = Number.MIN_VILUE --- 大于0的最小值 5e-324
Infinity 正无穷大

• NaN == NaN => false; NaN和任何其他的值都不相等，和任何数相加都是NaN
• 方法：isNaN 用来检测这个值是否是非有效数字，如果不是有效数字检测的结果是true，反之是有效数字则为false

//当我们使用isNaN检测值的时候，检测的值不是number类型的，浏览器会默认的把值先转化为number类型，然后再去检测,如果检测的对象是引用数据类型，需要先使用toSting方法转换为字符串类型，再把字符串转换为number类型，最后再检测
//只有对象类型,NaN,undefined会返回true
isNaN(NaN) => true;
isNaN(undefined) => true;
isNaN() => true;
isNaN({}) => true;
isNaN([]) => false;
isNaN('') => false;
isNaN(0) => false;
isNaN(null) => false;
//数组对象：空数组和一个数组元素都会返回false
isNaN([]) => false;
isNaN([12]) => false;
isNaN([12,13]) => true;
//布尔类型都会转换为false
isNaN(true) => false;
isNaN(false) => false;
//对象类型的都会返回true, null除外
isNaN({}) => true;
isNaN({name:'zzp'}) => true;

• Number() 方法 =>把其他数据类型的值转化为number类型的值

//在使用Number转换的时候只要字符串中出现任何一个非有效数字字符，最后的结果都是NaN
Number() => 0;
Number([]) => 0;
Number({}) => NaN;
Number('') => 0;
Number(0) => 0;
Number(null）=> 0;
Number(undefined) => NaN;
//字符串类型转换为number为数字和NaN
Number('12') => 12;
Number('12px') => NaN;
//布尔类型转换为number是0和1
Number(true) => 1;
Number(false) => 0;
//把引用数据类型转化为number，首先需要先把引用数据类型转为字符串(toString）,再把字符串转换为number即可
//一般对象和正则转换为数字都是NaN
Number([]) => []=>'' ''=>0;
Number([12]) => [12]=>'12' '12'=>12;
Number([12,13]) => [12,13]=>"12,13" "12,12"=>NaN;
Number({name:'zzz'}) => NaN;
Number({}) => NaN;
//可以使用toString方法来转换进制
var num = 128;
num.toString(16); => 80
num.toString(8);  => 200
num.toString(2); => 10000000
//保留小数点之后几位
变量.toFixed(保留的小数点的位数);

• parseInt() 方法=>也是把其他数据类型值转换为number，和Number方法在处理字符串的时候有所区别

//=> 从左到右依次查找有效的数字字符，直到遇见非有效数字字符为止包括小数点，把找到的转换为数字
Number('12px') => NaN;
parseInt('12px') => 12;
parseInt('12px13') => 12;
parseInt('px13') => NaN;
parseInt('12.5px') => 12;
//=> 也可以用来转换进制数
parseInt(a,8); 吧a转换为八进制的数 

• parseFloat() 方法=>在parseInt的基础上可以识别小数点

parseInt('12.5px') => 12;
parseFloat('12.5px') => 12.5;

null和undefined

null undefined 空字符串 0

• 空字符串和null的区别 空字符串开辟了内存，消耗了一丢丢的性能
• null和undefined的区别
  • null一般都是暂时没有，预期中以后会有的。在js中一般都是手动赋值为null，后期我们在给其赋值。
  • undefined：完全没有在预料之内

对象数据类型

每一个对象都是由零到多组属性名(key键)：属性值(value值)组成的，或者说是有多组键值对组成的，每一组组键值中间用逗号隔开

• 属性：描述这个对象特点特征的
  • 对象的属性名是字符串或者数字格式的，存储的属性值可以是任何的数据类型
  • 操作属性的方法：对象名.属性名(忽略了属性名的单双引号) 对象名['属性名'](不能忽略单双引号)
  • 如果操作的属性名在对象中不存在，获取的结果是undefined
  • 一个对象的属性名是不能重复的(唯一性)，如果之前存在就是修改属性值，之前不存在就是设置新的属性
  • 假删除：让其属性赋值为null，但是属性还在对象中；真删除：把整个属性都在对象中暴力移除 delete 对象名.属性名

基本数据类型和引用数据类型的区别

JS是运行在浏览器中的(内核引擎)，浏览器会为JS提供赖以生存的环境(提供给JS代码执行的环境)=>全局作用域window(glibal)

基本数据类型是按值操作的：在赋值的时候，直接把值赋给变量 var a = 12;

• 声明一个变量存储到栈内存变量存储空间中 =>声明
• 创建数值12 存储到栈内存存储空间中
• 让变量a和数值12关联起来。=>就是定义也是赋值

引用数据类型是按照空间地址(引用地址)来操作的：var n = {name:'周'}

• 先创建一个变量n,声明变量存放到栈内存变量存储空间中
• 创建值：由于值比较复杂，不能直接存放到值存储空间中需要先开辟一个新的存储空间(堆内存)16进制地址，把对象的键值对分别存储到栈内存中,函数存储的是代码字符串
• 把空间的地址赋值给了变量 让变量和堆内存中的引用地址进行赋值关联

引用数据类型中的函数：function fn (){ 函数体 }

• 先声明一个函数名，和声明变量一样，先放到栈内存变量存储空间中，如果函数名和之前声明的变量名字一样的话会冲突
• 创建值：先开辟一个新的存储空间(堆内存)16进制地址，里面存放的是函数体中的代码，是用单引号包含的字符串而已
• 把空间的地址赋值给了变量 让变量和堆内存中的引用地址进行赋值关联

---

JavaScript中变量命名规范

• js中严格区分大小写
• 遵循国际命名规则‘驼峰命名法’第一个单词首字母小写，其他的首字母大写
• 命名使用英语，不要使用拼音
• 不能使用关键字和保留字
• 可以使用$ _ 数字 字母，但是不能使用数字作为第一位

---

JavaScript变量和常量

变量:值是可以变的
常量:值是不可变的

//=>JavaScript中定义变量的方式，ES6中定义变量使用let
//变量只能代表一个值
var 变量名; //=> 声明一个变量
变量名 = 值; //=> 赋值
var 变量名 = 值; //=> 定义了一个变量
初始化

//任何一个具体的数据值都是常量，12
//和变量类似，我们设置一个常量，给其存储一个值，但是这个存储的值不能修改
const 常量名 = 值；//=>定义了一个常量，给它存储值为12

变量提升

• JavaScript中，函数及变量的声明都将被提升到函数的最顶部 变量可以在使用后声明，也就是变量可以先使用再声明 函数优先提升
• JavaScript中，只有声明的变量会提升，初始化的不会(就是赋值)

变量作用域

变量有局部变量和全局变量：局部变量只能在被声明的函数内部使用，而全局变量在网页中的所有脚本和函数均可以使用当变量在函数内没有被声明的时候（没有使用var关键字），该变量为全局变量。 函数的参数属于局部变量。变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义

---

JavaScript输出操作(output)

三种提示方式

• alert：在浏览器中弹出一个提示框(提供确定按钮，点击确定弹框消失)当多个alert语句加在一起的时候，可以重复点击，知道最后点完为止。
  • 使用alert提示的信息，提示的内容最后都会被转换为<u>"字符串"</u>输出(调用了tostring这个方)
• confirm：在alert基础上增加了让用户选择性的操作（提供确定和取消按钮）
  • 定义一个变量来接收其返回的值，点击确定返回true，点击取消返回false。我们可以根据接收的结果做不同的处理
• prompt：在comfirm基础上增加让用户输入的效果(提供一个输入框，确定和取消按钮)
  • 用户点击取消按钮，我们得到的结果是null，如果用户点击的是确定按钮，我们将会获取到用户输入的内容(如果用户没有输入任何的内容，获取到的结果是空字符串)
• var as = parseInt(window.prompt(‘input-------提示语’)); 可以提示用户弹框输入数字

真实项目中，尤其是需要样式精美的网站中，我们的提示框一般都是自己封装插件和组件来实现的(使用原生JS封装模态框组件)

控制台输出，开发人员使用

• console.log:在控制台输出，优势是不会转换数据类型，输出什么格式的数据都可以
• console.dir:比log输出的更加详细一些
• console.table:把json数据展示成一个表格

还有哪些console输出方式?

在页面中输出

• document.write('输出内容');
• document.write(“html标签”);
• document.write(变量名);
• document.write(可以输出多项内容 变量+”内容“);

当括号中用引号引起是 直接输出引号里面的内容，输出变量时直接写变量名即，当输出html的时候也用引号括起来。

---

JavaScript运算符

= 赋值，等号左边是变量，右边是值
== 比较，如果左右两边的值的类型不一样，浏览器会默认转换为一样的然后去比较

• 两个等于号比较，左右两边数据值的类型不一样的，会都转换为数字再比较 null undefined NaN 除外
• null==undefind => true; null===undefined; null和undefined和其他任意值都不相等
• 对象和对象[]==[] => false; 比较的是空间的地址 var a={}; var b=a; a==b;=> true;
• 对象和数字[]==0 => true; ({})==NaN => false; 先把对象转换为数字
• 对象和字符串[]=='' => true; 把两边都转化为数字
• 对象和布尔 []==true => false; []==false => true; ![]==false => true;

===: 绝对相等，不仅要求值一样，而且类型也要求完全一样
算术运算符: + - * / ++ -- % 优先级最高
比较运算符: < > <= >= != 最终都会转换为数字来比较

• 任何值和NaN做比较都是false
• 比较两个字符串的时候，先把他转换为ascll码
• 其中的一边为字符串的时候，先把其转换为数字再做比较

逻辑操作符: && || ! 优先级最低
逻辑与( && )： 同真为真 遇假返假 遇真返后
逻辑或( || )： 同假为假 遇真返真 遇假返后

• &&:（与）当两边的表达式同时为真的时候，整个的运算为真 碰到假的时候就直接返回值
  • &&两边的表达式，第一个为false的时候直接返回0 为true的时候返回另一边的值 a=1+1 && 1-1; =>0 两边都为false的时候，则返回前面的值
  • 也可以当作短路语句 当用到一个值的时候，先判断是不是为空，空的话在执行后面的语句 a && 语句;
• ||:（或）当两边的表达式中任意一个为真的时候，运算为真，同时为假的时候，结果为假 碰到真的时候直接返回值
  • ||两边的表达式，第一个为true的时候直接返回1 为false的时候返回另一边的值 a=1+1 || 1-1; =>2

加法的特殊性

• 使用+的时候，不是数字类型的先转化为数字类型
• 再遇到字符串的时候，+不是数学运算，而是字符串的拼接，只要不遇到字符串就是数学运算 1+1+'a'+1=2a1
• 字符串拼接是把其他数据类型的toString是直接吧值用单双引号包含起来，只有对象toString的时候是[object object]
• 任何值和字符串加法运算，都会先转换为字符串，然后进行字符串拼接，

操作符的优先级

• 除了加法运算中的字符串和其他类型的值相加的时候，其他的都会转换为number
• 可以通过用小括号包起来的方式来提高运算的优先级
• 算术运算符=>比较运算符=>逻辑操作符=>=

---

JavaScript判断语句

if,else if,else if(){}else if(){}else{}

• 如果好几个条件成立了，只把第一个成立的条件执行，后面成立的条件忽略不管
• if(A){}如果条件中只有一个固定值，先把他转换为布尔类型，判断中加来决定条件是否成立

三元运算符

• 条件？条件成立执行:条件不成立执行; === if(条件){}else{}
• 条件？条件成立执行:null undefined void 0; 可以使用这些占位
• 当条件成立的时候，如果执行多条操作，可以使用()，每条语句之间用逗号分割
• 在三元运算符中，不能出现break，content，return

switch case
应用于if else中一个变量在不同值情况下的不同操作

• switch 后面小括号中存放的是一个值(一般我们都写变量，把变量存储的值拿来用，有时候也可能是一个计算)
• case 后面放入的都是值，目的是验证switch后面的值和哪一种case后面的值相等，相等的进行对应的处理(也可以是一个计算)
• default 当其他的值都不成立的时候执行
• 每一种case结束的时候，后面都要加 break，结束当前的判断，最后一项可以不加break
• 不加break时，不管后面的条件是否成立，都会继续往下执行，直到遇到break为止
• 把符合某几项值都去做同一件事情，使用不加break实现
• switch case中的比较使用的是:===

---

JavaScript循环

重复做一件事情
continue；=> 结束本轮循环，其之后的代码不会执行，直接去执行步长，继续执行下一轮
break；=> 结束整个循环，其后面的代码都不会执行

while循环 while(条件){循环语句}

• 当条件成立的时候，执行后面的语句，直到条件不满足为止typeof

do...while循环
保证循环体至少执行一次，先执行一遍代码，然后判断条件

for循环

//没有步长累加的时候，会形成死循环，项目中避免
for(循环的起始值,循环的执行条件,步长累加){
//=> 循环体：=重复做的事情都在循环体中
    }

for in循环

• for...in 语句用于对数组或者对象的属性进行循环操作
• for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作

//对象中有多少个键值对，就循环多少次(不一定)
//每一次循环key这个变量存储的都是当前循环这组键值对的属性名
//key存储的额值都是字符串格式的(不管属性名是否为数字)
//在for in 循环遍历的时候，大部分的浏览器先把对象中的键值对进行排序：数字属性名放在前面由大到下排列，其次把非数组按照之前的顺序排列(小数 不算)
 var obj = {name:'zzp',age:'12',1:'ddd',3:'fds'};
 for (var key in obj){}
 //obj['key'] 属性名是key
 //obj[key] key变量存储的值

---

JavaScript函数

函数中有最基本的函数使用function一个函数名来定义，也可以把它赋值给一个变量来使用(函数表达式)，这样使用的时候可以不添加函数名字，所以他也叫做匿名函数。

函数的创建有三种方式

• 使用构造函数: var fun = new Function();
• 使用函数声明: function fun (){}
• 使用匿名函数: var fun = function(){}

OOP：面向对象

• 函数数据类型是按照引用地址来操作的
• 函数：具备一定功能的方法
• 命名规范是小驼峰 theFirstName
• 函数方法体中可以访问外面的变量，外面的不可以访问函数内部的变量
• 函数只创建不执行没有意义：因为在堆内存空间中存储的都是毫无意义的字符串
• 在真实的项目中，我们一般都会把实现一个具体功能的代码封装在函数中：函数封装(类的继承·封装·多态)
  • 如果当前这个功能需要在页面中执行多次，不封装成为函数，每一次想实现这个功能，都需要重新把代码写一遍，浪费时间；而封装在一个函数中，以后想要实现多次的这个功能，我们就没有必要在重新写代码了，只需要把函数重新执行即可，提高了开发效率
  • 封装在一个函数中，页面中就基本上很难出现重复一样的代码了，减少了页面中代码的堆积，提高了代码的重复利用率：低耦合高内聚

//=> 创建函数的语法：相当于生产了一台洗衣机 ===>堆内存存储的都是字符串
//=> 这个叫做函数的声明，命名函数表达式
function 函数名() {
             //=>函数体：实现某一个功能的js代码
          } 
          
//函数执行调用：把函数体中的代码执行=> ===>栈内存
// 1. 浏览器创建一个供函数中代码执行的私有环境(私有作用域)=> 私有作用域中的变量提升
// 2. 把创建的时候空间中存储的字符串拿过来，然后变为真正的JS表达式代码，然后再执行
//=> 执行函数：相当于使用洗衣机洗衣服(如果函数只创建了但是没有执行，函数就没有任何意义)
函数名();  //=> 执行这个函数
函数名;    //=> 输出函数本身 
//函数也可以作为方法调用，如果在对象中定义了方法，调用的时候直接使用 对象名.方法名();来调用

//=> 形参：形式参数(变量)，函数的入口
//=> 实参：函数执行传递给函数具体的值
//=> 当我们创建一个函数想要实现某个功能的时候，发现一些材料并不清楚，只有当函数运行的时候才知道，此时我们就需要设定入口，让用户执行的时候通过入口把值传给我们
//=> 当我们定义了形参但是执行的时候没有传递进去实参，默认参的值是undefined(容错处理)
//=> 
function fn(形参，形参){         };
fn (1,2);

argument实参集合

当我们不知道用户要传递几个值的时候，此时我们无法设置形参的个数：遇到此类需求，需要使用函数内置的实参集合:arguments

• arguments只有函数才有
• 不管执行函数的时候是否传递实参，arguments天生就存在，没有传递实参ARG是个空的集合，传递了ARG中包含了所有穿的实参值
• 不管是否设置了形参，ARG中始终存储了所有的实参信息
• arguments是一个类数组集合
  • 以数字作为索引(属性名)从零开始
  • 有一个length属性，存储的是当前的几个的长度arguments.length argument['length']
  • arguments.callee:存储的是当前函数的本身
  • arguments.callee.caller:存储的是当前函数在哪执行的(宿主函数)，在全局作用域下执行的

返回值return

• 返回值是函数提供的一个出口：如果我们想在外面使用函数私有的一些信息，那就需要通过return，把这些信息返回出来供外面使用
• 如果函数中没有写return或者return后面啥也没有，默认的返回结果是undefined
• 在函数体当中，遇到return之后，后面的代码都不执行了

栈内存

作用域(全局作用域/私有作用域):提供一个供js代码执行的环境

堆内存

所有的引用数据类型，他们需要存储的内容都在堆内存中(相当于一个仓库，目的是存储信息)

• 对象会把键值对存储进来
• 函数会把代码当作字符存储进来

匿名函数

没有名字的函数

• 函数表达式
  • 把一个没有名字的函数作为值赋值给一个变量或者一个元素的某个事件
  • var a = function (){return a};
• 自执行函数
  • 创建函数和执行函数放在一起，创建完成立马执行 ;(函数内容)(传参);
  • ～函数体(实参); 前面可以是 - + ！ ～ 用来控制语法规范

构造函数

对象名使用大驼峰命名规则 就是首字母大写 有new关键字

• 构造函数的首字母必须大写，用来区分于普通函数
• 内部使用的this对象，来指向即将要生成的实例对象
• 使用New来生成实例对象

当定的一个函数的首字母是大写的时候，这个函数就是一个构造函数
调用这个函数的时候：var ren = new Person(参数,参数); ren.内部方法();
也就是说把这个方法给了变量，他拥有方法的特性
var Person = function(){}; 创建一个构造函数
var person = new Person(); 实例化一个对象

闭包

函数执行会形成一个私有的作用域，让里面的私有变量和外界的互不影响(互不干扰，外面的无法直接获取里面的变量值)，此时我们可以理解为私有作用域吧私有变量保护起来，我们把这种保护机制称为闭包.

get，set

...

JavaScript中的this

...

---

JavaScript方法

Math中常用的方法

数学函数:但是他的数据类型是对象数据类型 dir(Math);

• Math.abs(); 取绝对值就是一个数的正数 an be s
• Math.ceil(); 向上取整 sei you Math.floor() 向下取整 f lor er
• Math.round(); 四舍五入 当是负数的时候，5包含在向下的 Math.round(-12.5)=>-12 ruang de
• Math.random(); 获取[0,1)之间的随机小数包含0
  • Math.round(Math.random()*10); 获取[1，10]之间的随机整数
  • Math.round(Math.random()*(m-n)+n); 获取[n,m]之间的随机整数
• Math.max(); 获取一组中的最大值
• Math.min(); 获取一组中的最小值
• Math.PI; 获取圆周率 派
• Math.pow(10，2)=> 100; 获取一个值的多少次幂
• Math.sqrt(100)=> 10; 开平方

string中常用的方法

在JS中使用单双引号包起来的都是字符串 字符串相当于一个数组 var str = 'aap'; str.length=3;
在控制台输入 console.dir(String.prototype);

• str.charAt(索引); 返回指定索引位置的字符，指定的索引不存在的话会返回空字符串,不指定的话返回第一个 str[不存在]=> ' '
• str.charCodeAt(索引); 在charAt基础上，把获取的字符变为unicode编码值
• String.fromCharCode(111); 把值按照ASCLL表中的值转换为原有的字符
• str.substr(n,m); 从索引n开始截取m个字符
  • 只传递n直接截取到字符串的末尾
  • 超出索引能截多少截多少
  • 一个参数也不传，克隆整个字符串
• str.substring(n,m); 从索引n开始截取到m处(不包括m) 只传一个值则截取到末尾
• str.slice(n,m); 从索引n开始截取到m处(不包括m) 支持负数索引
• str.toUpperCase; 把字母全部大写
• str.toLowerCase; 把字母全部小写
• str.indexOf('字符') 获取当前字符在字符串中第一次出现的位置索引
  • 如果当前字符在字符串中没有出现过，结果是-1，可以用来验证当前字符串中是否有这个字符
• str.lastIndexOf('字符') 获取当前字符在字符串中最后一次出现的位置索引
• str.split()=>全部拆开 按照字符串中的某一个字符把字符串拆分成数组中的某一项，和数组中的join相对应 支持正则
• str.replace('之前的字符',替换的字符') 实现字符的替换 执行一次只能替换一次
• str.trim() str.trimRight() str.trimLeft() 去除字符串首尾的空格

Data方法

Data对象用于处理日期与时间 首先需要创建Data对象: var date = new Date();

• var n = date.getFullYear(); 返回当前是多少年
• var n = date.getMonth(); 返回当前是几月
• var n = date.getDate(); 返回当前月的当前一天
• var n = date.getDay(); 返回当前是星期几
• var n = date.getHours(); 返回当前是几点(24小时)
• var n = date.getMinutes(); 返回当前是几分钟
• var n = date.getSeconds(); 返回当前是几秒
• var n = date.getMilliseconds(); 返回当前是几毫秒
• var n = date.getTime(); 返回距1970年1月1日之间的毫秒数：
• var n = data.getUTCDate(); 使用UTC的时候返回的是国际时间
• var n = data.setUTCDate(12); 设置国际时间的日期为12

• var t = d.toLocaleDateString(); => "2019/2/13" 返回的是年月日 luo kan ou er
• var t = d.toLocaleString(); => "2019/2/13 下午2:23:07" 返回的是年月日和时间
• var t = d.toLocaleTimeString(); => "下午2:23:07" 返回的是时间
• var t = d.toString(); => "Wed Feb 13 2019 14:23:07 GMT+0800 (中国标准时间)" 返回中国标准年月日和时间
• var t = d.toTimeString(); => "14:23:07 GMT+0800 (中国标准时间)" 返回中国标准时间
• var t = d.toUTCString(); => "Wed, 13 Feb 2019 06:23:07 GMT" 返回的是国际标准时间
• =>
• =>

//返回时间的方法
function date() {
  var data = new Date();
  var y = data.getFullYear(); //年
  var M = data.getMonth(); //月
  var d = data.getDate(); //日
  var day = data.getDay(); //星期几
  var h = data.getHours(); //时
  var m = data.getMinutes(); //分
  var s = data.getSeconds(); //秒
  var ms = data.getMilliseconds(); //毫秒
  //返回日期时间
  return y + '年' + M + '月' + d + '日' + ' ' + '星期' + day + ' ' + h + '时' + m + '分' + s + '秒' + ms + '毫秒';
}
var time = date(); //方法调用 

计时器

• setInterval(function(){},3000) 间隔指定的毫秒数不停地执行指定的代码
• 把定时器赋值给一个全局对象，然后可以使用 clearInterval(myVar); 来清除计时器
• setTimeout(function(){},3000); 指定的时间之后执行函数
• 把延时时器赋值给一个全局对象，然后可以使用 clearTimeout(myVar); 来清除计时器

页面上的方法

• document.documentElement.scrollTop || document.body.scrollTop -- 滚动条距离顶部的距离
• scrollBar: flase -- 隐藏滚动条
• var 0bj = obj.getBoundingClientRect() -- 获取元素相对于视窗的位置集合 小括号
  0bj.top：元素上边到视窗上边的距离;
  0bj.right：元素右边到视窗左边的距离;
  0bj.bottom：元素下边到视窗上边的距离;
  0bj.left：元素左边到视窗左边的距离;
• box.offsetTop -- 盒子距离顶部的距离 没有小括号
  box.offsetLeft -- 盒子距离顶部的距离
  box.offsetWidth -- 盒子距离顶部的距离
  box.offsetHeight -- 盒子距离顶部的距离
• obj.classList.add("类名", "类名") -- 给所选的class添加一个或多个新的class名
• obj.classList.remove("类名", "类名") -- 移除一个或者多个类名
• obj.classList.length -- 获取有几个类名

让一个元素来回滚动的方法是先设置绝对定位，然后使用var xxleft = parseInt(xx.style.left);方法获得left的值，通过设置xx.style.left = xxleft + 'px';来控制移动, 通过计时器的方法执行这个动画。

---

JavaScript对象

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象
对象定义的规则

• 将左花括号与类名放在同一行
• 冒号与属性值间有个空格
• 字符串使用双引号，数字不需要
• 最后一个属性值对后面不要添加逗号
• 将右花括号独立放在一行，并以分号作为结束符号

一个对象里面有自己的属性和方法，对象的方法是对对象属性的一个定义结合，需要的时候调用就可以

• 如果想要增加一个属性 => 对象名.属性=值;
• 如果要删除一个属性 => delete 对象名.属性;

访问对象属性的两种方法： 对象.属性名; 对象[”属性名“];
创建对象的方法: 方法名: function(){};
使用对象的方法: 对象名.方法名();

---

JavaScript数组

数组也是对象数据类型的 typeof [] => 'object'; 字符串相当于一个数组

• 数组的创建：

  • var array = new Array();
  • var array = new Array(1,2,3,4,);
  • var array = [0,1,2,3,];

• 数组中存储的数据可以是任意类型的

• 创建的新数组是空数组，没有值，输出则显示undefined

• 创建数组的时候，虽然指定了他的长度，但是数组的长度是可变化的

• 在数组中添加新的成员，直接使用一个未使用的索引 arr[12] = 21;

• 数组的长度:数组名.length长度会随着元素的增加而增大，也可以直接改变数组的长度arr.length=12;

• 数组也有属性名，只不过属性名是数字，我们把数字属性名称之为他的索引：数组是以数字作为索引，索引从零开始

• 类数组：类似于数组，但是不是数组

  • 通过getElementByTagName获取的元素集合
  • 函数中的实参集合arguments

数组中的常用方法

方法的意义和作用
方法的形参
方法的返回值
使用此方法之后，数组的改变

• console.dir(Array.prototype):用来输出数组中常用的方法
• arr[arr.length]=xxx; => 在数组的末尾增加一个新的内容
• push:在数组的末尾添加一个新的元素 arr.push(12,'zzp',{name:'zzp'},function(){});
• unshift:在数组的开头添加新的元素 arr.unshift (12,'zzp',{name:'zzp'},function(){});
• pop:删除数组的最后一项 arr.pop();
• shift:删除数组的第一项 arr.shift(); 删除之后，后面每一项的索引都要向前进一位
• delete arr[索引]:删除指定的索引对象，当前项被删除之后，其他项的索引不会改变，当前数组的length也不会改变
• arr.length--:也可以删除数组的最后一项
• splice 删除 Array.splice(开始位置， 删除的个数，元素)

• 返回的是被删除的内容(以一个新的数组保存) 原数组改变
• arr.splice(0);:清空数组 splice();:一项也不删除，返回一个新的空数组
• arr.splice(n,m);:从索引n开始删除m个(m不写是删除到数组的末尾)

• splice 修改
  • 返回的是被删除的内容(以一个新的数组保存) 原数组改变
  • arr.splice(n,m,x);:在原有删除的基础上，用x代替删除的
• splice 增加
  • 返回的是一个空数组 原数组改变
  • arr.splice(n,0,x);:在修改的基础上，我们一项也不删除，把x插入到索引n的前面
  • arr.splice(0,0,x);:在数组的开头追加新的内容
  • arr.splice(arr.length,0,x);:在数组的最后追加新的元素
  • arr.splice(0,1);:删除数组的第一项
  • arr.splice(arr.length);:删除数组的最后一位
• 数组的查询 slice
  • arr.slice(n,m):找到从索引n开始到索引m处(不包含m)
  • 返回查找到的内容以新数组的方式返回，原来的数组不变
  • arr.slice(n);: 只写n，从n开始找到末尾
  • arr.slice(0)/slice();: 数组克隆，克隆一份和原来的数组一摸一样的新数组，克隆的数组和原数组不一样
  • arr.slice(-n,-m);: 支持负数索引，按照倒数来选的
• 数组的拼接 concat
  • 返回的是拼接之后的新数组，原数组没有改变
  • arr.concat([111,222],333,'zzp',{name:'zzp'});: 拼接的对象可以是任意的类型
  • arr.concat();:可以实现数组的克隆
• 数组转化为字符串 toString
  • 实现吧数组转化为字符串(转化后的字符串以逗号分隔每一项)
  • 返回的是转换后的字符串，原有的数组不变
• join:把数组按照指定的分隔符(分隔符是字符串形式)转换为字符串 返回的是一组字符串 原数组不变 arr.join('+');
• split:按照字符串中的某一个字符把字符串拆分成数组中的某一项 支持正则
• evel:把字符串变为js表达式执行 var a = evel(arr.join('+'));可以实现数字数组的求和
• reverse:把数组反过来进行排列 返回的是排列之后的数组 原数组也改变
• sort: 实现数组的排序 返回的是排序之后的新数组
  • 如果没有传入参数 可以给10以内的数升序排列 超过10位数时只识别第一位
  • arr.sort(function(a,b){return a-b});: 升序排列
  • arr.sort(function(a,b){return b-a});: 降序排列
• 遍历数组的方法
  • arr.forEack(function(n,m){});:遍历数组中的每一项 n是当前的遍历值 m是当前值的索引
  • arr.map(function(n,m){returen xxx});: 返回的值是当前遍历的这一项修改之后的值
• 查找数组中的某一项是否包含字符串
  • includes(字符串) 包含的话返回true
• 给某个字符串补全几位
  • padstart(2, '0') 前面是补全几位,后面是用什么补全

数组去重

• 方法一:遍历数组中的每一项，那一项和它后面的项依次比较，如果相同了，则把相同的项去掉
• 方法二:利用indexOf来验证当前数组中是否包含某一项，包含把当前项删除掉
• 方法三: 遍历数组中的每一项，把每一项作为新对象的属性名和属性值存储起来，在每一次向对象中存储之前，首先看一下原对象中是否包含这个属性

二维数组

二维数组的本质是，数组中的元素又是数组

• var ary = [[0,1,2][0,1,2]]; 直接给数组赋值
• arr[1][1]; 第一个代表外围数组的索引，第二个代表的是找到第一个索引数组之后当中的数组索引
• 通过双for循环的方法复制，然后使用循环遍历出来

//先定义二维数组
var arr = new Array();
for(var i=0;i<3;i++){
    arr[i] = new Array();
    for(var j=0;j<5;j++){
        arr[i][j] = i+j;
        }
    }    
//循环遍历二维数组
for(var i=0;i<arr.length;i++){
    for(var j=0;j<arr[i].length;j++){
        document.write(arr[i][j]);
    }
    document.write("<br/>");  
}

---

JavaScript算法

冒泡排序

...

递归算法

找规律找出口

快速排序

...

插入排序

...

---

JavaScript正则

---

JavaScriptDOM操作

DOM节点

在HTML中的所有内容都是节点，节点是用来描述页面中每一部分之间关系的 只要能获取页面中的一个节点，那么我就可以通过相关的属性和方法获取页面中的其他节点

• 元素节点: HTML标签
  • nodeType：1
  • nodeName：大写的标签名
  • nodeValue：null
• 文本节点: 文字内容 空格换行
  • nodeType：3
  • nodeName：#text
  • nodeValue：文本内容
• 注释节点: 注释内容
  • nodeType：8
  • nodeName：#comment
  • nodeValue：注释内容
• document文档节点:
  • nodeType：9
  • nodeName：#document
  • nodeValue：null
• 使用dir(document.body.childNodes); 来获得body下面的所有子节点
  • 元素id.children 获取所有的元素子节点(元素集合) 使用ID时直接可以操作
  • parentNode 获取当前元素的父节点(元素对象)
  • previousSibling nextSibling 获取当前节点的上一个哥哥节点 下一个弟弟节点
  • previousElementSibling nextElementSibling 获取当前节点的上一个哥哥元素节点 下一个弟弟元素节点
  • firstChild lastChild 当前元素所有子节点的第一个 当前元素所有子节点的最后一个
  • firstElementChild lastElementChild 当前元素所有子节点的第一个元素节点 当前元素所有子节点的最后一个元素节点
• 自定义属性
  • (set/get/remove)Attribute 给当前的元素设置/获取/移除属性，一般操作的都是自定义属性
  • XXX.index = x:把当前操作的元素作为一个普通的对象

DOM的增删改

document.createElement;: 在js中动态创建一个HTML标签

• 增加 appendChild;: 把当前创建的新元素添加到容器的末尾
• 增加 inserBefore(新元素, 老元素);: 把新创建的元素增加到老元素之前
• 删除 容器.removeChild(元素); 在当前容器中删除这个元素
• 替换 replaceChild(新元素,老元素); 在当前容器中拿新元素替换老元素
• 克隆 元素.cloneNode(false/true); 把原有的元素克隆一份不写的话默认时false false:只克隆当前元素本身 true：克隆当前元素以及他的后代

var obj = document.createElement('div'); //=> 创建一个div
obj.id = 'obj1'; //=> 添加id
obj.className = 'obj2'; //=> 添加className
document.appendChild(obj); //=> 把它添加到页面中
document.inserBefore(obj.box); //=> 把新元素obj添加到box之前
//移除一个元素
document.当前容器.removeChild(要删除的元素)
元素.parentNode.removeChild(元素)
var 元素 = 要克隆的元素.cloneNode();
document.body.appendChild(元素);

获取html元素

找到的内容使用单引号扩起来

• getElementById: 通过指定的id获得元素 1个
• getElementByName: 通过元素名称name属性获得元素 1组
• getElementByTagName: 通过标签名称获得元素 1组

innerHTML: 获取和替换HTML元素的内容

• object.innerHTML区分大小写
• 只是object.innerHTML的时候是元素的内容
• object.innerHTML = “新的内容” 改变内容

innerText: 设置元素的文本显示
obj.innerText= "haha"

改变HTML样式

• Object（转换的对象）.style.property（要改变的属性）=new style（新的属性）;
• Var mr = document.getElementById(“aa”); ———找到对象
  Mr.style.color=“red”; ——改变样式

内容的显示和隐藏display
object.style.display = value; none(隐藏) block(显示块级)

控制类名
object.className = newclassname; -- 设置一个元素的类名

解决选项卡的三种方式

• 闭包
• 自定义属性
• ES6 let定义

---

JavaScript事件

事件是可以被js检测到的行为 事件可以是浏览器行为，也可以是用户行为

• 通过行内绑定的事件只能绑定一个事件
• div.onclick = function(event){方法体}; this指向的是dom元素本省
• div.addEventListener('事件名','function(){},false); 先通过getElement找到元素然后绑定一个事件，也可以绑定多个事件 this指向的是dom元素本省

鼠标事件

• 鼠标单击事件: onclick="方法";
• 鼠标双击事件: ondblclick="方法";
• 鼠标按下事件: onmousedown="方法";
• 鼠标抬起事件: onmouseup="方法";
• 鼠标移入事件: onmouseover="方法"; 会冒泡，其后面的元素也会触发事件 onmouseenter="方法";
• 鼠标移开事件: onmouseout="方法"; onmouseleave="方法";
• 鼠标点击右键的事件: oncontextmenu="方法";

键盘事件

• 键盘按键按下事件: onkeydown="方法";
• 键盘按键抬起事件: onkeyup="方法";
• 键盘按键按下并抬起事件: onkeypress="方法";
• event.keyCode = 键盘按下的时候对应的那个码

表单事件

• 光标聚焦事件: onfocus="方法";
• 光标失焦事件: onblur="方法";
• 内容选中事件: onselect="方法";
• 内容改变事件: onchange="方法";
• 表单提交时触发: onsubmit="方法";
• 表单重置时触发: onreset="方法";
• 元素获取输入触发: oninput="方法";
• 拷贝内容时触发: oncopy="方法";
• 剪切内容时触发: oncup="方法";
• 粘贴内容时触发: onpaste="方法";

---