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 ...

随机推荐

python之pickle
#!/usr/bin/python # -*- coding: UTF- -*- ''' ''' import pickle # pickle 只能Python识别不适用于别的语言 li = [, ...
Hadoop的NullWritable
NullWritable是Writable的一个特殊类,实现方法为空实现,不从数据流中读数据,也不写入数据,只充当占位符,如在MapReduce中,如果你不需要使用键或值,你就可以将键或值声明为Nul ...
《通过C#学Proto.Actor模型》之PID
PID对象是代表Actor对象的进程,是能过Actor.Spawn(props)获取的:它有什么成员呢?既然代理Actor,首先有一个ID,标识自己是谁,Actor在Spawn时可以命名这个ID,否则 ...
Vue slot插槽内容分发
slot插槽使用使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...
区间RMQ问题
简介 RMQ (Range Minimum/Maximum Query)问题是指:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A中下标在i,j里的最小(大)值 ...
mysql 解压版安装
1.官网下载压缩包 2.解压 3.配置环境变量添加系统环境变量 MYSQL_HOME 值为解压的主目录,例如 D:\mysql-5.7.25-winx64 修改Path 环境变量,点击编辑 ...
Linux 学习 (四) 帮助命令
Linux达人养成计划 I 学习笔记 man 命令获取指定命令的帮助 man的级别 1:查看命令的帮助 2:查看可被内核调用的函数的帮助 3:查看函数和函数库的帮助 4:查看特殊文件的帮助(主要是/ ...
探索 Python 学习
Python 是一种敏捷的.动态类型化的.极富表现力的开源编程语言,可以被自由地安装到多种平台上(参阅参考资料).Python 代码是被解释的.如果您对编辑.构建和执行循环较为熟悉,则 Python ...
JDK动态代理(Proxy)的两种实现方式
JDK自带的Proxy动态代理两种实现方式前提条件:JDK Proxy必须实现对象接口 so,创建一个接口文件,一个实现接口对象,一个动态代理文件接口文件:TargetInterface.java ...
mac开发环境搭建篇（2）--brew与mysql
[brew]:参考 https://www.cnblogs.com/zoulifeng2017/p/7514139.html 安装brew: 终端执行:/usr/bin/ruby -e "$ ...

Web从入门到放弃<7>

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

随机推荐

热门专题