文章目录
一.变量/常量声明
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-->obj
return ()=>{
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' ]
}*/