数组方法

2019-07-01  本文已影响0人  为了_理想
1.  push 向数组的末尾添加一个或更多元素,并返回新的长度。
2.  unshift 向数组的开头添加一个或更多元素,并返回新的长度。
3.  pop 删除数组的最后一个元素并返回删除的元素。
4.  shift 删除并返回数组的第一个元素(知道即可,用得很少)。
5.  reverse 反转数组的元素顺序。
6.  find 返回符合传入测试(函数)条件的数组元素。
7.  findIndex 返回符合传入测试(函数)条件的数组元素索引。
8.  slice 选取数组的的一部分,并返回一个新数组。
9.  splice 从数组中添加或删除元素。
10.  join 把数组的所有元素放入一个字符串。
11.  forEach 迭代数组。
12.  map 通过指定函数处理数组的每个元素,并返回处理后的数组。
13.  filter 检测数值元素,并返回符合条件所有元素的数组。
14.  indexOf 搜索数组中的元素,并返回它所在的位置。
15.  includes 判断一个数组是否包含一个指定的值
16.  isArray 判断对象是否为数组。
17.  sort 数组排序   
18:  reduce 
19:JSON.stringify() 字符串转对象
20:JSON.parse() 对象转字符串 
21:Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
22: Math 方法  随机生成数据
23:concat() 方法用于连接两个或多个数组。


#### 具体例子

1.  push 从后面添加一个成员

var arr = [1,2,3];
arr.push(4);
console.log(arr); // [1,2,3,4]


2.  unshift 从数组前面添加一个成员

var arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0,1,2,3]


3.  pop 删除数组的最后一个成员

var arr = [1,2,3,4];
arr.pop();
console.log(arr); // [1,2,3]


4.  shift 删除数组的第一个成员

var arr = [1,2,3,4];
arr.shift();
console.log(arr); // [2,3,4]


5.  reverse 反转数组的元素顺序

var arr = [1,2,3];
arr.reverse();
console.log(arr); // [3,2,1]


6.  find 查找符合条件的数组成员

var arr = [
{ name: '邓紫棋', age: 20 },
{ name: '张碧晨', age: 30 },
{ name: '张靓颖', age: 25 },
{ name: '薛之谦', age: 28 }
]

var person = arr.find(item => {
    return item.name === '薛之谦';
})
console.log(person);  // { name: "薛之谦", age: 28 }

7.  findIndex 返回符合条件的成员在数组中的位置(下标)

var arr = [
    { name: '邓紫棋', age: 20 },
    { name: '张碧晨', age: 30 },
    { name: '张靓颖', age: 25 },
    { name: '薛之谦', age: 28 },
]

var index = arr.findIndex(item => {
    return item.name === '张靓颖';
})
console.log(index); // 2

8.  slice 选取数组的的一部分,并返回一个新数组。

var arr = [1,2,3,4,5];
var newArr1 = arr.slice(2); // 从位置2(包含)开始截取到最后
console.log(newArr1); // [3,4,5]
var newArr2 = arr.slice(2,4); // 从位置2(包含)开始截取到位置4(不包含)
console.log(newArr2); // [3,4]


9.  splice 删除或添加元素

// 例1
var arr = [0,1,2,3,4,5];
arr.splice(2,1); // 从下标为2的元素开始,删除一个元素
console.log(arr); // [0,1,3,4,5];
// 例2
var arr = [0,1,2,3,4,5];
arr.splice(2,2); // 从下标为2的元素开始,删除2个元素
console.log(arr); // [0,1,4,5];
// 例3
var arr = [0,1,2,3,4,5];
arr.splice(2,0,'我是新成员'); // 在下标为2地方添加一个新成员
console.log(arr); // [0, 1, "我是新成员", 2, 3, 4, 5]
// 例4
var arr = [0,1,2,3,4,5];
arr.splice(2,1,'我是新成员'); // 用新成员替换下标为2的成员
console.log(arr); // [0, 1, "我是新成员", 3, 4, 5]


10.  join 把数组变成字符串

var arr = ['a','b','c'];
var str = arr.join('-');
console.log(str); // "a-b-c"
var str2 = arr.join(',');
console.log(str2); // "a,b,c"


11.  forEach 迭代数组(遍历数组)

