javascript高级(5)

其他 2021-03-27 19:13:09 阅读次数: 0

ES6

每一次标准的诞生意味着语言的完善，功能的加强，javascript本身也有一些令人不满意的地方

  • 变量提升特性增加了程序运行时的不可预测性
  • 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
    在这里插入图片描述

let

let声明的关键字具有块级作用域，所谓的块级作用域便是一个{}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let声明的变量具有块级作用域</title>
</head>
<body>

</body>
<script>
    if (true) {
        let a = 20;
        console.log(a); //20
        if (true) {
            let b = 50;
            console.log(b)//50
        }
    
    }
    console.log(a) //a is not define


</script>
</html>

在这里插入图片描述

let可以防止循环变量变成全局变量

在这里插入图片描述

let声明的变量不会进行变量提升


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let声明的变量不会进行变量提升</title>
</head>
<body>

</body>
<script>
    console.log(a) // a is not define
    let a = 20;

</script>
</html>

在这里插入图片描述

let声明的变量具有暂存性死区的特性


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let声明的变量具有暂存性死区的特性</title>
</head>
<body>

</body>
<script>
    let a = 20;
    if(true) {
        console.log(a) 
        let a = 30;
    }


</script>
</html>

在这里插入图片描述

let面试之var

此题的关键点：变量i是全局的 函数输出的值是全局作用域下的i


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>let面试题</title>
</head>
<body>

</body>
<script>
    var arr = [];
    for(var i = 0;i<2;i++){
        arr[i] = function () {
            console.log(i)
        }
    }
    arr[0]()//2
    arr[1]()//2
</script>
</html>

在这里插入图片描述

let面试题之let

关键点：函数执行的时候，输出的是上一级循环产生的块状作用域下i的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let面试题</title>
</head>
<body>

</body>
<script>
    let arr = [];
    for(let i =0;i<2;i++){
        arr[i]= function () {
            console.log(i)
        }
    }
    arr[0]()//0
    arr[1]()//1



</script>
</html>

在这里插入图片描述

const

const用来声明常量 常量就是值 （内存地址）不能变化的量

  • 使用const声明的常量具有块级作用域的特性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const声明的常量具有块级作用域的特性</title>
</head>
<body>

</body>
<script>
    if(true){
        const  a = 10;
        if(true) {
            const a =20;
            console.log(a)//20
        }
        console.log(a)//10
    }
    console.log(a)// a is not define

</script>
</html>

在这里插入图片描述

const声明的常量必须初始值


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const声明的常量必须赋初始值</title>
</head>
<body>

</body>
<script>
    const  a;
    console.log(a)
</script>
</html>

在这里插入图片描述

const声明的常量值（内存地址）不能更改



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const声明的常量值不能更改</title>
</head>
<body>

</body>
<script>
    const  arr = [200,300];
    arr[0]='hello';
    arr[1]='word';
    console.log(arr);//['hello','word']
    arr = [200,500];
    console.log(arr) //TypeError: invalid assignment to const `arr'
</script>
</html>

在这里插入图片描述

var let const的区别

在这里插入图片描述

解构赋值

ES6允许从数组中提取值，按照一一对应的方式，赋值给相对应的变量，对象也可以实现解构赋值

数组解构


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6之数组解构</title>
</head>

<body>

</body>
<script>
    let arr = [1, 2, 3];
    let [a, b, c, d] = arr;
    console.log(a); //1
    console.log(b); //2
    console.log(c); //3
    console.log(d); //undefined
</script>

</html>

在这里插入图片描述

对象结构

对象解构的第一种写法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象解构</title>
</head>

<body>

</body>
<script>
    let obj = {
        name: "张三",
        sex: "男"
    };
    let {
        name,
        sex
    } = obj;
    console.log(name);
    console.log(sex);
</script>

</html>

在这里插入图片描述

对象解构的第二种写法


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象解构中的第二种写法</title>
</head>

<body>

</body>
<script>
    let person = {
        name: "尧子陌",
        sex: '男'
    };
    let {
        name: myname,
        sex: mysex
    } = person;
    console.log(myname);
    console.log(mysex);
</script>

</html>

在这里插入图片描述

箭头函数

