【JavaScript】ES6新特性(2)

5. 字符串扩展

5.1 includes函数

判断字符串中是否存在指定字符

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>字符串扩展的includes函数title>
head>

<body>
    <script>
        let myname = "ichdu";

        // includes 判断字符串中是否存在指定字符
        console.log(myname.includes("i")); // true
        console.log(myname.includes("d")); // true
        console.log(myname.includes("ich")); // true
        console.log(myname.includes("iu")); // false

        // startsWith 判断字符串是否开头字符串
        console.log(myname.startsWith('i')); // true
        console.log(myname.startsWith('ich')); // true

        // endsWith 判断字符串是否结尾字符串
        console.log(myname.endsWith('u')); // true
        console.log(myname.endsWith('du')); // true

        // 加入第二个位置参数
        // includes
        console.log(myname.includes("i")); // true
        // 以字符串索引值为 1 开始判断
        console.log(myname.includes("i", 1)); // false

        // startsWith
        console.log(myname.startsWith('i')); // true
        // 以字符串索引值为 1 开始判断
        console.log(myname.startsWith('i', 1)); // false

        // endsWith
        console.log(myname.endsWith('u')); // true
        // 以字符串倒数第三个开始判断
        console.log(myname.endsWith('u',3)); // false
        console.log(myname.endsWith('h',3)); // true
    script>
body>

html>

5.2 repeat 函数

repeat()方法返回一个新字符串,表示将原字符串重复n次

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>字符串扩展的repeat函数title>
head>
<body>
    <script>
        let myname = "ichdu";

        console.log(myname.repeat(2)); // ichduichdu
        console.log(myname.repeat(2.8)); // ichduichdu,重复两次,把 0.8 切掉
        console.log(myname.repeat("aaa")); // 检测不出多少次,打印为空
        console.log(myname.repeat("4")); // 将字符串 “4” 转为数值 4 ,重复打印 4 次
    script>
body>
html>

【JavaScript】ES6新特性(2)_第1张图片

6. 数值扩展

6.1 二进制和八进制表示法

二进制表示法新写法: 前缀 0b 或 0B
八进制表示法新写法: 前缀 0o 或 0O

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>二进制和八进制表示法title>
head>

<body>
    <script>
        // 支持 二进制、八进制
        let num1 = 100;
        let num2 = 0x100; // 十六进制
        let num3 = 0b100; // 二进制
        let num4 = 0o100; // 八进制

        console.log(num1);
        console.log(num2);
        console.log(num3);
        console.log(num4);
    script>
body>

html>

6.2 isFinite 与 isNaN方法

isFinite 方法

Number.isFinate 没有隐式的 Number() 类型转换,所有非数值都返回 false

传统 新特性
isFinite() Number.isFinite()
检测一个值是否为有限值,如果是返回true,否则就是Infinity,返回false 对于非数值一律返回false
当0做除数时,是一个无穷大的数,所以返回false Number.isFinite() 用来检查一个数值是否为有限的
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>isFinite 与 isNaN方法title>
head>

<body>
    <script>
        // Number.isFinite Number.isNaN

        // window 自带的 isFinite 方法,传统的全局方法isFinite()
        let num1 = isFinite(100);
        let num2 = isFinite(100 / 0);
        let num3 = isFinite(Infinity);
        let num4 = isFinite("100"); 

        console.log(num1); // true
        console.log(num2); // false
        console.log(num3); // false

        // 因为会先尝试转换成数值,再进行判断,所以为 true
        console.log(num4); // true

        // 新特性的全局方法isFinite()
        let num5 = Number.isFinite(100);
        let num6 = Number.isFinite(100 / 0);
        let num7 = Number.isFinite(Infinity);
        let num8 = Number.isFinite("100");

        console.log(num5); // true
        console.log(num6); // false
        console.log(num7); // false

        // Number.isFinite()对于非数值一律返回false
        console.log(num8); // false
    script>
body>

html>

isNaN方法

传统 新特性
isNaN() Number.isNaN()
检测一个值是否为NaN,隐式转为数字型,是NaN返回true,不是返回false Number.isNaN()只有对于NaN才返回true,非NaN一律返回false
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>isFinite 与 isNaN方法title>
head>

