ES6-11随手记(1)

已于 2022-07-05 14:22:06 修改
阅读量177 收藏
点赞数
文章标签： es6
于 2022-07-05 10:05:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63139310/article/details/125569492
版权

ES6

let变量声明以及声明特性

使用let同一个作用域声明变量时不可以重复声明，使用var重复声明是可以的。使用let就可以防止变量重复或被污染。

块级作用域：

只在代码块内有效（如if、swich、for、while等）

不影响作用域链

函数内部的变量（子作用域）和循环变量（父作用域）不在同一个作用域。

（var声明的是全局变量） 

不存在变量提升:即不允许在变量声明前使用该变量。（若是var则是显示undefined)

const声明常量以及特点

一定要赋初始值。

常量的值不能修改，也不可以重复声明。

块级作用域且同样不能提升。

对于数组和对象的元素修改，不算做对常量的修改，不会报错（地址没有改变）。如果想将对象冻结，应该使用Object.freeze方法。

变量的解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。

1、数组的解构

const a=[1,2,3,4];
let[一,二,三,四]=a;
//此时相当于把1，2，3，4分别赋值给一、二、三、四

2、对象的解构

const xu={
    name:'徐',
    age:'17',
    chi:function(){
        console.log("123");
    }
}
let{name,age,chi}=xu;
//此时分别把对象中的name,age,chi赋值给了对应的变量

模板字符串

ES6引入新的声明字符串的方式[' ']、‘ ’ 、 “ ”

特性：

  1. 内容中可以直接出现换行符，此前需要引号和加号连接
  2. 可以直接进行变量的拼接
let str1='西瓜';
let str2='很好吃！';
//最初的方式
let str2='str1'+'str2';
//直接拼接
let str2='${str1}很好吃！';

数值拓展

  1. Number.EPSILON是js表示的最小精度，若误差小于该值则视为相等
  2. ES6中二进制用0b(0B)表示，八进制用0o(0O)表示
  3. Number.isFinite()用来检查一个数值是否为有限的（ finite ）
  4. Number.isNaN()用来检查一个值是否为NaN
  5. Number.isInteger()用来判断一个值是否为整数，在js中整数和浮点数储存方法一致，被视为一个值
  6. 整数范围在-253到253之间（不含两个端点）是安全整数，Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内。
  7. Math.trunc除去小数部分，Math.sign方法用来判断一个数到底是正数、负数、还是零。
  8. 指数运算符（**），新的赋值运算符（**=）

对象方法的拓展（6-11）

  1. Object.is(,) 判断两个值是否完全相等，该方法与===在判断两个NaN是恶分别得到的是true和false
  2. Object.assign（对象1，对象2）,如果对象1的属性对象2也有，对象2的属性就会覆盖对象1的属性，如果对象1的属性对象2没有就会显示对象1的属性。若只有一个参数直接返回，若不是对象则先转成对象再返回（undefined、null除外）
  3. Object.setPrototypeof设置原型对象格式Object.setPrototypeof（对象1，对象2）将对象2设置为对象1的原型，对象2的原型为Object对象。
  4. Object.values 返回一个给定对象自身的所有可枚举属性值的数组，Object.entries 返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组。
  5. Object.getOwnPropertyDescriptors 返回对象属性的描述对象。
  6. Object.fromEntries()，这个方法和之前的Object.entries()是两个互逆的操作，将二维数组转换为对象。

对象的简化写法

ES6允许在大括号里面，直接写入变量和函数作为对象的属性和方法。

let name='xu';
let haha=funxtion(){
    console.log('hahaha');
}
const xu={
    name,//实际上为name:name,但是ES6允许直接写入
    haha，
    import(){}//此时原本为import:function(){},但是在ES6中可以简化为前面的写法
}

箭头函数以及声明特点

ES6允许使用箭头（=>）定义函数。

特性：

  1. this是静态的，无论使用什么方式（直接调用或call调用）this始终指向函数声明时所在作用域下的this的值。
  2. 不能作为构造实例化对象（个人简单理解为var persion = new Person('xu','17')就是对象实例化）
  3. 不能使用arguments变量（该变量用来保存实参）
  4. 箭头函数的简写：当形参有且只有一个时可以省略小括号；当代码提只有一条语句时可以省略花括号（此时return必须省略，且执行结果就是返回值）。

