javascript高级（6）

为什么要学习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可以防止循环变量变成全局变量


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let可以防止循环变量变成全局变量</title>
</head>
<body>

</body>
<script>
  
    for(let i =0;i<2;i++){
        
    }
    console.log(i) //i is not define
</script>
</html>

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关键字，箭头函数中的this指向函数定义时的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数据结构可实现数据去重

<!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>