<body>
    <script>
        // Number.isFinite Number.isNaN
        // 传统的 isNaN() —— 检测一个值是否为NaN,隐式转为数字型,是NaN返回true,不是返回false

        // window 自带的isNaN 方法,传统的全局方法isNaN()
        let num1 = isNaN(100);
        let num2 = isNaN(NaN);
        let num3 = isNaN("ich");
        let num4 = isNaN("100");

        console.log(num1); // false
        console.log(num2); // true
        // 尝试转换成数值,不成功,返回true
        console.log(num3); // true
        // 尝试转换成数值,成功,返回false
        console.log(num4); // false

        // 新特性的全局方法 isNaN()
        let num5 = Number.isNaN(100);
        let num6 = Number.isNaN(NaN);
        let num7 = Number.isNaN("ich");
        let num8 = Number.isNaN("100");

        console.log(num5); // false

        // Number.isNaN()只有对于NaN才返回true,非NaN一律返回false
        console.log(num6); // true
        console.log(num7); // false

        console.log(num8); // false
    script>
body>

html>

新特性:减少全局性方法,使得语言逐步模块化

新特性的 Number.isFinite() 和 Number.isNaN() 与传统的全局方法 isFinite() 和 isNaN() 的区别在于传统方法先调用 Number() 将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,Number.isFinite() 对于非数值一律返回false,Number.isNaN() 只有对于NaN才返回true,非NaN一律返回false

6.3 isInteger方法

用来判断一个数值是否为整数

JavaScript 内部,整数和浮点数采用的是同样的储存方法,因此 1 与 1.0 被视为相同的值

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>isInteger 方法title>
head>

<body>
    <script>
        let num1 = Number.isInteger(100);
        // 100.0 也算整数
        let num2 = Number.isInteger(100.0);
        // 100.1 就不是整数了
        let num3 = Number.isInteger(100.1);
        let num4 = Number.isInteger("ich");
        let num5 = Number.isInteger("100");

        console.log(num1); // true
        console.log(num2); // true
        console.log(num3); // false
        console.log(num4); // false
        console.log(num5); // false
    script>
body>

html>

6.4 极小常量Number.EPSILON

表示 1 与大于 1 的最小浮点数之间的差

2.220446049250313e-16

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>极小常量 Number.EPSILONtitle>
head>

<body>
    <script>
        function isEqual(a, b) {
            return Math.abs(a - b) < Number.EPSILON
        }

        console.log(isEqual(0.1 + 0.2, 0.3)) //true
        console.log(0.1 + 0.2 === 0.3) //false
    script>
body>

html>

【JavaScript】ES6新特性(2)_第2张图片

6.5 Math.trunc

Math.trunc:用于返回数字的整数部分

将小数部分抹掉,返回一个整数

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>Math.trunctitle>
head>

<body>
    <script>
        // 将小数部分抹掉,返回一个整数
        console.log(Math.trunc(1.2)); // 1
        console.log(Math.trunc(1.8)); // 1
        console.log(Math.trunc(-1.8)); // -1
        console.log(Math.trunc(-1.2)); // -1
    script>
body>

html>

6.6 Math.sign

Math.sign方法用来判断一个数到底是正数、负数、还是零

对于非数值,会先将其转换为数值

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>Math.signtitle>
head>

<body>
    <script>
        // Math.sign 方法用来判断一个数到底是正数、负数、还是零
        // 对于非数值,会先将其转换为数值

        console.log(Math.sign(-100)); // -1
        console.log(Math.sign(100)); // +1
        console.log(Math.sign(0)); // +0
        console.log(Math.sign(-0)); // -0
        console.log(Math.sign("ich")); // NaN
    script>
body>

html>

7. 数组扩展

7.1 扩展运算符

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>扩展运算符title>
head>

<body>
    <script>
        // ... 展开
        let arr = [1, 2, 3];

        // 传统复制数组
        let arr2 = arr.concat();
        console.log(arr, arr2); // [1, 2, 3] [1, 2, 3]
        arr2.pop();
        console.log(arr, arr2); // [1, 2, 3] [1, 2]

        // 扩展运算符 复制数组
        let arr3 = [...arr];
        console.log(arr, arr3); // [1, 2, 3] [1, 2, 3]

        // 扩展运算符 合并数组
        let arr4 = [4, 5, 6]
        console.log([...arr, ...arr4]); // [1, 2, 3, 4, 5, 6]

        // 扩展运算符与解构赋值的使用
        let myarr = [1, 2, 3, 4, 5, 6, 7, 8];
        let [a, b, c] = myarr;
        console.log(a, b, c); // 1,2,3
        // 只拿到单个值,可以前面 a,b 各取一个数值,剩下的全赋值给 c
        let [a1, b1, ...c1] = myarr;
        console.log(a1, b1, c1);
    script>