函数参数的默认值设置

ES6允许给函数参数赋初始值。

具有默认值的参数，一般位置靠后（潜规则）。

默认值可以与解构赋值结合使用。

function connect({name='李四',age,job}){
    console.log(name)
    console.log(age)
    console,log(job)
}
coonect({
    name:'张三',
    age:'20',
    job:'学生'
})
//这里给name赋予初始值，如果没有传入则默认为李四

rest参数

ES6引入rest参数，用于获取函数的实参，用来替代arguments。

function data(...args){
    console.log(args);
}
data('zs','ls','ww');

得到的结果是数组。

rest参数必须要放在参数的最后。

拓展运算符

拓展运算符（...）能将数组转化为逗号分隔的参数序列。

const zuhe=['张三','李四','王五'];
function haha(){
    console.log(srguments);
}
haha(...zuhe);//haha('张三','李四','王五')

虽然拓展运算符和rest符号一样，但是rest是写在形参的位置，拓展运算符是写在调用的实参位置。

拓展运算符的运用：

1、数组的合并

const zuhe = ['一号','二号'];
const zuhe2 = ['三号','四号'];
const zuizhongzuhe = [...zuhe, ...zuhe2];
//最终的结果就是['一号','二号','三号','四号']

2、数组的克隆：直接运用运算符写入即可

3、将伪数组转化为真正的数组

const divs = document.querySelectorAll('div');
const divarr = [...divs]

Symbol的介绍与创建

数据类型Symbol表示独一无二的值，是一种类似于字符串的数据类型。

特性：

  1. Symbol的值是唯一的，用来解决命名冲突的问题
  2. Symbol值不能与其他数据进行运算、对比、拼接（与自身也不行）
  3. Symbol定义的对象属性不能使用for...in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
//创建Symbol
let s=Symbol();
let s1=Symbol('hhhhh');//此时若再创建一个s2也为Symbol('hhhhh')，要注意s1,s2是不一样的
//Symbol.for(()创建
let s3=Symbol.for('hhhhhh');//此处的Symbol是一个对象，上方的Symbol是函数
//若用此方法再创建一个s4也为Symbol.for('hhhhhh')，s3,s4是相等的

Symbol的内置值

迭代器 

迭代器是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作。（在JS中所说的接口其实就是对象的一个属性：Symbol.Iterator） 

ES6创造了一种新的遍历命令for...of循环，Iterator接口只要供for...of消费。

原生具备Iterator接口的数据（可用for...of遍历）有Array, Arguments, Set, Map, Striing, TypedArray, NodeList。

 注意：for...in循环保存的是键名，即1，2，3...，而for...of循环保存的是键值，即数据的内容。

工作原理

  1. 创建一个指针对象，指向当前数据结构的起始位置
  2. 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
  3. 接下来不断调用next方法，指针一致往后移动，直到指向最后一个成员
  4. 每调用next方法返回一个包含value和done属性（当该属性为true时表示遍历结束）的对象

生成器

生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

声明方式：function *go(){yield},其中yield是函数代码分隔符

function * go(){
    console.log(1);
    yield '我爱吃西瓜';
    console.log(2);
    yield '我爱吃苹果';
    console.log(3);
    yield '我爱吃草莓';
}
let iterator = go();
iterator.next();//控制台打印1
iterator.next();//控制台打印2
iterator.next();//控制台打印3
//若将上面三行分别打印则控制台显示的是{value:(yield后面的内容），done:true/false}

由代码输出结果可见，并不同于先前的函数直接运行全部，而是通过next方法来控制代码向下执行。

也可以使用for...of遍历，但是每次返回的结果是yield后面的内容。

生成器函数的参数传递

若直接用生成器函数传入参数则至少需要运行第一个next方法，否则不会执行。

next方法可以传入实参，第二次next方法传入的实参将作为第一个yield语句的返回结果。

 Promise函数

promise是ES6引入的异步编程的新解决方案。语法上promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

构造函数：Promise(){}

