JS基础（一）

JS的组成部分

• ECMAScript（ES）：js的核心，制定了语言的规范
• DOM：文档对象模型：提供了js对dom元素操作的属性和方法
• BOM：浏览器对象模型：提供了js对浏览器操作的属性和方法

获取元素的方式

• 通过ID获取 document.getElementById(“id名”)

  1.上下文必须是document。
  2.必须传参数，参数是string类型，是获取元素的id。
  3.返回值只获取到一个元素，没有找到返回null。
  1.如果有多个id存在只获取第一个，也就是最先出现的哪一个。一般情况也不会出现同一个ID在页面上出现两次。
  2.在IE6、7中会把表单元素的name当做ID值获取到。所以大家在定义这些的时候一定要注意。
  3.在IE6、7中不区分大小写。
  4.可以直接用元素的ID代表这个元素。（项目中不推荐）
  5.通过ID获取元素的上下文只能是document。为什么上下文必须是document呢，因为 getElementById这个方法在Document类的原型上

• 通过name属性获取 document.getElementsByName(“name”)

  1.上下文必须是document。
  2.必须传参数，参数是是获取元素的name属性。
  3.返回值是一个类数组，没有找到返回空数组。
  4.获取的结果是一个类数组，不是数组。
  5.在IE浏览器中只能获取到表单元素，当然我们一般也只用它获取表单元素，从ie10开始可以不只是表单元素。
  6.上下文只能是document，原因同getElementById。

• 通过标签名（getElementsByTagName）

  例： document.getElementsByTagName(‘p’);
  var oDiv = document.getElementById(‘divId’);
  oDiv.getElementsByTagName(‘p’);
  1.上下文可以是document，也可以是一个元素，注意这个元素一定要存在。
  2.参数是是获取元素的标签名属性，不区分大小写。
  3.返回值是一个类数组，没有找到返回空数组。
  4.获取的结果是一个类数组。
  5.上下文不必须是document了，因为getElementsByTagName方法在不仅在Document类的原型上也在Element类的原型上，所以document和元素都可以使用这个方法。

• 通过类名（getElementsByClassName）

  1.上下文可以是document，也可以是一个元素。
  2.参数是元素的类名。
  3.返回值是一个类数组，没有找到返回空数组。
  4.获取的结果是一个类数组。
  5.IE8以及以前版本不兼容。

• 获取html的方法（document.documentElement）

  1.document.documentElement是专门获取html这个标签的。

• 获取body的方法（document.body）

  1.document.body是专门获取body这个标签的。

• 通过选择器获取一个元素（querySelector）

  1.上下文可以是document，也可以是一个元素。
  2.参数是选择器，如：“div .className”。
  3.返回值只获取到一个元素。
  4.这个方法不兼容IE7以及以前版本

• 通过选择器获取一组元素（querySelectorAll）

  用法同querySelector类似：
  1.上下文可以是document，也可以是一个元素。
  2.参数是选择器，如：“div .className”。
  3.返回值是一个类数组。

  同querySelector，不兼容IE7。
  使用原生JS获取DOM元素的8个方法讲完了，接下来在讲一下为什么有的方法只能在document上使用。

  拿div举栗子，div是HTMLDivElement类的一个实例，document是HTMLDocument 的实例。

  他们的继承关系：
  HTMLDivElement > HTMLElement > Element > Node > EventTarget
  HTMLDocument > Document > Node > EventTarget
  我们都知道子类继承父类，子类就可以使用父类的属性和方法。
  他们相同的继承关系是Node和EventTarget，也就是说他们都可以使用Node和EventTarget上的方法。
  如Node上的nodeName、parentNode等，和EventTarget上的addEventListener等。
  getElementById只在Document类的原型上，HTMLDivElement 没有继承Document类，所以div不能使用getElementById方法。
  getElementsByTagName即在Document类的原型上也在Element类的原型上，所以div和document都可以使用getElementsByTagName方法。

JS输出方式

1、alert()警告弹框===》弹出来的内容是字符串（将参数转换成字符串）==>只能有一个参数
2、console.log()控制台输出（日志），参数可以是多个
3、console.dir()在控制台输出详细内容
4、console.table()以表格的形式输出json
5、document.write()在文档写入内容，可以识别标签document.write("张三");
6、prompt()弹框（能输入内容的弹框）
7、confirm()弹框

