ES5和ES6新增常见方法

tangyu520leihua

已于 2022-10-11 16:10:03 修改

阅读量445

点赞数 1

文章标签： es6 javascript 前端

于 2022-10-09 15:22:02 首次发布

本文链接：https://blog.csdn.net/tangyu520lehua/article/details/127226467

版权

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()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

把其他类型转成真正的数组类型