es6中的变量解构对象数组函数

文章目录

一.变量/常量声明
二.解构
- 2.1.数组解构
- 2.2对象解构
- 3.3.字符串解构
- 4.数值解构
- 5.布尔值解构
三.对象
- 3.1.对象简写
- 3.2API拓展
四.扩展运算符
五.数组
- 5.1API拓展
六.函数
- 6.1函数参数
- 6.2.箭头函数
- 6.3 函数参数解构
七.Set
- 1)特性：
- 2)API
- 3）set应用
八.Map
- 1)特点：
- 2)API

一.变量/常量声明

1.let 用于声明一个变量

     1 变量不会提升,即在变量声明之前无法使用该变量2.不可以重复声明3.具有块级作用域，只在当前作用域有效4.可以不用设置初始值

2.const 用于声明一个常量

1.变量声明不会被提升，即在变量声明之前无法使用该变量
2.不允许重复声明。
3.具有局部作用域，即const声明的变量只能在对应代码块中使用
4.const声明的变量在声明的时候就需要赋值，并且只能赋值一次，不能修改。

	块级作用域	变量提升	给全局添加属性	能否重复声明	初始值设置	指针指向
var	不存在	存在	√	√	×
let	存在	不存在	×	×	×	√（可以重新赋值）
const	存在	不存在	×	×	√	×

原文链接：https://blog.csdn.net/qq_42033567/article/details/107162586

二.解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构的本质属于“模式匹配”.
只要等号两边的模式相同，左边的变量就会被赋予对应的值。
如果解构不成功，变量的值就等于undefined。

2.1.数组解构

等号左边的变量放到中括号内部，匹配右侧数组中的元素。

 1.let [a,b,c]=[1,2，3];console.log(a,b);//1 2

  2.let [a,b,c,d,e]=[1,2,3,[4,5],6];console.log(a,b,c,d,e);//1 2 3 [ 4, 5 ] 6

3.不完全解构

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

4.集合解构 …扩展运算符

 let [a,...b]=[1,2,3,4,5];console.log(a,b);

5.默认值解构（当匹配值严格等于undefined时，默认值生效）

let [a=1,b=2,c=3]=[4,5,6];
console.log(a,b,c);
//4 5 6
let [a=1,b=2,c=3]=[];
console.log(a,b,c)
//1 2 3

6.默认值也可以是函数

function test(){console.log('hello')}
let [a=test()]=[1];
console.log(a);
//1

function test(){console.log('hello')}
let [a=test()]=[];
console.log(a);
//hello
//undefined

let arr=[1,2,3,4];
let [...a]=arr;
console.log(a===arr);
//false

2.2对象解构

等号左边的变量放到大括号内部，匹配右侧对象中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值
1.

let {foo,bar}={foo:'hello',bar:"world"};
console.log(foo,bar);
//hello world

2.如果变量名和属性名不一致，需要重命名

let {foo:baz}={foo:"hello",bar:"world"};
console.log(baz);
// hello

3.对象的解构赋值是下面形式的简写前面属性名后边变量名

 let {foo:foo,bar:bar}={foo:'hello',bar:"world"};

4.嵌套结构

 let obj={p:['hello',{y:"world"}]};let {p:[a,{y:b}]}=obj;console.log(a,b);//hello world

5.默认值结构

let {x:y=3}={};
console.log(y);
//3

典型题:

