Web从入门到放弃<7>

从这章开始读<javascript高级程序设计>

<1>typeof 返回字符串 / 类型

未定义:undefined

布尔:boolean

字符串:string

数值:number

对象或null:object

函数:function

对undefined产生的疑问:

var message;
message===undefined  //true
console.log(message) // undefined

// 和下面一样
var message = undefined


//对于未定义的a 来说
console.log(typeof a) // undefined
console.log(a)           // not allowed

一些number运算:

var a = 1.0 // a 为整数

//Number.MIN_VALUE 最小值

//Number.MAXX_VALUE 最大值

//任何数/0 返回NaN

//isNaN()检查非数值

//Number() , 如果输入Boolean值返回 1 or 0,null 返回0 , undefined 返回NaN，空字符串返回0

parseInt('1234blue') -> 1234
parseInt('') ->NaN
parseInt('0xA') //10
parseInt('0xA',16) // 10
parseInt('10',10) // 按10进制解析字符串 10
parseInt('10',16) // 16 .按16进制 0*16^0 + 1*16^1 = 16
parseInt('10',2) // 2 按二进制 = 0*2^0 + 1*2^1 = 2

//parseFloat也可能返回整数
parseFloat('0xA') // 0 比较特殊，如果parse 16进制，返回整数0  , 虽然0xA按16进制表示为10
parseFloat('1234abc') // 1234

一些字符串运算:

var a = false;
console.log(a.toString()); //false

var b = 10;
console.log(b.toString(16));  // a
console.log(b.toString(2));   // 1010

var c= null;
console.log(String(a));  // false
console.log(String(b)); // 10
var d;
console.log(String(d)); // undefined

位:

1,按位非 ~

var num=25 ; var num2 = ~num1; 结果是-26. 就是把原来的二进制的0反过来写成1

2， &

3， |

4，按位异 (XOR) 不一样的二进制位为1 一样的为0

5，左右移位符号<< >>

with用法，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery/jquery-3.2.1.min.js"></script>
</head>
<body>

<h1 id="nt">HelloWorld</h1>


<script>
    $(document).ready(function () {
        var h1 = document.getElementById('nt');
        with(h1){
            console.log('bise method get text:',lastChild.nodeValue);
        }
        with($('#nt')){
            console.log("jq method get text:",text());
        }
    })
</script>
</body>
</html>

View Code

没有块的作用域:

if(true){

var color = 'blue';

}

if语句结束后color没有销毁，会存在当前的执行环境中。

for也一样。例如for(var i=0;i<100;i++){

}

alert(i) // 依然能访问

<2> 对列表的操作

length是一个rw属性。列表可以toString(),indexOf() 返回元素在列表的位置.

也可以重载对象的toString:function(){}

join方法的使用.

var sample_array = [0,1,2,3];
sample_array.length = 3;
console.log(sample_array);
sample_array[5] = 5;
console.log(sample_array);


console.log(sample_array instanceof Array);
console.log(Array.isArray(sample_array));

var narray = [5,8,3,4];
console.log(narray.toString());
console.log(narray.indexOf(narray[2]));  // return 2

var colorArray = ['red','green','blue'];
console.log(colorArray.toString());
// In chrome , alert(colorArray) , result should same as colorArray.toString();


var person1 = {
    toString:function () {
        return "Gearslogy";
    }
};
var person2 = {
    toString:function () {
        return "HNodoule";
    }

};

var people = [person1,person2];
console.log(people.toString());
console.log(people.join(','));
console.log(people.join('||'));

View Code

sort/concat/slice/splice/pop/shift/unshift

// remove and get last element
var array = [1,2,3,4];
console.log(array.pop());
console.log(array);

// remove and get the front

var array2 = [1,2,3,4];
console.log("shift",array2);
console.log(array2.shift());
console.log(array2);

var array3 = [3,4];
console.log('unshift',array3);
array3.unshift(1,2);
console.log(array3);
array3.reverse();
console.log(array3);


// test sort
var array4 = [0,1,5,10,15];
array4.sort();
console.log(array4);