ES6中新增定义函数的方式

  • 如果函数体内只有一句代码，且代码的执行结果便是返回值，可以省略大括号
  • 如果形参只有一个，可以省略小括号
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6之箭头函数</title>
</head>

<body>

</body>
<script>

    const  fn =() =>{
        console.log('hello word')
    };
    fn() //hello word


    //如果函数体内只有一句代码，且代码的执行结果为函数的返回值，则可以省略大括号
    const sum =(sum1,sum2)=> sum1+sum2

    console.log(sum(20,50))


    //在箭头函数中，如果形参只有一个，也可以省略小括号
    const  fn2 = v => v;
    console.log(fn2(20))
    
</script>

</html>

在这里插入图片描述

箭头函数之this指向


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

<head>
    <meta charset="UTF-8">
    <title>箭头函数中的this</title>
</head>

<body>

</body>
<script>
    let obj = {
        name: "尧子陌"
    };

    function fn() {
        console.log(this);
        return () => {
            console.log(this)
        }

    }
    const Rt = fn.call(obj);
    Rt()
</script>

</html>

在这里插入图片描述

剪头函数之面试题

此题的关键点在于：对象不能产生作用域，没有自己的this指向，此时的this指向全局作用域下的this



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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数面试题</title>
</head>

<body>

</body>
<script>
    var age = 100;

    var obj = {
        age: 20,
        say: () => {
            alert(this.age)
        }


    }
    obj.say()
</script>

</html>

在这里插入图片描述

剩余参数

在ES6中，不能使用arguments，所以用剩余参数来代替


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6之剩余参数</title>
</head>

<body>

</body>
<script>
    function sum(...args) {
        let total = 0;
        args.forEach(item => {
            console.log(item); //item代表遍历数组的每一项
            total += item
        });
        return total;
    }
    console.log(sum(20, 20));
    console.log(sum(20, 40, 60));
</script>

</html>

在这里插入图片描述

剩余参数与结构赋值搭配使用


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剩余参数和解构赋值配合使用</title>
</head>

<body>

</body>
<script>
    let [s1, ...s2] = ['张三', '李四', '王五']
    console.log(s1);
    console.log(s2);
</script>

</html>

在这里插入图片描述

扩展运算符

扩展运算符可以将数组或对象转换成以逗号分割的参数序列


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展运算符</title>
</head>

<body>

</body>
<script>
    // 扩展运算符可以将数组或对象转换成以逗号分割的参数序列
    let ary = [1, 2, 3];
    console.log(...ary);
    console.log(1, 2, 3);
</script>

</html>

在这里插入图片描述

利用扩展运算符合并数组

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展运算符用于合并数组</title>
</head>

<body>

</body>
<script>
    // 第一种方法：利用扩展运算符可以合并数组
    let arr1 = [1, 2, 3];
    let arr2 = [5, 6, 7];
    let arr3 = [...arr1, ...arr2];
    console.log(arr3);

    // 第二种方法：利用push方法合并数组
    const arr4 = ['a', 'b', 'c'];
    const arr5 = ['d', 'e', 'f'];
    arr4.push(...arr5);
    console.log(arr4);
</script>

</html>

在这里插入图片描述

扩展运算符可将伪数组转换成真正的数组

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用扩展运算符将伪数组转换成真正的数组</title>
    <style>
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    let lis = document.querySelectorAll('li');
    let arrLis = [...lis];
    arrLis.push('尧子陌')
    console.log(arrLis);
</script>

</html>

在这里插入图片描述

ES6之数组方法

Array.from()

Array.from()方法可将伪数组转换成真正的数组，此外还可以将函数作为第二个参数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array.form()</title>
</head>

<body>

</body>
<script>
    let arrayLike = {
        '0': '张三',
        '1': '李四',
        '2': '王五',
        'length': '3'
    }
    console.log(arrayLike);
    let arr = Array.from(arrayLike);
    console.log(arr);


    let arrObj = {
            '0': '1',
            '1': '2',
            'length': '2'
        }
        // Array.from()可以传递第二个参数，第二个参数为函数
    let arr2 = Array.from(arrObj, item => item * 2);
    console.log(arr2);
</script>

</html>

在这里插入图片描述

find()

