ES6笔记2（函数参数默认值，rest参数，扩展运算符，扩展运算符的应用，Symbol，七种基本数据类型记法，Symbol创建对象属性，Symbol内置属性，迭代器，迭代器自定义遍历对象，生成器）

最新推荐文章于 2023-09-29 09:12:43 发布
最新推荐文章于 2023-09-29 09:12:43 发布
阅读量721 收藏
点赞数
分类专栏： 笔记 文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60440795/article/details/124028333
版权

ES6

函数参数默认值

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

1、形参初始值 ，具有默认值的参数，一般位置要靠后（潜规则）

function add(a,b,c=10){
return a+b+c;
}
let result = add(1,2);
console.log(result);
//如果c=10与b换个位置，则会输出NaN

2、与解构赋值结合

function connect({host='122',username,password,port}){
console.log(host);
console.log(username);
console.log(password);
console.log(port);
}
connect({
host: 'com',//如果host没有值则会使用host='122'，输出122
username: 'root',
password: 'oo',
port: 3306
})

在这里插入图片描述

rest参数

ES6引入rest参数，用于获得函数的实参，用来代替arguments
1、ES5获取实参的方式

function date(){
console.log(arguments);
}
date('效力','智慧','加油');

2、rest参数

function date(...args){
console.log(args);//可以使用数组的方法filter,some,every,map等
}
date('效力','智慧','加油');

在这里插入图片描述

function fn(a,b,...args){
console.log(a);
console.log(b);
console.log(args);
}
fn(1,2,3,4,5,6);

在这里插入图片描述

扩展运算符

扩展运算符能将数组转换为逗号分隔的参数序列

//声明一个数组
const n = ['你','我','他'];
//声明一个函数
function c(){
console.log(arguments);
}
c(...n);

在这里插入图片描述

扩展运算符的应用

1、数组的合并

const ab = ['谢娜','张杰'];
const fenghuang = ['曾毅','玲花'];
//合并的另一种方法
//const zuixuan = ab.concat(fenghuang);
const zuixuan = [...ab,...fenghuang];
console.log(zuixuan);

2、数组的克隆

const s = ['a','b','c'];
const t = [...s];
console.log(t);

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

<body>
<div></div>
<div></div>
<div></div>
<script>
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);
</script>
</body>

Symbol

ES6引入了一种新的原始数据Symbol，表示独一无二的值，他是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型
1、特点
在这里插入图片描述
2、代码

//创建Symbol
let s = Symbol();
//添加标识的Symbol
let s2 = Symbol('努力');
let s3 = Symbol('努力');
console.log(s2 === s3);//false

//用Symbol.for创建
let s4 = Symbol.for('加油');
let s5 = Symbol.for('加油');
console.log(s4 === s5);//true

3、不能与其他数据进行运算

七种基本数据类型记法

在这里插入图片描述

Symbol创建对象属性

1、向对象中添加方法（为了防止你创建的方法和对象本身的方法冲突，选择在另一个对象中用symbol创建独一无二的方法，用[ ]调用，不会污染本身对象中的方法）

let game = {...};
//声明一个对象
let methods  = {
up: Symbol(),
down: Symmbol()
};
//向game对象中添加up和down方法
game[methods.up] = function(){
console.log('我很厉害');
}

game[methods.down] = function(){
console.log('我很不厉害');
}
console.log(game);

2、添加方法方式二

let youxi = {
name: '狼人杀',
[Symbol('say')]: function(){
console.log('发言');
},

[Symbol('zibao')]: function(){
console.log('自报');
}
};
console.log(youxi);

Symbol内置属性

在这里插入图片描述
在这里插入图片描述

class Person{
static [Symbol.hasInstance](param){
console.log(param);
console.log('我被用来检测类型了');
return false;
}
}
let o = {};
console.log(o instanceof Person);

----------------------------------------------------------------------------

const arr = [1,2,3];
const arr = [4,5,6];
arr2[Symbol.isConcatSpreadable] = false;
console.log(arr.concat(arr2));

迭代器

在这里插入图片描述
在这里插入图片描述

//声明一个数组
const xiyou = ['孙悟空','猪八戒','沙和尚','唐僧'];
//使用for...of遍历数组
for(let v of xiyou){
console.log(v);
}

-----------------------------------------------------------------------------

//声明一个数组
const xiyou = ['孙悟空','猪八戒','沙和尚','唐僧'];
let iterator = xiyou[Symbol.iterator]();
//调用对象的next方法
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

在这里插入图片描述

迭代器自定义遍历对象

