Day14-Js4:面向对象2-Array

1.Array对象

添加删除	push()	向数组的末尾添加一个或更多元素，并返回新的长度。
添加删除	unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
添加删除	pop()	删除数组的最后一个元素并返回删除的元素。
添加删除	shift()	删除并返回数组的第一个元素。
添加删除	splice()	从数组中添加或删除元素。
查找过滤	filter()	检测数值元素，并返回符合条件所有元素的数组。
查找过滤	find()	返回符合传入测试（函数）条件的数组元素。
数组操作	map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
数组操作	every()	检测数值元素的每个元素是否都符合条件。
数组操作	some()	检测数组元素中是否有元素符合指定条件。
数组操作	forEach()	数组每个元素都执行一次回调函数。
数组操作	reduce()	将数组元素计算为一个值（从左到右）。
反转	reverse()	反转数组的元素顺序。
排序	sort()	对数组的元素进行排序。
合并拆分	concat()	连接两个或更多的数组，并返回结果。
合并拆分	slice()	选取数组的一部分，并返回一个新数组。
转换	toString()	把数组转换为字符串，并返回结果。
转换	join()	把数组的所有元素放入一个字符串。
查找索引	indexOf()	搜索数组中的元素，并返回它所在的位置。
查找索引	lastindexOf()	搜索数组中的元素，返回它最后出现的位置
查找元素	includes()	判断一个数组是否包含一个指定的值。
展开运算	...arr	遍历数组展开，也可以把伪数组转数组展开

添加/ 删除

pop()

删除，数组长度发生了改变。索引删除数组长度不会发生改变。

splice()

从第几个开始，删除几个（可以是0），添加什么（可以不写））

如果没有规定第二个参数，会从第一个参数设置的数目开始删到最后

删除数组内容时会导致数组长度变化，后面的元素会往前移动。所以执行splice时需要加上一个i--，防止有漏网之鱼

查找和过滤

find()

方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 undefined

注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

filter()

方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。如果没有符合条件的元素会返回空数组

该函数有自动调用遍历数组利用函数判断的特性。（遍历并判断是否为true）

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

var arr = [1500,1200,2000,2100,2200,1800]

function checkMoney(num){
    return num<=2000
}

var res = arr.filter(checkMoney) // 有自动调用遍历的功能
console.log(res)

var arr = [1500, 1200, 2000, 2100, 2200, 1800]
// 直接使用filter方法，传一个匿名函数
var res = arr.filter(function (num) {
    return num <= 2000
}) 
console.log(res)

数组操作

map()

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。它按照原始数组元素顺序依次处理元素

array.map(function(currentValue,index,arr), thisValue)
// 示例
// 需求2：将arr数组中每个元素都乘以它的索引值
var resArr = arr.map(function (num,index) { // index代表每个元素的索引
    // return num * arr.indexOf(num) // 如果数组中有相同元素，它只调用第一次出现的元素
    return num * index
})

some()

用于检测数组中的元素是否满足指定条件（函数提供）。它会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 完全没有满足条件的元素，则返回false。

every()

用于检测数组所有元素是否都符合指定条件（通过函数提供）。它使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 必须所有元素都满足条件，返回 true。

使用场景

如果有被选中的，则全选按钮全选内容some() ；如果内容已经被全选，则全部按钮被取消选中

forEach()

用于调用数组的每个元素，并将元素传递给回调函数。

语法：

array.forEach(callbackFn(currentValue, index, arr), thisValue)

（当前元素，当前元素的索引值，当前元素所属的数组对象）

只写当前元素——遍历

写前两个——遍历+索引值

var arr1 = ['方块', '梅花', '红桃', '黑桃'];
var arr2 = [3, 4, 5, 6, 7];

arr2.forEach(function (item) {
    arr1.forEach(function (item2){
        console.log(item2 + item)
    })
})

forEach(): 没有返回值，本质上等同于 for 循环，对每一项执行 function 函数。即map是返回一个新数组，原数组不变，forEach 是不改变原数组（尽管回调函数 callbackFn 在被调用时可能会改变原数组）。

不支持 continue，用 return false 或 return true 代替。

不支持 break，用 try catch/every/some 代替：

reduce()

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

从右往左：reduceRight()

0代表求和变量total的默认值，不传会有问题

arr.reduce(function(total,sum) {
    return total + sum 
},0)

reverse()

用于颠倒数组中元素的顺序。

sort()

用于对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

注意： 当数字是按字母顺序排列时"40"将排在"5"前面。

使用数字排序，你必须通过一个函数作为参数来调用。

函数指定数字是按照升序还是降序排列。

// 升序
console.log(arr.sort(function (a, b) {
    return a - b 
}))
// 降序
console.log(arr.sort(function (a, b) {
    return b - a 
}))

concat()

用于连接两个或多个数组。

该方法不会改变现有的数组，而是返回一个新的数组

var arr1 = [1,2,3]
var arr2 = [4,5,6]

// 合并
var arr =  arr1.concat(arr2)
console.log(arr1) // 不会改变原有数组
console.log(arr) 

slice()

从已有的数组中返回选定的元素。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

// 拆分前四个
var arrFen = arr.slice(0,4)

