一、ES6的语法
1、let和const
(1)let:用来声明块级变量。var声明的变量会出现作用域的提升(会出现变量的污染)
(2)const:声明的常量必须要初始化
(3)const声明的对象:
a、可以修改对象的属性值,但不能修改对象本身
const obj ={
name:'张三',
age:24
}
obj.name='李四' //正确的:修改对象的属性
obj ={} //错误的:不能修改对象
b、冻结对象,不能修改对象的属性。使用Object.freeze(对象名)
const obj = {
name: '张三',
age: 25
}
console.log(obj);
Object.freeze(obj); //冻结对象obj,不能修改obj的属性
obj.name = '王五';
console.log(obj);
c、冻结嵌套对象
const p = {
name: '张三',
age: 25,
family: {
father: '李世民',
mother: '长孙皇后',
}
}
//定义一个冻结函数
function fun(obj) { //函数的参数对象
//1.冻结对象:参数接受的对象
Object.freeze(obj);
//2.使用for...in循环遍历对象的属性
for (let key in obj) { //key='father'
//2.1 hasOwnProperty用来判断对象是否包含给定的属性。typeeof用来判断数据类型
if (obj.hasOwnProperty(key) && typeof obj[key] === 'object') { //obj['name'] --- String obj['age'] --- Number obj['family'] --- Object
fun(obj[key]);
}
}
}
fun(p);
p.family.father = '李建成';
console.log(p);
hasOwnProperty(key)函数:判断key是否是对象的属性,若是返回true,若不是返回false
二、ES6的新语法
1、临时死区:用let和const声明的遍历,放在’临时死区‘,使用let声明的变量、const声明的常量的作用域不会被提升
2、在循环中使用var的情况:
let arr=[]
for(var i=0;i<5;i++){ //var定义的i是全局的,若将var改成let,则输出1 2 3 4
arr.push(function(){ //arr是一个函数数组:数组的每个单元都是函数
console.log(i);
})
}
arr.forEach(function(item){ //item是函数:输出5个5
item();
})
3、解构赋值:Rest运算符:”...“
(1)当迭代器使用:会按顺序遍历容器中的元素
function fun(x,y,z){
console.log(x,y,z);
}
let arr=[11,22,33];
// fun (arr[0],arr[1],arr[2]);
fun (...arr); //'...'运算符的作用是一个迭代器:依次遍历数组中的元素
</script>
(2)替代函数的内置属性arguements
function fun(...args) {
console.log(args);
}
let arr = [11, 22, 33];
fun(...arr);
(3)通过解构赋值可以简化变量的赋值
let arr = [11, 22, 33];
let [a, b, c] = arr;
console.log(a);
(4)通过”...“把特定的元素放在变量里
let [a,...arr]=[11,22,33]; //将11赋给a,将22,33赋给arr,arr就是一个数组
console.log(a);
console.log(arr);
(5)通过解构来交换变量的值
let a = 10;
let b = 20; //必须要以分号结尾
[a, b] = [b, a];
console.log(a, b);
4、对象的解构
(1)将对象的属性解构出来赋给变量
let obj = {
id: 1001,
userName: '关羽',
sex: '男'
}
let { id, userName, sex } = obj; //变量名必须和对象的属性名相同
console.log('编号:', id);
console.log('姓名:', userName);
console.log('性别:', sex);
(2)解构多层对象
let obj = {
id: 1001,
userName: '关羽',
sex: '男',
score: {
html: 85,
css: 95,
js: 85,
}
}
let { id, userName, sex, score: { html, css, js } } = obj; //变量名必须和对象的属性名相同
console.log('编号:', id);
console.log('姓名:', userName);
console.log('性别:', sex);
console.log('css的成绩', css);
(3)在解构时可以给变量取别名
let obj = {
id: 1001,
userName: '关羽',
sex: '男',
score: {
html: 85,
css: 95,
js: 85,
}
}
let { id: userId, userName: name, sex, score: { html, css, js } } = obj; //变量名必须和对象的属性名相同,userId是id的别名,name是userName别名
console.log('编号:', userId);
console.log('姓名:', name);
console.log('性别:', sex);
console.log('css的成绩', css);
5、模板字符串:使用反引号``和$ { 变量名 } 将字符串常量和变量写在一个串里。就不需要使用‘+’进行字符串的拼接
6、Symbol类型
(1)ES5的数据类型:number、string、boolean、bigint、null、undefined、object
(2)ES6新增的Symbol:表示一个唯一的值
a、直接创建:let 变量名 = Symbol
b、间接创建:传字符串 let 变量名 = Symbol(字符串)
7、Set集合:是一种数据结构,里面不能存放重复的值,所以用于数组去重、字符串的去重
(1)创建方式:
a、使用new运算符:let 变量 = new Set()
b、通过数组来创建:let 变量名 = new Set([1,2,3,4,5,6]),去除重复元素
let s1 = new Set(); //创建一个空集合
console.log(s1);
let arr = [1,2,3,4,5,6];
let s2 = new Set(arr);
con.log(s2);
(2)常用的方法:
a、add():向集合中添加元素
b、delete():删除集合中的元素。删除成功返回true,删除失败返回false
c:has(val):判断val在集合中是否存在,若存在返回true,不存在返回false
d、clear():清空集合,没有返回true
e、values():获取的是集合中所有value
f、keys():获取集合中的key
强调:Set集合也是key-value格式,它的key和value是相同的
(3)属性:size存放的是集合中元素的个数
(4)遍历方法:
a、for...of
for(let i of s1.keys()){
console.log(i);
}
console.log('Size:',s1.size);
b、forEach
s1.forEach(function(value,key){
console.log(value+'-----'+key)
})
(5)集合运算
a、并集
let setA = new Set([4, 5, 6]);
let setB = new Set([5, 6, 7]);
//1.实现setA与setB的并集
let bj = new Set([...setA, ...setB]);
console.log(bj);
b、交集
let setA = new Set([4, 5, 6]);
let setB = new Set([5, 6, 7]);
/*2.实现setA与setB的交际:通过过滤器实现
[...setA]:解构集合setA,将其转换为数组
*/
let arr = [...setA]; //解构集合setA,将其转换为数组
//对arr进行过滤:使用filter函数
//第一种
let temp = arr.filter(function (item) { //依次从arr中取出元素传递给item,在函数体内设置筛选的条件,将满足条件的元素返回给temp
// return setB.has(item); //将满足条件的item返回(简写)
if(setB.has(item)){
return item
}
})
console.log(temp);
//第二种
let t = [...setA].filter(function (item) {
return setB.has(item);
})
console.log(t);
c、差集
let setA = new Set([4, 5, 6]);
let setB = new Set([5, 6, 7]);
/*2.实现setA与setB的交际:通过过滤器实现
[...setA]:解构集合setA,将其转换为数组
*/
let arr = [...setA]; //解构集合setA,将其转换为数组
//对arr进行过滤:使用filter函数
//第一种
let temp = arr.filter(function (item) { //依次从arr中取出元素传递给item,在函数体内设置筛选的条件,将满足条件的元素返回给temp
// return setB.has(item); //将满足条件的item返回(简写)
if(setB.has(item) == false){
return item
}
})
console.log(temp);
//第二种
let t = [...setA].filter(function (item) {
return setB.has(item);
})
console.log(t);
问题1:创建Set集合时为什么要用new运算符?
Set是一个构造函数,凡是用构造函数创建对象是都要有new
问题2:Set构造方法的参数为什么是数组或null?
底层代码规定的
8、WeakSet集合:只是一个对象集合。即集合中只能存放对象。它支持add、has、和delete方法
练习:创建构造函数Student,它的属性有id、name、html、css、js。
(1)利用改构造函数创建5个对象,并将这5个对象存放到Set集合中
(2)把css成绩不及格的对象挑选出来
//1.构造函数
function Student(id, name, html, css, js) {
this.id = id;
this.name = name;
this.html = html;
this.css = css;
this.js = js;
}
//2.创建对象
let s1 = new Student('1001', '小明', '60', '58', '77');
let s2 = new Student('1002', '小红', '62', '53', '66');
let s3 = new Student('1003', '小率', '88', '72', '87');
let s4 = new Student('1004', '小栏', '60', '66', '72');
let s5 = new Student('1005', '小白', '65', '59', '65');
//3.创建数组
let all = new Set([]); //set空对象数组
all.add(s1).add(s2).add(s3).add(s4).add(s5); //添加对象
console.log(all)
//4.输出css不及格人员
// for(let value of all){
// if(value.css<60){
// console.log(value)
// }
// }
let arr = [...all];
let temp = arr.filter(function (item) {
if (item.css < 60) {
return item
}
})
console.log(temp)