Iwen's blog Iwen's blog
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • Linux
  • 学习
  • 面试
  • 心情杂货
  • 友情链接
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
复盘
关于

Iwen

不摸鱼的哥哥
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • Linux
  • 学习
  • 面试
  • 心情杂货
  • 友情链接
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
复盘
关于
  • Vue

  • Vue进阶

  • CSS

  • ES6

  • Base

  • Core

  • Array

    • 基础方法
      • 添加
        • push()
        • unshift()
      • 删除
        • pop()
        • shift()
      • 合并
        • cancat()
        • 扩展运算符...
      • splice()
      • slice()
      • sort()
      • join() toString()
      • toLocaleString()
      • reverse()
      • fill() 填充数组
    • 数组遍历总结
    • 扁平化
    • 数组去重
    • 判断数组中是否包含某个值
    • 伪数组转换为真数组
    • 数组中强大的reduce
    • 前端模块化
  • Object

  • String

  • Async

  • Browser

  • Http

  • 性能优化

  • 正则

  • 经典总结

  • 设计模式

  • 数据结构

  • 算法

  • 手写

  • TypeScript

  • 复盘
  • Array
Mr.w
2020-11-29

基础方法

# 基础方法

# 添加

# push()

向数组的末尾添加一个或多个元素,并返回新的长度。

参数: item1, item2, ..., itemX ,要添加到数组末尾的元素

let  a =  [1,2,3];
let item = a.push('末尾');  // 4
console.log(a); // [1,2,3,'末尾']
1
2
3

# unshift()

向数组的开头添加一个或更多元素,并返回新的长度。

参数: item1, item2, ..., itemX ,要添加到数组开头的元素

let  a =  [1,2,3];
let item = a.unshift('开头');  // 4
console.log(a); // ['开头',1,2,3]
1
2
3

# 删除

# pop()

删除一个数组中的最后的一个元素,并且返回这个元素。

let  a =  [1, 2, 3];
let item = a.pop();     // 3
console.log(a);         // [1,2]
1
2
3

# shift()

删除数组的第一个元素,并返回这个元素。

let  a =  [1,2,3];
let item = a.shift();  // 1
console.log(a); // [2,3]
1
2
3

# 合并

# cancat()

合并两个或多个数组,返回一个新数组。

let a = [1, 2, 3];
let b = [4, 5, 6];
let newVal=a.concat(b); // [1,2,3,4,5,6]

let c = [7, 8, 9]
let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]

let newVal3 = a.concat('33',b, c,'44'); // [1,2,3,"33",4,5,6,7,8,9,"44"]

// 合并嵌套数组  会浅拷贝嵌套数组
let d = [1, 2];
let f = [3, [4]];
let newVal4 = d.concat(f); // [1,2,3,[4]]
1
2
3
4
5
6
7
8
9
10
11
12
13

# 扩展运算符...

因为ES6的语法更简洁易懂,所以现在合并数组我大部分采用...来处理,...运算符可以实现cancat的每个栗子,且更简洁和具有高度自定义数组元素位置的效果。

let a = [2, 3, 4, 5]
let b = [4, ...a, 4, 4]
console.log(a, b); //  [2, 3, 4, 5] [4,2,3,4,5,4,4]
1
2
3

# splice()

定义: 向/从数组中添加/删除项目,然后返回被删除的项目

语法: array.splice(index,howmany,item1,.....,itemX)

参数:

  • index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
  • howmany:可选。要删除的项目数量。如果设置为 0,则不会删除项目。
  • item1, ..., itemX: 可选。向数组添加的新项目。

返回值: 如果有元素被删除,返回包含被删除项目的新数组。

// 删除
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0, 3); // [1,2,3]
console.log(a); // [4,5,6,7]
// 从数组下标0开始,删除3个元素
let item = a.splice(-1, 3); // [7]
// 从最后一个元素开始删除3个元素,因为最后一个元素,所以只删除了7

// 删除并添加
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,3,'添加'); // [1,2,3]
console.log(a); // ['添加',4,5,6,7]
// 从数组下标0开始,删除3个元素,并添加元素'添加'

let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-2,3,'添加1','添加2'); // [6,7]
console.log(b); // [1,2,3,4,5,'添加1','添加2']
// 从数组最后第二个元素开始,删除3个元素,并添加两个元素'添加1'、'添加2'

// 不删除只添加
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0, 0, '添加1', '添加2'); // [] 没有删除元素,返回空数组
console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]

let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-1, 0, '添加1', '添加2'); // [] 没有删除元素,返回空数组
console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素
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

