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>
没有块的作用域:
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)); // 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);
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();
.