toString()

把数组转换为字符串，并返回结果。

注意： 数组中的元素之间用逗号分隔。

join()

用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符进行分隔的。

// 转换，将arrFen转成字符串
console.log(arrFen.toString()) // 把数组转换为字符串，只能用逗号链接
console.log(arrFen.join('-')) // 可以上传分隔符，按想要的连接符分隔

includes()

用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

indexOf()

返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

查找字符串最后出现的位置，用 lastIndexOf() 方法。

var arr = [1,2,3,4,5,6,9,3,5]

// 查找3第一次出现的位置
console.log(arr.indexOf(3)) // 2

// 查找3最后一次出现的位置
console.log(arr.lastIndexOf(3)) // 8

// 查找100出现的位置
console.log(arr.indexOf(100)) // -1没有

// 判断数组中是否包含100
console.log(arr.includes(100)) // false

数组去重

方式

1. indexOf只能获取到第一次出现的同一个元素
2. 判断数组中有无这个元素：  数组名.indexOf(元素) == -1表示元素不存在
3. 判断数组中有无这个元素：  数组名.includes(item) == false表示元素不存在

// 1
var res = arr.filter(function (item,index) {
    return arr.indexOf(item) == index 
    // indexOf只能获取到第一次出现的同一个元素
    // 获取数组元素的索引等于遍历时的索引，遍历第二个20时遍历索引依然是1，但数组索引是2，
})
// 2
var newAarr = []
arr.forEach(function(item){
    if(newAarr.indexOf(item) == -1){
        newAarr.push(item)
    }
})
// 3
var newAarr = []
arr.forEach(function(item){
    if(newAarr.includes(item) == false){
        newAarr.push(item)
    }
})

展开运算符

var arr = [1,2,3]
// 使用展开运算符遍历数组
console.log(...arr)
// 例子
var arr = [1,2,3]

console.log(...arr)
console.log(arr)

// 获取li元素并翻转
var lis = document.querySelectorAll('li')
console.log(lis)// NodeList(3) [li,li,li] 是一个伪数组，不能调用翻转方法
// lis.reverse() // 报错

// 使用展开运算符，将里面的元素展开，放入新数组
var newArr = [...lis]
newArr.reverse()
console.log(newArr)

2.String对象

查找	indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
查找	lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
截取	substr()	从起始索引号提取字符串中指定数目的字符。
截取	substring()	提取字符串中两个指定的索引号之间的字符。
替换	replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的（某一个）子串。
替换	replaceAll()	在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。

 var str = '有钱人终成眷属，没钱人亲眼目睹'
 // 查找索引为3的字符
 console.log(str.charAt(3))
 console.log(str[3])
// 字符串本质就是一个字符的数组，所以也可以调用这个方法

 // 查找第一个钱所在的索引
 console.log(str.indexOf('钱')) // 1
 // 查找最后一个钱所在的索引
 console.log(str.lastIndexOf('钱')) // 9

 // 将眷属，截取出来打印
  console.log(str.substr(5,2))
  console.log(str.substring(5,7))

// 将第一个钱，替换成'情'
var res1 = str.replace('钱','情')
console.log(res1)

// 将里面的人替换成'的'
var res2 = str.replaceAll('人','的')
console.log(res2)

3.正则对象

正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers; 

• pattern（模式） 描述了表达式的模式
• modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

字符

单字符，代表他自己

[ ] 用于查找某个范围内的字符

[12345] 表示出现1-5中的任意一个：这种连续的数字也可以写成 [1-5]

[0-9]0-9的任意一个

[^0-9]非0-9，对[0-9]取反

[a-zA-Z]英文字符

[^a-zA-Z]非英文字符

数量词：表示前面字符出现的次数

[0-9]+ ：+表示至少出现一次

[0-9]* ：*表示出现任意次（0,1，多次）

[0-9]? ：?表示出现0或者1次）

[0-9]{x} ：{x}表示出现x次

[0-9]{x,} ：{x,}表示至少出现x次

[0-9]{x,y} ：{x,y}表示至少出现x次，最多出现y次

元字符

拥有特殊含义的字符，类似关键字

\d 表示[0-9]

\D 表示[^0-9]

\w 表示单词字符[a-zA-Z0-9_]

\W 表示非单词字符[^a-zA-Z0-9_]

输入账号

正则规则

n$ 匹配任何结尾为n的字符串

^n 匹配任何开头为n的字符串

一般组合使用

写法：^正则内容$

作用：这种写法为正则的严格模式，表示要检测的字符必须是正则的指定内容，不能多也不能少

function CheckQQ(qq){
    // 创建正则方式1
    // var reg = new RegExp('^[1-9][0-9]{4,14}$')
    var reg = new RegExp('^[1-9]\d{4,14}$') 
  	// 需要在\d前面加一个 \，防止\d被转义

    // 创建正则方法2
    var reg = /^[1-9]\d{4,14}$/  // 直接用反斜杠创建正则，不用担心被转义

    // 调用test方式校验
    var flag = reg.test(qq)
    return flag
}

// 调用方法
var qq = prompt('请输入你的qq号')
var res = CheckQQ(qq)
console.log(res)