JS数组总结

一、定义数组

1.对象形式

1
const array = new Array('a', 'b', 'c');

2.字面量形式

1
const array = [1, 2, 3];

3.可以使用console.table查看数组；

二、数组长度

1
2
3
4
let arr = ['a'];
arr[3] = 'b';
console.log(arr.length);  //4
console.log(arr[2]);  //undefined

三、创建一个数组，只有数字6

1
2
3
4
let arr1 = new Array(6);
let arr2 = Array.of(6);
console.log(arr1);  //错误。生成长度为6的空数组
console.log(arr2);  //正确。生成长度为1的数组，只有数字6

四、

1.判断是否为数组，返回布尔值

1
Array.isArray([1, 2]);  //true

2.数组转字符串

1
2
3
console.log([1, 2, 3].toString()); //1,2,3
console.log(String([1, 2, 3])); //1,2,3
console.log([1, 2, 3].join(',')); //1,2,3

3.字符串转数组

1
2
console.log(Array.from('abc'));  //['a', 'b', 'c']
console.log('abc'.split(''));  //['a', 'b', 'c']

4.有length属性的，可用Array.from()转成数组

1
2
3
4
5
let obj = {
    a: 'xxx',
    b: 'yyy',
}
console.log(Array.from(obj));  //[]
1
2
let obj = {0: 'a', 1: 'b', length: 2};
console.log(Array.from(obj));  //['a', 'b']

Array.from第二个参数是对数组每个元素使用

1
2
3
4
5
6
7
8
9
10
<div>aaa</div>
<div>bbb</div>
//-------------
let divs = document.querySelectorAll('div');
Array.from(divs).forEach(item => {
	console.log(item.innerHTML);
});
Array.from(divs, function(item){
	console.log(item.innerHTML);
});

还可以用原型链方法：Array.prototype.map.call(divs, function () {…})

或者展开语法：[…divs].map((item) => {…})

五、展开语法

1.合并数组

法一、遍历push

1
2
3
4
5
6
let arr1 = ['a', 'b', 'c'];
let arr2 = ['d', 'e'];
for(let val of arr2) {
	arr1.push(val);
}
console.log(arr1);

法二、展开语法

1
2
3
4
let arr1 = ['a', 'b', 'c'];
let arr2 = ['d', 'e'];
arr1 = [...arr1, ...arr2];
console.log(arr1);

法三、concat方法，可一次合并多个

1
2
3
4
5
let arr = ['wcg', 1998];
let arr1 = ['man', 'GuangDong'];
let arr2 = ['JS', 'Vue', 'React'];
arr = arr.concat(arr1, arr2);
console.log(arr);   //['wcg', 1998, 'man', 'GuangDong', 'JS', 'Vue', 'React']

2.函数使用展开语法， 以一个变量接收多个参数

1
2
3
4
5
6
7
function sum(...args) {
    console.log(args);   //[1, 2, 3, 4, 5]
    return args.reduce((pre, cur) => {
    	return pre += cur;
    }, 0)
}
console.log(sum(1, 2, 3, 4, 5));   //15

六、解构赋值

1.基本使用

1
2
3
4
let arr = ['wcg', 1998];
let [name, year] = arr;
console.log(name);  //wcg
console.log(year);  //1998
1
2
3
4
console.log(...'abcde');  //a b c d e
console.log([...'abcde']);  //['a', 'b', 'c', 'd', 'e']
const [...arr] = 'abcde';
console.log(arr);    //['a', 'b', 'c', 'd', 'e']

2.只取数组中的某个值， 可以用逗号占位

1
2
let [, year] = ['wcg', 1998];
console.log(year);

3.解构与展开语法混用

1
2
3
let [name, ...args] = ['wcg', 1998, 'man'];
console.log(name);   //wcg
console.log(args);   //[1998, 'man']

4.默认值

1
let [name, year = 1998] = ['wcg'];

5.函数参数接收

