《JavaScript高级程序设计》手札之二:基本操作

 

1.引用类型的值是引用类型的一个实例，引用类型是一种数据结构，用于将数据和功能组织在一起。

2.方括号语法的主要优点是可以通过变量来访问属性。

eg:

var person={

"name":"Nichole",

age:29,

5:true};//数值属性都会被默认转换成字符串，”name”,”age”,”5"

var propertyName="name";

alert(person[propertyName]);//“Nichole”

3.数组的length属性不是只读的。

eg:var colors = ["red", "blue", "green"];

colors.length = 2; //相当于只留下前2项

alert(colors[2]);//新增或删除，只要不存在都是undefined;

4.数组操作:

①弹栈压栈:

var colors=new Array();

var count=colors.push("red","green");

count=colors.push(8);//压入8到栈中.

alert(count);

var item=colors.pop();//弹出8；如果调用shift()方法为队列，先进先出，返回”red"。

alert(item);

②队列操作。unshift()是在数组头上拓展，push()是在尾部；

var colors = new Array();

var count = colors.unshift("red");

var count = colors.unshift('green');//顺序:"green","red";先进先出的压入

var count=colors.unshift("red","green");//顺序:"red","green";一次全压入,注意区别

alert(colors);

5.正则表达式:g表示全局，global，但是发现第一个匹配项立即停止;i不区分大小写

var expression=/at/g;//匹配是否存在at

var pattern1=/[bc]at/i;//匹配第一个”bat”或者“cat”,忽略大小写。

注意:

①模式中使用的元字符必须转义，包括:([{\^$|?*+.}])

eg:var pattern2=/ \[bc\]at /i;//不区分大小写，正则匹配"[bc]at"字符。

②RegExp构造函数的模式参数是字符串，所以在某些情况下要双重转义，所有元字符都必须双重转义，那些已经转义过的字符也是如此。eg:\n,字符\会被转义成\\，而在正则表达式字符串中就会被变成\\\\。

eg:/\w\\hello\\123/等价于字符串"\\w\\\\hello\\\\123”；

 

eg:var pattern=new RegExp(“\\[bc\\]at”,”gi”);

alert(pattern.toString());// /\[bc\]at/gi;

alert(pattern.toLocaleString());// /\[bc\]at/gi;tolocalestring()和tostring()方法都会返回正则表达式的字面量，与创建正则表达式的方式无关。

③有多达9个用于存储捕获组的构造函数属性。语法是RegExp.$1、RegExp.$2....RegExp$9，分别用于存储第一、第二。。。第九个匹配的捕获组。

var text = "this has been a short summer";

var pattern = /(..)or(.)/g;

if (pattern.test(text)){

    alert(RegExp.$1);       //sh

    alert(RegExp.$2);       //t

}

④关于正则常用字符(参考自这里)：

字符	说明
^	匹配输入字符串的开始位置。要匹配 "^" 字符本身，请使用 "\^"
$	匹配输入字符串的结尾位置。要匹配 "$" 字符本身，请使用 "\$"
( )	标记一个子表达式的开始和结束位置。要匹配小括号，请使用 "\(" 和 "\)"
[ ]	用来自定义能够匹配 '多种字符' 的表达式。要匹配中括号，请使用 "\[" 和 "\]"
{ }	修饰匹配次数的符号。要匹配大括号，请使用 "\{" 和 "\}"
.	匹配除了换行符（\n）以外的任意一个字符。要匹配小数点本身，请使用 "\."
?	修饰匹配次数为 0 次或 1 次。要匹配 "?" 字符本身，请使用 "\?"
+	修饰匹配次数为至少 1 次。要匹配 "+" 字符本身，请使用 "\+"
*	修饰匹配次数为 0 次或任意次。要匹配 "*" 字符本身，请使用 "\*"
|	左右两边表达式之间 "或" 关系。匹配 "|" 本身，请使用 "\|"

6.函数是对象，函数名是指针。

function sum(num1,num2)
{
       return num1+num2;
}
alert(sum(10,10));//20
var another_sum=sum;
alert(another_sum(10,10));//20
sum=null;
alert(another_sum(10,10));//20

7.函数表达式要在函数声明之后在运行，即使先写的它。

eg:

alert(sum(10,10));//20，浏览器后执行表达式的运算。

function sum(num1,num2)

{ return num1+num2;}//浏览器先执行声明，注意函数末尾没分号

 

但是改为函数表达式，就会出错。

eg:

alert(sum(10,10));//20，浏览器后执行表达式的运算。

var sum=function(num1,num2)

{ return num1+num2;};//注意有分号

8.要访问函数的指针而不是值，需要去掉函数后面()；

eg:

function callSomeFuction(somefunction, SomeArgument)
{
return somefunction(SomeArgument);
}
function add10(sum)
{
    return sum+10;
}
function getGreeting(name)
{
    return "hello,"+name;
}
var result2=callSomeFuction(getGreeting,"Nicholes");
var result3=callSomeFuction(add10,10);
alert(result2+"/"+result3);

9.根据某个属性的值对数组进行排序。

