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

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

Web从入门到放弃<7>的更多相关文章

Web从入门到放弃<8>
Ref: Cameron D. - HTML5, JavaScript and jQuery (Programmer to Programmer) - 2015 http://www.runoob.c ...
Web从入门到放弃<5>
<1> CSS_DOM 1,structural layer 2,presentation layer 3,behavior layer style也是一个属性 <!DOCTYPE ...
Web从入门到放弃<1>
HTML大法: <01> <!DOCTYPE html> <html lang="en"> <head> <meta char ...
Web从入门到放弃<6>
<1> Canvas. 1,灰度图: js: function showAsGray() { var imgNode = document.getElementById('img'); ...
Web从入门到放弃<4>
1,插入如下html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
Web从入门到放弃<3>
UI简单的美化全部来源于Bootstrap 知识来自<javascript dom编程艺术第二版> <1> 点击列表页面不跳转图片刷新: 主要点: href如何点击完如何不 ...
Web从入门到放弃<2>
<添加debug-toolbar> django现在1.11是必须这么做: pip install django-debug-toolbar 设置1: INSTALLED_APPS = [ ...
后端API入门到放弃指北
后端API入门学习指北了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一 ...
OpenStack从入门到放弃
OpenStack从入门到放弃目录: 为何选择云计算/云计算之前遇到的问题什么是云计算云服务模式云应用形式传统应用与云感知应用 openstack及其相关组件介绍 flat/vlan/gre ...

随机推荐

解决 tomcat 重启上传文件消失
开发模式首先开发者模式下,部署在 Tomcat 上没有什么好的办法,否则无法调试除非使用绝对路径,缺点:不同的操作系统路径不同,自动设置对于图片上传一般我们使用图片服务器,上传 CDN中一般获 ...
js01-javascript语法标准和数据类型
语法规则 (1)JavaScript对换行.缩进.空格不敏感. 备注:每一条语句末尾要加上分号,虽然分号不是必须加的,但是为了程序今后要压缩,如果不加分号,压缩之后将不能运行. (2)所有的符号,都是 ...
Python——socketserver编程（客户端/服务器）
一.socketserver是标准库中的高级模块,它的目标是简化很多多样板代码,是创建网络客户端和服务器所必须的代码.(事件驱动) 二.模块类 BaseServer :包含核心服务器功能和mix-in ...
Linux取代ifconfig指令的ip指令
自己实现ArrayList与LinkedList类
ArrayList与LinkedList的底层实现 ArrayList内部由数组实现,LinkedList内部由链表实现. 自己动手实现ArrayList与LinkedList中一些常用方法 Arra ...
python学习day10 函数Ⅱ(参数&作用域)
函数Ⅱ(参数&作用域) 知识小结: py2与py3的区别逻辑运算()>not>and>or 字符串翻转切片翻转 is与==区别 git相关数据类型判断操作系统:cent ...
LVM备份（1）-创建LVM逻辑卷
LV(Logical Volume) - 逻辑卷 VG(Volume Group) - 卷组 PV(Physical Volume) - 物理卷 1.查看分区信息:fdisk -l 可看到磁盘大小为1 ...
微信小程序无法定位
获取定位的时候报:errMsg:getLocation:fail:require permission desc 错解决办法: 在app.js加入代码 //app.js新增如下代码 config = ...
Django-ContentType的使用
一.神器ContentType 如果继续增加课程价格策略表还得增加字段这样django自带一个contentType 帮助我们解决表之间的依赖关系: 1.从settings文件可以看到原生就支持 ...
Encryption and decryption、Steganography、Decryption Tools
catalogue . 隐写术 . Substitution cipher . Transposition cipher . Bacon's cipher . LSB-Steganography 1. ...

Web从入门到放弃<7>

Web从入门到放弃<7>的更多相关文章

随机推荐

热门专题