重读-javascript高级程序设计三

前言

俗话说，温故而知新,可以为师矣，对于前半句话，深有体会，每一次重读，都会获得新的体会，然后那种收获感让来非常的愉悦，可以为师矣，当别人的老师，就我目前而言，不要误人子弟了。来简单说说这本书，被称之为js 界的圣经之一，尽管现在已经是ES6的时代，但其中的知识，确实丝毫不过时，对js 语言的基本特性，都做了较全面的介绍，而且也不枯燥。想到在学校期间啃这本书，就犹如天书，啃了好几次，终于有些明悟。然后工作期间也看了一两遍，实践慢慢的验证书本的知识，有了更深的理解和理会，对于书本的知识，自诩吃透了百分之80以上，如何再次重读，我将做一些总结性工作，诉说这些知识点在项目中的运用。

JavaScript 简介

• 最初为网页上的表单验证而出现的脚本语言(注：运行时，才进行解释，编译，然后执行)

通过与网页交互，无需要重新刷新页面，即可动态概念页面内容，通俗讲就是,可是对表单验证，实现炫酷交互动画效果。如今js 并不只争对浏览器了，它还可以用于桌面应用软件开发（如 Electron）,移动应用开发如react-native,还有依托于超级APP内的应用,微信小程序，也是由js 开发

• 浏览器端的javascript = ECMAScript(制定语言基本特性，如语法,对象,类型…)+BOM+DOM

• node 端的javascript = Commonjs(指定js 与文档交互接口等等) +ECMAScript

早期 由于浏览器之争，产生了许多不兼容问题，一个功能，就可能hack多套代码，如今，时代变了，ie早已被淘汰，现代大浏览器大致都在按照标准去实现,兼容已经不是主要的问题。至于DOM，JQuery时代也早已过去，现代前端开发，也不需要再精心关注DOM 的操作流程，如 获取DOM,填充数据到DOM 节点，然后再插入到文档中，这些都有如今现代前端框架 react,vue,angular 自动帮我做好，我们唯一只要做的是就是，获取数据，组合数据，仍给他们就行了。

第二章 在HTML 中使用 JavaScript

• 内部通过script 插入标签使用
• 外部引用 <script scr="xxxxx"><script/>

对于script 标签的defer 属性，权当了解，async 属性..这些属性..后续了解

现代化开发，以前的网站模式衍化成了 webApp 模式，现代化的开发主要是单页面为主流，对于需要seo的应用，我们则界面框架生成多页面应用，比如我最近学习的next.js。 况且我们现在也不会过多的关注html中JS引入的位置，因为这一切都由工具去生成，这就是前端工程化

基本概念

这章主要是提语法，控制流，关键字，数据类型，这些都是老生常谈的内容，严格模式 倒是可以一说.

总的来说，该模式就是让你的代码更安全，更高效，非严格模式下的静默错误，在严格模式下会暴露出来，
如 给不可变对象的属性，赋值，现在化打包工具webPack 打包而成的代码，都开启着JS的严格模式,为保证代码质量，也可加入eslint 插件纠正我们的代码,提交代码质量。关于严格模式更详细说明请参阅下方链接.

MDN 严格模式

说说变量的声明方式，es6时代,不变的数据用const ,需要变化的数据用 let ,仅此而已

用全等号做比较,switch 中case 的比较是全等比较

位运算符的运算，这里我具体也没有使用过，仅作记录

• 按位非~ ,为操作数的负数-1

  ~25=-25-1=-26 实质是:25的反码 -1

• 按位与& ,二进制数 ，一一对其， 1-1= 1 1-0=0 0-0=0

result=25&3   // 1   先两个数转二进制 ，然后执行上述规则

• 按位或 | ,二进制数 ，一一对其， 1-1= 1 1-0=1 0-0=0

  result=25|3 // 27 先两个数转二进制 ，然后执行上述规则

• 按位异或 ^,对同一个数异步，结果这个数消失 ,1-1=0 1-0=1 0-0=0

  利用这个特性，可以解决力扣的”缺失数 问题”

• 左移，右移，都是针对二进制数进行操作

布尔逻辑操作

• 逻辑与 &&
• 逻辑非 ||

