简单的介绍下ES5:
一:ES5
javascript最早是由网景公司推出的,极其简单,被很多开发者接受,逐渐流行起来,后来IE为了抢占市场微软,将IE浏览器内置在windows系统中,所以IE的市场占有率相当的高。IE脚本语言是Jscript(vbscript)
二:JSON拓展
判断数组:
1:判断对象是类型还是数组
object.prototype.tostring.call(obj)
2: 判断构造函数是否是array
obj.constructor=array
3:判断 是否是实例化对象
obj instanceof array
4:判断数组的静态方法
Array.issArray(obj)
2.1:parse
该方法是将JSON字符解析为JS对象
使用方式:
JSON.parse(str,fn)
str:要处理的字符串
fn:要处理的函数
返回值就是本次处理的结果,有二个参数:
第一个参数:属性名
第二个参数:属性值
从外部想内部遍历
举例:
<script type="text/javascript">
// 定义json字符串
var str = '{"a": 1, "b": "2", "c": {"d": 3}}';
// 将str转为js对象
var newstr=JSON.parse(str,function(k,v){
// 查看每个参数
console.log(arguments);
// 进行判断
if(typeof v==="string"){
// 隐式转换为number
return +v;
}
return v;
});
// 我们希望将字符串转为数字
console.log(newstr);
</script>
2.1 : stringify
该方法用于将JS对象转换为JSON字符串
使用方式: JSON.stringify(obj,fn)
内部向外部遍历
返回值:本次遍历的结果
举例
<script type="text/javascript">
// 定义对象
var obj = {
a: 1,
b: "2",
c: {
d: 3
}
}
// 将obj转为json字符串
var newstr=JSON.stringify(obj,function(k,v){
// console.log(arguments);
if(typeof v==="string"){
return +v;
}
return v;
})
console.log(newstr);
</script>
获取成员的索引值
ES5为数组拓展了二个方法:indexof lastindexof,分别用于获取数组中的成员的索引值
参数:要查找的成员
返回值:成员的索引值,如果没有返回-1
举例:
<script type="text/javascript">
// 定义一个数组
var arr = ["老大",0 ,"老二", "老三", 0, "老王"];
/**
* indexOf 获取数组中成员的索引值
* @arr 查找的数组
* @item 要查找的成员
* return 索引值
*/
// indexOf
function indexOf(arr,item){
for(var i=0;i<arr.length;i++){
if(arr[i]===item){
return i;
}
}
return -1;
}
// test
var test= indexOf(arr,"老王");
console.log(test);
// lastindexof
function lastIndexof(arr,item){
for(var i=0;i<arr.length;i++){
if(arr[i]===item){
return i;
}
}
return -1;
}
var test=arr.lastIndexOf(0);
console.log(test);
// 兼容IE8
// 实现lastIndexOf方法
if (!Array.prototype.lastIndexOf) {
// 拓展方法
Array.prototype.lastIndexOf = function(item) {
// 遍历数组,就是遍历this
for (var i = this.length - 1; i >= 0; i--) {
// i 表示 索引值 arr[i] 表示成员值
// 判断arr[i]与item是否是全等
if (this[i] === item) {
// 如果找到了 返回i
return i;
}
}
// 遍历完没有找到,返回-1
return -1;
}
}
var test=arr.lastIndexOf(0);
console.log(test);
</script>
2.3: forEach
该方法用于代替for循环, 是数组的迭代器方法,并没有将for循环移除,
只是将循环封装在数组迭代器方法forEach中
foreach适用于只是进行集合或数组遍历,for则在较复杂的循环中效率更高。
foreach不能对数组或集合进行修改(添加删除操作),如果想要修改就要用for循环。
数组: Array.forEach(fn)
fn:要执行的函数,有三个参数:
第一个:成员值
第二个:索引值
第三个:原数组
作用域:window
函数的返回值对forEach的执行结果没有影响,值为undefined!
JQ中的each类似于foreach,第一个参数为:索引值,第二个:成员值
举例:
<script type="text/javascript">
/// 定义一个数组
var arr = ["老大", "老二", "老三", "老四"];
/**
* forEach方法 数组迭代器方法
* @arr 要遍历的数组
* @fn 执行的函数
**/
function forEach(arr,fn){
for(var i=0;i<arr.length;i++){
// 执行函数并传递参数
// 函数中有三个参数: 成员值、 索引值、 原数组
// 成员值: arr[i], 索引值: i, 原数组: arr
fn(arr[i],i,arr);
}
}
var newfor=forEach(arr,function(value,index,arr){
console.log(this, arguments);
})
</script>
2.4 map
该方法用于遍历数组,并映射结果,与forEach方法类似,只是它的返回值是有意义的。
参数:要执行的函数
函数中有三个参数:成员值,索引值,原数组,作用域:window
返回值是执行结果的数组成员
举例
<script type="text/javascript">
/// 定义一个数组
var arr = ["老大", "老二", "老三", "老四"];
function map(arr,fn){
var result=[];
for(var i=0;i<arr.length;i++){
result.push(fn(arr[i],i,arr));
}
return result;
}
var result=map(arr,function(value, index, arr){
console.log(this,arguments);
});
</script>
2.5 fill
该方法用于填充数组
我们在使用new Array(),或者Array()来创建数组的时候,得到的只有长度,没有成员,所以我们不能使用数组迭代器方法,就要填充数组
参数就是要填充的成员,即使函数不会执行
举例:
<script type="text/javascript">
// 创建数组
var arr = new Array(5);
function fill(arr,item){
// 遍历数组
for(var i=0;i<arr.length;i++){
// 填充数组
arr[i]=item
}
return arr;
}
// 填入参数
var result=fill(arr,1);
// 遍历每一个数组,查看
result.forEach(function(){
console.log(arguments);
})
// 得到数组
console.log(result);
</script>
断言方法:
2.6 some:在数组中是否有成员满足条件
使用方式和forEach类似,参数就是要执行的函数,有三个参数:
成员值 索引值 原数组
返回值就是判断的依据
some方法的返回值:
true:至少有一个满足条件
false:都不满足条件
some对true敏感,一旦满足条件停止遍历
举例:
<script type="text/javascript">
/// 定义一个数组
var arr = ["老大", "老二", "老三", "老四"];
function some(arr,fn){
for(var i=0;i<arr.length;i++){
if(fn(arr[i],i,arr)){
return true;
}
}
return false;
}
var result=some(arr,function(value, index, arr){
// console.log(this, arguments);
return value[0]=="老"; //true
// return value[0]=="王"; //false
})
console.log(result);
</script>
2.7 every
类似于some,判断数组中是否都满足条件
使用方式与forEach类似
参数要执行的函数:有三个: 成员值,索引值 , 原数组
返回值就是判断的依据:
every方法的返回值:
true:全部都满足条件
false有成员不满足条件
every对false敏感,一旦遇到一个不满足条件就停止遍历
举例:
<script type="text/javascript">
/// 定义一个数组
var arr = ["老大", "老二", 3,"老三", "老四"];
function every(arr,fn){
for(var i=0;i<arr.length;i++){
if (!fn(arr[i], i, arr)) {
// 停止遍历 并返回false
return false;
}
}
return true;
}
var result = every(arr, function(value, index, arr) {
console.log(this, arguments);
// 有个3不满足 为false
return value.length == 2;
})
console.log(result);
</script>
2.8 filter
实现对数组的过滤
使用方式和forEach方法类似
参数就是要执行的函数
函数中有三个参数:成员值,索引值,原数组
返回值就是过滤的条件
举例:
var result = [];
for (var i = 0; i < arr.length; i++) {
// 执行函数并判断结果
// 参数有三个: 成员值 arr[i], 索引值 i, 原数组 arr
if (fn(arr[i], i, arr)) {
result.push(arr[i]);
}
}
return result;
}
var result = filter(arr, function (value, index, arr) {
// console.log(this, arguments);
// 判断字符串的第一位不等于字符串的第二位
return value[1] != value[2];
})
console.log(result);
</script>
reduce reduce right
这二个是累加的方法,reduce是从前往后累加,而reduce right是从后往前累加,对所有的成员逐一处理,并将结果返回
有四个参数:上一次的累积结果,当前的成员值,当前的索引值,原数组
返回值就是当次的累积的结果,将会下次遍历的时候作为第一个参数传递!
reduce 是从第二个成员开始遍历,第一个成员会在第一次遍历的时候作为第一个参数进行传递
reduce right 是从倒数第二个开始遍历,倒数第一个成员在第一次遍历的时候作为第一个参数
举例:
<script type="text/javascript">
// 定义数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 实现reduce
function reduce(arr,fn){
// 定义累加和
var result=0;
for(var i=0;i<arr.length;i++){
result=fn(result,arr[i],i,arr);
}
return result;
}
var result=reduce(arr,function(pre, value, index, arr){
return pre+value;
})
console.log(result);
</script>
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
function reduce(arr, fn) {
// 定义累积
var result = arr[0];
for (var i = 1; i < arr.length; i++) {
result = fn(result, arr[i], i, arr);
}
return result;
}
var result = reduce(arr, function (pre, value, index, arr) {
return pre * value;
})
console.log(result);
</script>