JavaScript高级程序设计

日期：2020-06-14 栏目：程序人生浏览：次

利用课余时间仔细学习《JavaScript高级程序设计》，将需要掌握的知识点记录下来，争取把书里的所有代码敲一遍并掌握。

JavaScript高级程序设计（第3版）高清完整PDF中文+英文+源码

1、标识符命名最好是第一个字母小写，剩下每个单词的首字母大写，如：firstSecond、myCar

2、var定义的变量是作用域里的局部变量，若在函数中定义，函数退出后就会被销毁

function test(){
var message = "hi";
}
test();
alert(message);//错误
若在函数里定义是省略var，则会成为全局变量，但不推荐这样做，不利于维护，在严格模式下会报错

function test(){
message = "hi";//全局变量
}
test();
alert(message);//"hi"

3、null值表示一个空对象指针，如果用typeof操作符检测null值时会返回object。

var car = null;
alert(typeof car); //"object"

4、ECMAscript中所有函数的参数都是按值传递的，也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。

function setName(obj){
obj.name = "Demon";
var obj = new Object();
obj.name = "Kalus";
}
var person = new Object();
setName(person);
alert(person.name);//Demon
}
//因为参数对象是按值传递的，即使在函数内部修改了参数的值，但原始的引用仍然保持不变。
//当在这个函数内部重写obj时，这个变量引用的就是一个局部对象了，而这个局部对象会在函数执行完毕后立即被销毁。

5、为了优化内存占用，一旦数据不再使用时，最好将其值设为null来释放引用（解除引用），适用于大多数全局变量和全局变量的属性，局部变量会在它们离开执行环境时自动解除引用。

function createPerson(name){
var localPerson = new Object();
localPerson.name = name;
return localPerson;
}
var globalPerson = createPerson("Kalus");
alert(globalPerson.name);

globalPerson = null;//不需要它时手动解除，解除值的引用并不意味着自动回收该值所占用的内存，真正作用是让值脱离执行环境，以便垃圾收集器下次运行时将其收回。

6、数组中的栈方法push()和pop()

push()方法可以接受任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

pop()方法是从数组末尾移除最后一项，减小数组的length值，然后返回移除的项。

var arr = [];
var count = arr.push("red","green");
alert(count);//2
var count = arr.pop(); //取得最后一项并移除了
alert(count);//green

7、数组队列方法shift()

能够移除数组中的第一个项并返回该项，同时将数组长度减1。结合使用shift()和push()方法，可以像使用队列一样使用数组。

var arr = new Array();
var count = arr.push("red","black","green");
alert(count);//3
var item = arr.shift();
alert(item);//red
alert(arr.length);//2
//移除了第一项后，black变为第一项，green变为第二项，长度变为2

8、数组队列方法unshift()

能在数组前端添加任意个项并返回新数组的长度。同时使用unshift()和pop()方法可以从相反方向来模拟队列。

var arr = new Array();
var count = arr.unshift("red","black");
alert(count);//2
count = arr.unshift("orange");
alert(arr);//orange,red,black

var item = arr.pop(); //取得最后一项
alert(item);//black
alert(arr.length);//2

9、重排序方法reverse()反转数组项顺序

var values = [1,0,13,4,5];
values.reverse();
alert(values);//5,4,13,0,1

10、重排序方法sort()默认按升序排序数组项，按字符串排序，即使数组每一项都是数值。

var values = [1,0,13,4,5];
values.sort();
alert(values);//0,1,13,4,5

sort()方法可以接收一个比较函数作为参数，以便指定哪个值位于哪个值前面

一个简单的升序比较函数：

var values = [1,0,13,4,5];
values.sort(compare);
alert(values);//0,1,4,5,13
function compare(value1,value2){
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
}

若要产生降序的排序结果，只要交换比较函数返回值即可。

对于数值类型或者valueOf()方法会返回数值类型的对象类型，可以使用一个更简单的比较函数：

function compare(value1,value2){
return value1 - value2;
}

11、操作方法concat()基于当前数组中所有项创建一个新数组。该方法会创建一个数组副本，将接收到的参数添加到数组的末尾，最后返回新构成的数组，

没有传参数时直接复制当前数组并返回副本。

var colors = ["red","black","orange"];
var colors1 = colors.concat("yellow",["brown","blue"]);
alert(colors1);//red,black,orange,yellow,brown,blue

12、push()和concat()区别

