JSLearn

2017-08-01  本文已影响0人  _Elmer

JavaScript基础知识剖析

01 变量与原型

02

03

04

05

06

07

08 JS算法

09 函数应用


JS小练习

知识点学习

01-01

变量类型和计算(1)

值类型

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

引用类型

var a ={age:20};
var b = a;
b.age = 21;
console.log(a.age); //21
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
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

何时使用 === 和 ==

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

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

01-03

变量类型和计算(3)-理解JSON

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

01-04

原型与原型链-构造函数

知识点

构造函数

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) //创建多个对象

构造函数-扩展

01-05

原型规则和示例

第1条

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

第2条

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

第3条

console.log(fn.prototype);

第4条

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

第5条

//构造函数
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();

循环对象自身属性

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>

名词解释:

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);
      }
    }
  }
}
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.开发普通二级菜单

2.加入延迟优化

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

DatePicker组件开发

1.基础页面制作

2.数据部分

日期对象
上一篇 下一篇

猜你喜欢

热点阅读