关于js中操作数组的13种方法

转自:微点阅读  

1.锁定数组的长度(让数组的长度变成只读)。

1

2

3

4

5

6

var a = [1,2,3]  //定义一个数组<br>

Object.defineProperty(a,"length",{

writable:false

})  //将a数组的长度属性设为只读<br>

a.length = 0  //将a的长度改为0<br>

console.log(a.length);  //打印a数组的长度,还是3

2.Array.join()方法,返回一个字符串

1

2

3

4

5

6

7

var a = [1,2,3];

var b = a.join("");

console.log(a); //[1, 2, 3],原数组不改变

console.log(b); //"123",变成字符串

3.Array.reverse()方法,返回逆序数组

1

2

3

4

5

var a = [1,2,3];

a.reverse();

console.log(a); //直接改变a数组的值 返回的是[3,2,1]

4.Array.sort()方法,返回排序后的数组。如果数组包含undefined,会被排到数组的尾部。如果不带参数的调用sort(),数组元素以字母表顺序排序。

1

2

3

4

5

var a = [2,33,1111,444];

a.sort()

console.log(a); //返回的结果是[1111, 2, 33, 444]

如果要数字从小到大排列:

1

2

3

4

5

6

7

var a = [2,33,1111,444];

a.sort(function (a,b) {

return a-b

})

console.log(a); //[2, 33, 444, 1111]

反之,如果从大到小排列,return b-a。

4.Array.concat(),创建并返回一个新数组。

1

2

3

4

5

6

7

8

9

10

11

var a = [1,2,3];

var b = a.concat(4,5);

var c = a.concat([4,5]);

console.log(a); //返回的还是[1,2,3]

console.log(b); //返回[1,2,3,4,5]

console.log(c);  //返回[1,2,3,4,5]

这个方法还可以用来复制数组。

1

2

3

4

5

6

7

var a = [1,2,3];

var b = a.concat();

console.log(a); //返回[1,2,3]

console.log(b); //返回[1,2,3]

5.Array.slice()方法,返回指定数组的片段或者子数组。不会改变原数组

1

2

3

4

5

6

7

8

var a = [1,2,3,4,5];<br>

a.slice(0,3); //返回[1,2,3] 第一个参数是截取开始的位置(包括),第二个参数是截取结束的位置(不包括)

a.slice(3); //返回[4,5]

a.slice(1,-1); //返回[2,3,4] 负数表示倒数

console.log(a); //返回[1,2,3,4,5]

6.Array.splice()方法,用来删除或插入元素,会修改原数组!

1

2

3

4

5

6

7

var a = [1,2,3,4,5,6,7,8];

var b = a.splice(1,2); //第一个参数是截取的起始位置(包括),第二个参数是截取的个数,之后的参数就是添加在元数组的新值

console.log(a); //返回[1, 4, 5, 6, 7, 8]

console.log(b); //返回[2, 3]

7.push()方法与pop()方法

push()方法在数组的尾部添加一个或者多个元素,并返回数组的新长度。注意的是,改变的是原数组的值,返回的是新数组的长度。

pop()方法删除数组的最后一个元素,并返回它的删除值。也是改变原数组,返回的是删除的值。

8.unshift()方法与shift()方法

unshift()方法类似于push()不同的是,他是在数组头部添加,其他都一样

shift()方法则类比pop()方法。

9.toString()和toLocaleString()

toString()方法将每个元素转化为字符串,类似于不传参的join()方法。

toLocaleString()方法是toString()的本地化版本。

10.forEach()方法,从头至尾遍历数组,为每个元素调用指定的函数。

1

2

3

4

5

6

7

8

9

var a = [1,2,3,4,5];

var sum = 0;

a.forEach(function (value) {

sum += value

})

console.log(sum); //sum = 15

11.map()方法

和forEach()类似,调用数组的每个元素传递给指定函数,并返回一个数组,所以它和forEach()的区别在于,有一个返回值。不修改原数组,返回的数组长度和原数组相同

1

2

3

4

5

6

7

var a = [1,2,3,4,5];

var b = a.map(function (value) {

return value+1

})

console.log(b); //返回[2,3,4,5,6]

12.filter()方法,返回的是调用数组的一个子集。

1

2

3

4

5

6

7

var a = [1,2,3,4,5];

var b = a.filter(function (value) {

return value > 3

})

console.log(b); //返回[4,5]

注意:如果使用map()方法,返回的是[false, false, false, true, true]