body>

html>

【JavaScript】ES6新特性(2)_第3张图片

7.2 Array.from

将类数组对象转换为真正数组

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>Array.fromtitle>
head>

<body>
    <ul>
        <li>111li>
        <li>222li>
        <li>333li>
    ul>
    <script>
        // Array.from

        // 可以将 arguments伪数组 转成真的的数组
        function test() {
            console.log(Array.from(arguments));
        }
        test(1, 2, 3, 4);

        // 获取全部的 li 标签列表,类似数组的对象
        let lis = document.querySelectorAll('li');
        console.log(lis); // 不是真正的数组

        // 可以使用 map 等方法
        Array.from(lis).map(function() {

        })
    script>
body>

html>

将 arguments伪数组 转成真的的数组

【JavaScript】ES6新特性(2)_第4张图片

7.3 Array.of

将一组值转化为数组,即新建数组

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>Array.oftitle>
head>

<body>
    <script>
        // 下面代码短板是只有一个数值时,会创建一个长度为 3 的数组,
        // 而不是 1 个长度的数组,里面有一个数值 3
        let arr1 = Array(3); 

        // Array.of 弥补该短板
        let arr2 = Array.of(3);

        console.log(arr1, arr2);
    script>
body>

html>

【JavaScript】ES6新特性(2)_第5张图片

7.4 find方法

  1. 该方法主要应用于查找第一个符合条件的数组元素

  2. 它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素。如果没有符合条件的元素,返回值为undefined

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>find 方法title>
head>

<body>
    <script>
        let arr = [11, 12, 13, 14, 15, 16];

        // 找到比 13 大的数
        let res = arr.find(function (item) {
            return item > 13;
        })
        console.log(res); // 14

        // 查找比 13 大的数,返回该索引
        let res1 = arr.findIndex(function (item) {
            return item > 13;   
        })
        console.log(res1); // 3

        // ES2022 ES13 的 findLast findLastIndex
        // findLast 从最后一个查找比 13 大的数
        let res2 = arr.findLast(function (item) {
            return item > 13;
        })
        console.log(res2); // 16

        // 从最后一个查找比 13 大的数,返回该索引
        let res3 = arr.findLastIndex(function (item) {
            return item > 13;
        })
        console.log(res3); // 5
    script>
body>

html>

7.5 fill 方法

使用自己想要的参数替换原数组内容,但是会改变原来的数组

  • array.fill( value , start , end )
    • value 用来填充数组元素的值,必填
    • start 可选 起始索引,默认值为 0
    • end 可选 终止索引,默认值为 this.length
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>fill 方法title>
head>

<body>
    <script>
        // fill 快速填充
        // array.fill( value , start , end )
        // value 用来填充数组元素的值,必填
        // start 可选 起始索引,默认值为 0
        // end 可选 终止索引,默认值为 this.length
        let arr = new Array(3).fill('ichdu');
        console.log(arr);

        let arr1 = [11, 22, 33];
        console.log(arr1.fill("ich", 1, 2));
    script>
body>

html>

【JavaScript】ES6新特性(2)_第6张图片

7.6 flat与flatMap方法

flat() 方法可以将多维数组展平成一维数组

flatMap() 方法按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

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>flat 与 flatMap 方法title>
head>

<body>
    <script>
        let arr = [1, 2, 3, [4, 5, 6]];
        let arr1 = arr.flat();
        console.log(arr, arr1);
        // arr :1, 2, 3, [4, 5, 6] arr1 : 1, 2, 3, 4, 5, 6

        var arr2 = [
            ["鞍山", "安庆", "安阳"],
            ["北京", "保定", "包头"]
        ]
        console.log(arr2.flat());

        var obj = [
            {
                name: "A",
                list: ["鞍山", "安庆", "安阳"]
            },
            {
                name: "B",
                list: ["北京", "保定", "包头"]
            }
        ]
        console.log(obj.flat());
        // 设置回调函数,返回的是传入的参数的 list 属性
        console.log(obj.flatMap(item => item.list)) 
    script>