变量

• 变量的命名规范

  1、不能用数字开头
  2、严格区分大小写
  3、遵循小驼峰命名法
  4、不能使用js中的关键字（在js中有特殊意义的单词）和保留字（在将来可能成为关键字的单词）
  5、由字母、数字、下划线、$组成
  6、变量的值可以改变（js中后赋值的变量会把之前的覆盖掉）

• 变量提升（重）

  定义：代码执行之前，将所有带var和function的变量提升到当前作用域的最顶端，var声明的变量只声明不定义，function声明的变量即声明又定义
  特殊情况
  1、在最新版本浏览器中，在块级作用域中，在if判断中定义的变量不管条件成不成立都会进行变量提升，function和var都是只声明不定义（IE10及以下，function声明的函数，即声明又定义）。如果条件成立，代码加载到这个块级作用域的时候，会立刻给函数开辟一个堆内存=>栈内存
  2、变量提升只提升等号左边的部分
  3、return下面的代码不执行，但是会进行变量提升。return后面的代码不会进行变量提升
  4、变量名重复的话，不会重新声明，但是会重新定义（赋值）
  5、匿名函数不进行变量提升==>自执行函数：先开辟一个堆内存，然后立刻开辟一个栈内存，进行形参赋值、变量提升、代码执行、作用域是否销毁
  6、let声明的变量不进行变量提升
  7、全局变量给window新增键值对是发生在变量提升阶段
  浏览器会监听空间地址中键值对的变换，当里面的键值对发生改变控制台也会随着变化

