Java教程

javascript数组(下)

本文主要是介绍javascript数组(下),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

javascript数组

在这里插入图片描述

一、ES5数组遍历常用的方法

  这些方法都使用了匿名函数,该匿名函数的参数都有三个item,index,arr。item是数组元素,index是数组下标,arr是数组本身,三个参数根据自身需要选取,使用多个参数时,顺序不能变,参数名称可以自己取。
1.forEach
  和 for 循环一个作用,就是用来遍历数组的

var arr = [10,20,30]
arr.firEach(function(item,index,arr){
    //item是10,20...
    //index是下标0,1,...
    //arr是数组本身
})

2.map
  和 forEach 类似,只不过可以对数组中的每一项进行操作,返回一个新的数组

var arr = [10,20,30]
arr.map(function(item){
	return item+10
})

//得到结果[20,30,40]

3.filter
  用法跟map相似,filter可以筛选满足条件的数组,返回一个带有满足条件元素的新数组。

var arr = [10,20,30]
arr.filter(function(item){
	return item>10
})

//得到结果[20,30]

4.find
  查找满足条件的第一个元素,返回的是一个元素。

var arr = [10,20,30]
arr.find(function(item){
	return item>15
})

//得到结果20

5.every
  遍历数组,看数组中所有元素是否都满足条件,如果都满足,返回true,否则返回false

var arr = [10,20,30]
var isTrue = arr.every(function(item){
	return item>10
})

//得到isTrue 的值为false

6.some
  遍历数组,数组中只要有一个满足条件就返回true,全部都不满足条件才会返回false

var arr = [10,20,30]
arr.some(function(item){
	return item <= 10
})

//得到isTrue 的值为true

7.reduce 累加
  把数组的每一项值相加。如果数组元素存在不同的数据类型,得到的结果是各个元素拼接起来的一个字符串;元素全是数值就能得到累加和。

var arr = [10,20,30]
var sum = arr.reduce(function(s,item){
	return s+item
},0)

//得到结果:sum=60

二、数组排序

  把一个无序的数组通过处理,变成一个有顺序的数组就叫数组排序。
1.冒泡排序
【例子都是从小到大排序的】
  比较相邻的两个元素,如果前一个元素大于后一个元素,那两者就交换位置,这样一轮下来就能把数组中最大的一个元素排到最后一个位置。第二次又从第一个元素开始,还是按照之前的规则,第二大的数字就会跑到倒数第二的位置。以此类推,最后就会按照顺序把数组排好。

var a = [89, 56, 98, 48, 59, 46]
var len = a.length
for (var i = 0; i < len - 1; i++) {
    for (var j = 0; j < len - i - 1; j++) {
        if (a[j] > a[j + 1]) {
            var temp = a[j]
            a[j] = a[j + 1]
            a[j + 1] = temp
        }
    }
    console.log(a);
}

2.选择排序
  遍历数组,找到数组中最小的一个元素,跟第一个元素交换位置,第二轮时,遍历除了第一个元素的其他元素,又找出最小的一个,与第二个元素交换位置,以此类推,最终就能得到排好序的数组。

/**
 * 1.外层循环:排序次数:n-1
 * 2.内存循环:找到未排序的最小数的下标,与第一个交换位置
 */
var a = [89, 56, 98, 48, 59, 46]
var len = a.length
//1.外层循环:排序次数:n-1
for (var i = 0; i < len - 1; i++) {
    //定义minIndex存放每次找到最小数的下标
    var minIndex = i
    for (var j = i + 1; j <= len - 1; j++) {
        if (a[j] < a[minIndex]) {
            minIndex = j //找到最小数,把最小数的下标赋给minIndex
        }
    }
    //交换位置
    var temp = a[i]
    a[i] = a[minIndex]
    a[minIndex] = temp
    console.log(a)
}

3.数组去重
  将一个数组中重复的元素删除。
方法一:
  定义一个空数组newArr,用于存储不重复的数组元素,利用indexOf的如果元素不存在就返回-1的原理实现。

var a = [56, 56, 98, 48, 56, 48]
var len = a.length
/**
 * 方法一:用indexOf找不到值就会返回-1的原理
 */
function delIndexOf() {
    var newArr = [] //定义一个新的空数组
    for (var i = 0; i < len; i++) {
    	//如果数组a的元素在newArr中不存在,就追加到newArr中
        if (newArr.indexOf(a[i]) == -1) {
            newArr.push(a[i])
        }
        console.log(newArr);
    }
}

方法二:
  用splice方法,把重复的元素去除。

/*
* 方法二:用splice        
*/

for (var i = 0; i < len; i++) {
    index = i //第i个元素与它后边的所有元素比较
    for (var j = i + 1; j < len; j++) {
        if (a[i] == a[j]) {
            index = j
            a.splice(index, 1)
        }
    }
}
console.log(a);
        

三、字符串 -js内置对象

1.创建字符串
字面量方法创建

var str1 = 'hello'

构造函数方法创建

var str2 = new String('hello')

  两者的数据类型不同,但都可以使用内置对象的方法,因为javascript中基本数据类型在使用时会自动转换为对象,使用完之后又转换成基本数据类型。

2.字符串的长度
字符串的长度就是字符串中字符的个数,用length方法可以得到字符串长度。

var str = 'hello javascript'
str.length
//得到结果为16

3.索引
字符串的索引和数组类似,从0开始,一个索引号对应一个字符。可以根据索引访问字符,也可以遍历字符串。

4.模板字符串
创建字符串还有另一种方式

var s = `hello`       // 反引号引起来

作用:反引号引起来的字符串可以将 ${变量} 值解析出来,使得字符串拼接很方便;另外,操作长字符串时可以直接换行不用连接符连接。
例:打印表格
js:

function tableString() {
document.write(
    `<table>
    <tr class='head'>
        <th>学号</th>
        <th>姓名</th>
        <th>成绩</th>
        <th>性别</th>
    </tr>
</table>`
)
students.forEach(function (item, index) {
    document.write(`
        <table>
            <tr>
                <td>${item.number}</td>
                <td>${item.name}</td>
                <td>${item.score}</td>
                <td>${item.gender}</td>
            <tr>   
        </table>
    `)

})
}
tableString()

css:

table,table tr,table tr td,table tr th{
    border: 1px solid #000;
    border-spacing: 0;
    border-collapse: collapse;
}
td,th{
    width: 80px;
    height: 50px;
    text-align: center;
}

得到结果:
在这里插入图片描述

这篇关于javascript数组(下)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!