不再犹豫
分享是一种美德

WEB-移动端图片适配-弹框

wangtong阅读(3315)

前端朋友们应该遇到过很多图片弹框适配的问题,我自己总结了两种办法:

第一种是使用background

(1)使用百分比

width: 90%;

    height: 80%;

    max-width: 538px;

    max-height: 813px;

    margin: 0 auto;

    position: absolute;    

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background:url(./content.png);  

    filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  

    -moz-background-size:100% 100%;  

    background-size:100% 100%;

弊端:使用过程中发现有时候图片会出现拉伸导致失真,此种方法我目前高度智能限定宽度使用百分比所以很容易导致图片拉伸失真。(如果朋友们能解决这个办法欢迎留言帮忙完善)

(2)使用固定值

    width: 285px;

    height: 430px;

    max-width: 538px;

    max-height: 813px;

    margin: 0 auto;

    background: url(./content.png) no-repeat;

    background-size: 100% 100%;

    position: absolute;    

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

弊端:在合适的屏幕可能看着比较舒服,但是大屏幕的话就会显得图片比较小,因为已经严格限定死了图片的大小,所以不能说成是自适应。(如果朋友们能解决这个办法欢迎留言帮忙完善)

第二种:img标签

<img class="abtn" src="./content.png"  alt="" srcset="">
 width: 90%;

 max-width: 538px;

 margin: 0 auto;

 position: absolute;    

 top: 50%;

 left: 50%;

 transform: translate(-50%, -50%);

注意:目前来看这种方式还是可以满足目前我所开发的需求。

 

如果大家有更好的办法欢迎大家留言,大家一起学习一起完善。

欢迎大家关注公众号:

 

微信公众号之生成带参数的二维码

wangtong阅读(1997)

为了满足用户渠道推广分析和用户帐号绑定等场景的需要,公众平台提供了生成带参数二维码的接口。使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送。

目前有2种类型的二维码:

1、临时二维码,是有过期时间的,最长可以设置为在二维码生成后的30天(即2592000秒)后过期,但能够生成较多数量。临时二维码主要用于帐号绑定等不要求二维码永久保存的业务场景

2、永久二维码,是无过期时间的,但数量较少(目前为最多10万个)。永久二维码主要用于适用于帐号绑定、用户来源统计等场景。

用户扫描带场景值二维码时,可能推送以下两种事件:

如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值关注事件推送给开发者。

如果用户已经关注公众号,在用户扫描后会自动进入会话,微信也会将带场景值扫描事件推送给开发者。

获取带参数的二维码的过程包括两步,首先创建二维码ticket,然后凭借ticket到指定URL换取二维码。

一、开发流程

  • 调用生成ticket接口,生成ticket。
  • 调用获取二维码接口,需传递ticket。
  • 在后台获取事件推送消息,从中提取二维码携带的参数。

二、接口

ticket接口

url https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=TOKEN
格式 JSON
HTTP请求方式 POST
接口说明 生成ticket接口

参数说明

参数名称 是否必填 类型 说明
access_token String 公众号token,不通过jsonbody传递,拼接在url后
expire_seconds Integer 该二维码有效时间,以秒为单位。 最大不超过2592000(即30天),此字段如果不填,则默认有效期为60秒。
action_name String 二维码类型,QR_SCENE为临时的整型参数值,QR_STR_SCENE为临时的字符串参数值,QR_LIMIT_SCENE为永久的整型参数值,QR_LIMIT_STR_SCENE为永久的字符串参数值
action_info Object 二维码详细信息,其中包含了场景值id
scene_id Integer 场景值ID,临时二维码时为32位非0整型,永久二维码时最大值为100000(目前参数只支持1–100000)
scene_str String 场景值ID(字符串形式的ID),字符串类型,长度限制为1到64

返回参数说明

{

"ticket":"gQH47joAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL2taZ2Z3TVRtNzJXV1Brb3ZhYmJJAAIEZ23sUwMEmm

3sUw==",

"expire_seconds":60,

"url":"http://weixin.qq.com/q/kZgfwMTm72WWPkovabbI"

}
参数名称 描述
ticket 获取二维码所需
expire_seconds 过期时间
url 扫码后跳转的地址,可以用这个地址自行生成二维码

 