body>

html>

【JavaScript】ES6新特性(2)_第7张图片

8. 对象扩展

8.1 对象简写

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>对象简写title>
head>

<body>
    <script>
        // 创建对象传统写法
        let name = "ich";
        let obj = {
            name: name,
            test: function () {

            },
            test2: function () {

            }
        }

        // 对象简写
        let name1 = "du";
        let obj1 = {
            name, // 相当于 name: name,
            test() {

            },
            test2() {

            }
        }
    script>
body>

html>

8.2 属性名表达式

ES6允许用表达式作为属性名,但是一定要将表达式放在方括号内

注意点:属性的简洁表示法和属性名表达式不能同时使用,否则会报错

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>属性名表达式title>
head>

<body>
    <script>
        // 属性名表达式
        // 给属性名起名
        let name1 = "a";
        let obj1 = {
            [name1]: "ich", // 相当于 a: "ich",
            test() { },
            test2() { }
        }
        console.log(obj1); // {a: 'ich', test: ƒ, test2: ƒ}

        let name2 = "a";
        let obj2 = {
            [name2 + "bc"]: "ich", // 相当于 abc: "ich",
            test() { },
            test2() { }
        }
        console.log(obj2); // {abc: 'ich', test: ƒ, test2: ƒ}


        let name3 = "a";
        let name4 = "xxx";
        let obj3 = {
            [name2 + "bc"]: "ich", // 相当于 abc: "ich",
            [name4 + "test"]() { },
            [name4 + "test2"]() { }
        }
        console.log(obj3); // {abc: 'ich', xxxtest: ƒ, xxxtest2: ƒ}
    script>
body>

html>

【JavaScript】ES6新特性(2)_第8张图片

8.3 Object.assign

Object.assign(target, object1, object2, …)

用于将源对象的所有可枚举属性复制到目标对象中

第一个参数是目标对象,后面可以跟一个或多个源对象作为参数

  • target:参数合并后存放的对象
  • object1:参数1
  • object2:参数2

如果目标对象和源对象有同名属性,或者多个源对象有同名属性,则后面的属性会覆盖前面的属性

如果该函数只有一个参数,当参数为对象时,直接返回该对象;当参数不是对象时,会先将参数转为对象然后返回

因为 null 和 undefined 不能转化为对象,所以会报错

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>Object.assigntitle>
head>

<body>
    <script>
        // ES6 快速合并对象
        let obj1 = {
            name: "ich"
        }
        let obj2 = {
            age: 100
        }
        let obj3 = {
            name: "ichdu"
        }
        console.log(Object.assign(obj1, obj2, obj3)); // {name: 'ichdu', age: 100}
        // 缺点是会改变 obj1 对象
        // 其实是将 obj2、obj3 合并到 obj1,obj2、obj3不会受到变化

        // 不想改变obj1的解决方法:创建一个空的对象
        let obj = {}
        console.log(Object.assign(obj, obj1, obj2, obj3)); // {name: 'ichdu', age: 100}

        // 扩展运算符...对对象的操作 快速复制对象、合并对象 ES2018
        // 快速复制对象
        let obj4 = {
            name: "ich"
        }
        // 复制 obj4 给 obj5
        let obj5 = {
            ...obj4
        }
        console.log(obj5); // {name: 'ich'}
        obj5.name = "du";
        console.log(obj4); // {name: 'ich'} - 没有被更改到 name
        console.log(obj5); // {name: 'du'} - 被更改 name

        // 合并对象
        let obj6 = {
            name: "ich"
        }
        let obj7 = {
            age: 100
        }
        let obj8 = {
            name: "ichdu"
        }
        console.log({ ...obj6, ...obj7 }); // {name: 'ich', age: 100}
        // 合并的对象有重名属性,后合并的对象属性会覆盖前对象属性
        console.log({ ...obj6, ...obj7, ...obj8 }); // {name: 'ichdu', age: 100}
    script>
body>

html>

【JavaScript】ES6新特性(2)_第9张图片

8.4 Object.is

方法判断两个值是否是相同的值

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>Object.istitle>
head>

