• ES6解构赋值


    1、数组的解构赋值

    // 数组的解构赋值
    
    // const arr = [1, 2, 3, 4];
    // let [a, b, c, d] = arr;
    
    // ------------------------------------------
    
    // 更复杂的匹配规则
    
    // const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g']]];
    
    // const [ , b] = arr;
    // const [ , , g] = ['e', 'f', 'g']
    // const [ , , [ , , g]] = ['c', 'd', ['e', 'f', 'g']];
    // const [ , , [ , , [ , , g]]] = arr;
    
    // ------------------------------------------
    
    // 扩展运算符  ...
    
    // const arr1 = [1, 2, 3];
    // const arr2 = ['a', 'b'];
    // const arr3 = ['zz', 1];
    // const arr4 = [...arr1, ...arr2, ...arr3];
    
    // const arr = [1, 2, 3, 4, 5, 6];
    // const [a, b, ...c] = arr;
    
    // ------------------------------------------
    
    // 默认值
    
    // const arr = [1, null, undefined];
    // const [a, b = 2, c, d = 'aaa'] = arr;
    
    // ------------------------------------------
    
    // 交换变量
    
    // let a = 20;
    // let b = 10;
    
    // let temp;
    
    // temp = a;
    // a = b;
    // b = temp;
    
    // [a, b] = [b, a];
    
    // ------------------------------------------
    
    // 接收多个 函数返回值
    
    // function getUserInfo(id) {
    //   // .. ajax
    
    //   return [
    //     true,
    //     {
    //       name: '小明',
    //       gender: '女',
    //       id: id
    //     },
    //     '请求成功'
    //   ];
    // };
    
    // const [status, data, msg] = getUserInfo(123);
    

    2、对象的解构赋值

    // 对象的解构赋值
    
    // const obj = {
    // 	saber: '阿尔托利亚',
    // 	archer: '卫宫'
    // };
    // const { saber, archer1 } = obj;
    
    // ------------------------------------------
    
    // 稍微复杂的解构条件
    
    // const player = {
    // 	nickname: '感情的戏∫我没演技∆',
    // 	master: '东海龙王',
    // 	skill: [{
    // 		skillName: '龙吟',
    // 		mp: '100',
    // 		time: 6000
    // 	},{
    // 		skillName: '龙卷雨击',
    // 		mp: '400',
    // 		time: 3000
    // 	},{
    // 		skillName: '龙腾',
    // 		mp: '900',
    // 		time: 60000
    // 	}]
    // };
    
    // const { nickname } = player;
    // const { master } = player;
    // const { skill: [ skill1, { skillName }, { skillName: sklName } ] } = player;
    
    // const { skill } = player;
    // const [ skill1 ] = skill;
    
    
    // ------------------------------------------
    
    // 结合扩展运算符
    
    // const obj = {
    // 	saber: '阿尔托利亚',
    // 	archer: '卫宫',
    // 	lancer: '瑟坦达'
    // };
    
    // const { saber, ...oth } = obj;
    // const obj1 = {
    // 	archer: '卫宫',
    // 	lancer: '瑟坦达'
    // }
    
    // const obj = {
    // 	saber: '阿尔托利亚',
    // 	...obj1,
    // };
    
    // ------------------------------------------
    
    // 如何对已经申明了的变量进行对象的解构赋值
    
    // let age;
    // const obj = {
    // 	name: '小明',
    // 	age: 22
    // };
    
    // ({ age } = obj);
    
    // ------------------------------------------
    
    // 默认值
    
    // let girlfriend = {
    // 	name: '小红',
    // 	age: undefined,
    // };
    
    // let { name, age = 24, hobby = ['学习'] } = girlfriend;
    
    // ------------------------------------------
    // ------------------------------------------
    
    // 提取对象属性
    
    // const { name, hobby: [ hobby1 ], hobby } = {
    // 	name: '小红',
    // 	hobby: ['学习']
    // };
    
    // ------------------------------------------
    
    // 使用对象传入乱序的函数参数
    
    // function AJAX({
    // 	url,
    // 	data,
    // 	type = 'get'
    // }) {
    // 	// var type = option.type || 'get';
    
    // 	// console.log(option);
    // 	console.log(type);
    // };
    
    // AJAX({
    // 	data: {
    // 		a: 1
    // 	},
    // 	url: '/getinfo',
    // });
    
    // ------------------------------------------
    
    // 获取多个 函数返回值
    
    // function getUserInfo(uid) {
    // 	// ...ajax
    
    // 	return {
    // 		status: true,
    // 		data: {
    // 			name: '小红'
    // 		},
    // 		msg: '请求成功'
    // 	};
    // };
    
    // const { status, data, msg: message } = getUserInfo(123);
    
    // ------------------------------------------
    

    3、字符串的解构赋值

    // 字符串的结构赋值
    const str = 'I am the bone of my sword'; // 我是剑骨头
    
    // const [ a, b ,c, ...oth ] = str;
    
    // const [ ...spStr1 ] = str;
    // const spStr2 = str.split('');
    // const spStr3 = [ ...str ];
    
    // ------------------------------------------
    
    // 提取属性
    
    // const { length, split } = str;
    

    4、数值与布尔值的解构赋值

    // 数值与布尔值的解构赋值
    
    const { valueOf: vo } = 1;
    const { toString: ts } = false;
    

    5、函数参数的解构赋值

    // 函数参数的解构赋值
    
    // function swap([x, y]) {
    // 	return [y, x];
    // };
    
    // let arr = [1, 2];
    // arr = swap(arr);
    
    function Computer({
    	cpu,
    	memory,
    	software = ['ie6'],
    	OS = 'windows 3.5'
    }) {
    
    	console.log(cpu);
    	console.log(memory);
    	console.log(software);
    	console.log(OS);
    
    };
    
    new Computer({
    	memory: '128G',
    	cpu: '80286',
    	OS: 'windows 10'
    });
    

      

  • 相关阅读:
    MyBatis 中#{}和${}区别
    MyBatis缓存机制
    SpringBoot整合RabbitMQ
    Jackson2JsonRedisSerializer和GenericJackson2JsonRedisSerializer的区别
    Docker安装MySql
    Python3网络爬虫(七):使用Beautiful Soup爬取小说
    python3 爬虫内涵段子
    python3 爬虫百度贴吧
    Python3网络爬虫(五):Python3安装Scrapy
    Requests: 模块
  • 原文地址:https://www.cnblogs.com/cristina-guan/p/10493174.html
Copyright © 2020-2023  润新知