让前端飞js日常积累

js中操作数组的方法

2018-11-21  本文已影响2人  CRUD_科科

    时隔一个月,一直在忙,今天就抽空总结下js中操作数组的方法。最后几条是重点!

1、锁定数组的长度 Object.defineProperty方法(让数组的长度变成只读)。

  这个属性方法是Vue的核心方法,今天就放在第一个了解,他可以使数组长度只读,数组内容可以修改,但是如果方法改变数组长度,例如push,pop等,就会报:Cannot assign to read only property 'length' of object '[object Array]' [](javascript:;)无法分配对象“对象数组”的只读属性“长度”这个错误。

var a = [1,2,3]  //定义一个数组
Object.defineProperty(a,"length",{
   writable:false
})  //将a数组的长度属性设为只读
a.length = 0  //将a的长度改为0
console.log(a.length);  //打印a数组的长度,还是3

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

  和分割字符串split方法很像,和String的split()方法是一个相反的操作。join方法可以把数组中的所有元素放入一个字符串,并且不改变原数组。join("#")括号里面#可以写任意字符,作为分割符。

var a = [1,2,3];
var b = a.join("");
var c = a.join("##");
console.log(a); //[1, 2, 3],原数组不改变
console.log(b); //"123",变成字符串
console.log(c); //"1##2##3",变成字符串

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

var a = ['我','是','中','国','人'];
a.reverse();
console.log(a); //直接改变a数组的值 返回的是["人", "国", "中", "是", "我"];

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

// 从大到小
var a = [2,33,1111,444];        
a.sort()             
console.log(a); //返回的结果是[1111, 2, 33, 444]

// 从小到大
var a = [2,33,1111,444];             
a.sort(function (a,b) {
    return a-b
})         
console.log(a); //[2, 33, 444, 1111]

5、Array.concat()连接两个数组,创建并返回一个新数组

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]

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

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

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]

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

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]

8、push()方法与pop()方法

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

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

9、unshift()方法与shift()方法

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

  shift()移除数组中的第一项并返回该项。

10、toString()和toLocaleString()

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

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

11、filter(过滤,返回符合条件过滤后的数组)

var a = [1,2,3,4,5];
             
var b = a.filter(function (value) {
    return value > 3
})
             
console.log(b); //返回[4,5]

12、map (返回操作后的数组,和forEach()类似)

var a = [1,2,3,4,5];
             
var b = a.map(function (value) {
    return value+1
})
             
console.log(b); //返回[2,3,4,5,6]

13、includes (判断数组中是否有某个值,返回布尔)

var a = [1,2,3,4,5];
console.log(a.includes(1)) // true

14、find (找到某个值,返回的是找到的值)


/**
array.find(function(currentValue, index, arr),thisValue)
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
thisValue  可选。 传递给函数的值一般用 "this" 值。
如果这个参数为空,“undefined”会传给“this”值
*/

var a = [1,2,3,4,5];
a.find(function(val){
  console.log(val>3)
})

15、every (判断数组是否都符合条件,返回布尔)

只有数组中所有元素都满足某个条件才会返回true;

var a = [1,2,3,4,5];
           
a.every(function (value) {
    return value < 10
}) //true

16、some (找到某个值返回布尔)

只要有满足条件的值,就返回true。

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

a.every(function (value) {
    return value % 2 === 0
}) //false

17、reduce (参数:prev,next,index,arr原数组)常用于数组求和

prev:当前val的上一个
next:当前val的下一个
index:当前index

// 计算商品中价格
let sum1 = [{price:30,count:2},{price:40,count:3},{price:30,count:4}].reduce(function(prev, next) {
  return prev+next.price*next.count
},0) // 默认指定第一次的prev
console.log(sum1)  // 300

// 将多维数组转化为一维数组
let flat = [[1,2,3],[4,5,6],[7,8,9]].reduce(function(prev, next){
  return prev.concat(next);
})
console.log(flat) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

水平太低,就总结到这里了。

上一篇下一篇

猜你喜欢

热点阅读