filter()会跳过稀疏数组中缺少的元素,他的返回数组总是稠密的。所以可以用一下方法来压缩稀疏数组的  (更多范文m.weidianyuedu.com/)空缺。

1

2

3

4

5

6

7

var a = [1,2,,,5];

var b = a.filter(function (value) {

return true

})

console.log(b); //返回[1,2,5]

13.every()和some()

every()方法是只有数组中所以元素都满足某个条件才会返回true;some()方法是只要有满足条件的值,就返回true。

以every()方法为例

1

2

3

4

5

6

7

8

9

var a = [1,2,3,4,5];

a.every(function (value) {

return value < 10

}) //true

a.every(function (value) {

return value % 2 === 0

}) //false

14.indexOf()和lastIndexOf()

这两个方法都是用来搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引,如果没找到,则返回-1。

区别在于indexOf()从头至尾搜索,而后者则是反向搜索。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: You can execute a method in an array in a WeChat mini-program's WXML by using the `wx:for` directive to loop through the array and bind the method to an event, such as a button click. Here is an example: ``` <!-- in the data section --> data: { myArray: [ { name: 'item1', method: function() { console.log('method 1 called'); } }, { name: 'item2', method: function() { console.log('method 2 called'); } } ] } <!-- in the template section --> <template wx:for="{{myArray}}" wx:key="index"> <view>{{item.name}}</view> <button bindtap="{{item.method}}">Call Method</button> </template> ``` In this example, the `wx:for` directive is used to loop through the `myArray` array and bind each method to the button's `bindtap` event. When the button is tapped, the corresponding method will be executed. ### 回答2: 在微信小程序的wxml无法直接执行数组方法,因为wxml是可视化界面的展示层,主要负责数据的渲染和展示,并不具备直接执行方法的能力。不过,我们可以通过在wxml绑定事件,然后在对应的事件处理函数调用数组方法来达到间接执行的效果。 具体操作如下: 1. 在wxml使用`{{}}`的插值表达式来绑定需要执行的方法,例如`{{methodName}}`。 2. 将需要执行的方法名赋值给`methodName`,可以通过在页面的js文件定义一个与数组方法同名的函数,并将该函数名赋值给`methodName`。 3. 在wxml绑定事件,例如`<view bind:tap="handleTap"></view>`,这里通过`bind:tap`事件绑定一个名为`handleTap`的事件处理函数。 4. 在相应的事件处理函数(`handleTap`)通过调用`methodName`来间接执行数组方法。 例如,假设有一个数组`methods`包含了多个方法名: ```javascript Page({ data: { methodName: '', methods: ['methodA', 'methodB', 'methodC'], }, methodA() { console.log('执行了方法A'); }, methodB() { console.log('执行了方法B'); }, methodC() { console.log('执行了方法C'); }, handleTap(e) { const { index } = e.currentTarget.dataset; const methodName = this.data.methods[index]; // 通过索引获取对应的方法名 this.setData({ methodName }); // 设置methodName为对应方法名 }, }); ``` 然后在wxml,通过`wx:for`循环遍历数组,并绑定点击事件: ```html <view wx:for="{{methods}}" wx:for-index="index" bind:tap="handleTap" data-index="{{index}}"> 点击执行 {{item}} 方法 </view> ``` 当用户点击对应的视图时,会触发`handleTap`事件处理函数,然后通过`methodName`间接调用相应的数组方法。这样就实现了在微信小程序的wxml通过数组间接执行方法的效果。 ### 回答3: 在微信小程序的wxml,我们可以通过以下步骤来执行数组方法: 1. 首先,在wxml使用{{}}的双大括号语法引用数组。例如,如果数组名称为array,我们可以在wxml使用{{array}}来引用该数组。 2. 接着,我们可以使用{{}}内嵌JavaScript表达式的形式,执行数组方法。例如,如果数组有一个方法为myMethod,我们可以通过{{myMethod()}}来执行该方法。 3. 如果数组方法需要传递参数,我们可以在{{}}内的括号传递参数。例如,如果myMethod需要接收一个参数x,则可以使用{{myMethod(x)}}的形式来执行该方法并传递参数x。 需要注意的是,wxml方法执行是在小程序的逻辑层进行的,而不是在视图层执行的。因此,如果数组方法需要实时更新视图层的数据,我们需要在方法使用setData来更新数据。 总结起来,要在微信小程序的wxml执行数组方法,我们可以使用{{}}双大括号引用数组,并在{{}}内的表达式调用需要执行的方法。如果有参数,可以在括号传递参数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值