发布于 2015-12-19 23:58:17 | 147 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


在各种语言中,数组总是一个比较重要的数据结构,Javascript 中的 Array 也不例外。Javascript 中的 Array 提供了一系列方法可以更好地让我们操作 Array 中的元素,下面我们就来看看这些操作方法。

Array 之基本操作

在基本操作部分,我们约定,加粗的方法可以改变数组本身,其余方法不改变。

1、 Array 创建

  1. 利用字面量创建 Array (推荐): var arr = [];

  2. 利用 Array 对象创建 Array: var arr = new Array([length]);//可以指定数组长度,注意不是数组上限;

  3. 利用 Array 对象创建 Array: var arr = new Array(value1, value2, value3, …);
    注意:Javascript 中 Array 中的元素不要求类型一致;

2、 Array 访问元素

  1. var value = arr[index];

  2. Array.slice(start[, end]);//从 start 位置开始截取原数组至 end (不包括 end 位置),返回截取的数组。若省略 end ,则截取 start 位置后所有元素;

3、 Array 添加元素

  1. Array.push(value1, value2, vlaue3, …);//将一个或多个元素附加在数组末尾,并返回新数组长度;

  2. Array.unshif(value1, value2, value3, …);//将一个或多个元素附加在数组开头,原数组元素依次后移,并返回新数组长度;

4、 Array 删除元素

  1. Array.pop();//移除数组最后一个值,并返回该元素值;

  2. Array.shift();//移除数组第一个值,并返回该元素值;

  3. Array.splice(pos, count, [value1, vlaue2, vlaue3, …]);//从数组 pos 位置开始删除 count 个元素,并在删除的位置插入value1, vlaue2, vlaue3…,并返回删除的所有元素;

5、 Array 合并

  1. Array.concat(para);// para 可以为数组或元素值,也可以为两者组合,将所有元素连接成一个数组,返回连接好的数组;

6、 Array 字符串化

  1. Array.join(sperator);//返回由数组元素组成并由 seperator 分隔的字符串。若 seperator 为空,则默认以 “,” 连接;

  2. Array.toString()Array.toLocaleString();//返回由数组元素组成并由“,”分隔的字符串(不常用);两种方法的区别在于 toLocaleString() 会转变为本地环境字符串(如Date.toLocalString() 会转化为当地时间格式的字符串),toString() 则转为传统字符串; Array 的这两种方法用法无区别;

7、 Array 排序

  1. Array.reverse();//颠倒数组中的元素;

  2. Array.sort();//按字符编码进行排序;

8、 Array 查找

  1. indexOf()//返回第一个与给定参数相等的数组元素的索引,没有找到则返回-1。

  2. lastIndexOf()//返回在数组中搜索到的与给定参数相等的元素的最后(最大)索引。

9、 其他函数

  1. Array.isArray();//判断某个值是否为数组;

Array 之高级操作

首先介绍 Array 的 5 种迭代函数。这 5 种函数的特点是都有一个 callback 函数,函数会为每一个数组元素调用一次 callback 函数。可选参数是 thisArg, 作为 callback被调用时的 this 值,如果没有传入 thisArg 值,则在非严格模式下将会是全局对象,严格模式下是 undefined。其中,callback 函数中包含三个参数,分别是当前元素的值、当前元素索引和被遍历的数组。这 5 种函数遍历的元素个数在第一次调用 callback 函数时就已经确定,即以后即使添加元素也不会改变遍历次数,未访问到且被删除的值不会被 callback 访问到,未访问到且被修改的元素被修改后,传递给 callback 的值是被修改后的值。

1、 Array.forEach()

遍历并为每一项元素执行一遍 callback 函数。是 5 个函数中唯一一个没有返回值的函数。

var arr = [1, 2, 3];
arr.forEach(function(ele) {
    console.log(ele);
});

运行结果:

1
2
3

2、 Array.map()

遍历并处理所有元素,返回由每个 callback 函数返回值组成的新数组。

var arr = [1, 2, 3];
var newArr = arr.map(function(ele) {
    return "element" + ele;
});
console.log(newArr);
console.log(arr);

运行结果:

["element1", "element2", "element3"]
[1, 2, 3]

3、 Array.filter()

遍历所有元素,过滤掉不符合条件(即使得 callback 返回 false)的元素。

var arr = [1, 2, 3, 11, 12, 13];
var newArr = arr.filter(function(ele) {
    return ele > 10;
});
console.log(newArr);
console.log(arr);

运行结果:


[11, 12, 13]
[1, 2, 3, 11, 12, 13]

4、 Array.every()

遍历所有元素,当所有元素使得 callback 返回 true,则返回 true,否则返回 false。

var arr1 = [9, 12, 13];
var result1 = arr1.every(function(ele) {
    return ele > 10;
});

var arr2 = [11, 12, 13];
var result2 = arr2.every(function(ele) {
    return ele > 10;
});

console.log(arr1);
console.log("result1:" + result1);
console.log(arr2);
console.log("result2:" + result2);

运行结果:

[9, 12, 13]
result1:false
[11, 12, 13]
result2:true

5、 Array.some()

遍历所有元素,只要找到一个元素使得 callback 返回 true,则返回 true,否则返回 false。

var arr1 = [1,3,5,7,9];
var result1 = arr1.some(function(ele) {
    return ele > 10;
});

var arr2 = [1,2,3,11];
var result2 = arr2.some(function(ele) {
    return ele > 10;
});

console.log(arr1);
console.log("result1:" + result1);
console.log(arr2);
console.log("result2:" + result2);

运行结果:

[1, 3, 5, 7, 9]
result1:false
[1, 2, 3, 11]
result2:true

6、 Array.reduce()

将数组中的元素从左到右进行缩减,最终缩减为一个值。

Array.reduce()语法:

Array.reduce(function(previousValue, currentValue, index, array){

}, [initialValue]);

callback 函数的几个参数含义:

  • previousValue:上一次执行 callback 函数后返回的值

  • currentValue:当前数组元素值

  • index:当前数组元素索引

  • array:遍历的数组对象

第一次调用 callback 函数时,如果 initialValue 有值,则 previousValue 为 initialValue,
currentValue 为数组第一个元素。否则 previousValue 为数组第一个元素,currentValue 为数组第二个元素。

var arr = ["a", "b", "c"];
arr.reduce(function(pre, cur, ind, array) {
    console.log(ind);
});

运行结果:

1
2

再看另一个有 initialValue 的例子:

var arr = ["a", "b", "c"];
arr.reduce(function(pre, cur, ind, array) {
    console.log(ind);
}, "z");

运行结果是:

0
1
2



随着 ES6 的诞生,Array 出现了更多的方法。考虑到浏览器的兼容性,在使用下面的方法时需要注意所使用的浏览器是否支持。

7、Array.from()

将一个类数组对象或可迭代对象转换成真实的数组。

  • 类数组对象: 拥有一个 length 属性和若干索引属性的任意对象

  • 可迭代对象: 你可以从它身上迭代出若干个元素的对象,比如有 Map 和 Set 等(Map 与 Set 均为 ES6 中新的对象)

var arr = Array.from("Hello");
console.log(arr);

运行结果:

[ "H", "e", "l", "l", "o" ]

8、Array.values()

将一个数组转换成一个可迭代的对象,该对象包含数组每个索引的值。

var arr = ['a', 'b', 'c'];
var obj = arr.values();
for (let letter of obj) {
    console.log(letter);
}

运行结果:

a
b
c


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务