//声明一个对象
const banji = {
name: '终极一班',
stus: ['xiaoming',
'xiaoing','xiaotian','knight'
],
[Symbol.iterator](){
//索引变量
let index = 0;
let _this = this;
return {
next:function (){
if(index<_this.stus.length){
const result = {
value:_this.stus[i],done:false
};
//下标自增
index++;
return result;
}
else{
return {value: undefined, done: true};
}
}
}
}
};
//遍历这个对象
for(let v of banji){
console.log(v);
}

在这里插入图片描述

生成器（争对异步编程）

生成器就是一个特殊的函数

function * gen(){
console.log('hello');
}

let iterator = gen();
iterator.next();//hello

函数代码的分隔符yield

function * gen(){
console.log('111');
yield '耳朵';
console.log('222');
yield '尾巴';
console.log('333');
yield '真奇怪';
console.log('444');
}//分成四部分

let iterator = gen();
iterator.next();//111
iterator.next();//222
iterator.next();//333
iterator.next();//444

//遍历
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());
//next方法可以传入实参
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next('DDD'));

在这里插入图片描述

生成函数实例

1、1s后控制台输出111，2s后输出222，3s后输出333
首先介绍一下回调地狱
在这里插入图片描述

function one(){
setTimeout(()=>{
console.log(111);
iterator.next();
}
,1000)
}

function two(){
setTimeout(()=>{
console.log(222);
iterator.next();
}
,2000)
}

function three(){
setTimeout(()=>{
console.log(333);
iterator.next();
}
,3000)
}

function * gen(){
yield one();
yield two();
yield three();
}
//调用生成器函数
let iterator = gen();
iterator.next();
生成器函数实例-2

1、模拟获取（用户数据，订单数据，商品数据）

function getUsers(){
setTimeout(()=>{
let data = '用户数据';
//调用next方法，并且将数据传入
iterator.next(data);
}
,1000)
}

function getOrders(){
setTimeout(()=>{
let data = '订单数据';
//调用next方法，并且将数据传入
iterator.next(data);
}
,1000)
}

function getGoods(){
setTimeout(()=>{
let data = '商品数据';
//调用next方法，并且将数据传入
iterator.next(data);
}
,1000)
}


