ECMAScript——函数参数的默认值、rest参数、扩展运算符、Symbol

最新推荐文章于 2022-12-05 09:40:03 发布
最新推荐文章于 2022-12-05 09:40:03 发布
阅读量188 收藏
点赞数
分类专栏： javascript es6 Vue 文章标签： ecmascript javascript vue Symbol
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_jQuery/article/details/120216402
版权
javascript 同时被 3 个专栏收录
123 篇文章 0 订阅
订阅专栏
Vue
86 篇文章 0 订阅
订阅专栏
es6
73 篇文章 0 订阅
订阅专栏

ECMAScript

函数参数的默认值

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

特性：

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

​ 2.可以与解构赋值一起使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.形参初始值，具有默认值的的形参，一般位置要靠后（潜规则）
        // 当没有传递给c实参时，c会默认等于10
        /* function add(a, b, c = 10) {
            return a + b + c;
        };
        //c没有初始值，且没有对应c的实参，c就是undefined的，然后1+2+undefined就等于NaN
        let res = add(1, 2); //NaN
        console.log(res); */
        // 2.可以与解构赋值一起使用
        /* function connect(options) {
            let host = options.host;
            let username = options.username;
            let password = options.password;
            let port = options.port
        }; */
        // 同名赋值
        function connect({
            host = '127.0.0.1', //当host没有传，就可以使用初始值
            username,
            password,
            port
        }) {
            console.log(host);
            console.log(username);
            console.log(password);
            console.log(port);
        };
        connect({
            // host: 'localhost',
            username: 'oot',
            password: 'root',
            port: 3306
        })
    </script>
</body>

</html>
rest参数

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

rest参数必须放到参数最后

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // ES5获取实参的方式——arguments
        /* function func() {
            console.log(arguments);//是一个数组对象，是对象，不是数组
        };
        func(1, 2, 3, 4); */
        // ES6获取实参的方式——rest
        // args是自定义的
        /*  function func(...args) {
             console.log(args); //是一个数组，所以可以使用数组API的方法，如：filter,map,some等等
         }
         func(1, 2, 3, 4); */
        //  res：存放剩余的参数，形成一个数组
        function fun(a, b, ...res) {
            console.log(a);
            console.log(b);
            console.log(res);
        }
        fun(1, 2, 3, 4, 5, 6, 7)
    </script>
</body>

</html>
扩展运算符

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

rest参数是放在形参里面，扩展运算符是放在实参里面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //声明一个数组
        const goods = ['香蕉', '草莓', '葡萄', '苹果'];
        // 声明一个函数
        function changed() {
            console.log(arguments);
            // return arguments
        };
        // const res = changed(...goods);
        // console.log(res[0]);
        changed(...goods); //changed('香蕉', '草莓', '葡萄', '苹果')
    </script>
</body>

</html>

扩展运算符的应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // 1.数组合并
        /*  const arr1 = ['孙悟空', '猪八戒', '沙和尚', '唐僧'];
         const arr2 = ['白骨精', '蜘蛛精', '蛇精', '妖精'];
         // 合并两个数组
         // const res = arr1.concat(arr2);
         const res = [...arr1, ...arr2];
         console.log(res); */
        // 2.数组的克隆
        /* const arr1 = ['孙悟空', '猪八戒', '沙和尚', '唐僧'];
        // 里面是引用数据类型的话，也是浅拷贝（拷贝引用地址，会互相影响）
        const res = [...arr1]; //['孙悟空', '猪八戒', '沙和尚', '唐僧']
        console.log(res); */
        // 3.将伪数组转为真正的数组
        const divs = document.querySelectorAll('div');
        console.log(divs); //伪数组，不可使用数组的API
        const divsArr = [...divs];
        console.log(divsArr); //可以使用数组的API
    </script>
</body>

</html>
Symbol基本使用

ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是Javascript语言的第七种数据类型，是一种类似于字符串的数据类型

特点：

​ 1.symbol的值是唯一的，用来解决命名冲突的问题（作唯一标识的）

  1. symbol值不能与其他数据进行运算
  2. symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 创建
        let s = Symbol();
        console.log(typeof s); //symbol
        let s2 = Symbol('zs');
        let s3 = Symbol('zs');
        console.log(s2 === s3); //false；s2和s3只是一个编号，内容是一样的，但是编号的不一样的,
        // 比如身份证，人名是一样，但是身份证号不一致
        // 2.创建(函数对象),登记在全局供搜索
        let s4 = Symbol.for('ls');
        let s5 = Symbol.for('ls');
        console.log(s4 === s5); //true
        // 1.不能与其他数据进行运算
        let res = s + 100;
        console.log(res); //报错：Uncaught TypeError: Cannot convert a Symbol value to a number
    </script>
