es6（2020年整理）

作者: 东邪_黄药师 | 来源:发表于2020-09-14 09:11 被阅读0次

le6 的特性

let关键字就是用来声明变量的
使用let关键字声明的变量具有块级作用域
在一个大括号中使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
防止循环变量变成全局变量
使用let关键字声明的变量没有变量提升
使用let关键字声明的变量具有暂时性死区特性

1.let声明的变量只在所处于的块级有效

 if (true) { 
     let a = 10;
 }
console.log(a) // a is not defined

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

2.使用let关键字声明的变量具有块级作用域

if (true) {
            let b = 20;
            console.log(b) //20
            if (true) {
                let c = 30;
            }
            console.log(c); //c is not defined
        }
        console.log(b) //20

3.在一个大括号中使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

    if (true) {
            let num = 100;
            var abc = 200;
        }
        console.log(abc); //200
        console.log(num) //num is not defined

4.防止循环变量变成全局变量

for (let i = 0; i < 10; i++) {}
console.log(i);//i is not defined
// 与var对比（var输出了10）
for (var j = 0; j< 10; j++) {}
console.log(j);//10

5.不存在变量提升

 console.log(a); // a is not defined   undefined
 let a = 20;

 console.log(b); //  undefined
 var b  = 20;

6.使用let关键字声明的变量具有暂时性死区特性

利用let声明的变量会绑定在这个块级作用域，不会受外界的影响

var tmp = 123;
 if (true) { 
     tmp = 'abc';
     let tmp; 
 }

经典案例：

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

        arr[0](); //0
        arr[1](); //1

此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.

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

此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的i值。

const

1.具有块级作用域

if (true) {
            const a = 10;
            if (true) {
                const a = 20;
                console.log(a);//20
            }
            console.log(a); //10
        }
        console.log(a); //a is not defined

2.使用const关键字声明的常量必须赋初始值

const PI; // Missing initializer in const declaration

3.常量赋值后，值不能修改

const PI = 3.14;
PI = 100; //Assignment to constant variable.

const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 
ary = ['a', 'b']; // Assignment to constant variable.

let、const、var 的区别

使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

数据结构：

数组解构允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

let ary = [1,2,3];
let [a, b, c, d, e] = ary;
console.log(a) //1
console.log(b) //2
console.log(c) //3
console.log(d) //undefined
console.log(e) //undefined

对象解构：

对象解构允许我们使用变量的名字匹配对象的属性匹配成功将对象属性的值赋值给变量

let person = {name: 'lisi', age: 30, sex: '男'};
let { name, age, sex } = person;
console.log(name) //lishi
console.log(age)  //30
console.log(sex)  //男

另外一种写法：

let person = {name: 'lisi', age: 30, sex: '男'};
let {name: myName , age:myAge} = person;
console.log(myName) //lishi
console.log(myAge)  //30

总结：

解构赋值就是把数据结构分解，然后给变量进行赋值
如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
利用解构赋值能够让我们方便的去取对象中的属性跟方法
——————————————————————————————————————————

箭头函数：

1.箭头函数是用来简化函数定义语法的：

    const fn = () => {
            console.log(123)
        }
        fn();

2.函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

function sum(num1, num2) { 
     return num1 + num2; 
 }
 //es6写法
 const sum = (num1, num2) => num1 + num2; 
const result = sum(10, 20);
console.log(result)  // 30

3.在箭头函数中如果形参只有一个形参外侧的小括号也是可以省略的

const fn = v => {
            alert(v);
        }
        fn(20)

4.箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

const obj = { name: '张三' }
        function fn() {
            console.log(this);
            //this 指向 是obj对象
            return () => {
                console.log(this);
                //this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
            }
        }
        const resFn = fn.call(obj);
        resFn();

案例：

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

箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域
所以会弹出100

小结

箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁
箭头函数的优点在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数

function sum(first, ...args) {
            console.log(first); // 10
            console.log(args); // [20, 30] 
        }
        sum(10, 20, 30)

剩余参数和解构配合使用

let ary1 = ['张三', '李四', '王五'];
        let [s1, ...s2] = ary1;
        console.log(s1)
        console.log(s2)

扩展运算符:

扩展运算符可以将数组拆分成以逗号分隔的参数序列

let ary = [1, 2, 3];
 //...ary  // 1, 2, 3
console.log(...ary);    // 1 2 3,相当于下面的代码
//console.log(1,2,3);

扩展运算符应用于数组合并:

let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
// ...ary1 // 1, 2, 3
// ...ary1 // 4, 5, 6
let ary3 = [...ary1, ...ary2];
console.log(ary3) //[1,2,3,4,5,6]

合并数组的第二种方法:

let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
ary1.push(...ary2);
console.log(ary1)

利用扩展运算符将伪数组转换为真正的数组：

var oDivs = document.getElementsByTagName('div');
        console.log(oDivs)
        var ary = [...oDivs];
        ary.push('a');
        console.log(ary);

Array.from方法

将伪数组或可遍历对象转换为真正的数组：

//定义一个集合
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}; 
//转成数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组:

let arrayLike = { 
     "0": 1,
     "1": 2,
     "length": 2
 }
 let newAry = Array.from(arrayLike, item => item *2)//[2,4]

注意：如果是对象，那么属性需要写对应的索引

实例方法：find()

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

let ary = [{
     id: 1,
     name: '张三'
 }, { 
     id: 2,
     name: '李四'
 }]; 
 let target = ary.find((item, index) => item.id == 2);
//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个

实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 下标2

includes方法介绍

判断某个数组是否包含给定的值，返回布尔值。

let ary = ["a", "b", "c"];
let result = ary.includes('a')
console.log(result) //true
result = ary.includes('e')
console.log(result) // false

模板字符串

ES6新增的创建字符串的方式，使用反引号定义

let name = `张三`;

模板字符串中可以解析变量

let sayHello = `Hello, 我的名字叫${name}`;
console.log(sayHello);

模板字符串中可以换行

 let result = { 
     name: 'zhangsan', 
     age: 20,
     sex: '男' 
 } 
 let html = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;

在模板字符串中可以调用函数:

const sayHello = function () { 
    return '哈哈哈哈 追不到我吧 我就是这么强大';
 }; 
 let greet = `${sayHello()} 哈哈哈哈`;
 console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

startsWith方法和endsWith方法

startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

let str = 'Hello ECMAScript 2015';
let r1 = str.startsWith('Hello');
console.log(r1);  // true
let r2 = str.endsWith('2016');
console.log(r2)  // false

实例方法：repeat():

repeat方法表示将原字符串重复n次，返回一个新字符串:

console.log("y".repeat(5)) // yyyyy

Set 数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成 Set 数据结构

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}

使用add方法

const s4 = new Set();
s4.add('a').add('b');
console.log(s4.size) // 2

从set结构中删除值用到的方法是delete

const s4 = new Set();
        s4.add('a').add('b');
        console.log(s4.size)
        const r1 = s4.delete('c');
        console.log(s4.size)
        console.log(r1);

判断某一个值是否是set数据结构中的成员使用has

    const s4 = new Set();
        s4.add('a').add('b');
        console.log(s4.size)
        const r1 = s4.delete('c');
        console.log(s4.size)
        console.log(r1);
        const r2 = s4.has('d');
        console.log(r2)

清空set数据结构中的值使用clear方法

const s4 = new Set();
        s4.add('a').add('b');
        console.log(s4.size)
        const r1 = s4.delete('c');
        console.log(s4.size)
        console.log(r1);
        const r2 = s4.has('d');
        console.log(r2)
        s4.clear();
        console.log(s4.size);

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

const s5 = new Set(['a', 'b', 'c']);
        s5.forEach(value => {
            console.log(value)
        })

es6（2020年整理）

le6 的特性

1.let声明的变量只在所处于的块级有效

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

2.使用let关键字声明的变量具有块级作用域

3.在一个大括号中使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

4.防止循环变量变成全局变量

5.不存在变量提升

6.使用let关键字声明的变量具有暂时性死区特性

经典案例：

const

1.具有块级作用域

2.使用const关键字声明的常量必须赋初始值

3.常量赋值后，值不能修改

let、const、var 的区别

数据结构：

数组解构允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量

对象解构：

另外一种写法：

箭头函数：

小结

剩余参数

扩展运算符:

Array.from方法

实例方法：find()

实例方法：findIndex()

includes方法介绍

模板字符串

startsWith方法和endsWith方法

实例方法：repeat():

Set 数据结构

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

es6（2020年整理）

le6 的特性

1.let声明的变量只在所处于的块级有效

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

2.使用let关键字声明的变量具有块级作用域

3.在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

4.防止循环变量变成全局变量

5.不存在变量提升

6.使用let关键字声明的变量具有暂时性死区特性

经典案例：

const

1.具有块级作用域

2.使用const关键字声明的常量必须赋初始值

3.常量赋值后，值不能修改

let、const、var 的区别

数据结构：

数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量

对象解构：

另外一种写法：

箭头函数：

小结

剩余参数

扩展运算符:

Array.from方法

实例方法：find()

实例方法：findIndex()

includes方法介绍

模板字符串

startsWith方法和endsWith方法

实例方法：repeat():

Set 数据结构

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

3.在一个大括号中使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

数组解构允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量