# slice()

从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象,且原数组不会被修改。

array.slice(begin, end)

let a = ['hello', 'world'];
let b = a.slice(0, 1); // ['hello']
a[0] = '改变原数组';
console.log(a, b); // ['改变原数组','world'] ['hello']
b[0] = '改变拷贝的数组';
console.log(a, b); // ['改变原数组','world'] ['改变拷贝的数组']
1
2
3
4
5
6

如上:新数组是浅拷贝的,元素是简单数据类型,改变之后不会互相干扰。

如果是复杂数据类型(对象,数组)的话,改变其中一个,另外一个也会改变。

let a = [{name:'OBKoro1'}];
let b = a.slice();
console.log(b, a); // [{name:"OBKoro1"}]  [{name:"OBKoro1"}]

a[0].name = 3;
console.log(b, a); // [{name:3}] [{name:3}]
b[0].name = 1,
b[0].koro = 2;
// [{name: 1,"koro": 2}] [{name: 1,"koro": 2}]

1
2
3
4
5
6
7
8
9
10

# sort()

对数组元素进行排序,并返回这个数组。

  1. 数组元素为数字的升序、降序:
var array = [10, 1, 3, 4, 20, 4, 25, 8];
// 升序 a-b < 0   a将排到b的前面,按照a的大小来排序的 
// 比如被减数a是10,减数是20 10-20 < 0 被减数a(10)在减数b(20)前面   
array.sort((a, b) => a - b );
console.log(array); // [1,3,4,4,8,10,20,25];

// 降序
array.sort((a, b) => b - a );
console.log(array); // [25,20,10,8,4,4,3,1];
1
2
3
4
5
6
7
8
9
  1. 数组多条件排序
var array = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}];
array.sort(function(a,b){
    if(a.id === b.id){// 如果id的值相等,按照age的值降序
        return b.age - a.age
    }else{ // 如果id的值不相等,按照id的值升序
        return a.id - b.id
    }
})
// [{"id":2,"age":8},{"id":5,"age":4},{"id":6,"age":10},{"id":9,"age":6},{"id":10,"age":9},{"id":10,"age":2}] 
1
2
3
4
5
6
7
8
9
  1. 自定义比较函数,天空才是你的极限 类似的:运用好返回值,我们可以写出任意符合自己需求的比较函数
var array = [{name:'Koro1'},{name:'Koro1'},{name:'OB'},{name:'Koro1'},{name:'OB'},{name:'OB'}];
array.sort(function(a,b){
    if(a.name === 'Koro1'){// 如果name是'Koro1' 返回-1 ,-1<0 a排在b的前面
        return -1
    }else{ // 如果不是的话,a排在b的后面
        return 1
    }
})
// [{"name":"Koro1"},{"name":"Koro1"},{"name":"Koro1"},{"name":"OB"},{"name":"OB"},{"name":"OB"}] 
1
2
3
4
5
6
7
8
9

# join() toString()

把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串,返回生成的字符串。

array.join(str) 指定要使用的分隔符,默认使用逗号作为分隔符。 array.toString() 无参数,默认逗号分隔符

let a = ['hello','world'];
let str = a.join();     // 'hello,world'
let str2 = a.join('+'); // 'hello+world'
1
2
3

# toLocaleString()

返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接(由逗号隔开)组成。

let a = [{name: 'OBKoro1'}, 23, 'abcd', new Date()];
let str = a.toLocaleString(); // [object Object],23,abcd,2018/5/28 下午1:52:20 
1
2

如上述栗子:调用数组的toLocaleString方法,数组中的每个元素都会调用自身的toLocaleString方法,对象调用对象的toLocaleString, Date调用Date的toLocaleString。

# reverse()

颠倒数组中元素的顺序。

let  a =  [1,2,3];
a.reverse();  
console.log(a); // [3,2,1]
1
2
3

# fill() 填充数组

定义: 使用给定值,填充一个数组。

参数:

  • 第一个元素(必须): 要填充数组的值
  • 第二个元素(可选): 填充的开始位置,默认值为0
  • 第三个元素(可选):填充的结束位置,默认是为this.length
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
1
2
3
4
DOM 事件
数组遍历总结

← DOM 事件 数组遍历总结→

最近更新
01
flex布局页面自适应滚动条问题
12-28
02
前后端分离开发请求接口跨域如何携带cookie的问题
12-28
03
怎么实现div长宽比固定width-height4比3
12-28
更多文章>
Theme by Vdoing | Copyright © 2017-2022 Iwen | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式