const p = new Promise(function(resolve,reject){
    setTimeout(functon(){
        let data = '数据库中的用户数据';
        resolve(data)//此时p的状态变为成功
        let err = '数据读取失败';
        reject(err);//此时p的状态为失败
    ),1000);
});
//调用promise对象的then方法
p.then(function(value){
    console.log(value);//打印结果为数据库中的用户数据
},function(reason){
    console.error(reason);//打印结果为数据读取失败
})

promise.prototype.then方法

该方法返回的结果实际上也是一个promise对象，其对象状态由回调函数的执行结果决定。如果回调函数中返回的结果是非promise类型的属性，状态为成功，返回值为对象的成功的值。如果是一个promise对象，则该promise对象的返回状态决定外部promise对象的返回状态，且其值就是then方法返回的值。若为抛出错误则then返回的对象的状态是失败的状态，值就是抛出的错误的值。

由于then方法返回的是promise对象，则可以实现链式调用，即在then中嵌套then。then方法的链式调用可以解决回调地狱问题（一个异步请求套着另一个异步请求，一个异步请求依赖于另一个异步请求的结果）

promise.prototype.catch()方法

catch方法只能指定发生错误时的回调函数，返回值也是promise对象

如果Promise对象状态变为resolved，则会调用then方法指定的回调函数，如果异步操作抛出错误，状态就会变成rejected，就会调用catch方法指定的回调函数，如果运行中抛出错误也会被catch捕获

由于promise的状态一旦改变就永久 保持该状态不会再改变。所以若promise状态以及变成resolved，则再抛出错误是无效的。

promise对象的错误会一直向后传递直至被捕获，即错误只会被下一个catch捕获。

promise读取文件（多个）

//引入fs模块
const fs = require('fs');
//使用promise封装读取方法
const p = new Promise(function(resolve,reject){
    fs.readFile("路径1",(err,data)=>{
        resolve(data)
    });
});
p.then(value =>{
    return new Promise(resolve,reject)=>{
       fs.readFile("路径2",(err,data)=>{
        resolve([value,data]);
    });
}).then(value=>{
    return new Promise(resolve,reject)=>{
       fs.readFile("路径3",(err,data)=>{
            //压入
            value.push(data);
            resolve(value);      
        });
    });  
}).then(value=>{
    console.log(value);
});

fs模块是Node.js的一个核心模块，专门用来操作系统中的文件，常用的操作方式是对文件的读取和写入使用require('fs')载入fs模块，模块中所有方法都有同步和异步两种形式。异步方法中回调函数的第一个参数总是留给异常参数（exception），如果方法成功完成，该参数为null或undefined

pomise封装AJAX

const p = new Promise((resolve,reject)=>{
    //1、创建对象
    const xhr = new XMLHttpRequest();
    //2、初始化
    xhr.open("GET","接口地址");
    //3、发送
    xhr.send();
    //4、绑定事件，处理响应结果
    xhr.onreadystatechange = funxtion(){
        if(xhr.readyState ===4)
            if(xhr.status >=200 && xhr.status<300){
                resolve(xhr.response);
            }else{
                reject(xhr.status);
            }
        }
    }
})
//指定回调
p.then(function(value){
    console.log(value);
},function(reason){
        console.error(reason);
});

Set

set（集合）类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用拓展运算符和for...of进行遍历。

属性与方法：

  1. 返回集合的元素个数，size
  2. 添加一个新元素，返回当前集合，add
  3. 删除元素，返回boolean值，delete
  4. 检测集合中是否包含某个元素，返回boolean值，has
  5. 清空集合，clear

实践：

let arr = [1,2,3,3,2,4,5,6,4,7];
//1、数组去重
let result1 = [...new Set(arr)];
console.log(result);
//2、交集
let result2 = [...new Set(arr)].filter(item =>new Set(arr2).has(item));
//3、并集
let result3 =[...new Set([...arr, ...arr2])];
//4、差集
let result4 = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));

Map

类似于对象，也是键值对的集合，但是”键“的范围不限于字符串，各种类型的值（包括对象）都可以当作键，Mapye也实现了iterator接口，所以可以使用拓展运算符和for...of遍历。

let m=new Map();   m.set('键名','键值');