请求说明

  • action_name选择QR_LIMIT_SCENE或QR_LIMIT_STR_SCENE生成永久二维码,不需要传递expire_seconds参数。
  • scene_id和scene_str只需传递其中一个,需对应action_name传递的是整型还是字符串类型。
  • JSON参数示例
  • 整型:{“action_name”: “QR_LIMIT_SCENE”, “action_info”: {“scene”: {“scene_id”: 123}}}
  • 字符串类型:{“action_name”: “QR_LIMIT_STR_SCENE”, “action_info”: {“scene”: {“scene_str”: “test”}}}

官方文档

https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html

获取二维码接口

url https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET
HTTP请求方式 get
接口说明 获取二维码接口

 

返回说明

ticket正确情况下,http 返回码是200,是一张图片,可以直接展示或者下载。

官方文档

https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html

 

三、配置事件推送

(1) 微信会将扫描带参数二维码事件的数据推送到服务器配置的地址。

(2) 在后台解析微信推送的数据即可获得二维码携带的信息,其中包含生成时二维码是传递的场景值id。

官方文档

https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_event_pushes.html

 

欢迎大家关注公众号:

URL Scheme-短信、邮件、微信外网页等场景打开小程序

wangtong阅读(1368)

URL Scheme——适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。
生成的 URL Scheme 如下所示:

weixin://dl/business/?t= *TICKET*

如何获取URL Scheme,请参考:URL Scheme获取帮助文档

兼容性:

1、iOS系统是可以支持识别 URL Scheme,在短信等应用场景中可以直接通过Scheme跳转小程序。
2、Android系统是不支持直接识别 URL Scheme,用户无法通过 Scheme 正常打开小程序,所以需要使用 H5 页面作为中转来跳转到 Scheme 来实现打开小程序,跳转代码示例如下:

location.href = 'weixin://dl/business/?t= *TICKET*'

中转页可以自己根据实际需求来选择是立即调用还是等用户触发事件后调用。

不过值得注意的是,URL Scheme是分为短期有效(单个小程序不设上限)和长期有效(是有调用上限的,不过这上限基本上足够用户使用了)两种形式,只能跳转上线的小程序。

功能示例代码如下:

1、页面加载立即调用:

$(function(){
    location.href = 'weixin://dl/business/?t= *TICKET*';
});

2、用户触发事件后调用:

$(function(){
    $("#jump").click(function(){
          location.href = 'weixin://dl/business/?t= *TICKET*';
     });
});

 

示例代码获取方法:

关注公众号发送:【demo】

 

 

URL Scheme获取帮助文档

wangtong阅读(3024)

URL Scheme获取帮助文档

方式一:小程序管理后台工具生成

一、生成步骤

1、 地址

https://mp.weixin.qq.com/

2、 扫码登录

3、 登陆后进入首页

「工具」(在右上角)–「生成 URL Scheme」

4、 进入生成 URL Scheme

5、 生成 URL Scheme

(1) 参数说明
属性 说明
有效期 到期失效(可以自己选择失效时间)、永久有效 生成的 scheme 码类型
小程序页面路径 示例:pages/index/index 通过 scheme 码进入的小程序页面路径,必须是已经发布的小程序存在的页面,不可携带 query。path 为空时会跳转小程序主页。
启动query参数 示例:channel=test&ad=1001 通过 scheme 码进入小程序时的 query,最大1024个字符,只支持数字,大小写英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~
(2) 示例
1) 生成

2) 生成结果

二、参考文档

获取 URL Scheme

方式二:服务器端(接口)方式

一、 说明

获取小程序 scheme 码,适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口,可以选择生成到期失效和永久有效的小程序码,目前仅针对国内非个人主体的小程序开放,详见获取 URL scheme

调用方式:

二、 HTTPS 调用

1、接口地址

地址 请求方式
https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN POST

2、请求参数及说明

