JS的对象、数组等处理方法:解构

对象方法简写

你可以在定义方法时省略function和 ::

const obj = {
  insteadOfThis: function() {
    // do stuff
  },

  youCanDoThis() {
    // do stuff
  }
}

请注意,以上不是箭头函数,只是对象方法的简写语法。

解构对象

对象解构是获取对象并将其内部属性提取到对象外部变量的一种方法:

const obj = { x: 1, y: 2 }

// 不使用解构语法
const x = obj.x
const y = obj.y

// 使用解构语法
const { x, y } = obj
x // 1
y // 2

// 你也可以在函数参数中使用解构
// 注意这里函数的参数只有一个
function add({ x, y }) {
  return x + y
}
add({ x: 3, y: 4 }) // 7

刚开始你可能会有点混乱,因为现在花括号不仅可以用来声明对象,也可以用来根据上下文对其进行解构。

// 如果花括号在等式的右边,那么你正在声明一个对象
const obj = { x: 1, y: 2 }

// 如果花括号在等式左边,那么你正在解构一个对象
const { x } = obj;

解构数组

数组解构的工作原理与对象解构几乎相同,但使用方括号而不是花括号:

const arr = ['michael', 'jackson']
const [first, last] = arr
first // michael
last // jackson

它们之间的另一个区别是对象具有属性名称,因此必须在解构的时候使用这些属性名称。由于数组值是按顺序排列的,并且没有名称,因此,解构的顺序与我们获得的值是相关联的。换句话说,first是解构中的第一个变量,因此它获取数组的第一个值。

对象属性简写

如果属性名称与对象中的变量名称相同,则可以使用属性简写:

// 这里需要写两遍 name
const name = 'Michael'
const person = { name: name }

// 对象属性简写
const person = { name }

...展开语法

创建对象或数组时,一种从现有对象或数组的属性创建新属性的方法。

// 定义一个person数组
const person = ['Michael', 'Jackson']

// 如果要把 person 数组加到新的 profile 数组里,按下面这么写的话
const profile = [person, 'developer']

// 结果会是数组里包含着一个数组
profile // [['Michael', 'Jackson'], 'developer']

profile[0] // 这是个数组 ['Michael', 'Jackson']
profile[1] // 这是字符串 'developer'

// 现在 我们用 ...展开语法
const profile = [...person, 'developer']

// 结果就变成了
profile // ['Michael', 'Jackson', 'developer']

// 对象也可以用 ...展开语法
const person = { first: 'Michael', last: 'Jackson' }
const profile = { ...person, occupation: 'developer' }
profile // { first: 'Michael', last: 'Jackson', occupation: 'developer' }

...剩余语法

剩余语法(Rest syntax) 看起来和展开语法完全相同,不同点在于, 剩余参数用于解构数组和对象。从某种意义上说,剩余语法与展开语法是相反的:展开语法将数组展开为其中的各个元素,而剩余语法则是将多个元素收集起来并“凝聚”为单个元素。

const profile = { first: 'Michael', last: 'Jackson', occupation: 'developer' }
const { occupation, ...rest } = profile
occupation // developer
rest // { first: 'Michael', last: 'Jackson' }

剩余语法用于函数参数

function myFunction(first, last, ...rest) {
  return rest
}

console.log(myFunction('Michael', 'Jackson', 'Developer', 'California'))
// output: ['Developer', 'California']

原文地址:https://www.cnblogs.com/insightz/p/12024156.html

时间: 2024-11-05 22:00:16

JS的对象、数组等处理方法:解构的相关文章

用JS实现一个数组合并的方法(要求去重)

最近发现一道面试题,用JS实现一个数组合并的方法(要求去重).我们知道,concat方法会合并两个数组并返回一个新的数组,新的数组会包含旧数组中的每一个元素,即[1,2,3]与[2,3,4]合并后的结果为[1,2,3,2,3,4].那么该如何实现,既能合并又能去重? 思路就是,将目标数组的值作为key放进一个对象中,在这个过程中,重复的值就被过滤掉了,这样就排除了重复的值. 两个数组,a = [1,2,3], b = [2,3,4],要求合并后的数组为[1,2,3,4] Array.protot