<body>
    <script>
        // Object.is 方法判断两个值是否是相同的值

        //  == 和 === 都可以判断两个值是否是相同的值,
        // 但有个弊端就是无法判断两个 NaN 为 true
        console.log(NaN == NaN); // false
        console.log(NaN === NaN); // false

        console.log(Object.is(5, 5)); // true
        console.log(Object.is(5, "5")); // false
        console.log(Object.is({}, {})); // false
        console.log(Object.is(NaN, NaN)); // true

        // 用处,转换值错误时可以判断NaN
        console.log(Object.is(parseInt("ich"), NaN)); // true

        // 还可以判断 +0 -0 相不相等
        console.log(Object.is(+0, -0)); // false
        console.log(+0 === -0); // true
    script>
body>

html>

9. 函数扩展

9.1 函数传递参数的时候的默认值

  • 在定义函数的时候,有时需要一个默认值出现
  • 当不传递参数的时候,使用默认值,传递参数了就使用传递的参数
  • 注意点:使用函数默认参数时,不允许有同名参数
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>参数默认值title>
head>

<body>
    <script>
        // 参数默认值
        function ajax(url, method, async) {
            console.log(url, method, async);
        }
        // 多次调用函数,且参数相同 - 麻烦
        ajax("/aaa", "get", true);
        ajax("/aaa", "get", true);
        ajax("/aaa", "get", true);
        ajax("/aaa", "get", true);

        // 可以使用参数默认值
        function ajax1(url, method = "get", async = true) {
            console.log(url, method, async);
        }
        ajax1("/aaa");
        ajax1("/aaa");
        ajax1("/aaa");
        ajax1("/aaa");
    script>
body>

html>

在这里插入图片描述

9.2 rest 参数

  • rest 参数,剩余参数
    • 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>rest 参数title>
head>

<body>
    <script>
        // rest 参数 剩余参数
        function test(data) {
            console.log(data);
        }
        test(1, 2, 3, 4, 5, 6); // 1
        // 获得的是一个参数,因为形参只有一个

        // 如何接收全部的参数
        function test1(...data) {
            console.log(data);
        }
        test1(1, 2, 3, 4, 5, 6); // 打印一个数组 [1, 2, 3, 4, 5, 6]

        // a,b传入相应参数,剩余参数传给 data
        function test2(a, b, ...data) {
            console.log(data);
        }
        test2(1, 2, 3, 4, 5, 6); // [3, 4, 5, 6]

        // name 属性,获得函数名字属性
        console.log(test.name);
    script>
body>

html>

【JavaScript】ES6新特性(2)_第10张图片

9.3 箭头函数

  • 箭头函数是 ES6 里面一个简写函数的语法方式
  • 重点: 箭头函数只能简写函数表达式,不能简写声明式函数
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>箭头函数title>
head>

