JSLearn

作者: _Elmer | 来源:发表于2017-08-01 21:08 被阅读0次

JSLearn-ES6 'ES6语法学习'

JavaScript基础知识剖析

01 变量与原型

01-01 变量类型和计算（1）
01-02 变量类型和计算（2）
01-03 变量类型和计算（3）-JSON的理解
01-04 原型与原型链-构造函数
01-05 原型规则和示例
01-06 原型链
01-07 instanceof
01-08 知识点小结 & 解决问题

02

02-01 作用域和闭包-执行上下文
02-02 作用域和闭包-this
02-03 作用域和闭包-作用域
02-04 作用域和闭包-闭包
02-05 知识点小结 & 解决问题

03

03-01 异步和单线程-什么是异步
03-02 异步和单线程-单线程
03-03 其他知识点-日期和Math
03-04 其他知识点-数组和对象的API

04

04-01 从基础知识到JS-Web-API
04-02 DOM本质
04-03 DOM节点操作
04-04 DOM结构操作
04-05 DOM知识总结
04-06 BOM知识点

05

05-01 事件-知识点
05-02 Ajax-XMLHttpRequest
05-03 存储

06

06-01 模块化
06-02 模块化-AMD
06-03 模块化-CommonJS

07

07-01 上线回滚-上线回滚流程

08 JS算法

08-01 JavaScript算法测试函数
08-02 JavaScript算法-冒泡排序
08-03 JavaScript算法-选择排序

09 函数应用

09-01 JavaScript算法测试函数

JS小练习

JSDemo JS小程序
JDMenu 京东无延迟菜单
DatePicker组件开发
手风琴效果开发

知识点学习

01-01

变量类型和计算（1）

JS中使用typeof能得到的哪些类型
何时使用===何时使用 ==
JS中有哪些内置函数
JS变量按照存储方式区分为哪些类型，并描述其特点
如何理解JSON

值类型

从内存来说值类型是把每一个值存储在变量类型的每一个位置

var a = 100;
var b = a;
a = 200
console.log(b);//100

引用类型

把a赋值*-成一个对象，a的位置是通过指针指向一个位置
把b赋值成a，其实是定义一个b，b的指针指向了那个对象位置
也就是有两份 age：20的对象
对象的引用，就相当于复写一个对象，这两个对象之间相互独立
引用类型：对象、数组、函数

var a ={age:20};
var b = a;
b.age = 21;
console.log(a.age); //21

typeof运算符

typeof undefined //undefined
typeof 'abc' // String
typeof 123 //number
typeof true //boolean
typeof {} //object
typeof [] //object
typeof null //object
typeof console.log //funciton

变量计算-强制类型转换

字符串拼接

var a = 100 + 10;//110
var b = 100 + '10';//10010

== 运算符

100 == '100' //true
0 == '' //true
null == undefined //true

if语句

var a = true;
if(a){
  //....
}
var b = 100;
if (b) {
  //....
}
var c = ''；
if (c) {
  //...
}

逻辑运算

console.log(10 && 0); //0
console.log('' || 'abc'); //abc
console.log(!window.acb); //true

//判断一个变量会被当做true还是false
var a = 100;
console.log(!!a);//true

01-02

变量类型和计算（2）

JS中使用typeof能得到的类型

//问题：JS中使用typeof能得到哪些类型
typeof undefined //undefined
typeof 'abc' // String
typeof 123 //number
typeof true //boolean
typeof {} //object
typeof [] //object
typeof null //object
typeof console.log //funciton

总结来说typeof可以得到undefined、String、number、boolean可以区分值类型，但对于引用类型无法很细的区分，只能区分函数。
尤其是typeof null object它是一个引用类型

何时使用 === 和 ==

//问题：何时使用===何时使用==

if (obj.a == null) {
  //这里相当于 obj.a === null || obj.a === undefined,简写形式
  //这是jquery源码中推荐的写法
}

JS中的内置函数

//问题：JS中有哪些内置函数----数据封装类对象
//作为构造函数的作用
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error

JS按照存储方式区分变量类型

//JS 变量按照存储方式区分为哪些类型，并描述其特点

//值类型
var a = 10;
var b = a;
a = 11;
console.log(b);  // 10

//引用类型
var obj1 = {x:100}
var obj2 = obj1;
obj1.x = 200;
console.log(obj2.x); // 200

ES中，引用类型是一种数据结构，用于将数据和功能组织在一起

01-03

变量类型和计算（3）-理解JSON

//问题：如何理解JSON
//JSON只不过是一个JS对象
//JSON也是一个数据格式
JSON.stringify({a:10,b:20});
JSON.parse('{"a":10."b":20}')

01-04

原型与原型链-构造函数

如何准确判断一个变量数组类型
写一个原型链继承的例子
描述new一个对象的过程
zepto(或其他框架)源码中如何使用原型链

知识点

构造函数
构造函数-扩展
原型规则和示例
原型链
instanceof

构造函数

