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

随机推荐

Java Lucene入门
1.lucene版本:7.2.1 pom文件: <?xml version="1.0" encoding="UTF-8"?> <project ...
maven eclipse web 项目问题 cannot change version of project facet dynamic web module to 3.0
cannot change version of project facet dynamic web module to 3.0 修改 web.xml 头部 xsi:schemaLocation=&q ...
js字符串转时间
function StrToDateTime(value) { if (value) { return (new Date(Date.parse(value.replace(/-/g, "/ ...
追逐心目中的那个Ta
申明:全篇皆为作者臆想,浪漫主义代表派作品,若有雷同,纯属巧合人生最难过的不就是在一无所有的年纪里遇到了最想呵护一生的人,而在拥有一切的时候却失去了不顾一切的心. 长夜漫漫,本是相思人,偏听多情曲, ...
ST表
ST表的原理及其实现 ST表类似树状数组,线段树这两种算法,是一种用于解决RMQ(Range Minimum/Maximum Query,即区间最值查询)问题的离线算法与线段树相比,预处理复杂度同为 ...
Visual Studio Code常用设置及快捷键
1. Visual Studio Code常用设置 { // 控制是否显示 minimap(缩略图) "editor.minimap.enabled": false, // 控制折 ...
Centos7 配置和链接FTP
1:安装vsftpd组建: yum -y install vsftpd 安装完成以后在目录/etc/vsftpd/vsftpd.conf文件是vsftp的配置文件 2:添加一个专门用来登陆vsft ...
Magento 2 创建 Widget
Widget是一个更好的工具,可以将内容插入或编辑到CMS页面块或页面中. 什么是小部件? 小部件是Magento 2配置中的强大功能.作为商店管理员,您可以利用小部件来改善生动界面下的店面.小部件允 ...
l2tp pptp相关的一些记录
添加用户名和密码 echo "user l2tpd password *">>/etc/ppp/chap-secrets /etc/ipsec.conf dpddela ...
Ceph分布式存储（luminous）部署文档-ubuntu18-04
Ceph分布式存储(luminous)部署文档环境 ubuntu18.04 ceph version 12.2.7 luminous (stable) 三节点配置如下 node1:1U,1G me ...

Web从入门到放弃<7>

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

随机推荐

热门专题