ES5新增常见方法
1.数组
+2个索引方法:
indexOf()
和
lastIndexOf
参数1表示 要查找的数组元素 参数2表示要从什么位置开始查找.
注意点:如果没有找到就返回-1;indexOf()和lastIdexOf()不仅是数组方法还是字符串方法。
findIndex()
+作用:查找数组元素在数组中的位置,但是可以写条件
+参数:
=> 参数1表示数组元素
=> 参数2表示数组下标
=> 参数3表示当前的数组本身
find()
- 作用:可以查找数组元素,返回的是就是找到数组元素本身
-
参数:
=> 参数1表示数组元素
=> 参数2表示数组下标
=> 参数3表示当前的数组本身
some()
- 作用:用于检测数组中的元素是否满足指定条件(函数提供)。如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。否则返回false
every()
- 作用:用于检测数组所有元素是否都符合指定条件(通过函数提供)。如果有一个不符合就返回false
-
举例:
全选功能的实现
<style>
input{
display: block;
margin: 10px;
}
</style>
</head>
<body>
<div class="select">
<div class="selector">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<hr/>
<div class="all">
<input type="checkbox">
</div>
</div>
<script>
// 获取元素
var selector = document.querySelectorAll('.selector>input')
// var selector = document.getElementsByTagName('input')
// NodeList节点列表,因为节点列表本身就默认带有forEach方法
// HTMLCollection标记集合,因为标记集合无法被forEach所遍历
// console.log(selector)
var all = document.querySelector('.all>input')
// 给all绑定一个点击事件
all.onclick = function(){
// 获取下all复选框的状态(选中或者未选中)
var type = all.checked
// 遍历所有的复选框
for(var i=0; i<selector.length; i++){
selector[i].checked = type
}
}
// 使用forEach()绑定事件
selector.forEach(function(item){
item.onclick = function(){
// ES6给咱们新增了一个数组方法 Array.from() 可以把伪数组转成真正的数组
var res = Array.from(selector).every(function(item){
return item.checked == true
})
if(res){
all.checked = true
}else{
all.checked = false
}
}
})
</script>
reduce()
- 作用:方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
-
回调函数的参数:
=> 参数1默认表示数组中的第一个元素(会随着遍历变成第一次的结果)
=> 参数2表示后面的数值(依次) -
回调函数后面的参数:
=> 表示第一个值
reduceRight()
- 作用:方法和功能和reduce()功能是一样的,不同reduceRight()从数组的末尾向前将数组的数组项做累加。
2.ES6声明变量
声明变量
- 使用var关键字声明
-
ES6提供了两种方式
=>
let
->块级作用域
->变量不能重复声明
->没有变量声明提升
=>
const
->块级作用域
->变量不能重复声明
->没有变量声明提升
->是用来声明常量的,就是不能改变的数据 -
ES6声明变量的方式提出了一个块级作用域的概念
=>一个花括号就是一个作用域
=>之前只有函数才有局部作用域,其他的都是全局作用域
3.ES6字符串方法
repeat()
重复功能
includes()
判定字符串是否存在某个字符,如果有返回true,没有返回false
startsWith()
判定字符串是否以某个字符开头,如果有返回true,没有返回false
endsWith()
判定字符串是否以某个字符结尾,如果有返回true,没有返回false
for of
可以用于遍历字符串,数组,但是只能取值
4.模板字符串
+语法:
=> 、、
=>如果需要拼接变量,使用${变量名称}
->花括号内部放的是一个表达式
+作用:
=>把字符串拼接进行了简化处理
=>可以允许字符串进行换行操作
5.箭头函数
+语法:
=>let fn=()=>{ }
+其实就是普通函数的简化方式
+注意点:
=>如果箭头函数只有一个参数的时候可以省略小括号
=>箭头函数没有自己的this,它的this指向上一级代码
let fn = function(){
console.log('hello,我是普通函数!')
}
箭头函数
let fn2 = ()=>{
console.log('hello,我是箭头函数!')
}
fn()
fn2()
6.Symbol类型
ES5中包含5种原始类型:string、number、boolean、null和undefined。ES6引入了第6种原始类型——Symbol
7、Set
Set是新的
数据结构
。它类似于数组,但是成员的值都是
唯一的
,没有重复的值。是一个值的集合
注意点
:Set里面的值是
唯一的
,不能有重复的
属性:
size
:返回值的长度
方法
-
add(value)
:添加一个值,返回Set结构本身 -
delete(value)
:删除某个值,返回布尔值 -
has(value)
:返回布尔值,表示是否是成员 -
clear()
:清除所有成员,无返回值
可以用于数组去重
var arr=[1,2,3,6,2,6]
var s=new Set(arr)
//把类数组对象转成数组返回
var newArr=Array.from(s)
console.log(newArr)
8、Map对象
Map
对象保存键/值对,是键/值对的集合。任何值(对象或者原始值) 都可以作为一个键或一个值。Map结构提供了值与值的对象, 是一种更完善的hash(哈希)结构。它类似对象也是键值对的集合,但是键的范围不限于字符串,各种类型都可以当做键。
注意点
:对象不能把其他类型当做键
属性:
size
:返回值的长度
方法:
keys()
: 取出Map里面所有的键
values()
: 取出Map里面所有的值
entries()
:取出里面所有的键和值
方法:
set()
: 增加、修改
get()
: 获取
has()
: 判断里面有没有这个值 true / false
delete()
: 删除
clear()
: 清除
9、数组方法:Array.from
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
把其他类型转成真正的数组类型