自己的想法
普通的函数就像是按步骤执行的动作，而构造函数更像是可更改零件的木偶，普通函数可以直接调用，但是构造函数需要new
因为构造函数也是函数，所以可以直接被调用，但是它的返回值为undefine，此时构造函数里面的this对象等于全局this对象
扩展实例和对象的区别，从定义上来讲：1、实例是类的具象化产品，2、而对象是一个具有多种属性的内容结构。

funciton Foo(name,age){
  this.name = name;
  this.age = age;
  this.class = 'class-1';
  // return this //默认有这一行
}
var f = new Foo('zhangsan',20); //实例化对象
// var f1 = new Foo('lisi',22) //创建多个对象

构造函数-扩展

var a = {} 其实是 var a = new Object()的语法糖
var a = [] 其实是 var a = new Array()的语法糖
function Foo(){...}其实是 var Foo = new Function(...)
使用 instanceof 判断一个函数是否是一个变量的构造函数
- 如果想判断一个变量是否为“数组”：变量 instanceof Array

01-05

原型规则和示例

5条原型规则
原型规则是学习原型链的基础

第1条

所有的引用类型(数组、对象、函数)，都具有对象特质、即可自由扩展属性(除了“NULL”以外)

var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn(){
  fn.a=100;
}

第2条

所有的引用类型(数组、对象、函数)，都有一个__proto__(隐式原型)属性，属性值是一个普通的对象

console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);

第3条

prototype解释为JavaScript开发函式库及框架
所有的函数，都有一个prototype（显示原型）属性，属性值也是一个普通对象。

console.log(fn.prototype);

第4条

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

console.log(obj.__proto__ === Object.prototype);

第5条

当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__(即它的构造函数prototype)中寻找

//构造函数
function Foo(name,age){
  this.name = name;
}
Foo.prototype.alertName = function () {
  alert(this.name);
}
//创建示例
var f = new Foo('zhangsan')
f.printName = function () {
  console.log(this.name);
}
//测试
f.printName();
f.alertName();

this

循环对象自身属性

var item;
for (item in f) {
  //高级浏览器已经在for in 中屏蔽了来自原型的属性
  //但是这里建议大家还是加上这个判断，保证程序的健壮性
  if(f.hasOwnProperty(item)) {
    console.log(item);
  }
}

01-06

原型链

//构造函数
function Foo(name,age){
  this.name = name;
}
Foo.prototype.alertName = function (){
  alert(this.name);
}
//创建示例
var f = new Foo('zhangsan');
f.printName = function () {
  console.log(this.name);
}
//测试
f.printName();
f.alertName();
f.toString(); // 要去f.__proto__.__proto__中查找

原型链视图

名词解释：

n: 数据规模
k:“桶”的个数
In-place: 占用常数内存，不占用额外内存
Out-place: 占用额外内存
稳定性：排序后2个相等键值的顺序和排序之前它们的顺序相同

08-02

JavaScript算法-冒泡排序

冒泡排序
最慢的排序算法之一
冒泡排序，之所以这么叫是因为使用这种排序算法排序时，数据值就会像气泡一样从数组的一端漂浮到另一端。假设正在将一组数字按照升序排列，较大的值会浮动到数组的右侧，而较小的值会浮动到数组的左侧。之所以会产生这种现象是因为算法会多次在数组中移动，比较相邻的数据，当左侧值大于右侧值时将它们进行互换。


function bubbleSort() {
  var numElements = this.dataStore.length;
  var temp;
  for (var outer = numElements; outer >= 2; --outer) {
    for (var inner = 0; inner <= outer - 1; ++inner ) {
      if (this.dataStore[inner] > this.dataStore[inner + 1]) {
        swap(this.dataStore,inner,inner + 1);
      }
    }
  }
}

使用bubbleSort()对10个数字排序

var numElements = 10;
var mynums = new CArray(numElements);
mynums.setData();
console.log(mynums.toString());
mynums.bubbleSort();
console.log(mynums.toString);

08-03

JavaScript算法-选择排序

选择排序
选择排序从数组的开头开始，将第一个元素和其他元素进行比较。检查完所有元素后，最小的元素会被放到数组的第一个位置，然后算法会从第二个位置继续。这个过程一直进行，当进行到数组的倒数第二个位置时，所有的数据便完成了排序。
选择排序会用到嵌套循环。外循环从数组的第一个元素一定到倒数第二个元素；内循环从第二个数组元素移动到最后一个元素，查找比当前外循环

09-01

JS基本应用-函数

函数声明与函数表达式、对象实例化的区别

 add1(1,1);
 add2(1,2);
 add3(1,3);
 function add1(i, j){
   console.log(i+j);
 }
 var add2 = function(i, j){
   console.log(i+j);
 }
 var add3 = new Function("i", "j", "console.log(i+j);");