</body>

</html>

js的数据类型：USONB

U：undefined

S：String、Symbol

O：Object

N：null

B：Boolean

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 向对象中添加方法
        let obj = {};
        // 先声明一个对象
        let methods = {
            up: Symbol(),
            down: Symbol()
        };
        // 1.添加方式，很安全，不会与原有的同名属性冲突
        /* obj[methods.up] = function() {
            console.log("我要努力的往上爬");
        };
        obj[methods.down] = function() {
            console.log("我可以快速的向下滚");
        };
        // 调用
        obj[methods.up](); */
        let game = {
            name: '王者荣耀',
            [Symbol('king')]: function() {
                console.log('王者段位');
            },
            [Symbol('lower')]: function() {
                console.log('菜鸟级别');
            }
        }
        console.log(game);
    </script>
</body>

</html>
Symbol的内置值

除了自己定义的Symbol值之外，ES6还提供了11个内置的Symbol值（Symbol的属性），指向语言内部使用的方法

这些内置都当做对象的属性存在

h_jQuery
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECMAScript - 函数基础、形参与实参、参数默认值
weixin_43988919的博客
03-30 190
高内聚：模块内的代码块联系性强，功能性强 低耦合：各函数之间独立 -》模块的单一责任制 一、函数基础 • 命名规则： 不能数字开头 ，可以用字母 _ $ 开头 驼峰命名法 复合单词 myWonder • 函数声明 function test(a, b, c){ //执行语句; } • 匿名函数表达式/函数字面量 var test = function test1(){ //执行语句; }; test();// 调用函数 console.log(test.name);// test1 test1();
ECMAScript-扩展运算符与rest参数
东东爱编码博客
10-21 145
文章目录一、扩展运算符与rest参数...运用1. 扩展运算符：把数组或者类数组展开成用逗号隔开的值2. rest参数：把逗号隔开的值组合成一个数组 一、扩展运算符与rest参数 …运用 1. 扩展运算符：把数组或者类数组展开成用逗号隔开的值 // 扩展运算法 function foo(a, b, c){ console.log(a, b, c) // 1 2 3 } let arr = [1, 2, 3] foo(...arr) // 数组合并 let arr1 = [1, 2, 3] let
ECMAScript 6（10）函数的扩展(1) 函数参数的默认值和 rest 参数
jiandan1127的博客
05-24 234
目录 函数参数 1. 函数参数的默认值 2. 传undefined时，取默认值 3. 变量是默认声明的，所以不能用let或const再次声明。 4. 使用参数默认值时，函数不能有同名参数。 5. 使用变量时，每次求值使用实时的值 6. 默认值与解构赋值 7. 函数的 length 属性 8. 函数的作用域 9. 函数参数默认值的使用要点 r...
ECMAScript 6（12）函数的扩展（1）——函数参数的默认值之详细解析
qq20004604的博客
05-18 1326
0、一句话总结 函数参数有默认值的情况下，先取赋值，无则取默认值； 1、函数参数1.1、参数的默认值1.1.1、是什么？ function [name]([param1[ = defaultValue1 ][, …, paramN[ = defaultValueN ]]]) { statements }3 简单来说，es6让js也可以像c++一样，给函数参数一个默认值了（原本默认值可以认为是un
ECMAScript-函数的参数
东东爱编码博客
10-20 125
文章目录一、ECMAScript-函数的参数1. 函数默认值2. 与解构赋值的结合3. length属性4. 参数的作用域5. 函数的name属性 一、ECMAScript-函数的参数 1. 函数默认值 function foo(x, y) { y = y || 'es' // 判断y是否传值 console.log(x,y) } foo('hello', 'world') foo('hello', 0) // 这样就存在问题 其实本意是hello 0 // es6中场景适配 // 使
Ecma-262.rar_ECMA-262_ECMAScript_javascript
09-21
2. **函数**：函数声明、函数表达式、参数默认值、rest参数、箭头函数、作用域（全局、局部、块级）。 3. **对象**：对象字面量、属性访问、原型链、构造函数、实例化、方法、对象扩展运算符。 4. **数组**：数组...
estudo-ecmascript6
02-14
7. **剩余参数（Rest Parameters）与扩展运算符（Spread Operator）** `...` 符号在函数参数中表示剩余参数，将多余的参数收集到一个数组中；在数组和对象中，`...` 表示扩展运算符，可以将数组或对象展开。 8. **...
1.ECMAScript 6简介1
08-03
7. **函数的扩展**：箭头函数简化了函数定义，`default参数`允许函数参数有默认值，`rest参数`收集剩余的参数，`name`属性能正确返回箭头函数的名称。 8. **数组的扩展**：`Array.from()`将类数组对象或可迭代对象...
es-proposals:关于EcmaScript语言的提案
05-19
8. **Rest/Spread运算符**：在函数参数中，`...`用于收集剩余参数；在对象中，用于合并对象，这两个特性提供了更大的灵活性。 9. **默认参数**：函数参数可以设置默认值，避免了因未提供参数而引起的错误。 10. **...
ECMAScript-6-7：ES6
02-20
- 函数参数可以设置默认值，如 `function foo(x = 10) {}`。`...rest` 参数允许捕获未指定位置的所有参数，如 `function bar(...args) {}`。 7. **Promise 对象** - Promise 是处理异步操作的新方式，提供了链式...
前端相关 - 箭头函数
qq_33344449的博客
07-12 153
博客内容引用自以下链接 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions 基础语法 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression //相当于：(param1, param2, …, paramN) =>{ return ex.
ECMAScript 6 语法 3 —— 三个点...的作用，何为Rest?
wdw18668109050的博客
11-10 394
不得不吐槽，翻译本身也成为了我们学习者不可逾越的障碍，如果一个翻译不好，就会有数以亿计的人，一代一代的人，不停的在一个知识点里，来回的掉坑。
ES6入门函数篇（一）之函数形参的默认值
leviscar的博客
11-22 1918
一、在ECMAScript5中模拟默认参数JavaScript函数有一个特别的地方，无论在函数定义中声明了多少参数，都可以传入任意数量的参数，也可以在函数定义时添加针对参数数量的处理逻辑，当已定义的形参无对应的传入参数时，为其指定一个默认值。在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。function makeRequest(url,timeout,callback){
es6
MaNqo的博客
04-04 161
JSON JSON是一种传输数据的格式(以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的) 属性名要加双引号 { "name": "deng", "age": 123 } 过去传输数据以xml的格式 a. JSON.parse() 用于把字符串转化为对象。 const str = '{"name": "phoebe", "age": 20}'; const obj = JSON.parse(str) // {name: "phoebe", age: 20
es6学习：函数参数默认值、rest参数、扩展运算符和symbol数据类型
sunshine_0880的博客
04-01 319
1. 函数参数默认值（es6允许给函数参数赋值初始值） 1.1 形参初始值 具有默认的参数，一般位置置后(潜规则) let add = (a, b, c = 10) => (a + b + c) let result1 = add(1, 2, 3) let result2 = add(1, 2) console.log(result1, result2) // 6 13 待更新... ... ...
日期时间选择器——el-date-picker设置默认时间
热门推荐
h_jQuery的博客
08-03 1万+
组件使用
vscode用Git上传项目到远程仓库（gitee）
h_jQuery的博客
07-06 1万+
git上传 在vscode的源代码管理那里操作 1.添加仓库：点击右上角的三点(…)—>选择远程—>选择添加远程存储库—>在弹出框那里输入远程的仓库地址（gitee或者是github） 这里填的是仓库名 2.将工作区的文件添加到暂存区（暂存更改）：点击更改字样右侧的**+**号 3.将暂存区的文件提交到本地仓库： 点击源代码管理字样右侧的√ 输入提交的备注信息（比如完成某某功能，或者完成了某某页面），然后就回车 完成了第三步，此时的页面 说明文件都提交了，提交到了本地仓库
文件上传——将文件转成base64传给后端
h_jQuery的博客
10-25 4169
文件上传转base64
vue组件封装——公用基础table组件
h_jQuery的博客
12-05 3543
vue公用基础表格组件封装案例
详细解释一下...扩展运算符
最新发布
04-07
扩展运算符（英文名：Spread Operator）是ES6（ECMAScript 6）中新增的一种运算符，用于展开数组或对象，使其成为独立的值。在使用扩展运算符时，可以将数组或对象拆分成单个元素，或者将多个元素合并成一个数组或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值