const [a, b, c, ...d] = [1, 2, 3, 11, 999];
//1 2 3 [11,999]
const { e, f,f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
//undefined 4 undefined 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}

3.3.字符串解构

1.可以使用对象解构或者是数组解构，使用数组结构可以获取指定字符；使用对象结构可以获取实例属性方法;

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

2.也可以将string字符串转换为数组

let [...arr]='hello';
console.log(arr)
//[ 'h', 'e', 'l', 'l', 'o' ]

3.使用对象解构

let {toString,valueOf,length}='hello';
//相当于把‘hello’当成String基本包装器类型
console.log(toString,valueOf,length)
//[Function: toString] [Function: valueOf] 5

4.数值解构

可以获取到数值包装器构造函数原型中指定的方法。

let {toString,valueOf}=10;
console.log(toString,valueOf)
//[Function: toString] [Function: valueOf]

5.布尔值解构

let {toString,valueOf}=true;
console.log(toString,valueOf)
//[Function: toString] [Function: valueOf]

三.对象

ES6中对于Object的拓展主要是静态方法的拓展。

3.1.对象简写

ES6中规定可以直接在对象中写入变量和函数作为对象的属性和方法，此时属性名为变量名, 属性值为变量的值。对象简写在未来的使用频率极其高。

let name='larry';
let age=12;
let obj={name,age,//es5 sayName:function(){}// sayName(){//     console.log(this.name) --按照这种形式写this依然指向调用者// },// sayName:()=>{//     console.log(this)// }sayName(){//this-->objreturn ()=>{console.log(this)}}
}
obj.sayName()();

let name='larry';let age=12;let sayName=()=>{console.log(this)}let obj={name,age,//es5 sayName:function(){}// sayName(){//     console.log(this.name)// },// sayName:()=>{//   console.log(this)// }sayName(){return sayName}}// obj.sayName()()//箭头函数没有自己的this，内部this指向声明箭头函数时外部作用域中的this。obj.sayName()()

3.2API拓展

Object.is(a,b) 判断a,b两个值是否一样，类似于===
Object.assign() 深复制或者合并对象
Object.assign(obj1, obj2) 深复制,将obj2复制给obj1
Object.assign(obj1, obj2, obj3) 对象合并，将obj1、obj2合并后复制给obj1
Object.setPrototypeOf(obj1, obj2) 为目标对象设置原型，将obj2设置成obj1的原型
Object.getPrototypeOf() 获取目标对象的原型
Object.keys() 返回对象属性名组成的数组
Object.values() 返回对象属性值组成的数组
Object.entries() 返回对象[属性名, 属性值]组成的二维数组

四.扩展运算符

使用拓展运算符可以解构数组和对象，并返回解构后的新数组或者新对象

...用在=左边，聚合的作用（对象、数组的解构
...用在=右边，展开（剥离）的作用

let obj1 = {name: '张三'}
let obj2 = {...obj1,age: 12}
console.log(obj2)
//{ name: '张三', age: 12 }

 function log(x, y = 'World',d) { console.log(x, y);}// log(1,2)console.log(log.length)//1

五.数组

5.1API拓展

Array.from() 将其他类型数据转成数组
Array.of() 创建数组实例，实参就是数组的元素
Array.prototype.find() 返回满足条件的第一个元素，参数为函数
Array.prototype.findIndex() 返回满足条件的第一个元素的索引，参数为函数
Array.prototype.includes() 判断当前数组中是否包含某个元素，参数为元素，返回true/false
Array.prototype.fill() 填充数组（所有元素填充），修改数组原值
Array.prototype.keys() 返回索引的迭代器对象
Array.prototype.values() 返回元素的迭代器对象
Array.prototype.entries() 返回键值对的迭代器对象

let arr=[1,2,3,2,3];let result=arr.find((item)=>{return item>2})console.log(result)

let arr = [2, 3, 4, 5, 6, 2];
let keys=arr.keys();
let values = arr.values();
let entries = arr.entries();
console.log(keys, values, entries);

六.函数

6.1函数参数

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。通常情况下，定义了默认值的参数，应该是函数的尾参数，函数的length属性，将返回没有指定默认值的参数个数。

let myFun1=function(a,b,c=10,d){console.log(a,b,c,d); //null,1,10,undefined
}
myFun1(null,1);
console.log(myFun1.length); //2;长度只计算默认值前面的

6.2.箭头函数

ES6允许使用箭头(=>)定义函数
let myFun=()=>{}等价于let myFun=function(){}
特点：

1.箭头函数的this是静态的，this始终指向函数声明时所在作用域下的this的值（即继承上一层的this）
2.不能作为构造函数实例化对象
3.不能使用arguments
4.只有一个形参，()可以省略；函数体只有一条语句，{}可以省略

let obj={name:'zs',sayHello:()=>{console.log(this.name); //undefined},sayName(){return ()=>{console.log(this.name); //zs}}
}
obj.sayHello();
obj.sayName()();

es5函数内部属性有this和arguments,箭头函数内arguments不再保存实参,如果想接受实参，可以使用rest参数

let test=(a,...b)=>{//console.log(this,arguments);console.log(a,b);//a--1 b--[2,3,4,5]}
test(1,2,3,4,5)
//1 [ 2, 3, 4, 5 ]

箭头函数this指向
普通函数：this指向调用者,没有调用者指向global
箭头函数：没有自己的this,this指向’声明时’外部作用域的this
箭头函数写法
极简写法（形参只有一个时，可省略括号，只有一句返回语句时，箭头后面可直接写表达式）

let result = arr.filter(item => item > 5)

箭头函数完整写法=>

 let result = arr.filter((item) => {retrun item > 5})

 ES5写法=>let result = arr.filter(function(item) {retrun item > 5})

箭头函数比较适用this无关的回调（定时器），数组的方法回调
不适合与this有关的回调（DOM事件回调），对象的方法

6.3 函数参数解构

…用在形参位置，叫做 rest 参数，用于获取函数实参，代替arguments，rest参数必须放在参数的最后
arguments—是一个对象，rest—是一个数组

function test(a,...b){console.log(a,b);
}
test(1,2,3,4,5,6);
//1 [ 2, 3, 4, 5, 6 ]

1.函数参数对象解构

function test({name,age,...a}){
//...a解构剩余对象中的属性并返回一个新对象
//...用在函数形参位置，叫做rest参数，也叫拓展运算符的逆运算console.log(name,age,a);
}
test({name:"zhangsan",age:12,gender:1});
//zhangsan 12 { gender: 1 }

2.函数参数对象默认值解构

function test({name,age=1,...a}){console.log(name,age,a);
}
test({name:"zhangsan",gender:1});
//zhangsan 1 { gender: 1 }

3.函数参数数组解构

function test([a,b,c]){console.log(a,b,c);
}
test([,2,3]);
//undefined 2 3

七.Set

Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构展。
Set 构造函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化var set = new Set();
类似于数组，key和value是相同

1)特性：

不允许重复值出现

2)API

Set.prototype.size 返回Set实例的成员总数。
Set.prototype.add(value) 添加某个值，返回Set结构本身
Set.prototype.delete(value) 删除某个值，返回一个布尔值，表示删除是否成功。
Set.prototype.has(value) 返回一个布尔值，表示该值是否为Set的成员。
Set.prototype.clear() 清除所有成员，没有返回值。
Set.prototype.keys() 返回键名的遍历器
Set.prototype.values() 返回键值的遍历器
Set.prototype.entries() 返回键值对的遍历器
Set.prototype.forEach() 使用回调函数遍历每个成员

let arr=[1,2,3,4,5,5,4,6,7,7,'hello']
let set=new Set(arr)console.log(set.delete(1));

let arr = [1, 2, 3, 4, 4, 5, 3, 2, 1, 7]
let set = new Set(arr)
set.forEach((value) => {console.log(value);
})

3）set应用

set构造函数可以接受数组或者其他可遍历的数据结构

//1.数组去重
let arr=[1,2,3,5,3,2];
let result=new Set(arr);
console.log(result);
//2.将字符串转换为数组
let [...arr1]='hello';
console.log(arr1);
//3.将set集合转换为数组
let arr=[1,2,3,5,3,2];
let result=new Set(arr);
let [...arr2]=result;
console.log(arr2);
或者
console.log([...new Set(arr)])
或者
console.log(Array.from(result));

八.Map

Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。Map 可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
类似于对象，key-value对应的集合。

1)特点：

key值不局限于字符串，可以是任意数据类型

2)API

Map.prototype.size 返回 Map 结构的成员总数。 Map.prototype.set(key,
value) set方法设置键名key对应的键值为value，然后返回整个map结构。如果key已经有值，则键值会被更新，否则就新生成该键。
Map.prototype.get(key) get方法读取key对应的键值，如果找不到key，返回undefined。
Map.prototype.has(key) has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
Map.prototype.delete(key)delete方法删除某个键，返回true。如果删除失败，返回false。
Map.prototype.clear() 清除所有成员，没有返回值 Map.prototype.keys() 返回键名的遍历器
Map.prototype.values() 返回键值的遍历器 Map.prototype.entries() 返回键值对的遍历器
Map.prototype.forEach() 使用回调函数遍历每个成员

let obj={name:'jerry',age:12
}
let map=new Map(Object.entries(obj));
map.set({a:1,b:2},['tom','jacky']);
console.log(map);
/*Map(3) {'name' => 'jerry','age' => 12,{ a: 1, b: 2 } => [ 'tom', 'jacky' ]
}*/