Web从入门到放弃<7>

2022-09-21 22:20:34

从这章开始读<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') //

parseInt('0xA',16) //

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') //

一些字符串运算:

var a = false;

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

var b = 10;

console.log(b.toString(16));  // a

console.log(b.toString(2));   //

var c= null;

console.log(String(a));  // false

console.log(String(b)); //

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>

没有块的作用域:

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('||'));

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);

遍历:

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);

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

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\t",rh_start,"\tSTRING:",rh_start.toDateString(),rh_start.toTimeString());

console.log("end\t\t",rh_end,"\tSTRING:", 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);//两个时间相差的天数

神奇的函数指针:

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

function sum(val1,val2) {

    return val1 + val2;

}

var anotherSum = sum;

console.log(anotherSum(1,2));  //

sum = null;

console.log(anotherSum(1,2));  //

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();

构造函数模式:

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();

码农公寓

相关文章