function compare(value1,value2) {

    if(value1<value2) return -1;
    else if(value1>value2) return 1;
    else return 0;
}
function compare2(value1,value2) {
    return value2-value1;
}
array4.sort(compare);
console.log(array4);
array4.sort(compare2);
console.log(array4);

// concat
var array5 = [1,2,3];
var array6 = [4,5,6];
array5=array5.concat(array6);
console.log(array5);

// slice
console.log(array5.slice(0,2));
console.log(array5.slice(-3,-1));

var colors = ["red","green","blue"];
var removed = colors.splice(0,1); // array
console.log(colors,"and remove:",removed);

colors.splice(0,0,'yellow');
console.log(colors);

View Code

遍历:

var numbers = [6,5,4,3,2,1];
console.log('every function');
var result1= numbers.every(function (item,index) { console.log(item,index);return item>2 });

console.log('some function');
var result2 = numbers.some(function (item,index) { console.log(item,index);return item>2 });
console.log(result1);
console.log(result2);

console.log('filter function');
var result3 = numbers.filter(function (item,index) {
    console.log(item,index);
    return item>2;
});
console.log(result3);

console.log('map function');
var result4 = numbers.map(function (value, index) { return value*2; });
console.log(result4);

View Code

时间操作,部分来源于网络:

var now = new Date();
var start = Date.now();
//console.log('Hello world');
var end = Date.now();
var phase = end -start ;
//console.log(phase);


//console.log(now.toDateString(),now.toTimeString());

// calculate two time days

var rh_start = new Date('2018/1/9 23:00:00');
var rh_end = new Date('2018/1/10 24:00:00');
console.log("start	",rh_start,"	STRING:",rh_start.toDateString(),rh_start.toTimeString());
console.log("end		",rh_end,"	STRING:", rh_end.toDateString(),rh_end.toTimeString());
console.log(parseInt(rh_end - rh_start));//两个时间相差的毫秒数
console.log(parseInt(rh_end - rh_start) / 1000);//两个时间相差的秒数
console.log(parseInt(rh_end - rh_start) / 1000 / 60);//两个时间相差的分钟数
console.log(parseInt(rh_end - rh_start) / 1000 / 60 / 60);//两个时间相差的小时数
console.log(parseInt(rh_end - rh_start) / 1000 / 60 / 60 / 24);//两个时间相差的天数

View Code

神奇的函数指针:

1,如下anotherSum 当sum=null的时候依然有效。还有道理吗？

function sum(val1,val2) {
    return val1 + val2;
}

var anotherSum = sum;
console.log(anotherSum(1,2));  // 3
sum = null;
console.log(anotherSum(1,2));  // 3

2,完全无函数重载这一说。

3,function declaration hoisting 函数提升到源代码顶。。没道理！

注意用变量的形式执行函数是错误的。

console.log(getValue());
function getValue() {
    return 0;
}

/* ERROR 
console.log(getValue());
var getValue = function () {
    return 0;
};
*/

4，函数中返回函数，这么垃圾的还能说TM牛逼？

function createComparisonFunction(propertyName) {
    return function (object1,object2) {
        var v1 = object1[propertyName];
        var v2 = object2[propertyName];
        if(v1 < v2){
            return -1;
        }
        else if(v1>v2) {
            return 1;
        }
        else{
            return 0;
        }
    }
}
var data = [{name:'Zachary',age:25},{name:'Nichos',age:28}];
data.sort(createComparisonFunction('name'));
console.log( data[0].name);

函数this作用域:

function sayColor() {
    console.log(this.color);
}

var or = {color:'red'};
var ob = {color:'blue'};
or.sayColor = sayColor;
ob.sayColor = sayColor;
or.sayColor();
ob.sayColor();

caller ,谁调用了我

function outer() {
    inner();
}
function inner() {
    console.log(inner.caller); // which function called me ?
}
outer();

function outer() {
    inner();
}
function inner() {
    console.log(arguments.callee.caller); // which function called me ?
}
outer();

上面结果都是是[Function: outer]

function的apply,call,bind都是绑定对象的概念,跟this有一定的勾当

