let 、const
let
1)、let作用域只限于当前代码块
{
let a = 12;
}
console.log(a); //报错，a不存在
2)、let声明的变量作用域不会被提升
{
console.log(a); //报错
let a = 12;
}
3）、在相同的作用域下不能声明相同的变量
{
let a = 10;
let a = 11; //报错
}
4）、for循环体现let的父子作用域
//使用var声明，需要用到“闭包”
var btns = document.querySelectorAll("button");
for(var i=0;i<btns.length;i++){
（function(i){
btns[i].onclick= function (){
alert("点击了"+i+"个按钮")
}
})(i);
}
//let声明
let btns = document.querySelectorAll("button");
for(let i=0;i<btns.length;i++){
btns[i].onclick= function (){
alert("点击了"+i+"个按钮")
}
}
const
(1)、const作用域只限于当前代码块
(2)、const声明的变量作用域不会被提升
(3)、在相同的作用域下不能重复声明
(4)、声明的同时必须赋值，声明后值无法改变
{
const b; //报错
const a = 123;
a = 222; //报错
}
注意：针对"对象"就不一样了，如下：
{
const obj = {
name:"lisi"
}
console.log(obj.name); //lisi
obj.name = "zhaoliu";
console.log(obj.name);//zhaoliu
}
//在上面中定义的是一个常量对象，对象是储存在内存的“堆区”，通过一个地址描述出来，在“栈区”关联此地址。
所以，obj存储的是地址，而不是值，是可以做修改的。
结构赋值
ES6允许按照一定的模式从数组和对象中提取值，对变量进行赋值，这被称为解构。
（1）、基本用法
//以前的定义方法
let name = "李四";
let age = 20;
let sex = "女"
//新的定义方法
let [name,age,sex] = ["李四",20,"女"]; //console.log(name)-->李四
(2)、对象的解构赋值
//前面的key值和后面的key值相对应的
let {name,age,friends} = {name:"zhangsan",age:12,friends:["lulu","女"]};
console.log(name); //zhangsan
(3)、嵌套数组的解构赋值
//只要一一对应就可以
let [a1,[a2,a3,[a4,a5]]] = [1,[2,3,[4,5]]];
console.log(a1,a2,a3,a4,a5); //1，2，3，4，5
4）、字符串的解构赋值
let [a,b,c,d,e] = "我是中国人";
console.log(a); //我
console.log(b); //是
console.log(c); //中
console.log(d); //国
console.log(e); //人
（5）、空缺变量
let [a,b,,e]=['a','b',[1,2],4]
(6)、多余变量
let [a,b,,e,f]=['a','b',[3,4],5]
注意：因为字符串有构造器，所以可以解析出来。
数据集合: set
1 特点
① 类似于数组，但没有重复的元素（唯一的）;
② 开发中用于去除重复数据;
③ key和value都是相等的;
let set = new Set(['zhangsan','zhangsan','lisi','wangwu']);
console.log(set); // zhangsan ,lisi ,wangwu
2 一个属性
let set = new Set(['zhangsan','zhangsan','lisi','wangwu']);
console.log(set.size); // 3
3 四个方法
① add方法：
vlet set = new Set(["zhangsan","lisi"]);
console.log(set); // {"zhangsan", "lisi"}
set.add("wangwu");
console.log(set); // {"zhangsan", "lisi", "wangwu"}
②delete方法：
let set = new Set(["zhangsan","lisi"]);
//直接将删除的值传进去即可
set.delete("lisi");
console.log(set); //{"zhangsan"}
③has方法：
let set = new Set(["zhangsan","lisi"]);
console.log(set.has("lisi")); //true
④clear方法：
let set = new Set(["zhangsan","lisi"]);
set.clear(); // 此时set为空了
数据集合：map
(1)、特点
① 类似于对象，本质上是键值对的集合;
② "键"不局限于字符串，各种类型的值（包括对象）都可以当做键;
③ 对象"字符串——值",Map"值——值",是一种更完善的hash结构实现;
//创建map
let obj1 = {a:1}, obj2 ={b:2};
const map = new Map([
['name','张雪'],
["age",21],
["sex",'男'],
[obj1,"haha"],
[obj2,'wowo']
]);
console.log(map); //{"name" => "张雪", "age" => 21, "sex" => "男", Object => "haha",Object => "wowo"}
结果如图所示：
[图片上传失败...(image-87cc5f-1573571535373)]
(2)、一个属性
const map = new Map([
['name','张雪'],
["age",21],
["age",21],
["sex",'男']
]);
console.log(map.size); //3
(3)、五个方法
① get/set方法：
const map = new Map([
['name','张雪'],
["age",21],
["age",21],
["sex",'男']
]);
console.log(map.get("name")); // "张雪"
map.set("A","aa");
console.log(map.get("A")); // aa
② delete方法：
map.delete("age");
console.log(map); // {"name" => "张雪", "sex" => "男", "A" => "aa"}
③ has方法：
console.log(map.has("sex")); //true
④clear方法：
map.clear();
console.log(map); //map为空
⑤keys、values、entries
map.keys(); // {"name", "age", "sex"}
map.values(); // {"张雪", 21, "男"}
map.entries(); // {"name" => "张雪", "age" => 21, "sex" => "男"}
⑥遍历
map.forEach(function(value,key){
console.log(key +":"+value);
});//name:张雪 age:21 sex:男
注意：
const map = new Map([
['name','张雪'],
["age",21],
["age",21],
["sex",'男']
]);
//因为对象存储在堆区，存在的地址是不同的，所以一下两个都会被set进map中。
map.set({},"hehe");
map.set({},"qq");
console.log(map);
Symbol
(1)、应用场景：
ES5的对象属性名都是字符串，容易造成属性名冲突；ES6 引入新的原始数据类型
Symbol，表示独一无二的值。
（2）、对象的属性名两种形式
①字符串
②symbol类型（独一无二，不会与其他属性冲突）
//定义一个symbol
let str1 = Symbol();
let str2 = Symbol();
console.log(str1 === str2); //false
console.log(typeof(str1)); //Symbol
//symbol主要用于对象属性的定义，且定义的属性是唯一的
const obj = {};
obj[Symbol("name")]="zhangsan";
obj[Symbol("name")]="lisi"
console.log(obj);//{Symbol(name): "zhangsan", Symbol(name): "lisi"}
7、class
（1）、ES6中新增的语法糖，作用在于让对象原型的写法更加清晰，更像面向对象的编程方式。也是构造函数的另一种写法。
//构造函数写法
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
constructor:Person,
print(){
console.log("我叫"+this.name+",今年"+this.age+"岁")
}
}
let person = new Person("张三",12);
person.print(); //我叫张三，今年12岁
// class面向对象
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
print(){
console.log("我叫"+this.name+",今年"+this.age+"岁")
}
}
let person = new Person("张三",12);
person.print();//我叫张三，今年12岁
8、模板字符串
模板字符串在Vue.js中使用的比较多的。使用 `` 符号，这样可实现代买的格式化。
let str = "你好！";
let className = "red";
let html = `<html>
<head>今天天气很好！</head>
<p class="${className}"> ${str} </p> //这里使用${}的形式调用变量
</html>`
console.log(html);
9、数组的扩展
（1）、Array.from
let list = document.querySelectorAll("li")
console.log(Array.isArray(list)); //false
Array.from(list); //将非数组list转为数组
console.log(Array.isArray(Array.from(list))); //true
（2）、Array.of
Array.of(1,2,3,4); //将零散元素转为数组
console.log(Array.isArray(Array.of(1, 2, 3, 4))); //true
10、对象的扩展
(1)、
let obj = {
"name":"lisi",
"age":12
}
console.log(obj); //{name: "lisi", age: 12}
(2)、ES6中key和value一样时，直接写一个即可。
//这种写法等同于下面的方法，常用下面的方法
let name = "zhangsan"
let age = 12
let obj = {
"name":name,
"age":age
}
console.log(obj);
//方法同上
let name = "zhangsan"
let age = 12
let obj = {
name,
age
}
console.log(obj);
(3)、assign用法：
let obj1 = {name:"lisi"};
let obj2 ={age:21};
let obj = {};
Object.assign(obj,obj1,obj2);//将obj1,obj2合并到obj上。
console.log(obj);//{name: "lisi", age: 21}
(4)、延展操作符
let str = "张三";
let strArr =[...str];//["张", "三"]
console.log(Array.isArray(strArr)); //true
主要用于数据传递和数组去重。
let myArr = [1,2,10,"zhangsan",20,2,1];
console.log(new Set(myArr));//根据set唯一性去重
let newArr = [...new Set(myArr)]; //将set转为array
console.log(Array.isArray([...new Set(myArr)])); //true
10、函数扩展
（1）、形参设置默认值
//ES6中，直接将的形参设置默值
function sum(num1 = 10,num2 = 10){
console.log(num1 + num2);
}
sum(); //20
sum(1,3); //4
（2）、参数形式
//在不清楚元个数时，使用延展操作符代替
function sum(name,...nums){
console.log(name)
let result = 0;
for(let value of nums){
result += value
}
return result;
}
console.log(sum("李四",1,45,3,2)); // 李四 51
网友评论