zoukankan      html  css  js  c++  java
  • 带你学习ES5中新增的方法

    1. ES5中新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括以下几个方面

    • 数组方法
    • 字符串方法
    • 对象方法

    2. 数组方法

    迭代遍历方法:forEach()、map()、filter()、some()、every()
    判断方法:isArray()

    2.1 forEach跟jQuery的each用法类似。语法是:

    array.forEach(function(currentValue, index, arr))
    
    • currentValue: 数组当前项的值
    • index: 数组当前项的索引
    • arr: 数组对象本身
    var arr = [1,2,3]
    arr.forEach(function(value, index, array){
    	console.log('每个数组元素'+ value)
      console.log('每个数组元素的索引值'+ index)
      console.log('数组本身'+ array)
    })
    

    运行效果如下图
    image.png

    2.2 map()

    array.map(function(currentValue, index, arr))
    

    map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
    注意:map() 方法是直接返回一个新的数组

    • currentValue: 数组当前项的值
    • index: 数组当前项的索引
    • arr: 数组对象本身
    var array1 = [1, 4, 9, 16];
    var map1 = array1.map(function(value, index, arr) {
    return value * 2
    });
    console.log(map1) //[2,8,18,32]
    

    2.3 filter()

    array.filter(function(currentValue, index, arr))
    

    filter()方法用于筛选创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组。
    filter()方法是直接返回一个新的数组

    • currentValue: 数组当前项的值
    • index: 数组当前项的索引
    • arr: 数组对象本身
    var arr = [12,66,88]
    // 选出大于20的
    var newarr = arr.filter(function(value, index){
      return value >=20
    })
    可以简写成var newarr = arr.filter( //[66, 88])
    console.log(newArr) //[66, 88]
    

    预览效果如下图
    image.png

    2.4 some()

    array.some(function(currentValue, index, arr))
    

    some()方法用于检测数组中的元素是否满足指定条件,通俗点查找数组中是否有满足条件的元素
    注意: some()方法返回值是布尔值,如果查找到这个元素,就返回true,如果查找不到则返回false
    如果找到第一个满足条件的元素,则终止循环,不在继续查找

    • currentValue: 数组当前项的值
    • index: 数组当前项的索引
    • arr: 数组对象本身
    var arr=[10,30,4]
    var b = arr.some(function(value){
    	return value > 20
    })
    console.log(b) //true
    

    2.5 every()

    array.every(function(currentValue, index, arr))
    

    every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
    注意:every() 方法必须每个元素都符合条件才能返回true,若有一个不符合,则返回false。
    若收到一个空数组,此方法在一切情况下都会返回 true。

    • currentValue: 数组当前项的值
    • index: 数组当前项的索引
    • arr: 数组对象本身

    2.6 isArray()

    Array.isArray(obj)
    


    Array.isArray() 用于确定传递的值是否是一个 Array

    • obj是需要检测的值。如果是数组则返回true,否则返回false

    区别:

    1. filter 是查找满足条件的元素,返回的是一个数组,而且是把所有满足条件的元素返回回来
    2. some 是查找满足条件的元素是否存在,返回的是一个布尔值,如果查找第一个满足条件的元素,就终止循环。如果数组中查询唯一个元素,用some方法更为合适,因为它找到这个元素,就不在进行循环,效率更高
    3. every是查找所有的元素是否符合条件,返回的是一个布尔值
    4. map是创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

    3. 字符串方法

    trim() 方法会从一个字符串的两端删除空白字符

    str.trim()
    

    trim() 方法并不影响原字符串本身,它返回的是一个新字符串。

    4. 对象方法

    Object.defineProperty()定义对象中新增属性或修改原有的属性

    Object.defineProperty(obj, prop, descriptor)
    
    • obj: 必需。目标对象
    • prop: 必需。 需定义或修改的属性名字
    • descriptor: 必需。目标属性所拥有的特性

    Object.defineProperty() 第三个参数descriptor说明: 以对象形式{}书写

    • value:设置属性的值,默认为undefined
    • writable:值是否可以重写。true | false 默认为false
    • enumerable: 目标属性是否可以被枚举。true | false 默认为false
    • configurable: 目标属性是否可以被删除或是否可以再次修改特性true | false 默认为false
    var obj = {
    id: 1,
    pname: '小米',
    price: 1999
    }
    //以前的对象添加和修改属性的方式
    obj.num = 1000
    obj.pirce = 99
    console.log(obj)
    
    //Object.deefineProperty()定义新属性或者修改原有的属性
    Object.defineProperty(obj, 'num',{
    	value: 1000,
    })
    Object.defineProperty(obj, 'pricee',{
    	value: 9.9,
    })
    Object.defineProperty(obj, 'id',{
      //如果值为false,则不允许修改
    	writable: false,
    })
    Object.defineProperty(obj, 'address',{
    	value: '中国郑州市',
      //如果值为false,则不允许遍历,枚举
      enumerable: false
    })
    console.log(obj)
    console.log(Object.keys(obj))
    

    总结

    本篇文章主要分享了ES5新增的一些方法,有数组方法、字符串方法、对象方法等等,主要分享了哥方法的用法,特点等等。如果想了解更多,请扫描二维码:
    qrcode_for_gh_4d3763fa9780_258 (1).jpg

  • 相关阅读:
    C语言变量名的命名规则
    C++中关于文字编码的问题
    位运算
    Dictionary C#
    C# 中List 用法
    pDC,双缓冲 加载bitmap一点实践
    MyEclipse开发调试JSP,Servlet,JavaBean,JSF,Structs etc
    sqlserver 2005 一些操作
    利用System.EventHandler来实现两个窗体间的事件调用
    webconfig
  • 原文地址:https://www.cnblogs.com/lfcss/p/12391899.html
Copyright © 2011-2022 走看看