两者都属于短路操作符，在react中JSX经常使用,

如 ：{loading&&<div>loading</div>}

对于数字的 运算和 比较 ，最好要明确的调用转化数字函数转化为数字类型，不要由运算操作符转化。这样不明确,规则太多，反而杂乱，除非你特别熟悉转化规则.

todo :

• 对对象的迭代方式

变量 作用域和内存问题

尽管js很灵活，一旦一个具有特定类型的变量声明下来，也很少去重新更改为别类型的值，如

var name='i am string';
name=0;  // 这样的事没有必要

所有的函数的参数都是按值传递的

就算在项目中，也很少遇到要求判断对象的类型的需求

不可变值，不带副作用的函数称之为纯函数

第五章 引用类型

js中的数组，尽管可以保持不同的类型数据，但在实际的项目中，一般都是保存同一个类型数据结构，比如一个某个新闻的数据列表如下：

const news=[{
    id:1,
    title:'xxx',
    imageUrl:'https:....png'
},{
    id:2,
    title:'xxxxx',
    imageUrl:'https:....png'
}]

下面挑选几个常用的数组方法，进行说明

map

组合数据最常用的手段，react 中 经常使用它,生成 jsx 元素数据，并把数据填充进去,如下:

[{name:'xxx',age:12}].map(
    (item,index)=>(<div key={index}>{item.name}{item.age}</div>
))

filter

这个也经常使用，用于筛选，过滤不符合条件的数据，就比如，我要得到年纪大于或者等于18岁的人

const filterResult=[{name:'xxx',age:12},{name:'xxx',age:18}].filter(({age})=>age>=18)
// filterResult=[{name:'xxx',age:18}]

some

如果返回的值，一个为true,就返回true,使用场景有如，比如在如果某个值存在，就为真的结果

every

这个只有当所有的结果返回true，才返回true ,这个我倒是在做多表单验证的时候用到，如果表单都通过验证，那么就返回true，然后，判断这个值，提交表单的值

reduce

这方法就比较高级了，组合数据的高超手段，在redux 提供的compose 函数可见它的 威力,具体可参如下链接

MDN reduce

Date 数据类型

这个在项目中经常使用，常见需求由 转化为时间戳，一个就是格式化时间，这些我们都可以借助
第三方成熟的库进行处理,如:

• MDN Date
• moment.js
• day.js

关于正则表达式

这个如果不经常使用，也就忘记，一般在项目中也就轻度使用，如手机号验证,只能输入数字金额要求

函数的apply 和call

在特定的作用域中调用函数 ,设置函数体内this 对象的值,两者的不同之处，仅仅是传参数不同,apply是类数组对象,call是数组 实际的项目中很少用，不用有个bind方法
也是具有相同的作用,react class组件 类中的函数绑定一般如下:

constructor(props){
   super(props)
   this.handleClick=this.handleClick.bind(this)
}

handleClick(){
    // 正常调用 this.setState()
}

encodeURI 与encodeURIComponent

对url进行编码，以便让浏览器识别，不同之处，一个是针对整个URL ,一个大部分针对URL查询参数字符串

global全局对象 与window 对象 关系

浏览器中的 global 对象的实现就是window对象，可以这样理解,全局函数,如
parseInt() 可以在window 对象上找到

面向对象的程序设计

• 对象的创建

  • 构造函数模式
  • 工厂模式 (就是一个函数，用new Object()生成对象)

• 对象的属性

  • 可读，可写，可枚举，配置
  • 访问器属性
  • Object.defineProperty() && Object.defineProperties()

• 对象的原型

  • 原型的识别 isPrototypeOf()
  • 每个函数都有一个prototype 属性,指向函数原型
  • 作用：让同一类型的对象 共享同一个函数

• 继承

  • 原型链继承
  • 借用构造函数继承
  • 组合继承
  • 寄生组合继承

BOM

定义了操作浏览器相关API的接口，由于window对象 ,navigator ,浏览器历史,浏览器窗口

• navigator

  此对象下的userAgent比较有用，用来识别不同的客户端代理，如是微信，还是支付宝,还是ios,还是android 设备

• location

  • 获取页面的信息，如 url ,searchQuery,hash,domain 等等