从js的repeat方法谈js字符串与数组的扩展方法

js将字符串重复N次的repeat方法的8个版本 /* *@desc: 将一个字符串重复自身N次 */ //版本1:利用空数组的join方法 function repeat(target, n) { return (new Array(n + 1)).join(target); } //版本2:之所以要创建一个带length属性的对象 是因为要调用数据的原型方法,需要指定call的第一个参数为类数组对象 //类数组对象的必要条件是其length属性的值为非负数 function repeat(t

js中实现数组的indexOf方法

时间过得很快,转行做开发整一年了,打算出去见见世面.看我现在技术水平能达到什么层次,好确定以后的学习方向,也看看外面的公司都在使用一些什么样的技术. 昨天面了一家公司,对方直接让我答的压轴题.一个简单的算法设计题:熟悉js的同学知道js中字符串有个indexOf方法,现在需要实现数组的indexOf方法.由于本科并非计算机专业,编程方面的一些基本功还很不扎实(比如基础算法掌握程度.算法设计能力),昨天没把题目做对.今天赶紧写出来,以免以后遇上还得再去想.罗里吧嗦一顿,上代码吧还是: 1 Arra

JS传递对象数组为参数给后端,后端获取

前端JS代码: var conditons = []; var test1 = new Object(); test1.name="1"; test1.id="2"; var test2 = new Object(); test2.name="1"; test2.id="2"; conditons.push(test1); conditons.push(test2); $(function(){ $.ajax({ async:

js实现对象-数组-字符串之间的相互转化

对象-数组-字符串: 例如: var data = { user:"userName", pass:"12121" };//这是一个对象 如果要给这个data 对象追加一个属性就比如: new Date( ).getTime( );//获取当前时间到那个时间的时间间隔单位是毫秒: data.time = new Date( ).getTime( ); 此时data 里面就多了一个属性: time : " 获取到的那个毫秒数" 即: var dat

js判断对象数组中是否存在某个对象

1. 如果要判断数组中是否存在某个元素的话很好判断,直接用数组的indexOf方法就好,存在返回当前索引不存在返回-1 var arr=[1,2,3,4] arr.indexOf(3) // 2 arr.indexOf(5) // -1 2. 要只是判断的话是可以遍历后判断对象的属性是否相同的,像这种: arr.forEach(item=>{ if(item.name=='Alex'){ alert('存在这个元素'); } }) 3. 但实际中往往是需要动态添加或删除对象或元素的,用这个方法的

JS判断对象是否存在的方法

Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易.但是实际上,它涉及的语法问题,远比我们想象的复杂.Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法.只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别

【转】js获取对象的所有属性和方法

//有时候需要知道一个js对像的所有属性和方法来帮助调试,下面是再网上找到的一个比较给力的方法 function displayProp(obj){ var names=""; for(var name in obj){ names+=name+": "+obj[name]+", "; } alert(names); } 转自 http://blog.csdn.net/clh604/article/details/8233812

js高级程序设计数组的一些方法

数组的栈方法: 栈是一种 LIFO(Last-In-First-Out, 后进先出)的数据结构,也就是最新添加的项最早被移除. 而栈中项的插入(叫做推入)和移除(叫做 弹出),只发生在一个位置--栈的顶部. ECMAScript 为数组专门提供了 push()和 pop()方法,以便 实现类似栈的行为. var colors = new Array(); // 创建一个数组 var count = colors.push("red", "green"); // 推入

JS中 对象数组按某一属性去重 校验是否有重复数据

新任务: 下拉框出去重复数据 //前端对象数组 按某个属性去重 其中jsonArray 是你要去重的对象数组 示例中  按name属性去重 //前端对象数组 按某个属性去重 var obj = {}; jsonArray = jsonArray.reduce(function(item,next){ obj[next.name]?'':obj[next.name] = true&&item.push(next); return item; },[]); for(var i= 0;i<