function creatComparisonFunction(propertyName)
{
    return function (object1,object2)
    {
        var value1=object1[propertyName];
        var value2=object2[propertyName];
        if(value1<value2)
        {
            return -1;
        }
        else if(value1>value2)
        {
            return 1;
        }
        else
            return 0;
    }
}
 
var data=[{name:"Zachary",age:28},{name:"Nicholes",age:29},{name:"Aa",age:3}];
data.sort(creatComparisonFunction("name"));//注意小写aa的话ASCII值靠后,排名越高.
alert(data[0].name);

10.函数的2个特殊属性(arguments和this)：

①arguments的主要用途是保存函数参数，但还有一个callee属性。arguments.callee指向拥有arguments对象的函数。用于解除函数体内的代码和函数名之间的耦合。

function factorial(num)
{
    if (num <= 1)
    {
        return 1;
    } else 
        return num * arguments.callee(num - 1);
//如果是return num*factoria(num-1);trueFactorial就为0了。
}
var trueFactorial = factorial;
factorial = function() {
    return 0
};
alert(trueFactorial(5)); //120
alert(factorial(5)); //0

②关于this，代表的是当前对象。注意:函数的名字仅仅是一个包含指针的变量而已。因此，即使在不同环境中执行，全局的sayColor()和o.sayColor1()函数指向的扔是同一个函数。

window.color="red";
var o={color:"blue"};
function sayColor()
{
    alert(this.color);
}
sayColor();//red;this代表window对象。
o.sayColor1=sayColor;//相当于为o增加一个sayColor1的属性。
o.sayColor1();//blue;this代表o对象

11.函数的属性和方法:

①length代表的是参数的个数。

eg:function sayName(name){alert(name);}

alert(sayName.length);//1

②prototype属性有2个非继承来的方法，apply()和call()；apply接收2个参数:第一个是函数运行的作用域,第二个是参数数组(可以是Array实例或者arguments对象)，call调用第一个是作用于，第二个是其余参数(换句话说，必须单个参数列出来)，没别的区别，实际运用根据场景。

函数内传参：

eg1(函数内传参,不常用):

function  sum(num1,num2)
{
    return num1+num2;
}
function callSum(num1,num2)
{
    return sum.apply(this,[num1,num2]);
}
alert(callSum(10,10));//20;

eg2(函数作用域拓展属性，常用):

window.color="red";
var o={color:"green"};
function  sayColor()
{
    alert(this.color);
}
sayColor();//red;
sayColor.call(o);//green;比起先使用指针，后调用简单，o.sayColor1=sayColor;sayColor1(); 

 

12.引用类型和基本包装类型(Boolean,Number,String)的主要区别就是对象的生存期。操作基本类型值的语句一经执行完毕，就会立即销毁新创建的包装对象。

eg:

var s1="some text";

s1.color="red";

alert(s1.color);//undefined,s1对象已被销毁.

13.建议永远不要用Boolean对象，容易搞混。

eg:var falseObject=new Boolean(false);//引用类型需要new,传入false/true的值

var result=falseObject&&true;//true;因为布尔表达式中的所有对象都会被转换为true,因此，falseObject在布尔表达式中代表的是true

var falseValue=false;

var result=falseValue&&true;//false;基本类型

基本类型和基本包装类型(引用类型)的布尔值还有2个区别.

eg:alert(typeof falseObject);//object;

alert(typeof falseValue);//boolean;

alert(falseValue instance of Boolean);//false;

alert(falseObject instance of Boolean);//true;

14.①uri编码方法:

encodeURI()和encodeURIComponent()区别:后者完全编码化（使用更多），前者只是编码参数以及非法字符。

var uri=“http://www.wrox.com/illegal value.htm#start”;

encodeURI(uri);////"http://www.wrox.com/illegal%20value.htm#start"

alert(encodeURIComponent(uri));

//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start" alert(encodeURIComponent(uri));

②eval()方法。相当于完整的js解析器。

可以用在任何地方：

eval("var msg = 'hello world'; ");

alert(msg);     //"hello world"

注意:能够解释代码字符串的能力非常强大，但也非常危险。特别是在用它执行用户输入数据的情况下。否则可能会有恶意用户输入威胁你的站点或应用程序安全的代码，即所谓代码注入。

15.var global=function(){return this;}();//window对象。

16.Math函数比较数组中的值大小，用拓展。

eg:

var values=[1,2,3,4]

var max = Math.max.apply(Math,values);

//注意，call调用必须分着列出参数。Math.max.call(Math,1,2,3,4);

alert(max);

17.random()随机数的应用，返回随机色。

值=Math.floor(Math.random()*可能的总数+第一个可能的值)。

//注意不能为标准舍入Math.round()或者向上舍入Math.ceil();因为可能超出上限。

//第一种方法
function selectFrom(lowerValue, upperValue) {
        var choices = upperValue - lowerValue + 1;
        return Math.floor(Math.random() * choices + lowerValue);
    }
//第二种方法
function selectFrom1(min,max)
{
var count=Math.random()*(max-min+1)+min;
return Math.floor(count);
}
 
var colors=[“red”,”blue”,”yellow”,”red”];
colors[selectFrom(0,colors.length-1)];