用于查找第一个符合条件的数组成员，如果没有找到，则返回undefined

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>find()方法</title>
</head>

<body>

</body>
<script>
    let arr = [{
            id: 1,
            name: "尧子陌"
        }, {
            id: 2,
            name: "惊鸿"
        }]
        // index:索引  item:数组成员
    let arrFind = arr.find((item, index) => item.id == 2);
    console.log(arrFind);
</script>

</html>

在这里插入图片描述

findIndex()

找出第一个满足条件的数组成员的位置，找不到则返回-1



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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>findIndex()</title>
</head>

<body>

</body>
<script>
    let arr = [5, 10, 15, 20, 25];
    let arrFind = arr.findIndex(item => item > 20);
    console.log(arrFind);
</script>

</html>

在这里插入图片描述

includes()

表示某个数组是否包含特定的值，返回的值为布尔值。


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>includes()方法</title>
</head>

<body>

</body>
<script>
    let arr = [1, 2, 3, 4]
    console.log(arr.includes(1));
</script>

</html>

在这里插入图片描述

ES6之字符串方法

模板字符串

ES6新增定义字符串的方法，用反引号定义

模板字符串的特点

  • 模板字符串可以解析变量
  • 模板字符串可以换行
  • 模板字符串可以调用函数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字符串</title>
</head>

<body>

</body>
<script>
    let name = `尧子陌`;
    console.log(name);
    // 特点一：模板字符串可以解析变量
    let str1 = `大家好，我的名字叫做${name}`;
    console.log(str1);
    // 特点二：模板字符串可以换行
    let people = {
        name: "尧子陌",
        sex: "男",
        age: 18
    }
    let str2 = `<div>
        <span>${people.name}</span>
        <span>${people.sex}</span>
        <span>${people.age}</span>
    
    </div>`
    console.log(str2);

    //特点三：模板字符串可以调用函数
    function star() {
        return '我是一颗星星'
    }

    let str3 = `${star()}`;
    console.log(str3);
</script>

</html>

在这里插入图片描述

starsWith()与endsWith()

  • starsWith:表示该参数字符串是否在原字符串的头部，返回布尔值。
  • endsWith:表示该参数字符串是否在原字符串的尾部，返回布尔值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>starsWith()与endsWith()</title>
</head>

<body>

</body>
<script>
    let str = `hello ES6`;
    console.log(str.startsWith('h'));
    console.log(str.startsWith('hello'));
    console.log(str.endsWith('ES6'));
</script>

</html>

在这里插入图片描述

repeat()

repeat()方法可以将原字符串重复n次，返回一个新字符串


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>repeat()</title>
</head>

<body>

</body>
<script>
    console.log('hello '.repeat(2));
    console.log('2020'.repeat(3));
</script>

</html>

在这里插入图片描述

Set数据结构

ES6提供新的数据结构Set，与数组类似，但是它的成员值是唯一的

Set本身是一个构造函数，用来生成数据结构

Set数据结构之去重

注意：利用Set数据结构可实现数据去重

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set()</title>
</head>

<body>

</body>
<script>
    let s = new Set();
    console.log(s);
    console.log(s.size);

    let s1 = new Set([2, 5, 10, 15, 20, 15, 30]);
    let s2 = [...s1];
    console.log(s2);
    console.log(s1.size);
</script>

</html>

在这里插入图片描述

Set数据结构中的实例方法

  • add(value):添加某个值，返回Set结构本身
  • delete(value):删除某个值，返回一个布尔值，表示删除是否成功
  • has(value):返回一个布尔值，表示该值是否是Set数据结构的成员
  • clear()：清空所有的成员，没有返回值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set()中的实例方法</title>
</head>

<body>

</body>
<script>
    let arr = new Set();
    console.log(arr.add('a').add('b'));
    console.log(arr.delete('b'));
    console.log(arr.has('a'));
    arr.clear();
    console.log(arr.size);
</script>

</html>

在这里插入图片描述

遍历Set数据结构

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历Set数据结构</title>
</head>

<body>

</body>
<script>
    let s = new Set(['a', 'b', 'c']);
    s.forEach(item => console.log(item));
</script>

</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45419127/article/details/112788803
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022