push 的定义是：向数组的末尾添加一个或更多元素，并返回新的长度。该方法会改变数组的长度。

concat 的定义是：连接两个或更多的数组，并返回结果。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

concat()可用来连接两个数组：

var a = [1,2];
var b = [3,4,5];
var c = a.concat(b);
alert(c);//1,2,3,4,5

13、操作方法slice()

接收一或两个参数，即要返回项的起始和结束位置，不影响原数组。

var colors = ["red","orange","blue","black","green"];
var colors1 = colors.slice(2);
alert(colors1);//blue,black,green
var colors2 = colors.slice(2,4);
alert(colors2);//blue,black (不包括最后一项)

var colors3 = colors.slice(-2,-1);//black
alert(colors3);

14、操作方法splice()

1.删除：可以删除数组中任意数量的项，两个参数

如：splice(0,2)会删除数组中前两项

2.插入：向指定位置插入任意数量的项，三个参数：起始位置、0（要删除的项数）、要插入的项，如要插入多个项，可在传入任意多个项。

如：splice(2,0,"red","blue")会从当前数组的位置2开始插入两个字符串。

3.替换：向指定位置插入任意数量的项，且同时删除任意数量的项，三个参数：起始位置、要删除的项数、要插入的项　，插入的项不必与删除的项数相等

如：splice(2,1,"red","blue")会删除当前数组位置2的项，再从位置2开始插入两个字符串

splice()方法始终都会返回一个数组，该数组包含从原数组中删除的项，没有删除返回空数组

var colors = ["red","orange","blue"];
var removed = colors.splice(0,1);// 删除一项，第一项
alert(colors);//orange,blue
alert(removed);//red

removed = colors.splice(1,0,"black","white");
alert(colors);//orange,black,white,blue
alert(removed);//返回空数组

removed = colors.splice(1,1,"green","yellow");
alert(colors);//orange,green,yellow,white,blue
alert(removed);//black

15、位置方法indexOf()和lastindexOf()

两个参数：要查找的项、查找起点位置的索引（可选）

返回要查找的项在数组中的位置，未找到返回-1，要查找的项使用全等操作符（===）

var number = [1,2,3,4,5,4,3,2,1];
alert(number.indexOf(4));//3
alert(number.lastIndexOf(4));//5

alert(number.indexOf(4,4));//5
alert(number.lastIndexOf(4,4));//3

var person = {name:"Kalus"};
var people = [{name:"Kalus"}];
var morePeople = [person];
alert(people.indexOf(person));//-1
alert(morePeople.indexOf(person));//0

16、迭代方法

every()：对数组中每一项运行给定函数，如果该函数对每一项都返回true，则返回true

filter()：对数组中每一项运行给定函数，返回该函数会返回true的数组

forEach()：对数组中每一项运行给定函数，这个方法无返回值

map()：对数组中每一项运行给定函数，返回每次函数调用的结果组成的数组

some()：对数组中每一项运行给定函数，如果该函数对任意一项返回true，则返回true

以上方法不会修改数组中包含的值。

每个方法都接收两个参数：要在每一项上运行的函数、运行该函数的作用域对象---影响this的值（可选）

传入这些方法中的函数接收三个参数：数组项的值、该项在数组中的位置、数组对象本身

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
return (item > 2);
});
alert(everyResult);//false

var someResult = numbers.some(function(item,index,array){
return (item > 2);
});
alert(someResult);//true

var filterResult = numbers.filter(function(item,index,array){
return (item > 2);
});
alert(filterResult);//3,4,5

var mapResult = numbers.map(function(item,index,array){
return (item * 2);
});
alert(mapResult);//2,4,6,8,10,8,6,4,2

numbers.forEach(function(item,index,array){
//执行某些操作，没有返回值，本质上与for循环迭代数组一样
});

17、归并方法reduce()和reduceRight()

都会迭代数组的所有项，然后构建一个最终返回的值，reduce()方法从数组第一项开始，reduceRight()方法从数组最后一项开始

两个参数：在每一项上调用的函数、作为归并基础的初始值（可选）

传给reduce()和reduceRight()的函数接收4个参数：前一个值、当前值、项的索引、数组对象，

这个函数返回的任何值都会作为第一个参数自动传给下一项。

第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项（prev），第二个参数就是数组的第二项(curent)

使用reduce()方法可以执行求数值中所有值之和的操作，如：

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,array){
return prev + cur;
});
alert(sum);//15