1
2
3
4
5
function show ([name, year]) {
    console.log(name);
    console.log(year);
}
show(['wcg', 1998]);

七、追加数组元素

1.使用数组索引追加

1
2
3
let arr = ['wcg', 1998];
arr[arr.length] = 'man';
console.log(arr);  //['wcg', 1998, 'man']

2.展开语法追加多个(略)

3.使用push方法

1
2
3
4
let arr = ['wcg', 1998];
arr.push('man');
arr.push(1, 2, 3);  //可同时追加多个
console.log(arr);  //['wcg', 1998, 'man', 1, 2, 3]

push返回数组长度

1
2
3
4
let arr = ['wcg', 1998];
let skills = ['js', 'Vue', 'React'];
let len =  arr.push(...skills);
console.log(len);  //5

八、出栈，入栈，填充数组

1.pop弹出数组末尾元素，返回弹出的元素

1
2
3
let arr = ['wcg', 1998];
let str = arr.pop();
console.log(str);  //1998

2.unshift从数组前端添加元素，返回数组长度(同样也是可以添加多个)

1
2
3
let arr = ['wcg', 1998];
let len = arr.unshift('man');
console.log(len);  //3

3.shift从数组前端移除元素，返回移除的元素

1
2
3
let arr = ['wcg', 1998];
let str = arr.shift();
console.log(str);  //wcg

4.填充元素

1
2
3
console.log(Array(5));  //生成长度为5的空数组
console.log(Array(5).fill('wcg'));  //['wcg', 'wcg', 'wcg', 'wcg', 'wcg']
console.log([1, 2, 3, 4].fill('wcg', 1 , 2));  //[1, 'wcg', 3, 4]

九、增删改

1.slice截取数组元素，不改变原数组

1
2
3
let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 2));  //2
console.log(arr);  //原数组

2.splice对数组增加，删除，替换，会改变原数组

删除元素

1
2
3
4
let arr = [1, 2, 3, 4, 5];
let res = arr.splice(0, 2);
console.log(res);  //[1, 2]
console.log(arr);  //[3, 4, 5]

在数组前端增加元素，支持添加多个

1
2
3
4
let arr = [1, 2, 3, 4, 5];
let res = arr.splice(0, 0, 'wcg');
console.log(res);  //[]
console.log(arr);  //['wcg', 1, 2, 3, 4, 5]

在数组末尾添加元素，支持多个

1
2
3
4
let arr = [1, 2, 3, 4, 5];
let res = arr.splice(arr.length, 0, 'wcg', 1998);
console.log(res);  //[]
console.log(arr);  //[1, 2, 3, 4, 5, 'wcg', 1998]

替换元素

1
2
3
4
let arr = [1, 2, 3, 4, 5];
let res = arr.splice(2, 1, 'wcg');
console.log(res);  //[3]
console.log(arr);  //[1, 2, 'wcg', 4, 5]

编写函数实现移动数组元素

1
2
3
4
5
6
7
8
9
10
11
function move (arr, from, to) {
    if(from < 0 || to >= arr.length) {
    	console.error('参数错误！');
    }
    const newArr = [...arr];
    let item = newArr.splice(from, 1);
    newArr.splice(to, 0, ...item);
    return newArr;
}
let arr = [1, 2, 3, 4];
console.log(move(arr, 1, 3));  //[1, 3, 4, 2]

十、清空数组

以下方法都可以清空数组

1
2
3
4
5
6
7
let arr = [1, 2, 3, 4];
// arr = [];
// arr.length = 0;
// arr.splice(0);
// arr.splice(0, arr.length);
// while(arr.pop()) {};
console.log(arr);

arr = [] 与 arr.length = 0 是有区别的；使用arr = [] 时，清空后不影响数组之前的引用；使用 arr.length = 0 ，会影响数组之前的引用。

