es6小结

最新推荐文章于 2022-05-05 15:54:33 发布

aa67567456

最新推荐文章于 2022-05-05 15:54:33 发布

阅读量109

点赞数

分类专栏：学习小结

本文链接：https://blog.csdn.net/aa67567456/article/details/112993259

版权

学习小结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

et和const

let块级作用域:{就是代码块}向上寻找距离该变量最近的开始的函数的{作用范围就是该{}之内

{
let a=10;
}
console.log(a);会报错 let作用域是代码块以内的区域

let不能重复声明
会报错'm' has already been declared
let m=100;
let m=1;

没有变量提升的概念
Cannot access 'm' before initialization
console.log(m);
let m=10;

暂时性死区：在一个代码块内，如果有某个变量，会绑定该区域，不再受外界的影响，let没有变量提升的概念

let声明变量之前，不能使用

let m=100;
{
console.log(m); 暂时性死区
let m=10;
}

// 重复声明
// let a=10;
// var a=10;
//重复声明
// let a=10;
// {
// var a=10;
// }
// 不会报错
// var a=10;
// {
// let a=10;
// }
// let a=10;
// {
// var a=10;
// }
let a=10;
(function add(){
var a=10;
}
)();

const

声明的是常量，值是不可以改变的(不能重新赋值)，其余语法和let一样

const a=5000;
// a=100;
// stu是对象，在内存中以地址的形式存储，
const stu={
name:'zs'
}
// 修改了数据。所以地址没有变化。不会报错
stu.name='ls';
// 重新赋值会报错。
stu={
name:'ls'
}

字符串扩展

var pro={
title:'华为手机',
price:4999
}
product.innerHTML+="<tr><td>"+pro.title+"</td><td>"+pro.price+"</td></tr>";
// 模板字符串在变量和常量拼接的时候使用整个字符串使用`${变量}`
product.innerHTML+=`<tr>
<td>${pro.title}</td>
<td>${pro.price}</td>
</tr>`;
// 标签模板 ``可以跟在一个函数后面，该函数将被调用来处理这个模板字符串。这被称为模板标签功能
// alert(123);
// alert`123`;
//
function fn(x,y){
// console.log(x,y)
console.log(arguments);
};
// fn(1,23);
// 解析函数参数的时候，会把参数解析成一个数组形式
fn`1,23,23,23,45`;
// 模板字符串作为函数参数参数存在。会执行函数。自动解析参数把所有常量拼接成一个数组。变量依次拼接到数组后面
var m=10;
var n=100;
fn`hello${m}zsh${n}m${m+n}n`;
// 等价于
// fn(['hello','zsh','m','n'],m,n,m+n);

解构

解构：es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这称为解构

es5中，如果对多个变量赋值
let a=10;
let b=100;
let c='h';

// 数组的解构,按照数组顺序依次赋值。如果变量多余，相当于声明不赋值。如果数据多余，对变量没有影响
var [a,b,c,d]=[10,100,'h',12,3,4,4,5];
console.log(a,b,c,d);

// 快速交换值
let m=12;
let n='my';
[n,m]=[m,n];
console.log(m,n);

对象的解构赋值使用的是{}
对象的解构与数组的解构有一个重要的不同，数组的元素是按次序排列的
数组解构中，变量的值由所处的位置决定。对象的属性没有次序，变量必须与属性同名才可以，才可以取到正确的值。

var stu={name:'zs',age:12};
// hobby相当于声明了没有赋值。
let {name,age,hobby}=stu;
console.log(name,age,hobby);
// 字符串的解构。按照字符串的顺序依次赋值和数组解构类似
let [x,y,z]='hello';
console.log(x,y,z);
// 类似数组的对象都有一个length属性，可以对该属性进行解构赋值。
let {length:len}='zsh';
console.log(len);
// 函数的解构赋值，类似于数组的解构解构
function add([a,b]){
console.log(a,b);
console.log(a+b)
}
add([3,4]);
// 相当于把字符串3赋值给了a 字符串4赋值给了b
add('34');

数组扩展

var arr=new Array(10);
// 长度为10的数组。
console.log(arr);
// Array.of()对new Array()的扩展。不论输入什么，都代表的是数组元素。
arr=Array.of(10);
console.log(arr);
// Array.from()把类数组转化为数组
var btns=document.getElementsByTagName('button');
console.log(btns);
console.log(btns instanceof Array);
btns=Array.from(btns);
// foreach不能用来遍历类数组，能遍历数组
btns.forEach(function(item,index,arr){
console.log(arr);
})
// 类数组一定要严格按照格式来写属性名是0 1 2 并且一定要有length。如果转化为了数组，最终的长度由length的值
var arr1={
0:'z',
1:'s',
2:'h',
length:5
}
arr1=Array.from(arr1);
arr1.forEach(function(item,index,arr){
console.log(item);
})
var score=[98,60,48,56];
// 数组.find(function(n代表数组元素){条件})得到的结果是第一个符合条件的数组元素的值。从左到右寻找如果找不到结果是undefined。
// var m=score.find(function(n){return n<0});
// console.log(m);
// 数组.findIndex(function(n代表数组元素){条件})得到的结果是第一个符合条件的数组元素的下标。从左到右寻找如果找不到结果是-1。
var m=score.findIndex(function(n){return n>60});
console.log(m);

construto

construtor方法是类的默认方法，一个类必须有constructor方法。
如果没有显示定义，一个空的constructor方法会被默认添加
通过new命令生成实例对象的时候，自动调用该方法

constructor默认返回的是实例对象。完全可以指定返回另外一个对象

es6中的继承

es6中通过extends关键字实现继承。比在es5中通过原型链实现继承，要清晰和方便。更偏向传统编程语言

class Cat extends Animal{
constructor(name,color,type){
// super继承来自父级的属性(相当于把父级的属性一一复制过来)
// 如果constructor没有该属性传递不过来，直接书写属性会报错 super(name,color,price)
super(name,color);
this.type=type;
}
}
class Dog extends Animal{
constructor(name,color,price,type){
super(name,color,price);
this.type=type;
}
}
// 把实参的值，赋值给了constructor
var cat1=new Cat('花花','白色','波斯猫');
console.log(cat1);
// 属性是自有的，不继承。
console.log(cat1.hasOwnProperty('name'));
cat1.eat();

继承相关问题

原型链：当从一个对象那里调取属性或方法时，如果该对象自身不存在这样的属性或者方法，
就会去关联的prorotype那里寻找，如果prototype没有。就会去prototype关联的prototype那里寻找。如果还没有，会一直向上寻找
直到prototype....prototype..为null。从而形成了原型链(根本上来说就是继承)
a.isPrototypeOf(b) 判断a是否存在b的原型链中

在子类的constructor中必须要有super关键字，如果不写，会报错
                     子类的this关键字根据super方法创建
                     子类实例对象的构建，是基于父类实例进行加工。只有super方法才可以返回父类实例
                     super();

class Cat extends Animal{
constructor(name,color,type){
// super继承来自父级的属性(相当于把父级的属性一一复制过来)
// 如果constructor没有该属性传递不过来，直接书写属性会报错 super(name,color,price)
super(name,color);
this.type=type;
}
}
var c1=new Cat('花花','白色','波斯猫');
class BSM extends Cat{
constructor(){
// 在子类的constructor中必须要有super关键字，如果不写，会报错
// 子类的this关键字根据super方法创建
// 子类实例对象的构建，是基于父类实例进行加工。只有super方法才可以返回父类实例
// super();
}
}
var b1=new BSM();
console.log(Animal.prototype.isPrototypeOf(c1));
console.log(Animal.prototype.isPrototypeOf(b1));
console.log(Cat.prototype.isPrototypeOf(b1));

get和set

class Circle{
constructor(){
this.r=10;
}
// get方法获取的值的时候会自动调用一定要加返回值
get acr(){
return Math.PI*this.r*this.r;
}
// set方法设置值的时候会自动调用实参是通过等于号赋值。
set acr(value){
this.r=value
}
}
var c=new Circle();
// console.log(c.acr);
// 调用的是set方法
c.acr=1;
// 调用的是set方法
// console.log(c.acr);

静态方法和静态属性

// Math.random() Math.PI
class Cat{
// 类中的方法前面如果加了sataic关键字，该方法就是静态方法
// 静态方法只能通过类名直接调用。
static eat(){
console.log('这是静态方法，需要通过类直接调用')
}
}
// 静态属性指的是类本身有的属性，通过类名.属性名直接调用。不需要实例化对象调用
Cat.type='XXX';
var c=new Cat();
// c.eat(); 会报错 cat是静态方法
Cat.eat();
console.log(Cat.type);
// 静态方法和静态属性可以被子类继承
class Bsm extends Cat{
constructor(){
super()
}
}
Bsm.eat();
console.log(Bsm.type);

私有方法

class Cat{
eat(){
this._food()
}
// 在es6的提案，提到了如果方法名以_开始，默认只能在类中调用，不能被继承或者被实例对象使用，但是目前没有什么用
_food(){
console.log('这是水果');
}
}
var c=new Cat();
c._food();

aa67567456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6小结

et和constlet块级作用域:{就是代码块}向上寻找距离该变量最近的开始的函数的{作用范围就是该{}之内 { let a=10; } console.log(a);会报错 let作用域是代码块以内的区域 let不能重复声明会报错'm' has already been declaredlet m=100;let m=1;没有变量提升的概念 Cannot access 'm' before initializat...
复制链接

扫一扫