JS基本知识点回顾（Ⅰ）

本文用于复习JS相关知识点，相当于知识简单的梳理. So, It's not be Detailed introduction

JS简介

1. 网页是什么？
   • 网页= Html+CSS+JavaScript
   • Html: 网页元素内容
   • CSS: 控制网页样式
   • JavaScript: 操作网页内容，实现网页功能或者效果
2. JavaScript的发展史

• js 是一门脚本语言。
• ECMAScript只用来标准化JavaScript这种语言的基本语法结构

3. 浏览器的渲染机制

• 解析HTML标签，构建DOM数
• 解析CSS标签，构建CSSOM树
• 把DOM和CSSOM组合成渲染树(render tree)
• 在渲染树的而基础上进行布局，计算每个节点的几何结构
• 把每个节点绘制到屏幕上(painting)

4. CSS和JS放置顺序，一部机制

• 使用link标签将样式表放在顶部
• 将JS放在底部
  -脚本会阻塞后面内容的呈现
  • 脚本会阻塞其后组件的下载
    对于图片和CSS，在加载时会并发下载(如一个域名下同时加载两个文件)。但在加载JavaScript时，会禁用并发，并且阻止其他内容下载，所以将javas放入页面底部会导致白屏现象

数据类型

• 数值（number）
• 字符串（string）
• 布尔值（boolean）
• undefind
• null
• 对象（object）
• Symbol
  对象可以分成三个子类型
• 狭义的对象（object）
• 数组（array）
• 函数（function）
  判断值类型的方法
• typeof 运算符
• instanceof运算符（一般用于判断对象实例）
• Object.prototype.toString方法

流程控制语句

此处只提一下for-in和break，其他的流程控制方法不会自行搜索（if、switch、while、do-while、for）
for-in
for-in是一种迭代语句，用于 枚举对象属性

for(var prop in window){
    console.log(prop);
}

break和continue
break关键字在switch语句中已经见过，这两个关键字多用在循环语句中

• break 用于强制退出循环体，执行循环后面的语句
• continue 用于退出本次循环，执行下次循环
  划重点
  break和continue不只可以在switch中运用，循环体都可以运用

for(var i = 1; i< 10; i++){
    if(i % 4 === 0){
        break;
    }

    console.log(i);
}

for(var i = 1; i< 10; i++){
    if(i % 4 === 0){
        continue;
    }

    console.log(i);
}

函数和作用域

• arguments

在函数内部,你可以使用arguments对象获取到该函数的所有传入参数

function printPersonInfo(name, age, sex){
    console.log(name)
    console.log(age)
    console.log(sex)
    console.log(arguments)
console.log(arguments[0])
console.log(arguments.length)
console.log(arguments[1] === age)
}

• 重载

重载是很多面向对象语言实现多态的手段之一，在静态语言中确定一个函数的手段是靠方法签名——函数名+参数列表，也就是说相同名字的函数参数个数不同或者顺序不同都被认为是不同的函数，称为函数重载

在JavaScript中没有函数重载的概念，函数通过名字确定唯一性，参数不同也被认为是相同的函数，后面的覆盖前面的，这是不是意味着JavaScript不能通过重载功能实现一个函数，参数不同功能不同呢？

在JavaScript中，函数调用没必要把所有参数都传入，只要你函数体内做好处理就行，但前提是传的参数永远被当做前几个

function printPeopleInfo(name, age, sex){
    if(name){
        console.log(name);
    }

    if(age){
        console.log(age);
    }

    if(sex){
        console.log(sex);
    }
}


printPeopleInfo('hunger', 3);
printPeopleInfo('hunger', 3, 'male');

• 递归
  简单来说就是自己调用自己，递归需要设置结束条件

function factorial(n){
    if(n === 1){
        return 1
    }
    return n * factorial(n-1)
}
factorial(3)  //6

• 作用域链

var a = 1
function fn1(){
  function fn2(){
    console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出多少

上题中的fn()执行结果是fn2里的console.log(a),那么a在fn2里没有，从fn2所在的作用域找-fn1,fn1里a=2，所以结果为2

• 过程解析

1. 函数在执行过程中，先从自己内部找变量
2. 如果找不到，就从创建当前函数所在的作用域去找，以此往上
3. 注意找的是变量的当前的状态
4. 箭头函数的作用域为创建当前函数所在的作用域的上层作用域

深拷贝和浅拷贝

• 浅拷贝

function shallowCopy(oldObj) {
   var  newObject= {};
   for(var i in oldObj) {
      if(oldObj.hasOwnProperty(i)) {
       newObj[i] = oldObj[i];//hasOwnProperty是判断i是否为自身属性，返回布尔值
}
}
return newObj;
}

• 深拷贝

    function deepCopy(oldObj) {
        var newObj = {};
        for(var key in oldObj) {
            if(typeof oldObj[key] === 'object') {
                newObj[key] = deepCopy(oldObj[key]);
            }else{
                newObj[key] = oldObj[key];
            }
        }
        return newObj;
    }

JSON格式

JSON 格式（JavaScript Object Notation 的缩写）是一种用于数据交换的文本格式，2001年由 Douglas Crockford 提出，目的是取代繁琐笨重的 XML 格式。
JSON 对值的类型和格式有严格的规定。

• 复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
• 简单类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
• 字符串必须使用双引号表示，不能使用单引号。
  对象的键名必须放在双引号里面。
• 数组或对象最后一个成员的后面，不能加逗号

{ name: "张三", 'age': 32 }  // 属性名必须使用双引号

[32, 64, 128, 0xFFF] // 不能使用十六进制值

{ "name": "张三", "age": undefined } // 不能使用undefined

{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName": function() {
      return this.name;
  }
} // 不能使用函数和日期对象

需要注意的是，空数组和空对象都是合格的 JSON 值，null本身也是一个合格的 JSON 值。

ES5 新增了JSON对象，用来处理 JSON 格式数据。它有两个方法：JSON.stringify()和JSON.parse()

JSON.stringify()
JSON.stringify方法用于将一个值转为字符串。该字符串符合 JSON 格式，并且可以被JSON.parse方法还原

JSON.stringify('abc') // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"

JSON.stringify([1, "false", false])
// '[1,"false",false]'

JSON.stringify({ name: "张三" })
// '{"name":"张三"}'

JSON.parse()
JSON.parse方法用于将JSON字符串转化成对象

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null

var o = JSON.parse('{"name": "张三"}');
o.name // 张三

深拷贝的另一种写法(非常简单)

var obj = {
    name: 'hunger',
    age: 3,
    friends: ['aa', 'bb', 'cc']
}

var obj2 = JSON.parse(JSON.stringify(obj))
obj.age = 4
console.log(obj2.age)

JavaScript 对象和 JSON 的关系

JavaScript 对象的字面量写法只是长的像 JSON 格式数据，二者属于不同的范畴，JavaScript 对象中很多类型(函数、正则、Date) JSON 格式的规范并不支持，JavaScript 对象的字面量写法更宽松。