• 数据类型的检测

  1、typeof 用来检测数据类型的运算符
  ->typeof value
  ->返回值首先是一个字符串,其次里面包含了对应的数据类型,例 如:“number”、“string”、“boolean”、“undefined”、“object”、“function”
  ->局限性:
  1)typeof null ->“object”
  2)检测的不管是数组还是正则都返回的是"object",所以typeof不能判断一个值是否为数组
  ->console.log(typeof typeof typeof [12, 23]);//->“string” 两个或者多个typeof一起使用时,返回值一定是"string";
  3）不能检测出用标准实例的方式创建的实例，无论是值类型还是引用数据类型的，都会返回"object"
  2、instanceof/constructor
  ->检测某一个实例是否属于某一个类
  ->我们使用instanceof/constructor可以检测数组和正则了
  console.log([] instanceof Array);//->true
  console.log(/^$/ instanceof RegExp);//->true
  console.log([] instanceof Object);//->true

  console.log([].constructor === Array);//->true
  console.log([].constructor === Object);//->false 我们的constructor可以避免instanceof检测的时候,用Object也是true的问题
  console.log({}.constructor === Object);

  局限性：
  1)用instanceof检测的时候,只要当前的这个类在实例的原型链上(可以通过原型链__proto__找到它),检测出来的结果都是true

  var oDiv = document.getElementById(“div1”);
  //HTMLDivElement->HTMLElement->Element->Node->EventTarget->Object
  console.log(oDiv instanceof HTMLDivElement);//->true
  console.log(oDiv instanceof Node);//->true
  console.log(oDiv instanceof Object);//->true

  2)基本数据类型的值是不能用instanceof来检测的

  ->console.log(1 instanceof Number);//->false
  数组创建的两种方式(对象、正则、函数…)
  ->对于引用数据类型来说,我们两种方式创建出来的都是所属类的实例,而且都是对象数据类型的值,是没有区别的
  var ary = [];
  var ary = new Array;

  ->对于基本数据类型来说,虽然不管哪一种方式创建出来的都是所属类的一个实例(在类的原型上定义的方法都可以使用),但是字面量方式创建出来的是基本数据类型,而实例方式创建出来的是对象数据类型
  var num1 = 1;
  var num2 = new Number(“1”);
  console.log(typeof num1,typeof num2);//->“number” “object”

  3)在类的原型继承中,instanceof检测出来的结果其实是不准确的
  function Fn() {}
  var f = new Fn;
  console.log(f instanceof Array);//->false f不是一个数组,它就是一个普通的实例(普通的对象)

  ->虽然我们的Fn继承了Array,但是f没有length和数字索引哪些东西,所以f应该不是数组才对,但是用instanceof检测的结果却是true,因为f虽然不是数组,但是在f的原型链上可以找到Array
  function Fn() {
  }
  Fn.prototype = new Array;//->Fn子类继承了Array这个父类中的属性和方法
  var f = new Fn;
  console.log(f instanceof Array);//->true
  3、Object.prototype.toString.call(value)
  ->找到Object原型上的toString方法,让方法执行,并且让方法中的this变为value(value->就是我们要检测数据类型的值)

  ->toString:一个方法,转换为字符串数据类型用的方法
  每一个数据类型所属类的原型上都有toString方法,例如:Number.prototype/String.prototype/Array.prototype/Function.prototype…
  除了Object上的toString,其他类原型上的toString都是把当前的数据值转换为字符串的意思

  ->null和undefined比较的特殊:他们所属类Null/Undefined的原型上也有toString,只不过不让我们用而已,不仅如此其实类的原型都给屏蔽了

  ->HTML元素对象的toString:虽然它的原型链很长,但是在其它类的原型上都没有toString,只有在最底层Object.prototype这上才有
  var oDiv = document.getElementById(“div1”);
  oDiv.toString();//->调用的其实也是Object.prototype.toString…

  ->alert、document.write这两种输出的方式其实都是把要输出的内容先转换为字符串,然后在输出的
  alert([]);//->""
  alert(true);//->“true”
  alert({});//->这个就要调用Object.prototype上的toString了 ->?

  4、Object.prototype.toString是用来返回对应值的所属类信息的
  var oDiv = document.getElementById(“div1”);
  var obj = {};
  oDiv.toString();//->"[object HTMLDivElement]"
  obj.toString();//->"[object Object]"

  原理:
  ->obj首先找到原型上toString方法,并且让toString执行,toString方法执行的时候,里面的 this是obj,同理oDiv.toString(),toString方法中的this是oDiv
  ->执行toString方法,返回当前方法中this的数据类型 ->"[object 当前this的直属类]",例如:"[object HTMLDivElement]"/"[object Object]"

  Object.prototype.toString.call(12);//->执行原型上的toString,并且让方法中的this变为12,也就相当于返回的是12的直属类的信息 ->"[object Number]"
  Object.prototype.toString.call(“zhufeng”);//->"[object String]"
  依此类推:
  “[object Boolean]”/"[object Null]"/"[object Undefined]"/"[object Object]"/"[object Array]"/"[object RegExp]"/"[object Function]"/"[object Math]"/"[object Date]"…
  ->所有的数据类型都可以用它来检测,而且非常的精准

  value:要检测数据类型的值 type:判断是否为这个数据类型
  function isType(value, type) {
  var res = Object.prototype.toString.call(value);//-> “[object 直属类]”
  return res === “[object " + type + “]”;
  98->”[object Array]"
  字符串拼接->"[object Array"]"
  两个相等了返回true
  }

  优化:->忽略第二个传递进来参数的大小写
  function isType(value, type) {
  var reg = new RegExp("^\[object " + type + “\]$”, “i”);
  return reg.test(Object.prototype.toString.call(value));
  }
  var ary = [];x
  var flag = isType(ary, “array”);
  console.log(flag);//->true说名是数组,false说明不是数组 ->true
  flag = isType(1, “string”);
  console.log(flag);//->false

  ~function () {
  var utils = {}, numObj = {
  isNum: “Number”,
  isStr: “String”,
  isBoo: “Boolean”,
  isNul: “Null”,
  isUnd: “Undefined”,
  isObj: “Object”,
  isAry: “Array”,
  isFun: “Function”,
  isReg: “RegExp”,
  isDate: “Date”
  }, isType = function () {
  var outerArg = arguments[0];
  return function () {
  var innerArg = arguments[0], reg = new RegExp("^\[object " + outerArg + "\]KaTeX parse error: Expected 'EOF', got '}' at position 85: …erArg)); }̲ }; for (va…type = utils;
  }();
  //console.log($type);

  var ary = [];
  console.log($type.isAry(ary));//->trueconsole.log($type.isFun(ary));//->false

失败只是暂时停止成功，假如我不能，我就一定要；假如我要，我就一定能！