珠峰以及近期笔记

5个基本数据类型

boolean undefined null number string

Number 和 parseInt其中的一个区别

Number(‘13px’) // NaN
parseInt(‘13px’) // 13

parseInt是从最左边开始寻找数字，找到不是数字的地方停下来，但是如果是’a13px’，也会显示NaN

NaN

NaN == NaN // false
NaN是非数字的任何可能，和谁都不相等，但是typeof NaN结果为number

// 这个方法不能判断num是不是有效数字，因为NaN和谁都不相等
if(Number(num)==NaN){
alert(‘num不是有效数字’)
}

// 这个方法可以判断
if(isNaN(num)){
alert(‘num不是有效数字’)
}

判断是不是数组

1. [1,2] instanceof Array == true
2. Array.isArray([1,2])

布尔类型

1. Boolean(1) => true
2. !‘珠峰培训’ => false // 把后面的数据先转为布尔类型，然后取反
3. !!null => false // 取两次反，可以在很多情况下代替if(xxx==true)

只有五种时候js的判断为false

!!null / !!undefined / !!’’ / !!0 / !!NaN

!![] / !!{} 也是true

undefined 和 null 的区别

null 为空的对象，undefined为未定义的全局变量，null==undefined为true，
null= = =undefined为false，
有时候一个数据不再使用时，设置null可以释放内存。

对象的删除

delete obj.age
假删除
obj.age = null

堆内存

var obj = { n: 10, m: obj.n * 10 }

console.log(obj.m) // 报错

1.形成一个全局作用域（栈内存）
2.代码自上而下执行
1.首先开辟一个新的堆内存，把键值对存储在堆内存中，n:10
m:obj.n*10 = >此时堆内存信息还没有存储完成，空间的地址还没有给obj，此时的obj是undefined

数组赋值会修改到原数组

var arr1 = [1,2,3]
var arr2 = arr1

arr2 // [1,2,3]
arr2[0] = 5
arr2 // [5,2,3]
arr1 // [5,2,3] 这时候arr1也变成【523】了

arr2 = [11,22,33]
arr1 // [5,2,3] 还是【523】

用arr2[0] 来赋值会改变arr1的数组
但是有arr2 = 【】 则不会

如何避免赋值时修改到原数组

var arr1 = [1,2,3]
var arr2 = […arr1]

arr2[0] = 5

arr2 // [5,2,3]
arr1 // [1,2,3]

或者

arr2 = arr1.concat([]) // 合并一个空数组

js中用来检测数据类型

1.typeof
2.instanceof
3.constructor
4.Object.prototype.toString.call()

三元运算符

如果三元运算符中的某一部分不需要做任何的处理，我们用 null/undefined/void 0占位即可

如果我们希望做多个操作，就用括号和逗号隔开

num>=10?(num++,num*=10):null;

这时候做了两步操作，num++和num*=10,用逗号隔开

switch case

seitch case 应用于变量在不同值情况下的不同操作，不适用于大于等于的情况，每一种case结束后都要加break（结束整个判断）

switch case中每一种case情况都是基于”===”绝对相等来完成的，case结束后要加break来结束循环

switch(num){
	case 10:
	case 5:
		num--;
		break;
	default:
		num = 0;
}

上面代码块，是当num等于10或5时，执行的代码，因为case10里面没有写break，所以他会继续往下执行

For循环中，常用的两个关键字javascript

continue / break

continue: 结束本轮循环，循环体中的后面代码将不再执行

for(var i = 0;i<5;i++){
  if(i==3){
    console.log('到3了')
	continue
  }
  console.log(i) // 等于3时，这里不再执行
}
// 0
// 1
// 2
// 到3了
// 4

for(var i = 0;i<5;i+=2){
  if(i<=3){
    i++
    console.log(i)
	continue
  }
  console.log(i)
}
// 1
// 4

nth-child和nth-of-type

/* nth-child:当前容器所有子元素中的第一个 
 * .box li:nth-child(1): BOX容器所有子元素中的第一个并且标签名是LI才行
 *  nth-of-type(n):先给当前容器按照某一个标签名进行分组，获取分组中的第N个
 * .box li:nth-of-type(1):先获取BOX中的所有LI，再获取LI中的第一个
 */
.box li:nth-child(1){
  color:red;
}

<ul class="box">
   <--!这时候加了span，里面没有任何元素的颜色是红色的 -->
    <span>我是个累赘</span> 
	<li>岁末，就业一直在创新高</li>
	<li>成长的密米，兴盛衰败一会见</li>
	<li>xx培训让我实现外企梦</li>
	<li>应届毕业生也能拿20w年薪</li>
</ul>

console.dir

获取更完整的信息
console.dir(document.getElementById(‘id’))