function add(x,y){
    console.log( x+y);
}
function callAdd1(x,y) {
    add.apply(this,[x,y]); // this is env 
}
function callAdd2(x,y) {
    add.apply(this,arguments);
}
function callAdd3(x,y) {
    add.call(this,x,y);
}

callAdd1(1,2);
callAdd2(1,2);
callAdd3(1,2);

// function call
this.color = 'red';
var o = {color:'blue'};
function getColor() {
    console.log(this.color);
}
getColor.call(this);  // red
getColor.call(o);     // blue

// function bind a object
var bindGetThisColor = getColor.bind(this);
var bindGetObjColor = getColor.bind(o);
bindGetThisColor();
bindGetObjColor();

4，window对象

在window对象作用域创建的函数。对象，变量，全都属于window的对象。

var color ='red';

console.log(window.color) // red

对象:

1，

var Person = {
  name:'Nichoes',
  age:20
};
Person.showName = function () {
    console.log(this.name);
};
Person.showName();

反人类定义类方法

2，

var Animal = {};
Object.defineProperty(
    Animal,"name",{
        writable:true,      // can change value
        configurable:true,  // it can delete?
        value:"Nichos"      // value to set
    }
);

console.log(Animal.name);
Animal.name = "Houdini";
console.log(Animal.name);
delete Animal.name;
console.log(Animal.name);

反人类Object.defineProperty

3,什么时候用Object.defineProperty,跟普通属性的区别在哪？准确的说先要知道属性有什么特性，怎么修改这些特性，默认创建的属性是什么特性。

var person={name:'Houdini'}

等同于:

Object.defineProperty(
  person,"name",{writable:true,configurable:true,enumerable:true,value:"Houdini"}
);

也就是说用defineProperty是用来定义这个属性是不是能遍历(enumerable)，能修改(writable)，能删除(configurable)

如下，data的属性直接console.log(Books) 是不能显示的:

//
var Books = {};
Object.defineProperty(
  Books,"name",{writable:true,configurable:true,enumerable:true,value:"Houdini"}
);
Object.defineProperty(
    Books,"data",{writable:true,configurable:true,enumerable:false,value:"2018/10/20"}
);
Object.defineProperty(
    Books,"review",{writable:true,configurable:true,enumerable:true,value:"A simple book"}
);

console.log(Books);  //{ name: 'Houdini', review: 'A simple book'}
console.log(Books.data); //2018/10/20
delete Books.review;
console.log(Books); //{ name: 'Houdini' }

默认情况，其他关键字不确定，那么全是默认为false:

defineProperty和defineProperties的区别，defineProperty里面尼玛是个string的属性名，在defineProperties里是个不要是字符串。

var Person = {};
Object.defineProperty(
    Person,"name",{
        configurable:true,
        writable:true,
        enumerable:true,
        value:'Hello world'
    }
);
Object.defineProperty(
    Person,"age",{
        configurable:true,
        writable:true,
        enumerable:true,
        value:27
    }
);
console.log(Person);


// defineProperties
var Animal = {};
Object.defineProperties(Animal,{
   _year:{
       value:2005,
       writable:true // must be a writable value,or the set function will not do right result
   },
   year:{
       enumerable:true,
       get:function () {
           console.log('get year');
           return this._year;
       },
       set:function(newValue) {
           console.log('set year function',newValue);
           this._year = newValue;
       }
   },
   age:{
       value:27,
       writable:true,
       enumerable:true,
       configurable:true
   },
   bang:{
       value:100,
       enumerable:true
   }

});
console.log(Animal);
console.log(Animal.year);
Animal.year = 2006;
console.log(Animal.year);
// change age
Animal.age = 100;
console.log(Animal.age);

结果:

{ name: 'Hello world', age: 27 }
{ year: [Getter/Setter], age: 27, bang: 100 }
get year
2005
set year function 2006
get year
2006
100

参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

。。。

创建对象:

工厂模式:

function createObj(name,age) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function () {
        console.log(this.name, 'his age is:' , age);
    };
    return o;
}

var Person = createObj('Houdini',24);
Person.sayName();

View Code

构造函数模式:

function createObj2(name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        console.log(this.name,'his age is' , this.age);
    }
}

var Person2 = new createObj2('Maya',11);
Person2.sayName();

View Code