美文网首页
JSLearn

JSLearn

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

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

05

06

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__中查找

原型链视图

</p>

名词解释：

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

08-02

JavaScript算法-冒泡排序

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

</p>


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算法-选择排序

  • 选择排序

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

  • 选择排序会用到嵌套循环。外循环从数组的第一个元素一定到倒数第二个元素；内循环从第二个数组元素移动到最后一个元素，查找比当前外循环

<p align="center">

</p>

09-01

JS基本应用-函数

  1. 函数声明与函数表达式、对象实例化的区别
 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);");
  1. 对象实例化与函数声明与函数表达式的区别
 (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);
 })();
  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();
  1. 构造函数
 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");
  1. 函数调用模式
 function add(i, j){
   return i+j;
 }
 var myNumber = {
   value: 1,
   double: function(){
     var helper = function(){
       this.value = add(this.value,this.value);
     }
     helper();
   }
 }
  1. arguments转数组
 function add(i, j) {
   var args = Array.prototype.slice.apply(arguments);
   args.forEach(function(item){
     console.log(item);
   })
 }
 add(1,2,3);
  1. arguments.callee使用
 console.log(
   (function(i){
     if (i==0) {
       return 1;
     }
     return i*arguments.callee(i-1);
   })(5)
 );
  1. 递归
 function factorial(i){
   if (i==0) {
     return 1;
   }
   return i*factorial(i-1);
 }
  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)); 
 }
  1. 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

    JSLearn-ES6 'ES6语法学习' JavaScript基础知识剖析 01 变量与原型 01-01 变量类...

网友评论

      本文标题：JSLearn

      本文链接：https://www.haomeiwen.com/subject/whsslxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|JSLearn|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！