<body>
    <ul>
    ul>
    <script>
        // 箭头函数:写法简洁

        // 传统
        let test = function () {
            console.log("111"); // 111
        }
        test();

        // 箭头函数
        let test2 = () => {
            console.log("222"); // 222
        }
        test2();

        // 更简洁
        let test3 = () => "333";
        console.log(test3());; // 333

        let arr = ["aaa", "bbb", "ccc"];
        let newarr = arr.map((item) => {
            return `
  • ${item}
  • `
    }); console.log(newarr);
    script> body> html>

    【JavaScript】ES6新特性(2)_第11张图片

    9.4 箭头函数的特殊性

    1

    函数体只有一行代码的时候,可以不写 {} ,并且会自动 return

    只有return 一条语句时,可以省略 return

    如果返回对象需要注意省略格式

    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>箭头函数的特殊性title>
    head>
    <body>
        <script>
        	let arr = ["aaa", "bbb", "ccc"];
            // 函数体只有一行代码的时候,可以不写 `{}` ,并且会自动 return
            // 1. 只有return 一条语句时,可以省略 return
            let newarr1 = arr.map((item) => `
  • ${item}
  • `
    ); console.log(newarr1); // 2. 如果返回对象需要注意省略格式 let test4 = () => { return { name: "ich", age: 100 } } console.log(test4()); // {name: 'ich', age: 100} // 省略注意 不要省略(),不然只有{},系统识别不出 // let test5 = () => { // name: "ich", // age: 100 // } let test5 = () => ({ name: "ich", age: 100 }) console.log(test5()); // {name: 'ich', age: 100}
    script> body> html>

    【JavaScript】ES6新特性(2)_第12张图片

    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=device-width, initial-scale=1.0">
        <title>箭头函数的特殊性title>
    head>
    <body>
        <script>
            // 函数的行参只有一个的时候可以不写 `()` 其余情况必须写
            // 3. 如果只有一个参数,可以省略包裹参数的()
            let arr1 = ["aaa", "bbb", "ccc"];
            let newarr2 = arr1.map(item => `
  • ${item}
  • `
    ); console.log(newarr2); // ['
  • aaa
  • ', '
  • bbb
  • ', '
  • ccc
  • ']
    let arr2 = ["aaa", "bbb", "ccc"]; let newarr3 = arr2.map((item, index) => `
  • ${item}
  • `
    ); console.log(newarr3); // ['
  • aaa
  • ', '
  • bbb
  • ', '
  • ccc
  • ']
    script> body> html>

    【JavaScript】ES6新特性(2)_第13张图片

    3. 箭头函数内部没有 arguments

    箭头函数内部没有 arguments 这个参数集合

    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>箭头函数的特殊性title>
    head>
    <body>
        <script>
            // 箭头函数内部没有 arguments 这个参数集合
            // 无法访问 arguments
            let test6 = () => {
                console.log(arguments);
            }
            test6(1, 2, 3, 4, 5);
            // 报错:Uncaught ReferenceError: arguments is not defined
        script>
    body>
    html>
    

    在这里插入图片描述

    4. 无法 new 实例化

    无法 new 实例化

    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>箭头函数的特殊性title>
    head>
    
    <body>
        <script>
            // 5.无法 new 实例化
            let test7 = () => {
                console.log("111");
            };
            new test7();
            // 报错:Uncaught TypeError: test7 is not a constructor
        script>
    body>
    
    html>
    

    在这里插入图片描述

    5. 箭头函数内部没有 this

    箭头函数内部没有 this,箭头函数的 this 是上下文的 this

    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>箭头函数的特殊性title>
    head>
    
    <body>
        模糊搜索
        <input type="text" id="mysearch"><br>
        模糊搜索改进
        <input type="text" id="mysearch1"><br>
        模糊搜索箭头函数
        <input type="text" id="mysearch2"><br>
        模糊搜索箭头函数缺点
        <input type="text" id="mysearch3">
        <script>
            let osearch = document.querySelector("#mysearch");
    
            // 传统函数的事件
            osearch.oninput = function () {
                setTimeout(function () {
                    console.log(this); // Window,指向的事window
                    console.log(`发送${this.value}到后端,获取列表数据`);
                }, 1000);
            }
            // 发现发送的都是 undefined 的数据,而不是输入的正常值
            // 因为 this 指向问题,谁调用,this 就指向谁
            // 定时器是内置函数,window调用的,指向的是window下的this,
            // 但是window没有this.value,所以出现 undefined
            // 
            // 改进
            // 将 osearch1.oninput 的 this 赋值给 自定义一个变量
            // 用来存储 osearch1.oninput 的 this
            // 再给定时器调用就可以了
            let osearch1 = document.querySelector("#mysearch1");
            osearch1.oninput = function () {
                let _this = this;
                setTimeout(function () {
                    console.log(`发送${_this.value}到后端,获取列表数据`);
                }, 1000);
            }
    
            // 箭头函数
            let osearch2 = document.querySelector("#mysearch2");
            osearch2.oninput = () => {
                setTimeout(function () {
                    // 箭头函数内部没有 this,箭头函数的 this 是上下文的 this
                    console.log(`发送${this.value}到后端,获取列表数据`);
                }, 1000);
            }
    
            // 箭头函数没有this的缺点
            let osearch3 = document.querySelector("#mysearch3");
            osearch3.oninput = () => {
                console.log(this); // this 指向 Window 
                console.log(this.value); // this的value值变成了 undefined
                setTimeout(function () {
                    // 因为定时器的 this 指向 父级的,
                    // 父级的 this 是 undefined
                    // 所以定时器的this的value值也变成undefined
                    // 所以使用箭头函数没有this的特性要谨慎
                    console.log(`发送${this.value}到后端,获取列表数据`);
                }, 1000);
            }
        script>
    body>
    
    html>
    

    【JavaScript】ES6新特性(2)_第14张图片


    【JavaScript】ES6新特性(2)_第15张图片

    GitHub代码
    gitee代码

    你可能感兴趣的:(JavaScript学习笔记,es6,javascript,前端)