第一次执行上面回调函数时，prev是1，cur是2。第二次prev是3（1加2的结果），cur是3（数组第三项）。

这个过程持续到把数组中每一项都访问一遍，最后返回结果。

reduceRight()作用类似，只不过方向相反。

18、Function类型

函数是对象，函数名实际上就是一个指向函数对象的指针。

由于函数名仅仅是指向函数的指针，因此函数名与包含对象指针的其他变量没什么不同，换句话说，

一个函数可能会有多个名字。如：

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

var anotherSum = sum;//将sum的值赋给anotherSum，注意不带圆括号的函数名是访问函数指针，而非调用函数
alert(anotherSum(10,10));//20 anotherSum和sum指向了同一函数

sum = null;
alert(anotherSum(10,10));//20 即使将sum设置为null，让它与函数断绝关系，但仍然可以正常调用anotherSum()

19、ECMAScript中的函数名本身就是变量，所以函数也可以作为值来使用。

不仅可以像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的结果返回。

function callSomeFunction(someFunction,someArgument){//第一个参数应该是一个函数，第二个参数应该是要传递给函数的值
return someFunction(someArgument);
}

function add(num){
return num + 10;
}
var result1 = callSomeFunction(add,10);
alert(result1);//20

function getGreeting(name){
return "Hello," + name;
}
var result2 = callSomeFunction(getGreeting,"Kalus");
alert(result2);//Hello,Kalus

从一个函数中返回另一个函数例：

假设有一个对象数组，要根据某个对象属性对数组进行排序，而传递给数组sort()方法的比较函数要接收两个参数，即要比较的值。

可是又需要一种方法来指明按照哪个属性进行排序，要解决这个问题就可以定义一个函数，它接收一个属性名，然后根据这个属性名来创建一个比较函数。

//一个函数接受一个属性名的参数，再根据这个属性名来创建一个比较函数
function createComparisonFunction(propertyName){
return function(object1,object2){
var value1 = object1[propertyName];//内部函数接收到propretyName参数后，使用方括号表示法来取得给定属性的值
var value2 = object2[propertyName];//(用点的时候，后面需要是一个指定的属性名称，用中括号的时候，括号里面可以是变量或者字符串)
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
};
}

var data = [{name: "Kalus", age: 28}, {name: "Demon", age: 29}];//定义了一个对象数组
data.sort(createComparisonFunction("name"));
alert(data[0].name);//Demon
data.sort(createComparisonFunction("age"));
alert(data[0].name);//Kalus函数属性和方法

20、函数属性和方法

每个函数都包含两个非继承而来的方法：apply()和call()，用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。

apply()方法接收两个参数：在其中运行函数的作用域、参数数组（也可以是Array的实例或arguments对象）

call()方法和apply()方法作用相同，区别在于接收参数的方式不同，对于call()方法第一个参数仍是this，变化的是其余参数都直接传递给函数

即使用call()，传递给函数的参数必须逐个列举出来。

例：

在使用call()方法的情况下，callSum3()必须明确地传入每一个参数，结果与apply()相同

如果参数打算传入arguments对象或者包含函数中先接收到的是一个数组，那么使用apply()更方便，否则使用call()更合适，不给函数传参的情况下两者相同。

apply()和call()方法真正强大的地方是能够扩充函数赖以运行的作用域，如：

window.color = "red";
var o = {color: "blue"};
function sayColor(){
alert(this.color);
}

sayColor();//red sayColor()作为全局函数定义的，在全局作用域中调用它时会显示red
sayColor.call(this);//red 显示地在全局作用域中调用函数的方式
sayColor.call(window);//red 显示地在全局作用域中调用函数的方式
sayColor.call(o);//blue 函数的执行环境发生改变，此时函数体内的this对象指向了o

如果不使用call()方法，则需要先将sayColor()函数放到对象o中，然后再通过o来调用：

window.color = "red";
var o = {color: "blue"};
function sayColor(){
alert(this.color);
}
sayColor();//red

o.sayColor = sayColor;
o.sayColor();//blue

函数另一个方法： bind() 这个方法会创建一个函数的实例，其this值会被绑定到传给bind()函数的值，如：

