数组++、对象、ES5Array新增方法

数组++、对象、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);