let

let 和 var 的主要区别

let声明的变量只在当前（块级）作用域内有效

let声明的变量不能被重复声明

var还能再次声明修改

ES6 块级作用域

通俗讲就是一对花括号中的区域{…} 但在声明对象除外

可以嵌套

const

声明常量声明的时候必须赋值声明后不能被修改

与let类似的特性

不存在提升不能重复声明只在当前作用域内有效

一般大写来表示是一个变量

常量为引用类型的时候可以修改该引用类型

const xiaoming={age:14,name:'小明'
}
xiaoming.age=22;const ARR=[]
ARR.push(1);//引用的地址是不变的

防止常量为引用类型的时候能被修改的情况,用Object.freeze的方法

const xiaoming={age:14,name:'小明'
}
Object.freeze(xiaoming)
xiaoming.age=22;

解构赋值

是js表达式,这使得可以将值从数组或属性从对象提取到不同的变量中

数组的解构赋值

简单的

const arr =[1,2,3,4];
let[a,b,c,d] =arr

a对应1 b对应2 c对应3 d对应4

复杂的

const arr =['a','b',['c','d',['e','f','g']]];
const[ , b]=arr;//找数组中的b
const[ , , g]=['e','f','g'];//找efg数组中的g
const[ , , [ , , g]]=['c','d',['e','f','g']];//找g
const[ , , [ , , [ , , g]]]=arr;//找g

扩展运算符(…)

const arr1=[1,2,3];
const arr2=['a','b'];
const arr3=['zz',1];
const arr4=[...arr1,...arr2,...arr3];//将前三个数组合并成一个数组
用法
const arr = [1,2,3,4];
const [a,b,...c]=arr;//c包含了3 4

默认值

const arr=[1,null,undefined];
const [a,b=2,c,d='aaa']=arr;

如果arr中默认undefined,那么下面的数组中若有数值可以直接赋值

但如果arr中默认是null, 则输出依然是null,不会改变

交换变量

let a=20;
let b=10;
[a,b]=[b,a];//即可交换数值

接收多个函数返回值

function getUserInfo(id){return[true,{name:'xiaoming',gender:'nv',id:id},'请求成功'];
};
const [status,data,msg]=getUserInfo(123);//那么结果输入的是status data msg 输出的就是 status->true,data->name,gender,id msg->请求成功

对象的解构赋值

主要用途:1.提取对象属性

 const {name,hobby:[hobby1],hobby}={name:'xiaohogn',hobby:['xuexi']}

2.使用对象传入乱序的函数参数,与位置无关 AJAX里可以随意排序

function AJAX({url,datatype='get'//没有就默认get
}){}
AJAX({url:'/ssss',data:{a:1},
})

3.获取多个函数返回值

function getUserInfo(id){return{status：true,data:{name:'xiaoming'},msg：'请求成功'
};
};
const {status,data,msg:message(命名)}=getUserInfo(123);//那么结果输入的是status data msg 输出的就是 status->true,data->name,gender,id msg->请求成功

对象的解构赋值

const obj={saber:'啊啊啊啊'archer:'wei'
};
const {saber,archer}=obj

复杂

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ED4n7ozb-1643190869510)(…/AppData/Roaming/Typora/typora-user-images/image-20211225162335101.png)]

第三个const 取skiil中的skill1 (skill不能输出)

结合扩展运算符(…oth)

const obj={saber:'sss'archer:'sss'lancer:'aaa'
};
const{saber,...oth}=obj;//得到saber以外的两个值

默认值

let girlfriend = {name:'xxx',age:22,
};
let {name,age=24,hobby=['study']}=girlfriend;

和数组类似

字符串解构赋值

const str='i ma si js js '
const [a,b,c, ...oth]=str//m及其之后的字符都可以分割开然后放入oth中

函数解构赋值

数值
function swap([x,y]){return [y,x];
}//数值调换
let arr=[1,2]
arr=swap(arr);
对象
function Computer({cpu,memory,software=['ie6'],OS='windows 3.5'
}){console.log(cpu)
};
new Computer({memory:'128G',cpu:'80888',OS:'windows 10'
});

json处理

const json = '{"teacher": "yy", "leader": "xk"}';const obj = JSON.parse(json);const {teacher,leader
} = JSON.parse(json);

字符串扩展

模板字符串

const xm = {name:'xiaoming',age:14,say1:function(){console.log('我叫'+ this.name+',我今年' +this.age+'岁');},say2:function(){console.log(`我叫${this.name},我今年${this.age}岁`);console.log(`我叫${`mr.${this.name}`},我今年${this.age}岁`);}
}

