ES6新语法--解构赋值

对象解构赋值 ※很重要

/*** 对象解构赋值:获取元素中属性的值，然后赋值给变量*///声明一个对象
let obj = {name:'chen',age:38,gender:'man',score:100
};
//es5中
// let name1 = obj.name;
// let age1 = obj.age;
// let gender1 = obj.gender;
// let score1 = obj.score;
// console.log(name1,age1,gender1,score1);//es6中  对象解构赋值
// let{//     name:name1,
//     age:age1,
//     gender:gender1,
//     score:score1
// } = obj;//就是直接用{属性名：变量名} 来给变量名赋值直接的
// console.log(name1,age1,gender1,score1);// let{//     name:name,
//     age:age,
//     gender:gender,
//     score:score
// } = obj;//名字一样也可以
// console.log(name,age,gender,score);// let{//     name,age,gender,score
// } = obj;//如果声明的变量名跟对象的属性名一样 可以直接写一个{变量名}  就可以直接简写 比较方便
// console.log(name,age,gender,score);// let{//     name,age,gender,fenshu
// } = obj;
// console.log(name,age,gender,fenshu);//如果简写的变量名跟对象属性名对不上(对象中没有与变量名同名的属性名) 就是没有 这个变量名的值就会是undefined// let{//     name,age,gender,score:fenshu
// } = obj;
// console.log(name,age,gender,fenshu);//这就是变量名跟对象属性名一样的简写   不一样的就老老实实的按照 属性名：变量名 这样写// let{//     name,age,gender,score:fenshu,height=180
// } = obj;//可以用 变量名=值 来指定默认值
// console.log(name,age,gender,fenshu,height);let{name,age = 18,gender,score:fenshu,height=180
} = obj;
//可以用 变量名=值 来指定默认值   但对于有与变量名同名的对象属性名 还有默认值的来说 会取用对象的属性值
//这就体现了 变量名=值 是默认值 只有在其他情况都没有赋值的情况才会使用
console.log(name,age,gender,fenshu,height);

数组解构赋值

/*** 数组解构赋值：就是把数组的每一个元素依次赋值给变量* 数组解构赋值 只能按顺序赋值  不可以更改顺序赋值*///声明数组
let arr = [10,20,30,40];//es5中
let num1 = arr[0];
let num2 = arr[1];
let num3 = arr[2];
let num4 = arr[3];
console.log(num1,num2,num3,num4);//es6中  可以用数组解构赋值  用[]
// let [num1,num2,num3,num4] = arr;//意思按正常顺序 依次按照索引值将数组中的元素赋值给对应的变量名
// console.log(num1,num2,num3,num4);// let [num1,num2,num3,num4,num5] = arr;//变量数量多于数组元素数量的话  多出来的就是没有 undefined
// console.log(num1,num2,num3,num4,num5);// let [num1 = 100,num2,num3,num4,num5 = 50] = arr;// 变量名 = 值   为默认值 跟那个对象解构赋值类似
// console.log(num1,num2,num3,num4,num5);

解构赋值结合函数声明

/*** 解构赋值结合函数声明*///es5中
//声明一个函数，形参有多个
// function test(name,age,gender){//     console.log(name,age,gender);
// }
// test('chen',35,'man');//形参有多个  可以吧形参打包成一个对象
// function test(obj){//     console.log(obj.name,obj.age,obj.gender);
// }
// test({//     name:'chen',
//     age:35,
//     gender:'man'
// });//es6中
//声明一个函数，形参有多个
//形参我就直接可以用对象解构赋值
// function test1({name,age,gender,height = 180}){//默认值 也可以使用 不传就是用默认值 传了就用穿了的
//     console.log({name,age,gender});
// };
// test1({//     name:'chen',
//     age:35,
//     gender:'man'
// });
//上面跟下面这行代码一个意思  形参 = 实参
// let {name,age,gender} = {name:'chen',age:35,gender:'man'}function x([a,b,c,d]){console.log(a+b+c+d);
}
x([10,20,30]);//结果是NaN  因为d没有值  是undefined 数字加undefined是NaN

ES6新语法--解构赋值相关推荐

ES6变量的解构赋值--对象篇
目录使用方式普通形式嵌套结构使用默认值注意事项上一篇我们讲解了数组的解构赋值,解构还可以用于对象.字符串等等,这里我们来讲解对象的解构赋值. ES6变量的解构赋值--数组_zxn20012 ...
（34）2021-02-24（ES6变量的解构赋值）
ES6变量的解构赋值一. 变量的解构赋值 1.什么是解构 2.数组解构赋值不完全解构 3.对象解构赋值方法解构注意点 4.字符串解构 5.函数参数的解构赋值 6.用途 6.1 交换变量的值 6 ...
ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
ES6语法---解构赋值
解构赋值概念按照一定的模式,从数组和对象中提取值,对变量进行赋值,就被称为解构. 目的是为了提高效率,使用起来更加方便. 以下的各个说明,我会类比着ES5去解释,希望能帮到小伙伴们. 数组解构正常 ...
ES6——变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. let [a, b] = [1, 2]; let {c, d} = {c: 3, d: 4};console.log(a ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
【ES6(2015)】解构赋值Desctructuring
文章目录 1. 数组解构赋值 2. 对象解构赋值 3. 字符串解构赋值在 ES6 中新增了变量赋值的方式:解构赋值.允许按照一定模式,从数组和对象中提取值,对变量进行赋值.如果对这个概念不了解,我们 ...
ES6 数组的解构赋值
数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = ...
es6—变量的解构赋值
数组的解构赋值 /* 1.变量的解构赋值: * 数组的元素是按次序排列的,变量的取值由它的位置决定: * 从数组和对象中提取值,对变量进行赋值,这被称为解构; * 属于"模式匹配" ...

ES6新语法--解构赋值

对象解构赋值 ※很重要

数组解构赋值

解构赋值结合函数声明

ES6新语法--解构赋值相关推荐

最新文章

热门文章