1
2
3
4
5
let arr = [1, 2, 3, 4];
let temp = arr;
arr = [];
console.log(arr);  //[]
console.log(temp);   //[1, 2, 3, 4]
1
2
3
4
5
let arr = [1, 2, 3, 4];
let temp = arr;
arr.length = 0;
console.log(arr);  //[]
console.log(temp);   //[]

十一、数组拆分与合并

字符串与数组相互转化

1
2
3
4
let str = 'wcg,1998';
let arr = str.split(',');
console.log(arr);  //['wcg', '1998']
console.log(arr.join('-'));   //wcg-1998

数组元素复制

1
2
let arr = [1, 2, 3, 4];
console.log(arr.copyWithin(2, 0, 2));   //[1, 2, 1, 2]

十二、数组元素查找

1.indexOf，lastIndexOf(都是严格查找，值与类型都要匹配上)

indexOf从左侧开始查找元素，第二个参数是查找的起始点，返回数组索引，如果没有，则返回 -1

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

lastIndexOf从右侧开始查找元素，第二个参数是查找的起始点，返回数组索引，如果没有，则返回 -1

1
2
let arr = [1, 2, 3, 4, 2];
console.log(arr.lastIndexOf(2));   //4
1
2
3
let arr = [1, 2, 3, 4, 2];
console.log(arr.lastIndexOf(2, -1));   //4
console.log(arr.lastIndexOf(2, -2));   //1

2.includes

查找指定元素，返回布尔值

1
2
let arr = [1, 2, 3, 4, 2];
console.log(arr.includes(2));   //true

3.includes方法原理实现

1
2
3
4
5
6
7
8
9
let arr = [1, 2, 3, 4];
function includes(arr, target) {
    for(const val of arr) {
    	if(val === target) return true;
    }
	return false;
}
console.log(includes(arr, 2));  //true
console.log(includes(arr, 5));  //false

4.find

find适用于引用类型元素查找，找到则返回元素，否则返回undefined

1
2
3
4
5
6
7
8
9
10
11
12
let arr = [
    {name: 'abc', year: 2000},
    {name: 'wcg', year: 1998},
]
let res = arr.find(item => {
	return item.name === 'wcg';
});
console.log(res);   //name: 'wcg', year: 1998}
let res2 = arr.find(item => {
	return item.name === '666';
});
console.log(res2);   //undefined

5.findIndex

findIndex也适用于引用类型元素查找，找到则返回元素索引，否则返回-1

1
2
3
4
5
6
7
8
9
10
11
12
let arr = [
    {name: 'abc', year: 2000},
    {name: 'wcg', year: 1998},
]
let res = arr.findIndex(item => {
	return item.name === 'wcg';
});
console.log(res);   //1
let res2 = arr.findIndex(item => {
	return item.name === '666';
});
console.log(res2);   //-1

6.find方法原理实现

1
2
3
4
5
6
7
8
9
10
11
12
13
function find(arr, callback) {
    for(const val of arr) {
        if(callback(val)) return val;
    }
    return undefined;
}
let arr = [
    {name: 'abc', year: 2000},
    {name: 'wcg', year: 1998},
]
console.log(find(arr, (item) => {
    return item.name === 'wcg';
}));    //{name: 'wcg', year: 1998}
1
2
3
4
5
6
7
8
9
10
11
12
13
Array.prototype.findVal = function(callback) {
    for(const val of this) {
        if(callback(val)) return val;
    }
    return undefined;
}
let arr = [
    {name: 'abc', year: 2000},
    {name: 'wcg', year: 1998},
]
console.log(arr.findVal(item => {
    return item.name === 'wcg';
}));   //{name: 'wcg', year: 1998}

十三、数组排序

从小到大

1
2
3
let arr = [1, 5, 9, 2, 6];
arr = arr.sort((a, b) => a - b);
console.log(arr);    //[1, 2, 5, 6, 9]

从大到小

1
2
3
let arr = [1, 5, 9, 2, 6];
arr = arr.sort((a, b) => b - a);
console.log(arr);    //[9, 6, 5, 2, 1]

对象数组升序排列