不用写say1里的加号即可用${}来代替之前的+号

'<li>\<span>'+ title +'</span>'+'<span>'+ date +'</span>'+
'</li>'

`<li><span>${title}</span><span>${date }</span></li>`

字符串部分新方法

padStart padEnd

padStart 在末尾加

padEnd 在开头加

{let str='i';let str1= str.padStart(5,'mooc');//moocilet str2= str.padEnd(5,'mooc');//imooc
}

repeat

重复输出

{console.log('i'.repeat(5));//iiiiifunction repeat(str,num){return new Array(num+1).join(str);}console.log(repeat('s',3));//333
}

startsWith endsWith

查看开头/结尾返回布尔值

const str='A promise is a promise'
console.log(str.startsWith('B'));//false
console.log(str.startsWith('A pro'));//trueconsole.log(str.endsWith('promise'));//true
console.log(str.endsWith('A pro'))//false

includes

看看是否包括字符

const str='A promise is a promise'
if(str.includes('promise'))
console.log(true)//true

for of

遍历

const map={P:'100',R:'99',O:'98',M:'97',I:'96',S:'95',E:'94'}
const words='PROMISE'
let str='PROMISE'
//for(let word of str){//  console.log(word)
//}
let newStr='';
for(let word of str){if(word.includes(word))newStr +=map[word];
}
console.log(newStr)//100999897969594遍历字符串并加密

unicode表示法

unicode是一项标准包括字符集、编码方案等

为了解决传统的字符编码方案的局限而产生的，为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求

\u{超过并包括5位的unicode}

eg:\u{1f436}

‘转的东西’.codePointAt(0); 获取字符串的码 ///在控制台中输入

codePointAt(0).toString(16)将获得的码转为16进制

正则扩展

y 黏连修饰符只匹配连着的字符中间断了就不匹配了

const r1=/imooc/y
const str='imoocimooc-imooc'
console.log(r1.exec(str));//0
console.log(r1.exec(str));//5
console.log(r1.exec(str));//null

数值扩展

新的进制表示法

八进制 0O 0o

二进制 0b 0B

新的方法与安全数

Number.parseInt Number.parseFloat

console.log(Number.parseInt(1.23));
console.log(Number.parseFloat(1,23));

Number.isNaN

Number.isFinite //是正儿八经的数字才会返回true

安全数(判断是否在安全范围内 -9007199254740991~9007199254740991)

Number.isSafeInteger(Number.MAX_SAFE_INTEGER - 1) ///true

Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1)///false 比最大值大一

**幂运算 ** 自动从右往左计算

console.log(2**2)//2的平方

函数扩展

函数参数的默认值

function add(a,b=999 + a,c){直接在()中给默认值/表达式 表达式不能出现b后面的变量 比如在b后面在加一个Cb=999 + c//false   也不能加自己本身 b=999 + b//false
}

与扩展运算符结合(剩余参数)

function sum(...args){console.log(args);
}//做一个聚合
sum(1,2,322,1232,'asdasda')function op(type,...nums){可以跟好多参数 剩余参数必须在最后一位
}
op('sum',1,23,123,123,4,123);

箭头函数=>

与普通函数的方法区别

const add=(a,b) =>{a += 1;return a + b;
};
===
const add=function(a,b){ a += 1;return a + b;
};

与普通函数相比没有arguments对象,但可以用扩展运算符代替

const log=(...args)=>{console.log(arguments)
}

箭头函数this指向window 但可以通过方法设置

