JavaScript知识整理 -- 阶段二

Q1：基本类型和引用类型

引用类型：对象，数组，函数

Q2: typeof 运算符的类型（6种，只能区分值类型）

Q3：变量计算- 强制类型转换

字符串拼接

== 运算符

逻辑运算符

&& 有假值就取

|| 有真值就取

Q4 :如何理解JSON

JSON 是一种数据格式，同时也是js中的一个对象。

JSON.stringify({name:'nose'})    //"{"name":"nose"}"
JSON.parse('{"name":"nose"}')    //{name: "nose"}

Q5: 原型和原型链

所有引用类型（对象，数组，函数）都具有扩展属性，__proto__（隐式原型）属性。

所有函数都有一个prototype（显示原型）属性

所有引用类型（对象，数组，函数），__proto__属性值指向它的构造函数的'prototype‘属性值。

var obj = {}
obj.__proto__ === Object.prototype    //true

原型链：

Q6： instanceof

instanceof 用于判断引用类型属于哪个构造函数。

Q7、如何准确判断一个对象是数组类型

var arr= []
console.log(arr instanceof Array)   //true
console.log(typeof arr)     //object    typeof不行啊

Q8: 描述new一个对象的过程

Q9：封装DOM查询的例子（可用于链式调用）

  <p id="desc">before content</p>

  <script type="text/javascript">
  function Elem(id) { //获取这个元素
    this.elem = document.getElementById(id)
  }
  Elem.prototype.html = function(val) {
    var elem = this.elem
    if (val) {
      elem.innerHTML = val
      return this        //用于链式使用
    } else {
      return elem.innerHTML
    }
  }

  Elem.prototype.on = function(type, fn) {
    var elem = this.elem
    elem.addEventListener(type, fn)
    return this     //用于链式使用
  }

  var div1 = new Elem('desc')
  div1.html('<div>新的东西</div>').on('click', function() {
    alert('点击事件')
  })      //新的东西    页面上的输出
  </script>

Q10 ：声明提升

  console.log(a)  //undefined
  var a = 100

  fn(10)      
  function fn(num) {
    console.log(num)  //10
  }

Q11: 创建10个标签，并且点击的时候弹出对应的序号

//自由变量，要去父作用域取值

var i
for (i=0; i<10; i++) {
  (function(i){            //通过立即执行函数创建函数的作用域，并且传递i的值
    var a = document.createElement('a')
    a.innerHTML = i + '</br>'
    a.addEventListener('click', function(e) {
      e.preventDefault()
      console.log(i)    //自由变量，要去父作用域取值
    })
    document.body.appendChild(a)
  })(i)
}

Q12：如何理解作用域

自由变量
作用域链，即自由变量的查找
闭包的两个场景

Q13：闭包在实际开发中的应用

用于封装变量，收敛权限。这样只能通过函数firstLoad() 来修改_list 里的值。

function isFirstLoad() {
  var _list = []
  return function(id) {
    if (_list.indexOf(id) >= 0) {
      console.log('false')
      return false
    } else {
      _list.push(id)
      console.log('true')
      return true
    }
  }
}
var firstLoad = isFirstLoad()
firstLoad(10)   //true
firstLoad(10)   //false

Q14：前端使用异步的情景

特点：他们都需要等待

Q15：同步和异步的区别

同步会阻塞代码，而异步不会。

alert是同步，而setTimeout是异步。

Q16 : setTimeout

console.log(1)
setTimeout(function() {
  console.log(2)
  }, 1000)
console.log(3)
setTimeout(function() {
  console.log(4)
}, 0)
// 1 3 4
// 1s后输出2

Q17：数组API

var arr = ['a','b', 'c']
arr.forEach(function(item, index) {
  console.log(item, index)    
})
a 0
b 1
c 2

var arr = [1, 2, 3]
var result = arr.every(function(item, index) {
  // 判断数组是否都满足这个条件
  if (item < 4) {
    return true
  }
})
console.log(result) //true

var arr = [1, 2, 3]
var result = arr.filter(function(item, index) {
  // 将满足条件的过滤
  if (item < 2) {
    return true
  }
})
console.log(result) //[1]

Q18：获取随机数，要求长度一定（长度一直为10）

var random = Math.random()
random = random + '00000000'
random = random.slice(0, 10)
console.log(random)   //0.38112122

Q19：能遍历对象和数组的forEach函数

function forEach(obj, fn) {
  var key 
  if (obj instanceof Array) {
    // 准确判断是不是数组
    obj.forEach(function(item, index) {
      fn(index, item)   //这里参数顺序换了，为了跟对象的一致
    })
  } else {
    // 应用对象的方法遍历
    for (key in obj) {
      fn(key, obj[key])
    }
  }
}

Q20：property和attribute

  <div id="one" class="div1">this is one</div>
  <div id="two" data-name="div2">this is two</div>

<script type="text/javascript">

  // property: 只是一个JS对象的属性的修改
var div1 = document.getElementById('one')
console.log(div1.className)   //div1
div1.className = 'abc'
console.log(div1.className)   //abc

  //Attribute  标签内的属性
var div2 = document.getElementById('two')
console.log(div2.getAttribute('data-name'))   //div2

</script>

Q21：DOM是哪种基本的数据结构

树

Q22：location

Q23：创建一个ajax请求

var xhr = new XMLHttpRequest()
xhr.open("GET", '/api', false)  //第三个参数是表示是否异步发送请求的布尔值，如果不填写，默认为true，表示异步发送
xhr.onreadystatechange = function() {
  //这儿的函数异步执行
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}
xhr.send(null)

Q24：跨域

条件：协议、域名、端口有一个不同就算跨域

Q25：Cookie、 localStorage

Cookie：本身用于客户端和服务端通信，但是具有本地存储的功能。API：document.Cookie = ...

localStorage：API简单，最大容量5M

localStorage.setItem(key, value)    //设置

localStorage.getItem(key)    //获取

Q25 ：AMD "异步模块定义"

全局define函数
全局require函数
依赖JS会自动异步加载

Q26： CommonJS

nodejs模块化规范。
CommonJS不会异步加载，而是同步一次性加载出来。

了解下glup、webpack、nodeJs

Q27：上线和回滚

Q28：加载一个资源的过程

浏览器根据DNS服务器得到域名的IP地址。
发送http请求
服务器收到、处理并返回http请求
浏览器得到返回的内容

Q29：window.onload 和 DOMContentLoaded

Q30：性能优化（三个方面）

减少DOM操作：1.缓存查询 2.合并DOM插入

Q31：安全性

XSS 跨站请求攻击：替换关键字< 为<

XSRF 跨站请求伪造：增加验证功能

Q32：meta标签

< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />

告诉IE浏览器，IE8/9以及以后的版本都会以最高版本IE来渲染界面。

chrome=1: 如果有chrome浏览器就用chrome浏览器渲染。

<meta name="renderer" content="webkit">

双核浏览器优先渲染。

Q33：script的js异步加载方式

3种方式：defer、async、动态创建script

html4.0中定义了defer；html5.0中定义了async。指定异步脚本的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容，因此，建议异步脚本不要在加载期间修改DOM。

共同点：不会阻塞文档元素的加载。

不同点：async会让脚本在加载完可用时立即执行，而defer脚本则会在dom加载完毕后执行

JavaScript知识整理 -- 阶段二

猜你喜欢