zoukankan      html  css  js  c++  java
  • javaScript基本使用api

     

    基本方法

     

    isArray() 判断数组

    isArray() 方法用于判断是否是数组(有兼容性)

    语法:Array.isArray(arr)

    返回值:是数组,返回true。不是数组,返回false。

    if (Array.isArray([1,2,3])) {
       // true
    } else {
       // false
    }

     

    toString() 转字符串

    toString() 方法可把数组转换为字符串,并返回结果。

    语法:array.toString()

    返回值:字符串

    var arr = ['a','s','d']
    var str = arr.toString()
    console.log(str) // a,s,d

     

    join() 分割

    join() 方法用于把数组中的所有元素放入一个字符串。

    语法:array.join(separator)

    separator:可选。分割符,默认英文逗号。

    返回值:字符串

    var arr = ['a','s','d']
    var str = arr.join()
    console.log(str) // a,s,d

     

    pop() 删除数组最后一项

    pop() 方法用于删除并返回数组的最后一个元素。

    语法:arrayObject.pop()

    返回值:数组长度减1,并返回删除的元素的值。如果是空数组,返回undefined。

    var arr = ['a','s','d']
    var str = arr.pop()
    console.log(str) // d
    console.log(arr) // a,s

     

    push() 数组尾部添加元素

    push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

    语法:arrayObject.push(newelement1,newelement2,....,newelementX)

    newelement1:必需。要添加到数组的第一个元素。

    newelement2:可选。要添加到数组的第二个元素。

    newelementX:可选。可添加多个元素。

    返回值:新的长度

    var arr = ['a','s','d']
    var len = arr.push('f')
    console.log(len) // 4
    console.log(arr) // a,s,d,f

     

    shift() 删除数组第一项

    shift() 方法用于删除并返回数组的第一个元素。

    语法:arrayObject.shift()

    返回值:数组长度减1,并返回删除的元素的值。如果是空数组,返回undefined。

    var arr = ['a','s','d']
    var str = arr.shift()
    console.log(str) // a
    console.log(arr) // s,d

     

    unshift() 数组开头添加元素

    unshift() 方法可向数组的开头添加一个或多个元素,并返回新的长度。

    语法:arrayObject.unshift(newelement1,newelement2,....,newelementX)

    newelement1:必需。要添加到数组的第一个元素。

    newelement2:可选。要添加到数组的第二个元素。

    newelementX:可选。可添加多个元素。

    返回值:新的长度

    var arr = ['a','s','d']
    var len = arr.unshift('f')
    console.log(len) // 4
    console.log(arr) // f,a,s,d

     

    reverse() 颠倒数组

    reverse() 方法用于颠倒数组中元素的顺序。

    返回值:排序的原数组。

    var arr = ['a','s','d']
    arr.reverse()
    console.log(arr) // d,s,a

     

    sort() 排序

    sort() 方法用于对数组的元素进行排序。

    语法:arrayObject.sort(sortby)

    sortby:可选。规定排序顺序,必须是函数。默认按字母编码顺序排序。

    返回值:排序的原数组。

    var arr = ['a','c','d','b']
    arr.sort()
    console.log(arr) // a,b,c,d

     

    concat() 合并数组

    concat() 方法用于合并两个或多个数组。

    语法:arrayObject.concat(arrayX,arrayX,......,arrayX)

    arrayX:必需。该参数可以是具体的值,可以是数组对象,也可以是任意多个。

    返回值:返回一个新的数组。不会改变原数组。

    var arr1 = ['a','b']
    var arr2 = ['c','d']
    var arr3 = arr1.concat(arr2)

    console.log(arr1) // a,b
    console.log(arr2) // c,d
    console.log(arr3) // a,b,c,d

     

    slice() 提取

    slice() 方法可从已有的数组中返回选定的元素。

    语法:arrayObject.slice(start,end)

    start:必需。规定从何处开始选取(包含)。

    end:可选。规定从何处结束选取(不包含)。

    返回值:返回一个新的数组。不会改变原数组。

    var arr = ['a','b','c','d','e']
    var newArr = arr.slice(1,3)
    console.log(arr) // a,b,c,d,e
    console.log(newArr) // b,c

     

    splice() 添加、删除、替换

    splice() 方法用于添加、删除、替换数组元素,返回被删除的项目。

    语法:arrayObject.splice(index,howmany,item1,.....,itemX)

    index:必需。整数,规定添加/删除项目的位置。

    howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。

    item1,.....,itemX:可选。向数组添加/替换的新项目。

    返回值:删除的数组。

    // 删除元素
    var arr = ['a','b','c','d','e']
    arr.splice(2,1)
    console.log(arr) // a,b,d,e

    // 删除元素 替换新元素
    var arr = ['a','b','c','d','e']
    var del = arr.splice(1,1,'f')
    console.log(arr) // a,f,c,d,e
    console.log(del) // b

    // 添加新的元素
    var arr = ['a','b','c','d','e']
    arr.splice(1,0,'f')
    console.log(arr) // a,f,b,c,d,e

     

    indexOf() 查找首次位置

    indexOf() 方法可返回一个指定元素在数组中第一次出现的位置。

    语法:Array.indexOf(item,start)

    item:必须。查找的元素。

    start:可选的整数参数。规定在数组中开始检索的位置。

    返回值:元素在数组中的位置,如果没有搜索到则返回 -1。

    var arr = ['a','c','b','c','e']
    var index = arr.indexOf('c')
    console.log(index) // 1

     

    lastIndexOf() 查找最后位置

    lastIndexOf() 方法可返回一个指定元素在数组中最后出现的位置,从后向前查找。

    语法:Array.lastIndexOf(item,start)

    item:必须。查找的元素。

    start:可选的整数参数。规定在数组中开始检索的位置。

    返回值:元素在数组中的位置,如果没有搜索到则返回 -1。

    var arr = ['a','c','b','c','e']
    var index = arr.lastIndexOf('c')
    console.log(index) // 3

     

    迭代数组的5种方法

     

    every()

    every()方法用于判断数组中是否每个元素都满足条件。

    语法:Array.every(function(item,index,array) { return 条件 })

    item:必须。当前元素的值。

    index:当前元素的索引。

    array:当前元素的数组对象。

    返回值:只有都满足才返回true,只要有一项不满足返回false。

    var arr = [1,2,3,4,5,6]
    var res = arr.every(item => {
       return item > 2
    })
    console.log(res) // false

     

    some()

    some()用于判断数组中是否有至少一个元素满足条件。

    语法:Array.some(function(item,index,array) { return 条件 })

    item:必须。当前元素的值。

    index:当前元素的索引。

    array:当前元素的数组对象。

    返回值:只要有一个满足就返回true,只有都不满足才返回false。

    var arr = [1,2,3,4,5,6]
    var res = arr.some(item => {
       return item > 5
    })
    console.log(res) // true

     

    filter()

    filter()方法用于对数组进行过滤。

    语法:Array.filter(function(item, index, array) { return 条件 })

    item:必须。当前元素的值。

    index:当前元素的索引。

    array:当前元素的数组对象。

    返回值:返回符合条件的新数组,不会改变原数组。

    var arr = [1,2,3,4,5,6]
    var res = arr.filter(item => {
       return item > 3
    })
    console.log(res) // [4,5,6]

     

    map()

    map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

    语法:Array.map(function(item, index, array) { return 条件 })

    item:必须。当前元素的值。

    index:当前元素的索引。

    array:当前元素的数组对象。

    返回值:返回新的数组,不会改变原数组。

    var arr = [1,2,3,4]
    var res = arr.map(item => {
       if (item == 3) {
           return item * 2
      }
       return item
    })
    console.log(res) // [1,2,6,4]

     

    forEach()

    forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

    语法:Array.forEach(function(item, index, array) { return 条件 })

    item:必须。当前元素的值。

    index:当前元素的索引。

    array:当前元素的数组对象。

    没有返回值:如果是空数组,item为undifined。

    var arr = [1,2,3,4]
    var sum = 0
    arr.forEach(item => {
       sum += item
    })
    console.log(sum) // 10

     

    reduce()

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

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

    语法:Array.reduce(function(total, iten, index, array) { return total }, initialValue)

    total:必须。计算结束后的返回值。初始值为initialValue。

    item:必须。当前元素的值。

    index:当前元素的索引。

    array:当前元素的数组对象。

    initialValue:传递给函数的初始值。

    返回值:返回计算结果。

    // 计算数组项总和
    var arr = [1,2,3,4]
    var sum = arr.reduce((total,item) => {
       return total + item
    },0)
    console.log(sum) // 10

    // 计算数组项最大值
    var arr = [1,2,3,4]
    var max = arr.reduce((total,item) => {
       return Math.max(total, item)
    })
    console.log(max) // 4

    // 数组去重
    var arr = [1,2,3,2,1,4]
    var newArr = arr.reduce((total,item) => {
       total.indexOf(item) === -1 && total.push(item)
       return total
    },[])
    console.log(newArr) // [1,2,3,4]

     

    ES6 新增数组方法

     

    fill()

    fill() 方法用于将一个固定值替换数组的元素。

    语法:Array.fill(value, start, end)

    value:必需。填充的值。

    start:可选。开始填充位置。

    end:可选。停止填充位置。

    返回值:被填充的原数组。

    var arr = ['a','b','c','d']
    arr.fill('e',1,3)
    console.log(arr) // ['a','e','e','d']

     

    find()

    find()方法用于查找并返回符合条件的第一个数组项。

    语法:Array.find(function(item, index, array) { return 条件 })

    item:必须。当前元素的值。

    index:当前元素的索引。

    array:当前元素的数组对象。

    返回值:返回符合条件的第一个数组元素值,没有符合条件返回 undefined。

    var arr = ['a','b','c','d']
    var str = arr.find(item => {
       return item == 'c'
    })
    console.log(str) // c

     

    findIndex()

    findIndex()方法用于查找并返回符合条件的第一个数组项的位置。

    语法:Array.findIndex(function(item, index, array) { return 条件 })

    item:必须。当前元素的值。

    index:当前元素的索引。

    array:当前元素的数组对象。

    返回值:返回符合条件的第一个数组元素值,没有符合条件返回 -1。

    var arr = ['a','b','c','d']
    var index = arr.findIndex(item => {
       return item == 'c'
    })
    console.log(index) // 2

     

    ES7 新增数组方法

     

    includes()

    includes() 方法用来判断一个数组是否包含一个指定的值。

    语法:Array.includes(searchElement, fromIndex)

    searchElement:必须。需要查找的元素值。

    fromIndex:可选。从该索引处开始查找 searchElement。

    返回值:包含返回true,不包含返回false。

    var arr = ['a','b','c','d']
    var res = arr.includes('b')
    console.log(res) // true

     

  • 相关阅读:
    ie6下absolute:fixed问题,完美兼容
    ajax传输 基础一
    获取ip的ip138.com
    css 常用代码解析
    QQ客服出现“企业QQ在线咨询无权限在当前场景使用!” 问题
    用js实现QQ自定义在线图片
    getElement的几中属性介绍
    Ecshop 单选按钮组功能 颜色多选
    IE6完美解决fix问题
    PHP站内搜索、多关键字、加亮显示
  • 原文地址:https://www.cnblogs.com/qdwds/p/11704488.html
Copyright © 2011-2022 走看看