数组的方法和ES5、ES6新增数组方法的语法,作用,返回值和注意事项

数组的方法在项目逻辑中无处不在、因为后端传过来数据不一定可以直接用那么就需要用数组的方法来进行转换了、还有其它地方都能用到就不一一举例了,总之很重要,很重要,要把这些方法烂熟于心,能很好的提升工作效率,比别人早下班。以下是保姆及的方法、有漏掉的或者错误的地方大家可以在评论区指出来

数组的方法和ES5、ES6新增数组方法的语法,作用,返回值和注意事项_第1张图片

总结:

ES5数组方法

  • 添加:unshift()、push()
  • 删除:shift()、pop()、delete()
  • 修改:splice(),splice也可以作为、添加、删除来用
  • 查找:indexOf()、lastindexOf()
  • 截取:slice()
  • 合并:concat()
  • 排序:sort()
  • 翻转:reverse()
  • 数组转字符串:toString()、join()
  • 深拷贝和浅拷贝(常见面试题)

ES5新增数组方法

  • 遍历:forEach()
  • 映射:map()
  • some、every, 常见面试题some和every的区别
  • 累加:reduce()
  • 过滤:filter()

ES6数组方法

  • 是否是数组:isArray()
  • 转为数组:of()、form()
  • 数组实例:fill()、copyWithin()
  • 数组查找:find()、findIndex()、includes()
  • 深度递归及遍历数组:flat()、flatMap()

思维导图:

数组的方法和ES5、ES6新增数组方法的语法,作用,返回值和注意事项_第2张图片

具体语法,作用,返回值,和注意事项!!!

ES5数组方法

添加:

unshift():在数组的开头添加元素

  • 语法arr.unshift(要添加的元素)
  • 返回:添加后的新数组
  • 注意项:原数组发生改变
// 开头添加
let arr = [1, 3, 5, 7, 9];
arr.unshift(520);
console.log(arr);//返回新数组[520, 1, 3, 5, 7, 9]

push()在数组的末尾添加元素

  • 语法:arr.push(要添加的元素)
  • 返回:添加后的新数组
  • 注意项:原数组发生改变
// 末尾添加
let arr = [1, 3, 5, 7, 9];
arr.push(1314);
console.log(arr);//返回新数组[1, 3, 5, 7, 9, 1314]

删除:

shift()在数组的开头删除元素

  • 语法:arr.shift(删除的元素)
  • 返回:删除元素后的数组
  • 注意项:原数组发生改变
// 开头删除
let arr = [1, 3, 5, 7, 9];
arr.shift()
console.log(arr);//返回新数组 [3, 5, 7, 9]

pop()在数组的末尾删除元素

  • 语法:arr.pop(删除的元素)
  • 返回:删除元素后的数组
  • 注意项:原数组发生改变
//末尾删除
let arr = [1, 3, 5, 7, 9];
arr.pop()
console.log(arr);//返回新数组 [1, 3, 5, 7]

delete():删除对象指定属性

  • 语法:delete obj.属性名;delete arr[索引]
  • 返回:对于所有情况都是true,除非属性是一个自身的不可配置的属性,在这种情况下,非严格模式返回false
  • 注意项:原对象发生改变
const Employee = {
    name: '前端-JC',
    age: '18'
}
delete Employee.age
console.log(Employee.age); //删除后返回 undefined

修改:

修改:splice

  • 语法:arr.splice(n,m,x)
  • 参数
    • n:从第索引n开始
    • m:要删除的个数
    • x:要添加的新元素
  • 作用:从索引n开始,删除m个元素,用x代替删除的元素
  • 返回:将删除的元素,以一个新数组反回
  • 注意项:元素组发生改变
let arr = [1, 3, 5, 7, 9];
arr.splice(2, 1, 13)
console.log(arr);//修改后返回 [1, 3, 13, 7, 9]

添加:splice

  • 语法:arr.splice(n,0,x)
  • 参数
    • n:从第索引n开始
    • 0:默认为零,不删除元素
    • x:添加的新元素
  • 作用:在某个元素之前添加新元素

你可能感兴趣的:(js相关,javascript,es6,前端)