1
2
3
4
5
6
7
let cart = [
    {name: 'iphone', price: 12000},
    {name: 'imac', price: 18000},
    {name: 'ipad', price: 3200},
];
cart  = cart.sort((a, b) => a.price - b.price);
console.log(cart);

sort方法原理实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let arr = [1, 5, 9, 2, 6];
function sort(arr, callback) {
    for(const n in arr) {
        for(const m in arr) {
            if(callback(arr[n], arr[m]) < 0) {
                const temp = arr[n];
                arr[n] = arr[m];
                arr[m] = temp;
            }
        }
    }
    return arr;
}
arr = sort(arr, function(a, b) {
    return a - b;
});
console.log(arr);   //[1, 2, 5, 6, 9]

十四、遍历数组

1.经典for循环

1
2
3
4
let arr = [1, 5, 9, 2, 6];
for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

2.for…of遍历数组元素，取的是值

1
2
3
4
let arr = [1, 5, 9, 2, 6];
for(const val of arr) {
    console.log(val);
}

如果是引用类型元素的数组，for..of可以影响原数组，否则不会影响。

1
2
3
4
5
6
7
8
9
10
11
12
13
let arr1 = [1, 5, 9, 2, 6];
for(let val of arr1) {
    val += 10;
}
console.log(arr1);  //[1, 5, 9, 2, 6]
let arr2 = [
    {name: 'wcg', year: 1998},
    {name: 'xxx', year: 2000},
]
for(const val of arr2) {
    val.year += 1;
}
console.log(arr2);  //[{name: 'wcg', year: 1999}, {name: 'xxx', year: 2001}]

3.for…in遍历数组，取的是索引

1
2
3
4
let arr = [1, 5, 9, 2, 6];
for(const key in arr) {
    console.log(arr[key]);
}
1
2
3
4
5
let arr = [1, 5, 9, 2, 6];
for(const key in arr) {
    arr[key] += 1;
}
console.log(arr);   //[2, 6, 10, 3, 7]

4.forEach

1
2
3
4
let arr = [1, 5, 9, 2, 6];
arr.forEach((item, index, arr) => {
    console.log(item, index, arr);
})

对于元素的修改，与for…of及for…in类似(助记：对于只有基本类型的值数组，通过遍历的元素无法修改元素组，通过索引可以修改)

1
2
3
4
5
6
7
8
9
let arr = [1, 5, 9, 2, 6];
arr.forEach((item, index, arr) => {
    item += 1;
})
console.log(arr);   //[1, 5, 9, 2, 6]
arr.forEach((item, index, arr) => {
    arr[index] += 1;
})
console.log(arr);    //[2, 6, 10, 3, 7]

5.数组迭代器

1
2
3
4
5
6
7
8
9
let arr = ['wcg', 1998];
let keys = arr.keys();   //生成索引的可迭代对象
console.log(keys.next());   //{value: 0, done: false}
console.log(keys.next());   //{value: 1, done: false}
console.log(keys.next());   //{value: undefined, done: true}
let vals = arr.values();   //生成值的可迭代对象
console.log(vals.next());   //{value: 'wcg', done: false}
console.log(vals.next());   //{value: 1998, done: false}
console.log(vals.next());   //{value: undefined, done: true}
1
2
3
4
5
6
let arr = ['wcg', 1998];
let vals = arr.values();
//&&运算优先级高于= 所以前一个表达式必须用()包裹
while(({value, done} = vals.next()) && done === false) {
    console.log(value);
}
1
2
3
4
let arr = ['wcg', 1998];
for(const val of arr.values()) {   //与const val of arr一个效果
    console.log(val);
}
1
2
3
4
let arr = ['wcg', 1998];
let entries = arr.entries();
let {done, value} = entries.next();
console.log(done, value);   //false, [0, 'wcg']
1
2
3
4
5
6
let arr = ['wcg', 1998];
for(const val of arr.entries()) {   //其中val可以用[index, value]来解构
    console.log(val);
}
//[0, 'wcg']
//[1, 1998]