对象实例化与函数声明与函数表达式的区别

 (function(){
   var i = 10;
   function add(j) {
     console.log(i+j);
     debugger;
   }
   add(1);
 })();

 (function(){
   var i = 10;
   var add = new Function("j", "console.log(i+j);debugger;");
   add(1);
 })();

bind的使用

 function Point(x, y){
     this.x = x;
     this.y = y;
 }
 Point.prototype.move = function(x, y) {
     this.x += x;
     this.y += y;
 }
 var p = new Point(0,0);
 var circle = {x:1, y:1, r:1};
 var circleMove = p.move.bind(circle, 2, 1);
 circleMove();

构造函数

 function Car(type,color){
   this.type = type;
   this.color = color;
   this.status = "stop";
   this.light = "off";
 }
 Car.prototype.start = function(){
   this.status = "driving";
   this.light = "on";
   console.log(this.type + " is " + this.status);
 }
 Car.prototype.stop = function(){
   this.status = "stop";
   this.light = "off";
   console.log(this.type + " is " + this.status);
 }
 var audi = new Car("audi", "silver");
 var benz = new Car("benz", "black");
 var ferrari = new Car("ferrari", "yellow");

函数调用模式

 function add(i, j){
   return i+j;
 }
 var myNumber = {
   value: 1,
   double: function(){
     var helper = function(){
       this.value = add(this.value,this.value);
     }
     helper();
   }
 }

arguments转数组

 function add(i, j) {
   var args = Array.prototype.slice.apply(arguments);
   args.forEach(function(item){
     console.log(item);
   })
 }
 add(1,2,3);

arguments.callee使用

 console.log(
   (function(i){
     if (i==0) {
       return 1;
     }
     return i*arguments.callee(i-1);
   })(5)
 );

递归

 function factorial(i){
   if (i==0) {
     return 1;
   }
   return i*factorial(i-1);
 }

普通递归函数跟记忆函数调用次数对比

 var factorial = (function(){
   var count = 0;
   var fac = function(i){
     count++;
     if (i==0) {
       console.log('调用次数：' + count); 
       return 1;
     }
     return i*factorial(i-1);
   }
   return fac;
 })();
 for(var i=0;i<=10;i++){
   console.log(factorial(i)); 
 }

//记忆函数
 var factorial = (function(){
   var memo = [1];
   var count = 0;
   var fac = function(i){
     count++;
     var result = memo[i];
     if(typeof result === 'number'){
       console.log('调用次数：' + count); 
       return result;
     } 
     result = i*fac(i-1);
     memo[i] = result;
     return result;
   }
   return fac;
 })();
 for(var i=0;i<=10;i++){
   console.log(factorial(i)); 
 }

curry 函数柯里化

把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术

 function add(value){
    var helper = function(next){
       value = typeof(value)==="undefined"?next:value+next;
       return helper;
    }
    helper.valueOf = function(){
      return value;
    }
    return helper
 }

JSDemo JS小程序

JDMenu 京东无延迟菜单

1.开发普通二级菜单

事件代理方式进行绑定
mouseenter和mouseover的区别：
使用mouseover/mouseout时候，如果鼠标移动到子元素上，即便没有离开父元素，也会触发父元素的mouseout事件；
使用mouseenter/mouseleave时，如果鼠标没有离开父元素，在其子元素上任意移动，也不会触发mouseleave事件；

2.加入延迟优化

切换子菜单的时候，用setTimeout设置延迟
debounce去抖o((⊙﹏⊙))o.技术：
在事件被频繁触发时买只执行一次

3.基于用户行为预测的切换技术

跟踪鼠标的移动
用鼠标当前位置，和鼠标上一次位置与子菜单上下边缘形成的三角区域进行比较

DatePicker组件开发

1.基础页面制作

标头
身体

2.数据部分

渲染当月日历表格
用于点击时取日期值

日期对象

newDate(year,month-1,date)
月份需要-1
越界自动进退位
getFullYear()/getMonth()/getDate()
getDay()获取当前日期是周几？
转自github

JSLearn

JavaScript基础知识剖析

01 变量与原型

02

03

04

05

06

07

08 JS算法

09 函数应用

JS小练习

知识点学习

01-01

变量类型和计算（1）

值类型

引用类型

变量计算-强制类型转换

01-02

变量类型和计算（2）

JS中使用typeof能得到的类型

何时使用 === 和 ==

JS中的内置函数

JS按照存储方式区分变量类型

01-03

变量类型和计算（3）-理解JSON

01-04

原型与原型链-构造函数

知识点

构造函数

构造函数-扩展

01-05

原型规则和示例

第1条

第2条

第3条

第4条

第5条

循环对象自身属性

01-06

原型链

原型链视图

名词解释：

08-02

JavaScript算法-冒泡排序

08-03

JavaScript算法-选择排序

09-01

JS基本应用-函数

JSDemo JS小程序

JDMenu 京东无延迟菜单

1.开发普通二级菜单

2.加入延迟优化

3.基于用户行为预测的切换技术

DatePicker组件开发

1.基础页面制作

2.数据部分

日期对象

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读