ES 6学习笔记：
声明变量：
let声明变量不可重复声明
var 可以重复声明变量
块级作用域： 全局，函数，eval
let 的作用域只是在代码块中。 if else while for
var 的作用域是全局作用域
不存在变量提升：
let[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkVTN2Ef-1672538086501)(C:\Users\12926\AppData\Roaming\Typora\typora-user-images\image-20221227103328781.png)]let 不允许在变量声明之前去使用变量 会报错，
var 在变量之前去使用变量，会出现undefined
不影响作用域链
Const 常量 及特点：
1，const 常量一定要赋初始值
2，一般常量使用大写
3，常量的值不能修改
4，块级作用域
5，对于数组和对象里的属性作修改，不算对常量的修改，不会报错
变量解构赋值：
解构赋值：es 6 允许按照一定的模式从数组和对象中提取值，对变量进行赋值
1，数组的解构
const F4 = ['XIA','LI','JUN','张']
let [xiao,liu ,zhao,song ] = F4;
console.log(xiao); //XIA
console.log(liu); //LI
console.log(zhao); //JUN
console.log(song); //张
2，对象的解构
const zhao = {
name :'夏'，
age: '19',
xiaopin : function(){
conlog.log("xxxxxx")
}
}
let { name ,age ,xiaopin } = zhao;
conlog.log(name) // 夏
conlog.log(age) // 19
conlog.log(xiaopin) //上面那个方法
es6 模板字符串
ES6 引入新的声明字符串的方式 [ `` ] , '' , ""
1,声明
let str = `我也是一个字符串`;
console.log(str,typeof str) //我也是一个字符串 + String
2,特性
一: 内容中可以直接出现换行符
二: 变量拼接
let a = '夏'；
let b = `${a} 是我心目中最帅的人`；
console.log(b) //打印: 夏是我心目中最帅的人
es6 的对象简写写法
ES 6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
//这样书写也更加的简洁
let name = '尚硅谷';
let change = function(){
console.log('尚硅谷白嫖还不错!')
}
const school = {
name,
change
//定义一个方法，可以直接简写为
improve(){
console.log("我们是简写之后的方法!!!")
}
}
console.log(school) //打印结果为: '尚硅谷' , function()
es6 箭头函数
ES6 允许使用[ 箭头函数] (=>)定义函数
//声明一个函数
之前声明:
let fn = function(){
}
使用箭头函数
let fn = (形参1，形参2) => {
//代码体
return 形参1+形参2;
}
//调用箭头函数
let result = fn(形参1,形参2)
console.log(result); //结果为 形参1+形参2
//箭头函数的特性
1，this是静态的，this 始终指向函数声明时所在作用域下的this 的值
function getName(){
console.log(this.name);
}
let getName2 = () => {
console.log(this.name);
}
//设置window 对象的name 属性
window.name = '尚硅谷';
const school = {
name: "ATGUIGU"
}
//直接调用俩个函数
getName(); //尚硅谷
getName2(); //尚硅谷
getName.call(school); //ATGUIGU
getName2.call(school); //尚硅谷
2，不能作为构造函数实例化对象
let person = (name,age) => {
this,name = name;
this,age = age;
}
let me = new Person('xia',30)
console.log(me) //会报一个 语法错误，person is not a constructor
3,不能使用 argument 变量
let fn = () =>{
console.log(argument) //会报argument 没有被定义
}
4 .箭头函数的简写
1，省略小括号， 当形参有且只有一个的时候
原:let add = (n) => { ==>
return n + n;
}
因为只有一个形参 可以简写为:
let add = n =>{
return n + n;
}
console.log(add(9));
2,省略花括号 当代码体只有一条语句的时候 ,此时return 必须省略，而且语句的执行结果就是函数的返回值
原:let pow = (n) => {
return n*n;
};
console.log(pow(9));
简写为:
let pow = n => n*n;
箭头函数允许给参数赋值初始值
1.形参的一个初始值
function add(a,b,c=10){
//形参初始值，具有默认值的参数，一般的位置要靠后 （潜规则）
return a+b+c;
}
let result = add(1,2);
console.log(result); // 通过给c=10;赋默认值，打印结果为13
2与解构赋值结合
function connect(options,username,password,port){
console.log(username)
}
connect({
host: 'localhost',
username: 'root',
password:'root',
port:3306
})
es6 —rest 参数
//es6 引入rest 参数，用于获取函数的实参，用来代替arguments
//es5 获取实参的方式
function date(){
console.log(arguments)
}
date('夏','茂');
// es6获取实参的方式 --rest 方式
function date(...args) {
console.log(args) //filter some every map
}
date('夏','mao')
//rest 参数必须要放到参数的最后
function date(a,b,...args){
console.log(a)
console.log(b)
console.log(args)
}
date(1,2,3,4,5,6) 打印1，2 3，4，5，6 数组
es6 扩展运算符
// [ ... ] 扩展运算符能将 数组转换为逗号分隔的 参数序列
//声明一个数组 ...
const tfboys = ['王实际','齐菁菁','高俊']
//声明一个函数 -->将一个数组变成三个参数
function chuanwan(){
console.log(arguments);
}
chuanwan(...tfboys);
//应用
//1.数组的合并
const kuaizi = ['王太利','肖洋'];
const fenghuang = ['凤凰传奇','玲花'];
//es5 的合并方法
console.log(kuaizi.concat(fenghuang));
//es6 扩展运算符
const hebin = [...kuaizi,...fenghuang];
console.log(hebin);
//2.数组的克隆
const sanzhihua = ['E','G','M'];
const sanzhicao = [...sanzhihua];
console.log(sanzhicao);
//3.将伪数组转换成真正的数组
const divs = document.querySelectorAll('div');
const arrdivs = [...divs];
console.log(arrdivs);
es6 之Symbol 的介绍与创建
Symbol 的特点:
1,Symbol 的值是唯一的，用来解决命名冲突问题
2,Symbol 的值不能与其他数据进行运算
3,Symbol 定义的对象属性不能使用 for ... in 循环遍历，但是可以使用
Reflect.ownKeys 来获取对象的所有键名；
//1，创建symbol
let s= Symbol();
console.log(s,typeof s);
//2，第二种创建symbol 的方法
let s2 = Symbol('夏天');
let s3 = Symbol('夏天');
console.log(s2);
console.log(s3);
console.log(s2 === s3);
//3，第三种创建的方法
let s4 = Symbol.for('冬天');
console.log(s4);
//USONB
u underfined
s string
o object
b boolen
Symbol 的使用:
// Symbol 向对象中添加方法
// Symbol 表示独一无二 的值，往对象中添加方法和属性
let game = {}
//声明一个对象
let methods = {
up: Symbol(), //表明我当前的方法是独一无二的
down: Symbol()
};
game[methods.up] =function(){
console.log("我可以改变形状");
}
game[methods.down] = function(){
console.log("我可以啊安全的下降");
}
console.log(game);
// 第二种添加方法
let youxi ={
name: "狼人杀",
[Symbol('say')]:function(){
console.log("我可以发芽吗？");
}
}
console.log(youxi);
Symbol 内置值
1, Symbol.isConcatSpreadable
2, Symbol.unscopables
3, Symbol.match
4, Symbol.replace
5, Symbol.search
6, Symbol.spilt
7, Symbol.iterator
8, Symbol.toPrimitive
9, Symbol.toStringTag
10,Symbol.species
迭代器
//声明一个数组
const xiyou = ['唐总','孙悟空','猪八戒','沙僧']
console.log(xiyou);
//使用for of 遍历
for(let v of xiyou){
console.log(v); // 唐总,孙悟空,猪八戒,沙僧 键值
}
for(let v in xiyou){
console.log(v); //0,1,2,3 键名
let iterator = xiyou[Symbol.iterator]();
console.log(iterator);
//调用对象的next 方法
// console.log(iterator.next());
// console.log(iterator.next());
// console.log(iterator.next());
// console.log(iterator.next());
迭代器的应用:
//迭代器的应用 --> 自定义遍历数据的时候，需要用到迭代器
const banji = {
name: '终极一班',
stus:[
'xiaoxia',
'xiaozhang',
'knight',
'zhangzhang'
],
[Symbol.iterator](){
//索引变量
let index = 0;
let _this = this;
return {
next: function(){
if (index < _this.stus.length) {
const result = {
value: _this.stus[index],
done: false
};
index++;
return result;
}else{
return {value: undefined,done:false}
}
}
};
}
}
生成器函数 声明与调用
初体验:
//生成器其实就是一个特殊的函数
// 异步编程 纯回调函数
function * gen(){
console.log("你好");
//yield 函数代码的分隔符
yield '小溪是我的朋友';
console.log("小溪是我的朋友");
yield '法外狂徒张三';
console.log("法外狂徒张三");
yield '就是牛，你怎么说?';
console.log("就是牛");
}
let iterator = gen();
console.log(iterator);
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
for (let v of gen() ) {
console.log(v);
}
生成器传参
//生成器函数参数
function * gen(arg) {
console.log(arg);
let one = yield 111;
console.log(one);
let two = yield 222;
console.log(two);
let three = yield 333;
console.log(three);
}
//获取迭代器对象
let iterator = gen('AAA');
console.log(iterator.next());
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next());
Promise
promise 是es6 引入异步编程的新解决方案。语法上是promise是一个构造函数，用来封装异步操作并可以获取其成功或者失败的结果
1，Promise 构造函数: Promise(excutor) {},
2，Promise.prototype.then 方法
3，Promise.prototype.catch 方法
三种状态:
等待: (pending) , 已完成(fulfilled) , 已拒绝 (rejected)
初识Promise :
//实例化Promise 对象
const p = new Promise(function(resolve,reject){
setTimeout(function(){
//
// let data = '数据库中的用户数据';
// // 调用resolve方法，promise对象的状态就会变成成功
// resolve(data);
let err = '数据读取失败';
//调用reject 这个promise 的状态就会变成失败
reject(err);
},1000);
});
//调用Promise 的then 方法
p.then(function(value){
//成功
console.log('我打印成功的数据',value)
},function(reson){
console.error('我打印失败的数据',reson)
})
使用Promise 封装Ajax 请求
const p = new Promise((resolve ,reject) => {
const xhr = new XMLHttpRequest();
xhr.open("Get","http://localhost:8083/personTest/getAllTest");
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
//判断响应状态码
if (xhr.status >= 200 && xhr.status <300){
resolve(xhr.response);
}else {
//如果失败
reject(xhr.status)
}
}
}
});
p.then(function(vallue) {
console.log(vallue);
},function(reason){
console.error(reason);
})
Promise – then 方法
<script type="text/javascript">
//创建 promise对象
const p = new Promise((resolve,reject) =>{
setTimeout(()=>{
// resolve('用户数据');
reject('读取用户数据失败了!');
},1000)
});
//调用then 方法 then 方法的返回结果是promise
// 对象，对象的状态是由回调函数的执行结果决定的
const result = p.then(value => {
console.log(value);
},reason =>{
console.warn(reason);
});
console.error(result);
Promise —Catch 方法
const p = new Promise((resolve,reject)=>{
setTimeout(()=>{
//设置P 对象的状态为失败
reject('我出错了，咋办?');
},1000)
});
// p.then(value=>{
// console.log(value);
// },reason=>{
// console.warn(reason);
// })
p.catch(reason => {
console.warn(reason);
})
Set集合
let s = new Set();
let s2 = new Set(['1','2','3','2'])
console.warn(s2, typeof s);
console.error(s2.size);
s2.add('100');
console.log(s2);
for (let v of s2){
console.log(v)
}
Map集合
es 6提供了Map 数据结构，它类似于对象，也是键值对的集合，但是 “键” 的范围不限于字符串，各种类型的值，包括对象，都可以当作键， Map 也实现了iterator 接口，所有可以使用扩展运算符 【 … 】 和 for … of … 进行遍历，Map 的属性 和方法:
size 返回 Map 的元素个i数
set 增加一个新元素，返回当前的Map
get 返回键名对象的键值
has 检测当前Map 中是否包含某个元素，返回 一个 boolen 值
clear 清空集合 ，返回 undefined
class 类
知识点:
class 声明类
constructor 定义构造函数初始化
extends 继承父类
super 调用父类的构造方法
static 定义静态方法和属性
父类方法可以重写
//es 6 类的声明
//class
class Phone{
//构造方法 名字固定
constructor(brand,price){
this.brand = brand;
this.price = price;
}
//方法
call() {
console.warn("我乐意打电话!");
}
}
let onePlus = new Phone("iphone",100);
console.warn(onePlus.call());
console.error(onePlus);
类的静态成员
class Person{
//静态属性属于类而不属于实例化对象
static name = '张大炮';
static change(){
console.warn("可以改变世界");
}
}
let person = new Person();
console.log(Person.name)
console.log(Person.change());
es6 类继承
class Phone{
constructor(brand,price){
this.brand = brand;
this.price = price;
}
call(){
console.log("我雷了");
}
}
class smartPhone extends Phone{
constructor(brand,price,color,size){
super(brand,price);
this.color = color;
this.size = size;
}
photo(){
console.log("拍照");
}
}
const xiaomi = new smartPhone('xiaomi',799,'yellow',6.7);
console.log(xiaomi.photo());
.....
对象方法的扩展
// Objects.is 判断俩个值是否完全相等
// console.warn(Object.is(120,120));
// console.log(NaN === NaN);
// console.log(Object.is(NaN,NaN));
// Objects.assign 对象的合并
const config1 = {
host: 'localhost',
port: '3306'
};
const config2 = {
host : 'xilijun.com',
port: '8888'
}
模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来
模块化的好处: 1,防止命名冲突 2，代码复用 3，高维护性
模块功能主要由俩个命令构成: export 和 import
export 命令是用于规定模块的对外接口
.size = size;
}
photo(){
console.log(“拍照”);
}
}
const xiaomi = new smartPhone(‘xiaomi’,799,‘yellow’,6.7);
console.log(xiaomi.photo());
…
### 对象方法的扩展
```javascript
// Objects.is 判断俩个值是否完全相等
// console.warn(Object.is(120,120));
// console.log(NaN === NaN);
// console.log(Object.is(NaN,NaN));
// Objects.assign 对象的合并
const config1 = {
host: 'localhost',
port: '3306'
};
const config2 = {
host : 'xilijun.com',
port: '8888'
}
模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来
模块化的好处: 1,防止命名冲突 2，代码复用 3，高维护性
模块功能主要由俩个命令构成: export 和 import
export 命令是用于规定模块的对外接口
import 命令是用于输入其他模块提供的功能
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/121395.html