属性和方法：

  1. Map的元素个数，size
  2. 新增一个新元素，返回当前Map，set
  3. 返回键名对象的键值，get
  4. 检测是否包含某个元素，返回boolean值
  5. 清空，返回undifined，clear

Class类

class phone{
    //构造方法，默认返回实例对象
    constructor(){//constructor不可更改，当执行"new+类名"时会自动执行
        this.brand=brand;//this关键词代表实例对象
        this.price=price;
    }
    //在class中必须使用下列语法，不可以使用ES5的对象完整形式，即call:function(){}
    call(){
        console.log("");
    }
}
let iphone = new phone("iphone",6000);//类必须使用new调用
console.log(iphone);

静态方法

在方法前加上static关键字表示该方法不会被实例继承，且该方法直接通过类来调用。

静态方法中若包含了this，该this制的是类而非实例。

静态方法可以与非静态方法重名。

静态属性是class本身的属性，而不是定义在实例对象上的属性。

继承

//父类
class phone{
    constructor(brand,price){
        this.brand = brand;
        this.price = price;
    }
    ...
}
//子类
class smartphone extends phone{//此处语法固定，不可更改
    constructor(brand,price,color,size){
        super(brand,price);//此处的super就是父类的constructor方法
        this.color = color;
        this.size = size;
    }
    photo(){
        console.log("拍照");
    }
}

子类可以对父类方法进行重写，但是不可以直接调用父类的方法。

get和set

在类的内部可以使用set和get关键字对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

get通常对对象的动态属性做封装，而set则可以添加更多的控制和判断。

get一般是要返回的，set不用返回，set函数必须写上参数，否则会报错。