DOM元素对象解析

innerHTML和innerText

innerHTML ：当前元素中的所有内容（包含HTML标签）
innerText： 当前元素的文本内容

getElementById.style

存储在当前元素所有的“行内样式”值（获取和操作的只能是写在html标签上的行内样式，写在样式表中的样式，无法基于这个属性获取到）

获取当前元素除了行内的全部样式
非ie浏览器用getComputedStyle
var a = getComputedStyle(document.getElementsByClassName(‘commodity’)[1])
a.width // 320px
ie浏览器用getCurrentStyle

函数

1.函数是引用类型，会开辟一个新的堆内存，把函数体中的代码当做“字符串”存储到内存中（对象向内存中存储的是键值对）
2.把开辟的堆内存地址赋值给函数名（变量名）

【函数执行】
目的：把之前存储到堆内存中的代码字符串变为真正的JS代码执行

1.函数执行，首先会形成一个私有作用于，（一个供代码执行的环境，也是一个栈内存）
2.把之前在堆内存中存储的字符串复制一份过来，编程真正的js代码，在新开辟的作用域（栈内存）中自上而下执行
两次执行互不影响，因为用的栈内存，对象复制，更改被复制的对象后原对象会受影响，因为是指向同一个堆内存，但函数不一样，函数会开辟一个新的栈内存来执行，所以不会影响

把其他数据类型转换为number类型

1.发生的情况

• isNaN检测的时候，当检测的值不是数字类型，浏览器会自己调用Number方法把它先转为数字类型，然后在检测是否为非有效数字

isNan('3') => false
  Number('3') => 3
  isNaN(3) => false

isNaN('3px') => true
  Number('3px') => NaN
  isNan(NaN) => true

• 基于parseInt/parseFloat/Number 去手动转换为数字类型
• 数学运算: + - * / % 但是“+”不仅仅是数学运算，还可能是字符串拼接

i++和i+=1的区别
i++是单纯的数学运算，已经摒弃掉字符串拼接

null 转为数字是0
undefined 转数字为NaN

null == undefined //true
null === undefined //false
null && undefined 和其他值都不相等

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

1==true // true
2==true // false // 这里是把true变为数字1

[]==false //true
[] == true //flase
![]==false // true 先算![],吧数组转为布尔取反
![] == true // false 都转换为数字 0==1

数组结构

数组也是对象结构

[12,23,34]

0:12,
1:23,
2:34,
length:3

数组方法

• 会改变原数组的方法

• • push:后面追加1项
• • pop:删除最后一项
• • shift:删除第一项
• • unshift:前面追加1项

** 以上4种方法执行后会返回新的驻足长度 **

slice:

slice() 截取数组的一部分，不改变原数组
字符串也有slice方法

splice() 可以新增删除修改数组，并且该方法会改变原数组

删除：ary.splice(n,m)
从索引n开始，删除m个内容，把删除的部分以一个新数组返回，原数组改变
删除：ary.splice(n)
删除从索引n开始删到最后一项

var a = [1,2,3,4]
a.splice(1)
a // [1]

reverse

翻转数组，原有数组的内容改变了

sort

排序，原有数组改变
[1,23,2,54,42,11,22].sort() // 1,11,2,22,23,42,54
此时的数组排序有问题

sort((a,b)=>{return a-b}) 有回调函数和参数
[1,23,2,54,42,11,22].sort(function(a,b){
return a-b
})

这时候正常了

indexOf()

var a = [1,2,3,4]
Boolean(a.indexOf(8) + 1) // false
Boolean(a.indexOf(1) + 1) // true

这样使用和includes差不多，因为没找到元素的话返回-1 ， -1+1为0就是false了，此外如果索引是0，判断时会判断为false，这时候+1刚好就不会false了

tostring()

数组转为字符串

concat()

合并两个数组，不改变原数组

数组累加快捷方法

var arr = [1,2,3,4,5,6,11,22]
eval(arr.join(’+’))

数组去重（面试常见）

尽量不用双for循环
使用对象key的不重复性

字符串方法

slice和strstring方法基本一样，slice(n,m) 也是截取字符串从n到m，但是只有slice是可以截取负值的

String.prototype 展开对象可以得到很多方法

类数组对象转数组

Array.prototype.slice.call(aryLike)

Array.from(aryLike)

[…aryLike]

一行代码生成带有英文和数字的随机码

Math.random().toString(36).substr(2)

DOM树

当浏览器加载HTML页面的时候，首先就是DOM结构的计算，计算出来的DOM结构就是DOM树

DOM元素获取

document.getElementById

这里的document是限定了获取元素的范围，我们把它称为”上下文“（context）

getElementById的上下文只能是document

因为严格意义上，一个页面的ID是不能重复的

堆栈内存