function * gen(){
 let users = yield getUsers();
                console.log(users);
                let orders = yield getOrders();
                console.log(orders);
                let goods = yield getGoods();
                console.log(goods);
}
//调用生成器函数
let iterator = gen();
iterator.next();
明灭18
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6中的rest参数与扩展运算符详解
08-29
在ES6中，rest参数和扩展运算符是两种强大的新特性，它们极大地改善了JavaScript处理函数参数和数组的方式。下面我们将深入探讨这两种特性。 **Rest参数** 是一个特殊的参数，用 `...` 符号后跟一个变量名来定义。...
Symbol 数据类型
weixin_50205647的博客
06-07 9693
Symbol 数据类型 Symbol概述 symbol 是ES6 引入了一种新的基本数据类型（原始数据类型） Symbol ，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是： undefined 、 null 、布尔值（Boolean）、字符串 （String）、数值（Number）、对象（Object）。 每个从 Symbol() 返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据 类型仅有的目的 Symbol数据类型的特点 1、Symbol
JavaScript有了一种全新的数据类型：Symbol
weixin_33709219的博客
08-04 250
数据类型 在介绍Symbol之前，我们简单介绍一下JavaScript的数据类型： JavaScript有6中数据类型，分别是： String字符串类型 Number数字类型 Object对象类型 Boolean布尔值类型 Null空值 Undefined未定义 这6种类型写过代码的同学都不会陌生，它...
symbol是什么数据类型
m0_57742630的博客
07-27 576
Symbol是一种唯一且不可变的数据类型，每个Symbol值都是唯一的，不会与其他任何值相等，包括其他Symbol值。这使得Symbol非常适合用作对象属性的标识符，以确保不会发生属性名冲突。在计算机编程中，Symbol是一种基本数据类型，是在ECMAScript 6 (ES6) 中引入的新特性。总结：Symbol是一种基本数据类型，用于创建唯一且不可变的标识符，通常用作对象属性的名称，以确保属性名不会与其他属性名冲突。由于Symbol的独特性，这样定义的属性名不会与其他属性名冲突，即使它们的名字相同。
Symbol数据类型
qq_53947552的博客
02-11 2397
文章目录概述用法及注意事项Symbol.for() 、 Symbol.keyFor()内置的 symbol 值Symbol.isConcatSpreadableSymbol.speciesSymbol.matchSymbol.replaceSymbol.searchSymbol.splitSymbol.iteratorSymbol.toPrimitive**Symbol.toStringTag**应用场景使用 symbol 作为对象的属性名使用 symbol 定义常量 概述 symbol是一个ES6标准种新
Symbol基本数据类型
叶子yes的博客
09-15 1211
ES6引入的一种新的原始数据类型Symbol，表示独一无二的值。Symbol函数可以接受参数，表示对于这个唯一值的描述，属于基本数据类型，Symbol()函数会返回symbol类型的值。
es6中的解构赋值、扩展运算符和rest参数使用详解
11-29
本文主要给大家介绍了关于es6中解构赋值、扩展运算符和rest参数使用的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 es6中较为常用的书写风格 为了书写的方便，es6中提出了很多比较...
ES6扩展运算符和rest运算符用法实例分析
10-15
ES6中的扩展运算符（Spread Operator）和rest运算符（Rest Parameter）是两种非常实用的语法特性，它们在处理参数和数组时提供了极大的便利性。接下来我们将深入探讨这两种运算符的基本功能、用法以及在实际编程中的...
JavaScript强制转换数字类型并设置默认值为0
最新发布
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
09-29 336
这个函数对于大多数情况都能很好地工作，但需要注意，有些非数字字符串（如"123abc"）在某些情况下可能会被误解析为数字。如果你需要处理这种情况，可能需要添加额外的检查或使用更复杂的转换方法。的结果是否为NaN。如果是NaN，函数将返回默认值0，否则返回转换后的数字。函数尝试转换输入到数字。如果转换失败，那么返回默认值0。函数会尝试把输入转换为浮点数。如果输入不能被转换为数字，你可以创建一个函数，使用JavaScript的。将返回NaN（Not a Number）。
Symbol 类型 的简单理解和应用
qq_34703156的博客
05-12 4709
Symbol 的应用 symbol是一种基本数据类型 （primitive data type）。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。 1 每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的 也就是说每一...
JavaScript 之 Symbol 数据类型
weixin_45092437的博客
09-07 1485
symbol类型具有以下特点：① 唯一性：每个symbol值都是唯一的；② 不可变性：symbol值是不可被修改的；③ 属性标识符：symbol类型的值可以作为对象属性的标识符key；④Symbol可以与其他数据类型进行运算，但不能被强制转换为其他数据类型。利用前两个特性，可以避免属性名的冲突和保证属性不会被意外覆盖。
简述Symbol数据类型
qq_41583484的博客
09-03 3419
数据类型 “symbol” 是一种原始数据类型，该类型的性质在于这个类型的值可以用来创建匿名的对象属性。该数据类型通常被用作一个对象属性的键值——当你想让它是私有的时候。
数据类型 Symbol
You_are_my_zing的博客
12-08 570
QuestDB引入了一个名为 SYMBOL 的数据类型;一种用于存储重复字符串的数据结构。在内部，SYMBOL 类型被存储为一个整数表及其对应的字符串值。 symbol类型的优势 大大提高了查询性能，因为字符串操作比较和写入int类型而不是字符串。 由于int映射到字符串类型，大大提高了存储效率。 对用户来说是不显眼的，因为SQL执行的结果与处理字符串值的结果相同。 通过消除对显式附加表或连接的需要，降低了数据库模式的复杂性。 使用 symbols 在创建表时，列可以被指定为SYMBOL，类似于其
ES6新增数据类型：Symbol类型
mapbar_front的博客
07-05 798
什么是Symbol类型 作为一个对象，如果这个对象是一个全局变量，在每一个模块中，我们都要使用这个对象，这个时候就会出现一个问题，我如何保证我的对象的属性是唯一的？ //全局对象obj var obj = { name: 'mapbar_front', age: 27 } //在另一个文件a.js中 obj.name = 'mapbar'; //在新的b.js文件中 con...
Symbol数据类型的创建和使用
weixin_44028879的博客
09-05 1286
文章目录一、Symbol是什么？二、Symbol类型的创建三、Symbol的使用 一、Symbol是什么？ Symbol是ES6新增的基本数据类型。它的值通过Symbol函数生成，相同Symbol 函数返回的值是唯一的。 Symbol函数可以接收字符串作为参数，但是即使相同参数返回的也是唯一值。 即使是长得一样的，其实是不一样的两个东西。 * 示例：Symbol(’ miaov’) != Symbol(’ miaov’ )* 二、Symbol类型的创建 Symbol 类型都是独一无二的，可以保证不会与
es6 对象解构 与 参数默认值
dicha7140的博客
11-09 684
var abc = ({a = 123, b = 321, c = 456} = {}) => console.log(20181109155055, a) abc() 转载于:https://www.cnblogs.com/CyLee/p/9935592.html
ES6——Symbol数据类型
Tyche_ya的博客
06-02 471
Symbol数据类型的创建和使用
ES6中rest参数和扩展运算符的区别
03-25
Rest参数和扩展运算符都是ES6中新增的特性，但是它们的作用和使用方式略有不同。 Rest参数是用于捕获函数中的多余参数的机制，也就是说，Rest参数会将传递给函数的所有参数放在一个数组中，这个数组可以在函数内部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值