const xiaomign={name:'xiaoming',age: null,getAge: function(){setTimeout(()=>{this.age=14;//这个this是getAge的this 而getAge是xioaming的函数console.log(this);},1000)}
}

对象扩展

简洁表示法与属性名表达式

简洁表示法

const  name ='xiaomign';
const age=10;
return{name,//简写age,//简写say(){//原say:function()............}
}

属性名表达式

不合法的属性名带上单引号

用[’ ']访问

const obj={a:1,$abc:2,'sdahidhisadhiasd':3
}const xiaomign={name:'xiaomign',['asd'+'sdas']:14//可以是一个简单的表达式来赋值 也可以是模板字符串
}

类

其实就是对一个事物的封装

class Car{//构造函数固定的名字//实例化 =>类创建对象的过程constructor(...arg){alert('开始造车')}
}new Car('蓝色',3);//调用构造函数

属性：轮子个数颜色长宽

方法：加速刹车鸣喇叭

class Car{constructor(wheel,color,length,width){this(指car 能在类中被访问).wheel=wheel;this.color=color;this.length=length;this.width=width;this.speed=0; }//加速speedUp(){this.speed +=1;}
}
const car=new Car (3,'蓝色',20,30);//需要新的就在new一个 car
console.log(car);

面向基本对象三大基本特性

多态(支持的基本没有):同一个接口不同的表现继承封装

类的多态

同一个接口在不同情况下做不一样的事情

相同的接口不同的表现

接口本身只是一组定义实现都是在类里面

需要子类去实现的方法

class Human {say(){console.log("");}
}
class Man extends Humansay(){console.log('我是继承');}
}
class Woman extends Human {say(){console.log('我也是继承');}
}

类的继承

继承可以让子类获得父类的方法属性

可以扩充增加新的方法属性等

关键字 extends

class Human{constructor(name,age,sex,hobby){this.name = name;this.age = age;this.sex = sex;this.hobby = hobby;}desc(){const { name, age, sex, hobby } = this;console.log(`我叫${name},性别${sex},年龄${age},爱好${hobby}`);}eat(){console.log('吧唧吧唧!');}
}
class  FEEngineer extends Human{constructor(name , age, sex, hobby, skill,salary){super(name, age, sex, hobby);//super()调用父类的构造函数this.skill = skill;this.salary = salary;}say(){console.log(`平常喜欢${skill},吃喝一次消费${salary}`);}
}
const feer = new FEEngineer('Cindy',12,'女','跑步',['吃','喝'],'300块'
);
feer.eat();

继承中的super()

1.作为父类构造函数调用

2.作为对象的方式调用

特点::

**非静态方法中访问super ->访问到的是父类原型 **

class Human {say(){console.log("");}
}
class Man extends Humansay(){super.say();console.log('我是父类原型');}
}

重载

class SimpleCalc{addCalc(...args){if(args.length === 0){return this.zero();}if(args.length === 1){return this.onlyOneArgument(args);}return this.add(args)}zero(){return 0;}OnlyOneArgument(){return return args[0];}add(args){return args.reduce((a,b) => a+b, 0);}
}
//比如来一个ajax的post封装function post(url, header, params){if(!params){params=header;header=null;}
}
post('https://baidu.com',{a:1,b:2
});

静态方法访问 ->访问到的是父类对象

static test(){//我是写在子类里的console.log(super.name)//Human
}

在调用super时父类的this 始终是子类的this

静态属性与静态方法

1.不会被类实例所拥有的属性与方法只是类自身拥有

2.只能通过类调用

static 关键字 (静态方法)

场景

class Person{static  format = progammer =>{progammer.haveGirl = '有';progammer.hair = '长出来头发了';}
}
class Progammer{constructor(){this.haveGirl ='没有';this.hair = '秃头';}
}
const progammer = new Progammer();
console.log(progammer)
Person.format(progammer)
console.log(progammer)

**result:**Progammer { haveGirl: ‘没有’, hair: ‘秃头’ }
Progammer { haveGirl: ‘有’, hair: ‘长出来头发了’ }

类表达式

const Person = class{constructor(){console.log('hhhh');}
}

getter/setter

类似于给属性提供钩子

在获取属性值和设置属性值的时候做一些额外的事情

在ES5中 getter/setter

1.在对象字面量中书写get/set方法

const obj = {name:'',get name(){return this._name;},set name(val){this._name = val;}
}obj.name = 222;
console.log(obj);//在get中返回name 结果为222

2.Object.defineProperty(对象,‘属性的名字’,{描述}

var obj = {_name:'';
};Object.defineProperty(obj,'age',{value:19,enumerable:true//我是可并枚举描述符
});

PS:age不能被遍历描述的时候要加上可并枚举的描述符 enumerable

添加setter/getter

var obj = {_name:'';
};Object.defineProperty(obj,'name',{get:function(){console.log('正在访问name');return this._name;},set:function(val){console.log('正在修改name');this._name = val;}
});obj.name=10;
console.log(obj.name)//10

在es6中,setter/ getter

class Person{constructor(){this._name = '';}get name(){console.log('正在访问name');return '我的名字是${this._name}';}set name(val){console.log('正在修改name');this._name = val;}
}const person = new Person();
person.name='傻逼';
console.log(person.name);

setter/getter应用

class AudioPlayer{constructor(container){this._status = 0;this.status = 0; //初始值为0this.init();}init(){const audio = new Audio();audio.src='....';audio.oncanplay=() => {audio.play();this.status = 1;}}get status(){return this._status;}set status(val){const STATUS_MAP = {0:'暂停',1:'播放',2:'加载中'};document.querySelector('aa.play-btn').innerText = STATUS_MAP[val];this._status = val;}
}const audio = new AudioPlayer();

new.target属性

判断函数是不是作为构造函数使用

\function Car(){if(new.target !== Car){throw Error('必须使用new调用Car')}
}
new Car();

ES5中模拟类

构造函数的原理

1.创建一个空的对象

2.把构造函数的prototype属性作为空对象的原型

3.this赋值为这个空对象

4.执行函数

5.如果函数没有返回值,则返回this/返回之前那个空对象

 function Constructor(fn,args){var _this = Object.create(fn.prototype);var res = fn.apply(_this,args);return res ? res : _this;}function Person(name,age){this.name = name;this.age = age;}Person.prototype.say=function(){console.log('我是'+this.name)}var person = Constructor(Person,['张三',12]);console.log(person)//Person { name: '张三', age: 12 }

atus(val){
const STATUS_MAP = {
0:‘暂停’,
1:‘播放’,
2:‘加载中’
};
document.querySelector(‘aa.play-btn’).innerText = STATUS_MAP[val];
this._status = val;
}
}

const audio = new AudioPlayer();

## new.target属性判断函数是不是作为构造函数使用```js
\function Car(){if(new.target !== Car){throw Error('必须使用new调用Car')}
}
new Car();

ES5中模拟类

构造函数的原理

1.创建一个空的对象

2.把构造函数的prototype属性作为空对象的原型

3.this赋值为这个空对象

4.执行函数

5.如果函数没有返回值,则返回this/返回之前那个空对象

 function Constructor(fn,args){var _this = Object.create(fn.prototype);var res = fn.apply(_this,args);return res ? res : _this;}function Person(name,age){this.name = name;this.age = age;}Person.prototype.say=function(){console.log('我是'+this.name)}var person = Constructor(Person,['张三',12]);console.log(person)//Person { name: '张三', age: 12 }

ES6基本知识及API相关推荐

健康知识大全api 取得最新的知识列表
健康知识大全api,最新健康知识,通过当前最新的ID,取得最新的知识列表.通过该方法可以做到数据的不重复! 接口名称:健康知识大全api 接口平台:开源接口接口地址:http://japi.juhe ...
ES6常用知识总结（20%的知识占80%的份额）
一.变量和常量 var的缺点:(1)var可以多次声明同一个变量: (2)var会造成变量提升 (function rr() { if(true) { var a = 666; } console ...
健康知识搜索API接口
为什么80%的码农都做不了架构师?>>> 通过关键词搜索相关的健康知识接口正式发布. 文档地址:http://www.tngou.net/doc/lore 通过相关的搜索关键字 ...
html读取url中文件,HTML5基础知识 - JavaScript API - File - 读取文件为DataURL
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 // Content section used alot var content = document.ge ...
ES6中的字符串API.md
ES6中的字符串扩展与数组扩展 #字符串扩展 includes 用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false 语法:str.includes(searchStri ...
ES5 ES6基础知识
ES5语法数组方法迭代(遍历)方法:forEach().map().filter().some().every(): array.forEach(function(currentValue, in ...
Java基础知识-------常用API(6)
第1章Date 1.1Date类概述类 Date 表示特定的瞬间,精确到毫秒. 继续查阅Date类的描述,发现Date拥有多个构造函数,只是部分已经过时,但是其中有未过时的构造函数可以把毫秒值转成日 ...
ES6初学知识集锦1
1.let 变量注: 由于小白我使用的是 freeCodeCamp学习的,所以后面代码更多是搬运其中的,保留其中的精华,同时根据自身问题提出一些见解,希望可以帮到各位道友.(拱手) 1.let是相对 ...
30分钟搞定ES6常用基础知识
ES6基础智商划重点在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值 ...

ES6基本知识及API

let

ES6 块级作用域

const

解构赋值

数组的解构赋值

简单的

复杂的

扩展运算符(…)

默认值

交换变量

接收多个函数返回值

对象的解构赋值

对象的解构赋值

复杂

结合扩展运算符(…oth)

默认值

字符串解构赋值

函数解构赋值

json处理

字符串扩展

模板字符串

字符串部分新方法

padStart padEnd

repeat

startsWith endsWith

includes

for of

unicode表示法

正则扩展

数值扩展

新的进制表示法

新的方法与安全数

函数扩展

函数参数的默认值

与扩展运算符结合(剩余参数)

箭头函数=>

对象扩展

简洁表示法与属性名表达式

类

面向基本对象三大基本特性

类的多态

类的继承

重载

静态属性与静态方法

类表达式

getter/setter

在ES5中 getter/setter

在es6中,setter/ getter

setter/getter应用

new.target属性

ES5中模拟类

ES5中模拟类

ES6基本知识及API相关推荐

最新文章

热门文章