ES6语法大杂烩
1 块级作用域{}
2 let 与var的区别
let 定义块级作用域{} 在一个块级作用域当中不能重复声明
let arr=[];
for(var i=0;i<10;i++){
arr[i]=function(){
console.log(i); //10
}
}
arr[3]()
let arr=[];
for(let i=0;i<10;i++){
arr[i]=function(){
console.log(i);//3
}
}
arr[3]()
3箭头函数
// 箭头函数
// ()={} 在箭头函数当中this的指向是 指向定义它的函数的this
// 定时器当中定义的this指向window
4对象字面量的简写
ES5的写法
ES5: 定义对象字面量
let obj = {
age : age,
name: name,
say: function(){
console.log(1);
}
}
ES6的写法
let obj = {
age,
name,
say(){
console.log(1);
}
}
5类与继承
ES5写法
// :使用构造函数实现原型的继承
案例:
// :使用构造函数实现原型的继承
// 原型是写在外部定义的
// es5写法
function parent(name,age){
this.name=name;
this.age=age;
}
parent.prototype.run=function(){
console.log("run");
}
// 声明一个儿子的变量 实现父亲的参数与变量
// 使用call方法 1是调用父级所定义的变量 2更改this指向
// 使子级的this指向父级
function child(name,age,grade){
parent.call(this,name,age)
this.grade=grade; //这里的this指向的是c1
}
child.prototype=new parent();//子类的原型继承父类
child.prototype.study=function(){
console.log('study');//给子类的原型定义了一个方法
}
let c1=new child('lili',20,'111111');
let c2 =new child('ywy',18,'2222');
console.log(c1);
输出的结果是子类里面的方法 因为子类调用了父类声明的参数 this指向了c1声明的值 所以把父类的参数拿过来 调用了c1的值 结果输出的是子类调用后的参数与值
用ES6语法写
// :使用构造函数实现原型的继承
案例:
// es6写法
// 用es6来实现继承
class parent{
// constructor 属性返回对创建此对象的数组函数的引用
// es6常用语法 固搭
constructor(name,age){
this.name=name;
this.age=age;
}
//等同于es5向原型中添加对象
run(){
console.log('run')
}
}
class child extends parent{
constructor(name,age,grade){
//super固定搭配 调用父类的方法必须用这个
super(name,age)
this.grade=grade;
}
// 相当于es5给子类定义一个原型方法
study(){
console.log('study')
}
}
let c1=new child('lili',20,'111111111');
console.log(c1)
6模板字符串
渲染数据ES5与es6的区别
// ES5
data.forEach(item=>{
htmlStr += "<li>"+ item +"</li>"
})
//ES6
data.forEach(item=>{
htmlStr += `
<li>${item}</li>
`
})
7结构赋值
这是es5的结构赋值
// 结构赋值
// es5 这是ES5引入父的那个啥
let obj={
title:'1111',
price:200,
discount:300
}
let title,price;
title=obj.title;//1111
price=obj.price;//200
console.log(title,price)
这是es6的结果赋值
// es6
let obj={
title:'1111',
price:200,
discount:300
}
let {title,price}=obj;
console.log(title,price)
//7.1 数组解构赋值
// ES5
// let arr = [4,7,9,3];
// let num1 = arr[1]; //4
// let num2 = arr[2]; //7
// ES6
let arr = [4,7,9,3];
// let [num1,num2] = arr;
// let [,num1,num2] = arr;
// let [num1,num2,...num3] = arr;
let [num1,,,num2] = arr;
console.log(num1,num2);//4 3
8展开运算符
把数组当中的值一个一个拿出来 显示{
es5写法
// 展开运算符
// 实现数组的深拷贝(只有一层结构类型)
// 得到的是arr1的值
// es5
// let arr1=[1,2,3];
// let arr2=[];
// arr2[0]=arr1[0];//1
// arr2[1]=arr1[1];//2
// arr2[2]=arr1[2];//3
es6写法
// es6
let arr1 = [1, 2, 3];
//这个arr1中的元素一个一个拿出来,放在新的数组内
let arr2 = [...arr1];
console.log(arr2)
}
把每个div都过滤出来
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
let divList = document.querySelectorAll("div");
let targetDom = [...divList].filter(item=>{
console.log(item);
})
打印结果是 {<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>}
9 用es6写查找最小值
Math.min
let arr=[12,22,33,44,55,66,88]
consolt.log(Math.min(...arr))
把数组的值全部累加上去,得到最后结果
//让数组当中的所有值 累加出最后结果
let arr=[20,30,40];
function total(ch,en,math){
return ch+en+math;
}
// let result=total(arr[0],arr[1],arr[2])//es5
let result=total(...arr);//es6
console.log(result)
10合并数组
// 合并数组
var arr1=[4,5]
var arr2=[7,8]
let arr3=arr1.concat(arr2);//es5合并
// let arr3=[...arr1,...arr2];//es6合并
console.log(arr3);
</script>
11Symbol
获取唯一的不会重复的变量,是ES6新增的数据类型
let obj = {
name: '23',
count() {
console.log('count');
}
}
// 为了避免与封装的相互冲突 可以使用Symbol定义
let a = Symbol();
let b = Symbol();
// console.log(a===b);
// console.log(typeof a) // symbol
obj[a] = () => {
console.log('数量');
}
12数组遍历
// 遍历语句:
// for: (1)需要明确遍历次数 (2)不能遍历对象,可以遍历对象以外的集合 (3)可以使用break和continue
// forEach: (1) 可以遍历对象以外的集合 (数组,Set) (2)不能使用break和continue
// for...in (1)遍历对象 (2)不能直接访问对象的属性值
// for...of: (1)可以使用部署了Symbol.iterator的对象(自定义的对象不能使用for...of,但大部分原生的数据集合都可以使用) (2)可以使用break和continue
let obj = {
name: 'Peter',
age: 67
}
let set = new Set([6,8,'a'])
// for (let key of set){
// console.log(key)
// }
// for (let val of set.values()){
// console.log(val)
// }
for (let key of obj){
console.log(key)
}
13数组去重
用set方法数组去重
// let arr = [1,2,3,2,1,5]
// let result = [...new Set(arr)]
console.log( result)
- set的API属性
// add()
// delect()
// has
has() 方法返回一个布尔值来指示对应的值value是否存在Set对象中
// clear
let set=new set([1,2,3]);
set.add(7);//往set里面增加一个7
set.delect(2);//删除2的值
// set.has(11);
set.clear()//清空全部
14 默认参数与剩余参数
这个是如果radius = radius调用radius 里面的参数
然后不成立执行 100 直接输出100 后面执行
默认参数
function draw(radius){
radius = radius || 100;
console.log(radius);
}
draw(30)//30
// 默认(default)参数必须设置在最后
// function draw(y,x=2,z=20){
// console.log(x,y,z);
// }
// 如何用for each遍历出里面所定义的东西
let obj = {
name: '23',
count(){
console.log('count');
}
}
let count = Symbol();
let b = Symbol();
// obj[count] = ()=>{
// console.log('数量');
// }
// 返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串
Reflect.ownKeys(obj).forEach(key=>{
console.log(key,obj[key]);
})