var sum = 0;
var arr = [
{name: '小王',age: 10},
{name: '小李',age: 20},
{name: '小林',age: 15},
{name: '小明',age: 25}
]
// 计算这几个同学的总年龄
var sum = 0;
arr.forEach(item=> {
sum += item.age;
})
console.log(sum);


12.  map 通过指定函数处理数组的每个元素,并返回处理后的数组。

<script type="text/javascript">
var arr = [
{
name: '张三',
age:28
},
{
name: '李四',
age:28
},
{
name: '陈武',
age:28
}
];

var newArr = arr.map(item=>{
    return {
        username: item.name,
        age: item.age+10
    };
})
console.log(newArr);

</script>


13.  filter 过滤

var arr = [
{name: '小王',age: 10},
{name: '小李',age: 20},
{name: '小林',age: 15},
{name: '小明',age: 25}
];
// 找出年龄大于或等于20岁的同学
var newArr = arr.filter(item=> {
return item.age >= 20;
});
console.log(newArr); // [{小明}, {小李}]


14.  indexOf 返回数组中某个成员的位置

var arr = ['a','b','c','d'];
var index = arr.indexOf('c');
console.log(index); // 2
var index2= arr.indexOf('f');
console.log(index2); // 找不到返回-1


15.  includes 判断一个数组是否包含一个指定的值

var arr = ['a','b','c','d'];
var b1 = arr.includes ('c');
console.log(b1); // true
var b2 = arr.includes ('f');
console.log(b2); // false


16.  isArray 判断一个对象是不是数组

// typeof 一个数组的结果是object,要判断一个变量是不是数组可以用isArray
var obj = {
a: 2
}
Array.isArray(obj); // false
var arr = [1,2,3];
Array.isArray(arr); // true


17.  sort 数组排序

// 例1
var arr = [1,6,3,4];
arr.sort();
console.log(arr); // [1, 3, 4, 6]

// 例2 通过排序函数
var arr = [10,5,40,25,1000,1]
// 升序排列
arr.sort((a,b)=> {
return a-b;
})
console.log(arr); // [1, 5, 10, 25, 40, 1000]
// 降序排列
arr.sort((a,b)=> {
// 升序排列
return b-a;
})
console.log(arr); // [1000, 40, 25, 10, 5, 1]


数组排序比较函数[原理解析](https://www.jianshu.com/p/01ebee5aebab)

> #### 栈操作

栈操作的原则是先进后出,我们可以使用数组的push和pop方法来实现栈操作

var arr = [];
arr.push('a');
console.log(arr); ['a',]
arr.push('b');
console.log(arr); ['a','b']
arr.push('c');
console.log(arr); ['a','b','c']

var len = arr.pop(); // 删除最后一个
console.log(len); // 删除了C 剩余 a b


在上面的例子里
push方法我们可以称它为入栈的方法,
pop方法我们可以称它出栈的方法,
这两者我们就统称栈方法.

#### 队列操作

队列操作的原则是先进先出,跟排队买东西一个道理,
我们可以使用push(入队)和shift(出队)方法实现队列操作

var arr = [];
arr.push('a');
console.log(arr);['a']
arr.push('b');
console.log(arr);['a','b']
arr.push('c');
console.log(arr); ['a','b','c']

var m1 = arr.shift();
console.log(m1); // a
var m2 = arr.shift();
console.log(m2); // b
var m3 = arr.shift();
console.log(m3); // c

21:拷贝方法
####第一个参数 是目标对象 ,第二种参数的源对象   第三个 第四个  ..... 都是源对象

const o1 = { a: 1};
const o2 = {b: 2};
const o3 = {c: 3};

    const obj = Object.assign(o1, o2, o3);  
    console.log(obj);   { a: 1, b: 2, c: 3 }
    console.log(o1);   注意目标对象自身也会改变。{ a: 1, b: 2, c: 3 }
    console.log(o2);  {b: 2}
    console.log(o3);  {c: 3}

如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target); {a: 1, b: 4, c: 5}
console.log(returnedTarget); {a: 1, b: 4, c: 5}

let index = Math.floor(Math.random() * 10) + 1
ceil对数进行向上取整
random() 返回 0 ~ 1 之间的随机数 所以需要乘10
floor对数进行向下取整
round()把数四舍五入为最接近的整数。

####23:concat() 方法用于连接两个或多个数组。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

document.write(arr.concat(arr2)) 输出 George,John,Thomas,James,Adrew,Martin

上一篇下一篇

猜你喜欢

热点阅读