(1) 请求参数
属性 类型 默认值 必填 说明
access_token string 接口调用凭证
jump_wxa Object 跳转到的目标小程序信息。
is_expire boolean false 生成的 scheme 码类型,到期失效:true,永久有效:false。
expire_time number 到期失效的 scheme 码的失效时间,为 Unix 时间戳。生成的到期失效 scheme 码在该时间前有效。最长有效期为1年。生成到期失效的scheme时必填。
(2) jump_wxa 的结构
属性 类型 默认值 必填 说明
path string 通过 scheme 码进入的小程序页面路径,必须是已经发布的小程序存在的页面,不可携带 query。path 为空时会跳转小程序主页。
query string 通过 scheme 码进入小程序时的 query,最大1024个字符,只支持数字,大小写英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~

3、返回值

(1) 返回值说明
属性 类型 说明
errcode number 错误码
errmsg string 错误信息
openlink string 生成的小程序 scheme 码
(2) errcode合法值说明
说明
40002 暂无生成权限
40013 生成权限被封禁
85079 小程序未发布
40165 参数path填写错误
40212 参数query填写错误
85401 参数expire_time填写错误,时间间隔大于1分钟且小于1年
44990 生成Scheme频率过快(超过100次/秒)
85400 长期有效Scheme达到生成上限10万
45009 单天生成Scheme数量超过上限50万

4、示例:

(1)请求
{

    "jump_wxa":

        {

            "path": "/pages/publishHomework/publishHomework",

            "query": ""

        },

    "is_expire":true,

    "expire_time":1606737600
}
(2)返回
{

    "errcode": 0,

    "errmsg": "ok",

    "openlink": Scheme,

}


三、 云调用

1、接口方法

方法 说明
openapi.urlscheme.generate 需在 config.json 中配置 urlscheme.generate API 的权限,详情请参考官方文档

2、请求参数

(1)请求参数
属性 类型 默认值 必填 说明
jumpWxa Object 跳转到的目标小程序信息。
isExpire boolean false 生成的 scheme 码类型,到期失效:true,永久有效:false。
expireTime number 到期失效的 scheme 码的失效时间,为 Unix 时间戳。生成的到期失效 scheme 码在该时间前有效。最长有效期为1年。生成到期失效的scheme时必填。
(2)jumpWxa 的结构
属性 类型 默认值 必填 说明
path string 通过 scheme 码进入的小程序页面路径,必须是已经发布的小程序存在的页面,不可携带 query。path 为空时会跳转小程序主页。
query string 通过 scheme 码进入小程序时的 query,最大1024个字符,只支持数字,大小写英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~
说明
40002 暂无生成权限
40013 生成权限被封禁
85079 小程序未发布
40165 参数path填写错误
40212 参数query填写错误
85401 参数expire_time填写错误,时间间隔大于1分钟且小于1年
44990 生成Scheme频率过快(超过100次/秒)
85400 长期有效Scheme达到生成上限10万
45009 单天生成Scheme数量超过上限50万

3、返回值

(1)返回值说明
属性 类型 说明
errcode number 错误码
errmsg string 错误信息
openlink string 生成的小程序 scheme 码
(2)errcode合法值说明
说明
40002 暂无生成权限
40013 生成权限被封禁
85079 小程序未发布
40165 参数path填写错误
40212 参数query填写错误
85401 参数expire_time填写错误,时间间隔大于1分钟且小于1年
44990 生成Scheme频率过快(超过100次/秒)
85400 长期有效Scheme达到生成上限10万
45009 单天生成Scheme数量超过上限50万

4、示例

(1)请求
const cloud = require('wx-server-sdk')

cloud.init({

    env: cloud.DYNAMIC_CURRENT_ENV,})

exports.main = async (event, context) => {

    try {

        const result = await cloud.openapi.urlscheme.generate({

            "jumpWxa": {

                "path": '/pages/publishHomework/publishHomework',

                "query": ''

            },

            "isExpire": true,

            "expireTime": 1606737600

        })

        return result

} catch (err) {

    return err

}}
(2)返回
{

    "errcode": 0,

    "errmsg": "ok",

    "openlink": Scheme,

}

四、 其他说明

如有其他问题请参考官方文档:

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

五、 更新说明

微信URL带来重大调整-跳转的解决方法

欢迎大家关注公众号:

web-h5页面跳转微信小程序

wangtong阅读(2433)

现在微信开放程度比较宽松了,所以web页面跳转小程序需求很大,接下来咱们看看怎么实现:

 

1、需要引入微信jssdk:http://res.wx.qq.com/open/js/jweixin-1.6.0.js(支持https)

需要使用到js-sdk-1.6.0的版本才有支持

2、在页面中配置信息:

   wx.config({
            // debug: true, // 调试时可开启
            appId: '小程序 AppID', // <!-- replace -->
            timestamp: 0, // 必填,填任意数字即可
            nonceStr: 'nonceStr', // 必填,填任意非空字符串即可
            signature: 'signature', // 必填,填任意非空字符串即可
            jsApiList: ['chooseImage'], // 必填,随意一个接口即可 
            openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
          })

3、html添加微信支持的开放标签,就是config中openTagList 支持的

<div class="content">

                <wx-open-launch-weapp id="launch-btn"  username="小程序的原始ID(gh_****)" path="落地页">

                    <template>

                        <style>

                            .abtn {

                                width: 100%;

                                height: 381px;

                                display: block;

                                margin: 0 auto;

                            }

                        </style>

                        <button>跳转小程序</button>

                        <div class="abtn"></div>

                    </template> 

                </wx-open-launch-weapp>

        </div>

预览一下:

 

参考资料:

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

 

欢迎大家关注公众号:

web页面-js-获取用户信息

wangtong阅读(1457)

web页面获取微信用户的信息,其实主要就是根据code去根据微信的接口去获取,下来先讲一下如何获取code:

现在我就用我实际场景放代码了,

1、url方法:

//因为我这个链接别的地方会有用到,所以我在这单独定义一个方法返回固定的url
function getUrlLink(){

    var urllink = 'url'

    return urllink

}

2、获取微信code:

function getBaseInfos(){

    var urllink = getUrlLink()

    var url_code = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx599ae3b5b1543a1a&redirect_uri="+urllink+"&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";

    

    window.location.href = url_code;//打开这个链接,你的url后面就会跟上code的参数

    

}

3、截取url中的code:

function getUrlValueByName(name){//这个是来截取code

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  

    var r = window.location.search.substr(1).match(reg);  

    if (r != null) return unescape(r[2]); return null;  

    

}
3、得到code后去请求后台接口获取用户信息
var code = getUrlValueByName('code')

var data = {}

data.code = code

is_report(data)//这个方法就是请求后台接口了,ajax
4、ajax方法:
function is_report(data){

    $.ajax({

        //请求方式

        type : "POST",

        //请求的媒体类型

        contentType: "application/json;charset=UTF-8",

        //请求地址

        url : "接口地址",

        //数据,json字符串

        data : JSON.stringify(data),

        //请求成功

        success : function(result) {

            console.log(result);

            if(result.code === 200){

            }

        },

        //请求失败,包含具体的错误信息

        error : function(e){

            console.log(e.status);

            console.log(e.responseText);

        }

    });

}
参考资料:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0

欢迎大家关注公众号:

js判断页面在移动端微信打开

wangtong阅读(1102)

第一种方法就是:

function is_weixin() {
    var ua = navigator.userAgent.toLowerCase(); 
    // alert(/Android|webOS|iPhone|iPod|BlackBerry/i.test(ua),"uauauaua")
     if (ua.match(/MicroMessenger/i) == "micromessenger" && /Android|webOS|iPhone|iPod|BlackBerry/i.test(ua)) { 
        return true; 
    }else { 
        // return true; 
        document.head.innerHTML = '<title>抱歉,出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">'; 
        document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在手机端微信中打开链接</h4></div></div>'; 
    } 
}

第二种方法:

function is_weixin() { 
    var ua = navigator.userAgent.toLowerCase(); 
    var isWeChat = ua.match(/MicroMessenger/i) == "micromessenger"; 
    var isIpad = ua.match(/ipad/i) == "ipad"; 
    var isIphoneOs = ua.match(/iphone os/i) == "iphone os"; 
    var isMidp = ua.match(/midp/i) == "midp"; 
    var isUc7 = ua.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; 
    var isUc = ua.match(/ucweb/i) == "ucweb"; 
    var isAndroid = ua.match(/android/i) == "android"; 
    var isCE = ua.match(/windows ce/i) == "windows ce"; 
    var isWM = ua.match(/windows mobile/i) == "windows mobile"; 
    if (!(isWeChat || isIpad || isIphoneOs || isMidp || isUc7 || isUc || isAndroid || isCE || isWM) ){ 
        document.head.innerHTML = '<title>抱歉,出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">'; 
        document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在手机端微信中打开链接</h4></div></div>'; 
    }else{ 
        return true; 
    } 
}

欢迎大家关注公众号:

 

【收藏】js数组方法整理

wangtong阅读(1899)

整理了以下数组方法

  • join()
  • push()和pop()
  • shift() 和 unshift()
  • sort()
  • reverse()
  • concat()
  • slice()
  • splice()
  • indexOf()和 lastIndexOf() (ES5新增)
  • forEach() (ES5新增)
  • map() (ES5新增)
  • filter() (ES5新增)
  • every() (ES5新增)
  • some() (ES5新增)

1、join()

join,就是把数组转换成字符串,然后给他规定个连接字符,默认的是逗号(  ,)

书写格式:join(” “),括号里面写字符串  (“要加引号”),

var arr = [1,2,3]; 
console.log(arr.join());     // 1,2,3 
console.log(arr.join("-"));   // 1-2-3 
console.log(arr);         // [1, 2, 3](原数组不变)

 

2、push()和pop()

push():  把里面的内容添加到数组末尾,并返回修改后的长度。

pop():移除数组最后一项,返回移除的那个值,减少数组的length。

书写格式:arr.push(” “),括号里面写内容  (“字符串要加引号”),

书写格式:arr.pop( )

var arr = ["Lily","lucy","Tom"]; 
var count = arr.push("Jack","Sean"); 
console.log(count);           // 5 
console.log(arr);            // ["Lily", "lucy", "Tom", "Jack", "Sean"] 
var item = arr.pop(); 
console.log(item);            // Sean 
console.log(arr);            // ["Lily", "lucy", "Tom", "Jack"]

3、shift() 和 unshift()   (和上面的push,pop相反,针对第一项内容)

shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。

 

unshift:将参数添加到原数组开头,并返回数组的长度 。

    书写格式:arr.shift(” “),括号里面写内容  (“字符串要加引号”),

var arr = ["Lily","lucy","Tom"]; 
var count = arr.unshift("Jack","Sean"); 
console.log(count);               // 5 
console.log(arr);                //["Jack", "Sean", "Lily", "lucy", "Tom"] 
var item = arr.shift(); 
console.log(item);               // Jack 
console.log(arr);                // ["Sean", "Lily", "lucy", "Tom"]

4、sort()

sort():将数组里的项从小到大排序

书写格式:arr.sort( )

var arr1 = ["a", "d", "c", "b"]; 
console.log(arr1.sort());           // ["a", "b", "c", "d"]

sort()方法比较的是字符串,没有按照数值的大小对数字进行排序,要实现这一点,就必须使用一个排序函数

function sortNumber(a,b) {
   return a - b 
}
arr = [13, 24, 51, 3]; 
console.log(arr.sort());           // [13, 24, 3, 51]
console.log(arr.sort(sortNumber));     // [3, 13, 24, 51](数组被改变)

5、reverse()

reverse():反转数组项的顺序。

书写格式:arr.reverse( )

var arr = [13, 24, 51, 3]; 
console.log(arr.reverse());         //[3, 51, 24, 13] 
console.log(arr);               //[3, 51, 24, 13](原数组改变)

6、concat()

concat() :将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

    书写格式:arr.concat(),括号里面写内容  (“字符串要加引号”),

var arr = [1,3,5,7]; 
var arrCopy = arr.concat(9,[11,13]); 
console.log(arrCopy);             //[1, 3, 5, 7, 9, 11, 13] 
console.log(arr);               // [1, 3, 5, 7](原数组未被修改)

7、slice()

slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。

    书写格式:arr.slice( 1 , 3  )

