ES5和ES6新增常见方法

  • Post author:
  • Post category:其他




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

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



版权声明:本文为tangyu520lehua原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。