十五、every、some

every方法检查数组每一项是否满足条件，返回布尔值

1
2
3
4
5
let arr = ['wcg', '1998'];
let bool = arr.every((item, index, arr) => {
    return item.length > 3;
})
console.log(bool);

some方法检查至少一个元素满足条件即可，返回布尔值

1
2
3
4
5
let arr = ['wcg', '1998'];
let bool = arr.some((item, index, arr) => {
return item.length > 3;
})
console.log(bool);   //true

十六、filter

1
2
3
4
5
let arr = ['wcg', '1998', 'Vue'];
let res = arr.filter((item, index, arr) => {
    return item.length === 3;
})
console.log(res);   //['wcg', 'Vue']

filter方法原理实现

1
2
3
4
5
6
7
8
9
10
11
12
13
function filter(arr, callback) {
    let temp = [];
    for(const index in arr) {
        if(callback(arr[index], index, arr)) {
            temp.push(arr[index]);
        }
    }
    return temp;
}
let arr = ['wcg', '1998', 'Vue'];
console.log(filter(arr, (item) => {
    return item.length === 3;
}));    //['wcg', 'Vue']

十七、map

1
2
3
4
5
let arr = ['wcg', '1998', 'Vue'];
let temp =  arr.map((item, index, arr) => {
    return `${item}aa`;
});
console.log(temp);   //['wcgaa', '1998aa', 'Vueaa']

十八、reduce

统计总数

1
2
3
4
5
let arr = [1, 2, 3, 4, 5];
let total = arr.reduce((pre, val, index, arr) => {
    return pre += val;   //执行了5次(如果没有初始值，则执行4次)
}, 0);
console.log(total);    //15

统计wcg出现的次数

1
2
3
4
5
let arr = [1, 'wcg', 2, 3, 'wcg'];
let count = arr.reduce((pre, cur) => {
    return pre += cur === 'wcg' ? 1 : 0;
}, 0);
console.log(count);   //2

获取数组最大值

1
2
3
4
5
let arr = [1, 22, 99, 46, 5, 12];
let max = arr.reduce((pre, cur) => {
    return pre > cur ? pre : cur;
});
console.log(max);   //99

值类型数组去重

1
2
3
4
5
6
7
8
let arr = [1, 2, 3, 3, 1, 4, 2];
let newArr = arr.reduce((pre, cur) => {
    if(!pre.includes(cur)) {
        pre.push(cur);
    }
    return pre;
}, []);
console.log(newArr);   //[1, 2, 3, 4]

对象数组去重可以搭配find使用

十九、案例：鼠标滑动文字动效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #34495e;
        }
        div {
            font-size: 3em;
            font-weight: bold;
            text-transform: uppercase;
            color: #9b59b6;
        }
        div>span {
            position: relative;
            display: inline-block;
        }
        .color {
            animation-name: color;
            animation-duration: 1s;
            animation-iteration-count: 2;
            animation-timing-function: linear;
            animation-direction: alternate;
        }
        @keyframes color {
            50% {
                color: #f1c40f;
                transform: scale(2);
            }
            to {
                color: #e74c3c;
                transform: scale(0.5);
            }
        }
    </style>
</head>
<body>
    <div>wuchenguang likes javaScript!</div>
</body>
<script>
    const div = document.querySelector('div');
    // console.log(div.textContent);
    // console.log([...div.textContent]);
    [...div.textContent].reduce((pre, cur, index) => {
        pre === index && (div.innerHTML = '');
        let span = document.createElement('span');
        span.innerHTML = cur;
        div.appendChild(span);
        span.addEventListener("mouseover", function() {
            this.classList.add("color");
        });
        span.addEventListener("animationend", function() {
            console.log(1);
            this.classList.remove("color");
        });
    }, 0);
</script>
</html>
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

吴晨光<br><br>毕业于广州大学 在职前端工程师<br>谢谢大家