数组++、对象、ES5Array新增方法
来源:互联网 发布:php的csrf防护 编辑:程序博客网 时间:2024/05/19 14:18
数组++、对象、ES5String
1 Array 数组
1.1 多维数组
数组里包含数组,即数组中的元素为数组。
var arr = [1,2,'html5',[3,4,'css3'],[5,6,'javascript']];
arr[3][2]; //=>'css3'
2 Object对象
2.1数据类型
2.1.1基本数据类型
Number,String,Boolean
2.1.2特殊数据类型
Undefined,Null
2.1.3引用数据类型
Object:1.Array;2.Function
2.2 Object的创建方式
2.2.1字面量创建方式(直接量,推荐方式)
直接量(推荐):var obj = {name:'小明',age:18};
//添加属性、属性的值
obj[‘gender’] = ‘男’;
2.2.2构造函数的方式
构造函数:var obj = new Object();
//添加属性、属性值
obj.name = ‘小明’;
2.3 对象的遍历循环
通过for...in,
// 对象的遍历
// for..in循环
for(var attr in obj){
// attr是一个变量
// 必须使用方括号语法
console.log(attr,obj[attr]);
2.4 练习总结
1.清空input的输入内容,id.value =‘’;
2.获取焦点 id.focus();,autofocu只有在刷新页面时才有用,而id.focus();在每次循环中都可以使用。
3 ES5.String Array 新增方法
3.1 Array.isArray判断是否为数组(静态方法)
Array.isArray():判断是否为数组,返回布尔值,如果为数组则返回值为true,如果不为数组则返回值为false。
3.2索引方法
indexOf/lastIndexOf(keyword [,startIndex]),区别就是一个从前往后找,一个从后往前找。
keyword: 要查找的项,
startIndex:查找起点位置的索引,该参数可选
方法返回keyword所在数组中的索引值,如果数组不存在keyword,则返回-1。
案例:
查找keyword在数组中的索引值,查找不到返回-1
indexOf(keyword [,startIndex]):从头往后查找
lastIndexOf(keyword [,startIndex]):从后往前查找
var arr = ['html','css','javascript','ECMAScript','javascript','css3','html5'];
// 判断arr中是否有javascript
var res = arr.indexOf('javascript');//2
var res = arr.indexOf('javascript',3);//4
var res = arr.lastIndexOf('javascript');//4
var res = arr.indexOf('laoxie');//-1
console.log(res);
// 判断相关产中是否含有某个值
if(arr.indexOf('html') != -1){}
if(arr.indexOf('html') >=0){}
3.3迭代方法
下面方法都对数组中的每一项运行给定函数fn,,函数中有三个形参分别为:
1.item:数组中的每一项,
2.index:遍历过程中对应的索引值,
2.array:对数组的引用
3.3.1 forEach(fn); 遍历方法
遍历方法,for循环没有太大差别,比for循环方便。
3.3.2 map(fn)
返回每次函数调用的结果组成的数组,即map函数执行完毕后得到什么,取决于在函数中返回什么。
window.onload = function(){
var goodslist = [{
name:'iphone7 plugs',
imgurl:'img/ip7.jpg',
price:5899.00,
sale:5888.00,
color:'土豪金'
},{
name:'Note7',
imgurl:'img/note7.jpg',
price:3899.00,
sale:998.00,
color:'黑色'
},{
name:'荣耀7',
imgurl:'img/honor7.jpg',
price:1999.00,
sale:1899.00,
color:'白色'
}];
// 获取元素
var datalist = document.getElementById('datalist');
var html = goodslist.map(function(item){
return '<li><img src="'+item.imgurl+'"><h4>'+item.name+'</h4><p class="price">价格:<span>'+item.price+'</span></p><p class="color">颜色:'+item.color+'</p></li>'
}).join('');
datalist.innerHTML = html;
console.log(html);
}
3.3.3 filter(fn)
得到执行fn后返回true时对应的数组元素,利用这个方法可对数组元素进行过滤筛选。
var arr3 = [10,2,8,20,44,22,2,9,31,45,5,88];
// 获取数组中小于10的数
var res3 = arr3.filter(function(item){
return item<10;
});
console.log(res3);
3.3.4 every(fn)
如果该函数对每一项都返回 true,则返回true。
3.3.5 some(fn)
如果该函数对任何一项返回 true,则返回true。
3.4归并方法
两个方法都会迭代数组中的所有项,然后生成一个最终返回值。
1.reduce(fn,initVal)
2.reduceRight(fn,initVal)
fn(prev,cur,index,array): fn是每一项调用的函数,函数接受4个参数分别是
prev:前一次返回值,
cur:当前值,
index:索引值,
array:当前数组,
函数需要返回一个值,这个值会在下一次迭代中作为prev的值;
initVal: 迭代初始值(可选),如果缺省,prev的值为数组第一项。
/*
计算数组的和
reduce(fn,initVal)
reduceRight()
如果没有初始值,则把数组的第一项作为初始值
*/
var arr = [1,10,11,23,33,8,9,21];
console.log(arr);
/*var total = arr.reduce(function(prev,curr){
// prev:前一次返回值
console.log(prev,curr);
return curr+prev;
},0);
console.log(total);*/
var total = arr.reduce(function(prev,curr){
console.log(prev,curr)
return prev+curr;
});
console.log(total);
- 数组++、对象、ES5Array新增方法
- es6 Array数组对象新增方法 Array.of()
- ECMAScript5数组新增方法
- es5新增数组方法
- Es5新增数组和对象
- ES6---数组array新增方法
- es6Math对象新增的方法
- JavaScrip数组方法+ECMAScript 5新增
- ES6数组新增的几个方法
- es6新增的数组去重方法
- 新增了归并数组的方法!
- livequery解决新增对象方法的绑定
- javascript 数组对象方法
- javascript 数组对象方法
- Javascript 1.6 数组新增方法介绍之 forEach()
- Javascript当中新增的几个实用操作数组的方法
- es5中js的数组 新增方法总结
- ES6中新增数组方法与ES5之间的区别
- 大学
- 关于windows虚拟桌面使用及录屏
- Geth搭建私有链
- 移动端触摸事件总结
- eigen求特征值和特征向量
- 数组++、对象、ES5Array新增方法
- 几种分类问题的区别:多类分类,多标签分类,多示例学习,多任务学习
- Python第三方库:Pyinstaller——神奇的Py打包工具
- hibernate.cfg.xml
- 使用MyEclipse简化hibernate开发
- Digit Counting UVA
- jquery $(document).ready() 与window.onload的区别
- 【HDU 4552】怪盗基德的挑战书(kmp)
- 数塔