前端学习之路，基础是重中之重（1）

目录

前言： 

今日掌握：

1.innerHTML和innerTEXT的区别

2.document.innerHTML和document.write的区别

3.continue和break区别

4.变量声明 var，let和const

5.typeof可以获取数据类型

6.null和undefined区别

7.indexOf和lastIndexOf

8.如何识别数组

9.toString（）数组转化为字符串

10.join()字符串拼接

11.pop（）将删除末尾元素

12splice（）方法可以同时在指定位置插入新元素和删除末尾元素

---

 

前言： 

刚刚参加完了两场面试，清楚的认识到了自身的不足，自工作以来，无论是学习还是实际做项目，都太过依赖于框架和网上现成的组件了，基础知识都快忘得差不多了，两家公司的面试官都问到了原生js的问题，由于好久不用，我真的是答得一塌糊涂。这就是典型的没学会走就想学跑。对于我这种新手来说，基础才是重中之重。趁着还没毕业，还有时间。得抓紧把前面的基础好好巩固巩固了。一边上班一边插空儿学习学习吧！

今日掌握：

1.innerHTML和innerTEXT的区别

这两个方法都是获取document对象的属性。但innerHTML获取的是整个对象从头到尾的内容，其中包括HTML标签。innerTEXT获取的是文本内容，不包括HTML标签。

2.document.innerHTML和document.write的区别

前者是获取DOM节点的一个属性，它可以实现页面中所获取到的元素的部分刷新修改。而后者是直接写入页面的内容流，是个方法。如果这个方面没有写在document.open中，页面会默认自动执行open方法进行页面重写，调用这个方法会导致整个页面进行重绘。

document.getelementById(“#id名”).innerHTML="修改后显示的内容"

3.continue和break区别

continue跳出本次循环，进入下一次循环的循环入口继续执行。

break跳出当前循环体，如果该循环体为嵌套循环的内部循环体。则外层循环不受影响，继续执行。

4.变量声明 var，let和const

const作用于块作用域内，不可重复声明，一经声明不可修改。

但如果变量指向的是一个对象，修改对象内的属性不受其影响。且无论const声明的是对象还是数组，都可以对内部的某属性进行赋值或添加，不可以直接对常量对象或数组进行直接赋值。

const information={name："张三"，"age"=15,sex:"男"}
information.name="李四"
information.age="20"
information.height="180"
可以修改对象内任意属性的值，也可以添加属性。以上写法正确。
const information={name："张三"，"age"=15,sex:"男"}
   information={name："王丽"，"age"=20,sex:"女"}
但不可以直接对常量对象赋值。以上写法错误。

const不可被预解析，使用前必须先声明，不能像var一样可以先使用再声明。并且const变量必须在声明的时候就赋值。

let同样作用于块作用域，let不可重复声明。

let age=15;
let age=16;

这样的写法是错误的。 

var name = 'cc'
console.log(window.name) // cc

let age = 19
console.log(window.age) // undefined

let声明在全局作用域下不会变成window的属性，但var。（该段内容及上面的代码转载自博主冲冲不是聪聪的《JavaScript声明变量的三种方式》）。

let和const的特点一样，只是const的值不可被修改，let的变量只是不可以重复声明，但是变量值可以修改。

var声明的变量以函数为界限，也就是只作用于当前的函数。在块{  }内通过var声明的变量可以在块外边进行访问。在块内用let和const声明的变量则无法在块外部进行访问。

5.typeof可以获取数据类型

typeof "hi"                  // 返回 "string"
typeof 313                  // 返回 "number"
typeof true          // 返回 "boolean"
typeof undefined       //返回"undefined"

typeof可以返回string、number、boolean、undefined四种原始数据类型，也可以返回object和function两种复杂数据类型。

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

 typeof会把数组返回为object，因为在javascript中数组即对象。

 6.null和undefined区别

     null是有值也有类型，值是空值，数据类型是对象。

     undefined是不存在，值是undefined，数据类型是undefined。

var a=""    //值是"",数据类型是object
var a=null    //值是null,数据类型是object
var a=undefined       //值是undefined，数据类型是undefined
typeof undefined              // undefined
typeof null                   // object
null === undefined            // false    因为值一样，数据类型不一样
null == undefined             // true     因为值一样，数据类型不考虑

7.indexOf和lastIndexOf

indexOf是从前先后检索，lastIndexOf是从末尾向前检索。接收两个参数

XX.indexOf（“china”，14）

第一个参数是要检索的字符串内容，第二个是检索开始的位置索引。

三种截取部分字符串的方法：

• slice(start, end)
• substring(start, end)
• substr(start, length)

8.如何识别数组

由于typeof判断数组和对象的结果都是object，所以无法通过这种方法识别数组。

可以使用Array.isarray（数组名称），返回值为boolean类型。

9.toString（）数组转化为字符串

   toString（）方法可以将数组转化为字符串类型。

var a=["zzz","qqq","www"]
document.getElementById("demo").innerHTML = fruits.toString();
结果：zzz,qqq,www

10.join()字符串拼接

 可以在数组转化字符串时用某种符号或者给定的其他东西进行拼接。

var fruits = ["aaa", "bbb","ccc", "ddd"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 
结果：aaa*bbb*ccc*ddd

11.pop（）将删除末尾元素

   pop（）方法将删除末尾元素，返回值是被删掉的元素

var a=["a","b","c"]
var b=a.pop()
console.log(b)
结果：c

12splice（）方法可以同时在指定位置插入新元素和删除末尾元素

该方法共有两个固定参数和无限其他参数

第一个参数代表要在哪个位置插入新元素

第二个参数代表要删除几个末尾元素

其他参数表示要插入的元素。

var a=["a","b","c","d"]
a.splice(2,2,"e","f","g")
console.log(a)
结果：["a","b","e","f","g"]

相关操作的万能参数，如果只要前两个参数，就是实现删除指定位置的指定个数的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素