ES6基础语法

目录

一、解构

数组解构

对象解构

字符串解构

数值解构

布尔值解构

二、箭头函数

和普通函数区别?

[三、拓展运算符 ...](#三、拓展运算符 ...)


一、解构

给右侧值匹配对应的变量 等号两侧模式一定要匹配

数组解构
javascript 复制代码
/**
 * 解构:从数组或者对象中提取值,给变量进行赋值操作就是解构 
 * 解构遵循就是模式匹配 等号左右两侧模式相等 
 * 数组对象解构 
 */
  // 1.完全解构
  // let  [a,b,c,d,e] =  [1,2,3,4,5];
  // console.log(a,b,c,d,e);
  
  // 2.完全解构
  // let [a,b,c,d,e] = [1,2,3,[4,5,6],7];
  // console.log(a,b,c,d,e);

  // 3.不完全解构
  // let [a,b,c,[d],e] =  [1,2,3,[4,5,6],7];
  // console.log(a,b,c,d,e);

  // 4.集合解构  拓展运算符 
  // let [a,...b] = [1,2,3,4,5];
  // console.log(a,b);

  // let [...a] = [1,2,3,4,5];

  // 5.默认值解构  当没有与变量匹配的值默认值就生效
  // let [a=4,b=5,c=6] = [1,2,3];
  // console.log(a,b,c);
  
  // 默认值也可以是函数
  // function foo(){
  //   console.log('我是foo函数');
  // }
  // let [a=foo()] = [1,2,3];
  // console.log(a);


  // let arr = [1,2,3,4,5];
  // let [...a] = arr;
  // console.log(a===arr);
对象解构
javascript 复制代码
/**
 * 对象解构 右侧对象中的属性要完成解构 左侧变量必须和属性同名
 */
// let {foo:foo,bar:bar} =  {foo:'hello',bar:'world'};
// let {foo,bar} =  {foo:'hello',bar:'world'};
// let {foo,bar} =  {foo:'hello',bar:'world'};
// console.log(foo,bar);


// 2.重命名解构  对变量名进行重命名
// let {foo:baz} = {foo:'hello',bar:'world'};
// console.log(baz)

// 3.嵌套解构 ----使用ab变量接收hello world
// let obj={p:['hello',{y:"world"}]};
// let {p:[a,{y:b}]} = obj;
// console.log(a,b);

// 4.默认值  给对象变量设置默认值 
// let {x:y=2} = {x:1};
// console.log(y);



const [a, b, c, ...d] = [1, 2, 3, 11, 999];
const { e, f, f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
console.log(a, b, c, d, e, f1, g, h);//1 2 3 [11,999] undefined  undefined 5 {i:6 j:7}
字符串解构
javascript 复制代码
// 1.字符串解构 数组和对象对字符串完成解构

let [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e);

let [...arr] = 'hello';
console.log(arr);

let {toString,valueOf,length} = 'hello';
console.log(toString,valueOf,length);
数值解构
javascript 复制代码
// 5.对数值解构
let  {toString,valueOf} = 10;
console.log(toString,valueOf);
布尔值解构
javascript 复制代码
// 6.对布尔值进行解构
let  {toString,valueOf} = true;
console.log(toString,valueOf);

二、箭头函数

()=>{}

内部没有this属性 不再使用arguments保存实际参数 用rest参数

和普通函数区别?

1.普通函数内部this指向全局对象,方法指向调用者

2.箭头函数没有this,this访问声明箭头函数外部作用域中的this

3.普通函数使用arguments保存实际参数,箭头函数使用rest参数保存实际参数

4.普通函数有原型对象,箭头函数没有原型对象

5.外观上 ()=>{}

javascript 复制代码
// var foo = function(){}
// let foo = (形式参数)=>{
//   函数体
// }
// foo(实际参数)
// function test(){
//   console.log(this,arguments);
// }
// test(1,2,3);

let foo = (...res)=>{
  // 箭头函数内部没有this属性 不再用arguments属性保存实际参数 用rest参数保存实际参数
  // console.log(this,arguments,'arguments')
  console.log(res);
}
foo(1,2,3)

// 普通函数有原型对象  箭头函数没有原型对象
// function bar(){}
// console.log(bar.prototype.toString(),foo.prototype);

三、拓展运算符 ...

用到左侧是聚合

let [...arr] = [1,2,3,4,5]

用到右侧是展开

{

name:"zhangsan",

age:12,

gender:"male"

}

let obj1 = {...obj};

javascript 复制代码
/**
 * 1.用到左侧是聚合 
 * 2.用到右侧是展开
 * 用于解构对象和数组 拓展运算符(可以实现深拷贝)  rest参数 
 */
var arr = [1,2,3,4,5];
let [...res] = arr;
console.log(res,res===arr);

let obj = {
  name:'zhangsan',
  age:12,
  gender:'male'
}
// 用到右侧展开
let obj1 = {...obj};
console.log(obj1,obj1===obj);


var params = {
  page:1,
  pageSize:10
}
var form = {
  title:"",
  type:"",
  status:""
}
let temp = {
  ...params,
  ...form
}
for(let key in temp){
  if(!temp[key]){
    delete temp[key]
  }
}
console.log(temp);
相关推荐
明月看潮生4 分钟前
青少年编程与数学 02-003 Go语言网络编程 15课题、Go语言URL编程
开发语言·网络·青少年编程·golang·编程与数学
南宫理的日知录15 分钟前
99、Python并发编程:多线程的问题、临界资源以及同步机制
开发语言·python·学习·编程学习
逊嘘32 分钟前
【Java语言】抽象类与接口
java·开发语言·jvm
Half-up35 分钟前
C语言心型代码解析
c语言·开发语言
别拿曾经看以后~41 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死44 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
Source.Liu1 小时前
【用Rust写CAD】第二章 第四节 函数
开发语言·rust
monkey_meng1 小时前
【Rust中的迭代器】
开发语言·后端·rust