window.color = "red";
var o = {color: "blue"};
function sayColor(){
alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor();//blue objectSayColor()函数的this值等于了o

21、字符串创建新字符串的方法（相当于截取字符串）：slice()、substr()、substring() ,都会返回被操作字符串的一个子字符串，都接收一或两个参数

slice()：第一个参数指定字符串开始的位置、第二个参数表示字符串到哪里结束（两个参数时前闭后开）

substring()：同上

substr()：第一个参数指定字符串开始的位置、第二个参数是返回的字符个数

如果这三种方法没有传递第二个参数，则将字符串的长度作为结束位置，都对原始字符串没有影响

var stringValue = "hello world";
alert(stringValue.slice(3));//lo world
alert(stringValue.substring(3));//lo world
alert(stringValue.substr(3));//lo world
alert(stringValue.slice(3,7));//lo w
alert(stringValue.substring(3,7));//lo w
alert(stringValue.substr(3,7));//lo worl

传递给这些方法的参数是负值的情况下：

slice()方法会将传入的负值与字符串的长度相加

substring()方法会把所有的负值参数都转换为0

substr()方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0

var stringValue = "hello world";
alert(stringValue.slice(-3));//rld
alert(stringValue.substring(-3));//hello world
alert(stringValue.substr(-3));//rld
alert(stringValue.slice(3,-4));//lo w
alert(stringValue.substring(3,-4));//hel [0,3)
alert(stringValue.substr(3,-4));//"" (空字符串，因为长度变为了0)

22、字符串位置方法indexOf()和lastindexOf()

查找给定字符串，然后返回子字符串的位置索引，lastindexOf()从末尾向前查找。

都可以传递第二个参数，表示从字符串中哪个位置开始查找。

可以通过循环调用indexOf()或lastindexOf()来找到所有匹配的字符串，如：

var stringValue = "A new version of WebStorm is available!";
var positions = new Array();
var posIndex = stringValue.indexOf("e");
while(posIndex != -1){
positions.push(posIndex);
posIndex = stringValue.indexOf("e",posIndex + 1);
}
alert(positions);//3,7,18,37

23、字符串trim()方法

会创建一个字符串副本，删除前置及后缀的所有空格，然后返回结果，原字符串不变。

此外Firefox、Safari、Chrome还支持非标准的trimLeft()和trimRight(),分别用于删除字符串开头和末尾的空格。

var stringValue = " hello world ";
var trimmedStringValue = stringValue.trim();
alert(stringValue);// hello world
alert(trimmedStringValue);//hello world

24、字符串localeCompare()方法

用于比较两个字符串，并返回下列值的一个：

1）如果字符串在字母表中应该排在字符串参数之前，则返回一个负数（大多情况下是-1，具体的值要视实现而定）

2）如果字符串等于字符串参数，则返回0

3）如果字符串在字母表中应该排在字符串参数之前，则返回一个正数（大多情况下是1）

var stringValue = "yellow";
alert(stringValue.localeCompare("brick"));//1
alert(stringValue.localeCompare("yellow"));//0
alert(stringValue.localeCompare("zoo"));//-1

使用这个方法的例子：

25、min()和max()方法

要找到数组中的最大值或最小值，可以像下面这样使用apply()方法：

把Matn对象作为apply()的第一个参数，从而正确地设置this的值，然后可以将任何数组作为第二个参数。

var values = [1,2,3,4,5,6,7,8];
var max = Math.max.apply(Math,values);
alert(max);//8

26、random()方法

套用下面的公式，可以利用Math.random()从某个整数范围内随机选择一个值：

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

如想随机选择2到10之间的数值：（2到10之间有9个数，第一个可能值为2）

var num = Math.floor(Math.random() * 9 + 2);
alert(num);

多数情况下，可以通过一个函数来计算可能值的总数和第一个可能值：

selectForm()接受两个参数：应该返回的最小值和最大值，用最大值减最小值再加1得到可能值的总数。

function selectFrom(lowerValue,upperValue){
var choices = upperValue - lowerValue + 1;
return Math.floor(Math.random() * choices + lowerValue);
}
var num = selectFrom(2,10);
alert(num);//介于2和10之间（包括2和10）的一个数值

利用这个函数，可以方便地从数组中随机取出一项：

function selectFrom(lowerValue,upperValue){
var choices = upperValue - lowerValue + 1;
return Math.floor(Math.random() * choices + lowerValue);
}
var colors = ["red","green","yellow","black","orange","purple"];
var color = colors[selectFrom(0,colors.length - 1)];
alert(color);//随机产生数组中包含的任一字符串

转载注明出处：https://www.heiqu.com/9b54a9aaef1e773754aab97dafd58c25.html

JavaScript高级程序设计

相关推荐