var arr = [1,3,5,7,9,11]; 
var arrCopy = arr.slice(1); 
var arrCopy2 = arr.slice(1,4); 
var arrCopy3 = arr.slice(1,-2); 
var arrCopy4 = arr.slice(-4,-1); 
console.log(arr);               //[1, 3, 5, 7, 9, 11](原数组没变) 
console.log(arrCopy);             //[3, 5, 7, 9, 11] 
console.log(arrCopy2);            //[3, 5, 7] 
console.log(arrCopy3);            //[3, 5, 7] 
console.log(arrCopy4);            //[5, 7, 9]

arrCopy只设置了一个参数,也就是起始下标为1,所以返回的数组为下标1(包括下标1)开始到数组最后。

arrCopy2设置了两个参数,返回起始下标(包括1)开始到终止下标(不包括4)的子数组。

arrCopy3设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值(6)来替换该位置的数,因此就是从1开始到4(不包括)的子数组。

arrCopy4中两个参数都是负数,所以都加上数组长度6转换成正数,因此相当于slice(2,5)。

8、splice()

splice():删除、插入和替换。

删除:指定 2 个参数:要删除的第一项的位置和要删除的项数。

书写格式:arr.splice( 1 , 3  )

插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。

书写格式:arr.splice(  2,0,4,6  )
替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

    书写格式:arr.splice(  2,0,4,6  )

var arr = [1,3,5,7,9,11]; 
var arrRemoved = arr.splice(0,2); 
console.log(arr);                //[5, 7, 9, 11] 
console.log(arrRemoved);            //[1, 3] 
var arrRemoved2 = arr.splice(2,0,4,6); 
console.log(arr);                // [5, 7, 4, 6, 9, 11] 
console.log(arrRemoved2);           // [] 
var arrRemoved3 = arr.splice(1,1,2,4); 
console.log(arr);                // [5, 2, 4, 4, 6, 9, 11] 
console.log(arrRemoved3);           //[7]

9、indexOf()和 lastIndexOf()

indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。

    书写格式:arr.indexof( 5 )

lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。 

    书写格式:arr.lastIndexOf(  5,4  )

var arr = [1,3,5,7,7,5,3,1]; 
console.log(arr.indexOf(5));       //2 
console.log(arr.lastIndexOf(5));     //5 
console.log(arr.indexOf(5,2));      //2 
console.log(arr.lastIndexOf(5,4));   //2 
console.log(arr.indexOf("5"));      //-1

10、forEach()

forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数分别为:遍历的数组内容;第对应的数组索引,数组本身。

    书写格式:arr.forEach()

var arr = [1, 2, 3, 4, 5]; 
arr.forEach(function(x, index, a){ 
    console.log(x + '|' + index + '|' + (a === arr));
 });
 // 输出为: 
// 1|0|true 
// 2|1|true 
// 3|2|true 
// 4|3|true 
// 5|4|true

11、map()

map():指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

    书写格式:arr.map()

var arr = [1, 2, 3, 4, 5]; 
var arr2 = arr.map(function(item){ 
    return item*item; 
}); 
console.log(arr2);         //[1, 4, 9, 16, 25]

12、filter()

filter():“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。

    书写格式:arr.filter()

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
var arr2 = arr.filter(function(x, index) { 
    return index % 3 === 0 || x >= 8; 
}); 
console.log(arr2);         //[1, 4, 7, 8, 9, 10]

13、every()

every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

    书写格式:arr.every()

var arr = [1, 2, 3, 4, 5]; 
var arr2 = arr.every(function(x) { 
    return x < 10; 
}); 
console.log(arr2);         //true 
var arr3 = arr.every(function(x) { 
    return x < 3; 
}); 
console.log(arr3);         // false

14、some()

some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

    书写格式:arr.some()

var arr = [1, 2, 3, 4, 5]; 
var arr2 = arr.some(function(x) { 
    return x < 3; 
}); 
console.log(arr2);         //true 
var arr3 = arr.some(function(x) { 
    return x < 1; 
}); 
console.log(arr3);         // false

 

本文作者张永峰
本文链接:https://www.cnblogs.com/zyfeng/p/10541133.html