这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在入门 vue 时, 列表渲染一节中提到数组的变异方法, 其中包括 push(), pop(), shift(), unshift(), splice(), sort(), reverse(), 而 concat() 和 slice() 不属于变异方法. 在这里就复习一下 Array 所提供的这几个方法的使用
栈方法
push 方法和 pop 方法, 可以使数组的行为类似于栈, 先进后出, 并且推入和弹出操作只发生在一端.
push 方法
push 方法可以接收一个或多个参数, 把它们追加到数组末尾, 并返回修改后数组的长度.
- var arr = ['a', 'b', 'c', 'd', 'e'];
- var temp = arr.push('f');
- console.info('temp: ' + temp); // temp: 6
- console.info(arr); // ["a", "b", "c", "d", "e", "f"]
- temp = arr.push('g', 'h');
- console.info('temp: ' + temp); // temp: 8
- console.info(arr); // ["a", "b", "c", "d", "e", "f", "g", "h"]
合并两个数组
我们可以通过 Array.prototype.push.apply() 来合并两个数组, 示例如下:
- var arr1 = ['a', 'b', 'c'],
- arr2 = ['x', 'y', 'z'];
- var temp = Array.prototype.push.apply(arr1, arr2);
- console.info(arr1); // ["a", "b", "c", "x", "y", "z"]
- console.info(arr2); // ["x", "y", "z"]
- console.info(temp); // 6
pop 方法
pop 方法是将数组的最后一项移除, 将数组长度减 1, 并返回移除的项.
- var arr = ['a', 'b', 'c', 'd', 'e'];
- var temp = arr.pop();
- console.info('temp: ' + temp); // temp: e
- console.info('length: ' + arr.length); // length: 4
如果在一个空数组上使用 pop 方法, 则返回 undefined
队列方法
队列的访问规则是先进先出, 并且队尾添加项, 队头移除项. push 方法和 shift 方法结合使用, 就可以像操作队列一样操作数组.
shift 方法
shift 方法将移除数组的第一项, 将数组长度减 1, 并返回移除的项.
- var arr = ['a', 'b', 'c', 'd', 'e'];
- var temp = arr.shift();
- console.info('temp: ' + temp); // temp: a
- console.info('length: ' + arr.length); // length: 4
unshift 方法
相反地, 还有一个 unshift 方法, 它的用途与 shift 方法相反 unshift 也可以在接收一个或多个参数, 把它们依次添加到数组的前端, 并返回修改后数组的长度.
- var arr = ['a', 'b', 'c', 'd', 'e'];
- var temp = arr.unshift('x', 'y', 'z');
- console.info('temp: ' + temp); // temp: 8
- console.info(arr); // ["x", "y", "z", "a", "b", "c", "d", "e"]
重排序方法
sort 方法和 reverse 方法
sort 方法和 reverse 方法是可以直接用来重排序的两个方法. 其中, reverse 方法是用来反转数组的.
- var arr = [1, 3, 2, 5, 4];
- arr.reverse();
- console.info(arr); // [4, 5, 2, 3, 1]
关于 sort 方法, 默认情况下, 它是对数组的每一项进行升序排列, 即最小的值在前面. 但 sort 方法会调用 toString 方法将每一项转成字符串进行比较 (字符串通过 Unicode 位点进行排序), 那么这种比较方案在多数情况下并不是最佳方案. 例如:
- var arr = [1, 3, 2, 5, 4];
- arr.sort();
- console.info(arr); // [1, 2, 3, 4, 5]
- arr = [1, 5, 10, 20, 25, 30];
- arr.sort();
- console.info(arr); // [1, 10, 20, 25, 30, 5]
因此, sort 方法可以接收一个比较函数作为参数, 由我们来决定排序的规则. 比较函数接收两个参数, 如果第一个参数小于第二个参数 (即第一个参数应在第二个参数之前) 则返回一个负数, 如果两个参数相等则返回 0, 如果第一个参数大于第二个参数则返回一个正数, 例如:
- var arr = [1, 5, 10, 20, 25, 30];
- arr.sort(function(value1, value2) {
- if (value1 < value2) {
- return - 1;
- } else if (value1 > value2) {
- return 1;
- } else {
- return 0;
- }
- });
- console.info(arr); // [1, 5, 10, 20, 25, 30]
操作方法
concat 方法
concat 方法可以将多个数组合并成一个新的数组. concat 可以接收的参数可以是数组, 也可以是非数组值.
- var arr1 = ['a', 'b', 'c'],
- arr2 = ['x', 'y', 'z'],
- val = 'hello';
- var temp = arr1.concat(val, arr2);
- console.info('arr1: ' + arr1); // arr1: a,b,c
- console.info('arr2: ' + arr2); // arr2: x,y,z
- console.info('val: ' + val); // val: hello
- console.info('temp: ' + temp); // temp: a,b,c,hello,x,y,z
concat 方法并不操作原数组, 而是新创建一个数组, 然后将调用它的对象中的每一项以及参数中的每一项或非数组参数依次放入新数组中, 并且返回这个新数组.
concat 方法并不操作调用它的数组本身, 也不操作各参数数组, 而是将它们的每个元素拷贝一份放到新创建的数组中. 而拷贝的过程, 对于对象类型来说, 是将对象引用复制一份放到新数组中, 而对于基本类型来说, 是将其值放到新数组中.
slice 方法
slice 方法可以基于源数组中的部分元素, 对其进行浅拷贝, 返回包括从开始到结束 (不包括结束位置) 位置的元素的新数组.
- var arr = ['a', 'b', 'c', 'd', 'e'];
- var temp1 = arr.slice(),
- temp2 = arr.slice(1),
- temp3 = arr.slice(1, 2);
- console.info(arr); // ["a", "b", "c", "d", "e"]
- console.info(temp1); // ["a", "b", "c", "d", "e"]
- console.info(temp2); // ["b", "c", "d", "e"]
- console.info(temp3); // ["b"]
从示例中可以看出:
参数如果为负数, 表示从数组最后面的元素可以算起.
slice 方法同样不操作调用它的数组本身, 而是将原数组的每个元素拷贝一份放到新创建的数组中. 而拷贝的过程, 也于 concat 方法相同.
splice 方法
splice 方法可以用途删除或修改数组元素. 它有如下几种用法:
删除: 当给 splice 方法中传入一个或两个参数时, 就可以从数组中删除任意元素. 传入一个参数: 要删除的的第一个元素的位置, 此时将会删除从要删除的第一个元素的位置起, 后面的所有元素. 传入两个参数: 要删除的第一个元素的位置和要删除的项数, 返回值均为删除的元素组成的数组, 例如:
- var arr = ['a', 'b', 'c', 'd', 'e'];
- var temp = arr.splice(2);
- console.info(arr); // ["a", "b"]
- console.info(temp); // ["c", "d", "e"]
- arr = ['a', 'b', 'c', 'd', 'e'];
- temp = arr.splice(2, 2);
- console.info(arr); // ["a", "b", "e"]
- console.info(temp); // ["c", "d"]
插入: 使用 splice 方法可以向数组的指定位置插入任务数量的元素, 此时需要提供三个参数: 起始位置 (要插入的位置), 0(表示要删除的项数, 0 为不删除), 要插入的元素, 如果要插入多个元素可以添加更多的参数, 例如:
- var arr = ['a', 'b', 'c', 'd', 'e'];
- var temp = arr.splice(2, 0, 'x', 'y', 'z');
- console.info(arr); // ["a", "b", "x", "y", "z", "c", "d", "e"]
- console.info(temp); // [], 并没有删除元素
替换: 当 splice 接收三个参数, 且第二个参数不为 0 时, 可达到在数组中替换元素的效果. 例如:
- var arr = ['a', 'b', 'c', 'd', 'e'];
- var temp = arr.splice(2, 2, 'x', 'y', 'z');
- console.info(arr); // ["a", "b", "x", "y", "z", "e"]
- console.info(temp); // ["c", "d"]
此示例表示, 从 arr 数组的位置为 2 的元素起, 删除 2 个元素, 并在位置 2 添加三个元素. 如果移除的元素个数不等于添加的元素个数, 那么数组的长度将发生变化.
另外, 从 ECMAScript5 开始, 还提供了数组的迭代方法, 归并方法等, 这些方法将在后面做出补充.
来源: http://www.phperz.com/article/17/0612/334253.html