es6变量解构赋值的用途
这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读;
用途
1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白
let [x,y]=[1,2];
[x,y]=[y,x];
console.log(x);//输出2
console.log(y);//输出1
2.从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或者对象里面返回.有了解构赋值,取出这些值那是非常的方便,最关键是易读
function obj1(){
return [1,2,3,];
}
let [a,b,c]=obj1();
console.log(a);//1
console.log(b);//2
console.log(c);//3
function obj2(){
return {
name:"张三",
age:18
}
}
let {name,age}=obj2();
console.log(name);//张三
console.log(age);//18
3.函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来
//参数是一组有次序的值
function f([x,y,z]){...}
f([1,2,3]);
//参数可以无次序传参
function f({x,y,z}){...}
f({y:2,x:1,z:3})
4.提取json对象数据
解构赋值对提取json对象中的数据,尤其有用
let jsonData={
id:42,
name:"张三",
score:[99,100,99]
}
let {id,name,score}=jsonData;
console.log(id,name,score);//42 '张三' [99,100,99]
es6变量解构赋值的用途的更多相关文章
- ES6变量解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构ES6之前我们申明多个变量需要按照下面的方法: let l a=1; let b=2; let c=3; let d=4; ...
- ES6变量解构赋值的用法
一.数组赋值(从数组中提取值,按照对应位置,对变量赋值) 1. 完全解构(变量与值数目相等) let arr = [1, 2, 3]; let [a,b,c] = arr; console.log(a ...
- 001-es6变量声明、解构赋值、解构赋值主要用途
一.基本语法 1.1.声明变量的六种方法 参看地址:http://es6.ruanyifeng.com/#docs/let let:局部变量,块级作用域,声明前使用报错 var:全局变量,声明前使用 ...
- ES6的变量解构赋值
前 言 ES6 解构赋值: ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构. 1.1 数组的结构赋值 1.1.1基本用法 JS中,为变量赋值直接指定.例如下面代码: ...
- ECMAScript6学习笔记 ——let、const、变量解构赋值
let 不存在变量提升 通过let声明的变量仅在块级作用域内有效 不允许在同一个作用域内重复声明一个变量 防止值公用 var oUl = document.querySelectorAll('ul&g ...
- ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
- es6的解构赋值用途
(1)交换变量的值 let x = 1; let y = 2; [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数 ...
- 【es6】变量解构赋值
1.数组解构赋值 let [a,b,c]=[1,2,3];//数组解构赋值,注意:左右两边格式需一致 let [a,b]=[1,2,3];//不完全解构,取位置靠前的值 let [a=1,b]=[un ...
- 进军es6(2)---解构赋值
本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久.目前依然在等待阿里HR面后的结果中...但愿好事多磨!在阿里的某轮面试中面试官问到了es6的掌握情况,说明es6真的是大势所趋,我们更需 ...
随机推荐
- opencv学习笔记1
#对图像的像素处理#法1print("------------------------")image = cv.imread("D:/1.jpeg",cv.IM ...
- HTML 培训教程
HTML培训教程 1. HTML概述 1.1. 什么是 HTML 文件? n ...
- office 2013 破解工具 及 软件下载
win7/win8/win10 office2013 破解工具 下载地址: https://pan.baidu.com/s/1sZeJOCWq1fZ3KIOWvmrAQQ office2013 ...
- Tomcat 配置文件的解析
转载:https://www.cnblogs.com/sunshine-1/p/8990044.html https://www.cnblogs.com/kismetv/p/7228274.html ...
- @staticmethod 和@classmethod区别
python中@classmethod @staticmethod区别 Python中3种方式定义类方法, 常规方式, @classmethod修饰方式, @staticmethod修饰方式. cla ...
- C++_友元1-友元类是什么
友元函数:不是类的成员函数,但是能够访问类的私有数据成员. 之前有个矛盾就是规定非成员函数不能直接访问类的私有数据,但是这会儿却可以,但那只是针对常规非成员函数而言,特殊的非成员函数就可以访问类的私有 ...
- AngularJs依赖注入写法笔记
下面两种依赖注入写法等价: [第一种] app.controller('lrNListingController', function (Notifier, Private, timefilter, ...
- HDU 6299 Balanced Sequence(贪心)
题目:给出N个只有左右括号字符串 ,这N个字符串的排列顺序是任意的 , 问按最优的排序后 , 得到最多匹配的括号个数 分析: 我们很容易的想到 字符串)()()(( , 这样的字符串可以精简为)(( ...
- BZOJ - 2457 思維+貪心
//為什麼我的Chrome OS更新後變成強制繁體了?? 題目要求使用最少的雙端隊列來維護一個單調非降序列 先來看下規律 首先,val肯定是單調非降的,在相等val範圍內的id可以xjb亂放不影響 其 ...
- phpstorm 2017 关掉变量提示 parameter name hints
配置面板中搜索 hints 路径 Editor > General > Appearance > Show parameter name hits 去掉前面的勾就行了