JS的组成
- ECMAscript 定义了整个js的语法
老语法规范：ES3-ES5
新语法规范：ES6- - DOM
提供一些方法和属性 让JS操作页面中元素
getElementById - BOM
提供一些方法操作浏览器
JS常用的数据类型
- 基本数据类型/值类型
- number：数字、NaN
- string：单引号 双引号 反引号
- boolean
- null
- undefined
- 引用类型
- object：
{} 普通对象
[] 数组对象
/ / 正则对象
math数学函数对象
日期对象
类数组对象：通过getElementsByTagName得到一个集合 类数组对象 - function
- object：
浏览器常用内核
- webkit
谷歌chrome、safari、欧鹏v14+、手机端浏览器、PC大部分国产浏览器 - gecko
火狐 - presto
欧鹏v14- - trident
IE - blank?
数据类型之间的区别
基本数据类型按值操作
引用类型操作的是堆内存的空间地址
常用的关键字和保留字
- 关键字
- break
- continue 当前本轮循环结束 下轮循环继续
- if
- else
- for
- var / let(es6新语法规范中已经由保留字变为关键字) / const(es6 保留字-> 关键字) / function / class(es6 保留字-> 关键字) / import(es6 保留字-> 关键字) / export(es6 保留字-> 关键字)
- instanceof
- typeof
- this
- return
- switch
- case
- do
- while
- delete
- new
...
- 保留字（后台里经常用，未来有一天可能会成为关键字）
- boolean
- float
- int
- double
- long
- char（后台里定义字符）
- debugger
...
JS中创建变量的几种常用方式
- var / let：创建变量
- const：创建常量
- function：创建函数
- class：创建类
- import：模块导入
symbol不是创建变量的方式，而是数据类型，创建一个变量等于Symbol()：var symbol2 = Symbol()
浏览器中常用的输出方式
1、console 在控制台输出
- console.log
- console.dir
dir输出一个对象的详细键值对信息 - console.table
把一个多维json数组在控制台按照表格方式输出
console是什么
- 首先，console是个对象，log、dir、table、debug、time、timeEnd等方法都是它的一个属性名
对象.属性名
“.”前为对象， “.“后为属性名 - 同时，函数执行时才会加()，所以log、dir、table等也是方法
console.log相当于：找到console这个对象log这个属性对应的属性值，是个方法，把这个方法执行，实现想干的活
typeof console
=> "object"
在控制台console.dir(console)可以查看console的所有属性名，可以在MDN查各个属性名的作用，最接近官方文档的参考手册https://developer.mozilla.org/zh-CN/
2、浏览器窗口弹窗 alert/confirm/prompt
（内置，不好看，在项目中不常用）
三种结果输出方式必先经过toString转换为字符串；
三种方式都会阻断当前JS代码的执行，只有当窗口关掉，JS才会继续运行。
- alert(弹出框)
alert(1) // => '1'
alert({name: 'xxx'}) // => [object Object] toString转换为字符串
弹出窗口不关，后面js代码不会执行
- confirm(确定和取消：选择型弹框)
confirm('确定要删除吗？')
- prompt(在confirm基础上多了一个输入框)
prompt('确定要删除吗？请写出删除原因')
3、document.write 在页面中写入信息
和alert一样，输出的结果都是字符串，经过toString
document.write({name:'xxx'}) // =>[object Object]
多维数组
[10,12] // 一维数组
[10,{name:“xxx”}] // 二维数组 =>多维数组
[12,[{xxx:“xxx”}]] // 三维数组 =>多维数组
{name: 'xxx'} // 一维对象
{name: [12,13]} // 二维对象
{ // 五级对象
name: {
xxx: {
xxx: {
xxx: {
}
}
}
}
}
// 以后：数组 多维对象的深度克隆和浅度克隆 一般最多三四级
// function也是一种数据类型，对象中属性名的属性值可以是任何一种数据类型，如果还是一个函数或者对象这种引用类型，就变成了多维对象或多维数组
{
fn: function() {
}
}]
js放在head和body尾部区别
Js经常放到BODY最后面，是为了保证页面结构加载完成才去做这些事情。
Js放到头部，如果Js中代码需要获取元素来操作元素，则会获取不到。
如果非要放在头部可以使用window.οnlοad=function(){}，当页面中的结构和内容都加载完成才会执行{}里面的代码，只能用一次；
JQ中也有一个类似的方法$(document).ready(function(){})。
注：
$(document).ready和window.οnlοad区别
1、
$(document).ready(function(){})：当DOM结构加载完成就会执行，监听的是DOMCententLoaded事件（DOM结构加载完成就会触发执行）
window.οnlοad=function(){}：所有DOM结构以及内容都加载完成才会执行
所以$(document).ready一定会比window.οnlοad早先触发
2、
$(document).ready在页面当中可以用多次，window.οnlοad只能用一次
$(document).ready()实现的原理是DOM的二级事件绑定（可以执行多次）
window.οnlοad使用的是DOM零级事件绑定，在同一个页面中只能使用一次
<head>
<=script>
window.onload=function(){
JS代码
}
</=script>
</head>
数据类型的区别（堆栈底层机制）
浏览器在内存中分配一块内存 => 栈内存（还有一种概念，叫作用域）
1、用来执行JS代码
2、用来存储变量和基本数据类型的值
对象的进一步理解
var name=10;
var obj ={
name:“小王”
};
console.log(obj.name);//输出小王
console.log(obj[“name”]);//输出小王
console.log(obj[name]);//相当于obj[10] => 输出undefined
var name =“小王”
var obj={
name:name,
name,//es6中的简化,相当于name:name
}
for in 来遍历对象中的属性名
var obj={
name:“小王”,
age:“18”,
1:10,
2:20,
3:30
}
for(var key in obj){
console.log(“属性名:”+key+“属性值:”+obj[key])
}key是用来输出当前obj中的所有属性名,并且从属性名为最小的数字开始,而obj[key]是输出所有的属性值
自定义属性的深层理解
前期把一些值存储到自定义的属性上,后期需要用到的时候,直接从属性上获取这些值即可
Number() ParseInt()
isNaN() 遇到值不是数字，调用Number()转换为数字
continue break
continue：结束本轮循环
break：结束所有循环
但无论是continue还是break，位于其后面的代码都不执行了