NULL---
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6遍历对象属性的方法
qq_43955202的博客
02-02 2261
1.属性的数据特征 1.ES5中每个对象的每一个属性都有一个相应的描述对象,用于控制这个属性的行为。每个对象都有四个数据特征。 configurable 对象属性是否可重新定义 作用：能否使用delete、能否需改属性特性、或能否修改访问器属性、，false为不可重新定义，默认值为true enumerable 对象属性是否可枚举 作用： 对象属性是否可通过for-in循环，flase...
ES6遍历方法，forEach、for...in，for..of
m0_45884629的博客
11-14 6093
Object.getOwnPropertyNames,Reflect.ownKeys(obj),Object.keys()
20、ES6 属性的遍历 一共有 5 种方法可以遍历对象的属性
热门推荐
小雨的博客
12-24 3万+
属性的遍历 ES6 一共有 5 种方法可以遍历对象的属性。 （1）for...in for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。 （2）Object.keys(obj) Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。 （3）Object.getOwnPropertyName
2021/9/24 北京 es6语法 解构赋值与数组的三个函数。遍历对象与判断对象是否为空
m0_56799642的博客
09-25 310
一、解构赋值 注意左右两边结构要相同 let [{a,b},[n1,n2,n3]]=[{a:12,b:5},[12,3,6]]; let [json,arr]=[{a:12,b:5},[12,3,6]]; 以上两种写法都可，要是忘了左边的值，自己打出来看吧 二、数组map,filter,foreach 1.》 map是一种映射处理，进去几个出来几个。 let result=arr.map(item=>item*2); let result=arr.map(item=>item&
使用Js/Es6判断对象是否为空,并判断对象是否含有某个属性
大师兄
11-12 4314
原文链接:https://dsx2016.com/?p=668 场景 1.当页面初始化时,需要某个对象的属性对应的数据来渲染,但是起始值或者后端返回的可能就是null或者{} data(){ return{ a:{} } }, cerated(){ let res=null // or {} this.a=res } 一旦对象层级超过...
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
es6-string-html：es6多行字符串中的突出显示代码
02-05
在es6多行字符串中添加了对代码的语法突出显示支持： ...只需在字符串之前插入注释/ * html * /或html （或sql而不是html）（有关可能的值，请参见“要求”部分），或从命令菜单中选择Insert es6-string-h
ES6-11学习记录前20章
07-27
ES6-11学习记录前20章
es6-promise.auto.js
10-31
<!-- Automatically provides/replaces `Promise` if missing or broken. --> [removed][removed] ...-- Minified version of `es6-promise-auto` below. --> [removed][removed] [removed][removed]
es6-shim:适用于旧版JS引擎的ECMAScript 6兼容性垫片
04-06
对于node.js ， io.js或任何npm托管的工作流程（这是推荐的方法）： npm install es6-shim替代方法： 如果您正在使用 component install paulmillr/es6-shim。 如果您使用的是 bower install es6-shim 。 在浏览器...
js、es6判断对象是否为空，判断对象是否包含某个属性
helloword_pp的博客
07-12 1694
js判断对象为空已经有好几种方法了，但是个人觉得不是特别方便。 比如： 1、把对象通过 JSON.stringify 转为字符串，再判断字符串是否等于 " {} " 2、for in循环，判断key是否存在 3、jq的方法 es6已经帮我们很好的解决了此类问题。 es6针对对象增加了3个新方法（数组也有）： （1）、Object.keys：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键名 （2）、Object.values：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的
js&&ts总结报告
Chick_dinner的博客
07-09 294
JavaScript 简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web,是脚本语言,插入 HTML 页面后，可由所有的现代浏览器执行 也可下载安装node.js后在vscode中运行语法： 1.区分大小写 2.注意变量，函数等命名规范 3.每行代码以分号结束操作符:一些符号-----用来计算 算数运算符: + - * / % 算数运算表达式:由算数运算符连接起来的表达式 一元运算符: 这个操作符只需要一个操作数就可以运算的符号 ++ – 二元运算符: 这个操作符需
JavaScript最新面试题合集（2023年）
subsistent的博客
01-16 9162
闭包：就是能够读取外层函数内部变量的函数。闭包需要满足三个条件：访问所在作用域；函数嵌套；在所在作用域外被调用。优点： 可以重复使用变量，并且不会造成变量污染。缺点： 会引起内存泄漏使用闭包的注意点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象。
ES6 Symbol基本用法
m0_46549558的博客
06-01 1583
ES6 Symbol基本用法详解(非原创，仅供学习交流)
重走es6之es6对象
qq_40708840的博客
10-30 143
对象 看到这里突然就想到，你有对象吗？我没有(哭的超大声) 对象属性的简写 Es6中规定可以直接在对象中写入变量和函数作为对象的属性和方法，此时属性名为变量名，属性值为变量的值。对象的简写在项目中使用频率极其高。 let name="zhangsan" let age=18 let obj={ name, age, sayName(){ console.log("my name is",name) } } console.log(obj) //结果为{ n
Promise
zhouang1的博客
08-30 315
本人通过阅读资料总结关于Promise 的基础知识及应用，此次分享如有不够完善，希望可以与大佬们一起探讨
JavaScript - ES6之Promise(then方法详解)
visibleforest的博客
08-05 8507
Promise的出现 Promise是异步操作的一种解决方案，有时候我们使用回调函数异步操作时会层层嵌套，不利于我们修改需求。Promise一般用来解决层层嵌套的回调函数（回调地狱 callback hell）的问题。 Promise的基本用法 第一步：实例化Promise构造函数 const p = new Promise((resolve,reject)=>{}) //Promise解决的不是回调函数，而是回调地狱.resolve和reject是函数，调用它们可以改变Promise的状
promise.then返回结果几种情况
m0_60909419的博客
04-12 1万+
首先实例化一个promise对象。promise对象身上有then方法，可用来指定回调，对成功和失败的结果进行处理。它接受两个回调函数，一个是resolve成功的回调，一个是reject失败的回调。 const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('成功的回调'); // reject('失败的回调'); }, 1000); }); p.then(v
ES6+Vue
最新发布
Casual_Lei的博客
06-13 343
ECMAScript是浏览器脚本语言的规范，基于javascript来制定的。为什么会出现这个规范呢？letconst结构表达式箭头函数Promise模块化​ Vue (读音 /vjuː/，类似于*view*) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
尚硅谷es6-es11笔记
09-10
尚硅谷ES6-ES11笔记是关于ES6到ES11版本的学习笔记。其中包括了ES6引入的类的写法，实际上ES6的Class是一个语法糖，让我们写起来更像传统的类。 此外，ES6还引入了Symbol值，除了可以定义自己使用的Symbol值，还有11...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值