ES6入门

m0_62872263

已于 2023-05-26 09:43:13 修改

阅读量77

点赞数

文章标签： es6 javascript 前端

于 2023-04-07 23:36:13 首次发布

本文链接：https://blog.csdn.net/m0_62872263/article/details/129980758

版权

let和const

Let和const是什么
声明变量或声明常量的
var声明变量；let代替var, 声明变量
const声明常量 constant的缩写
let 和const的用法

var username = 'Alex';
let age = 18;
const sex = 'male';
console.log(username, age, sex);

        var arr = [];

        for(var i = 0; i < 10; i++){
            var nub = parseInt(Math.random()*101)
            arr.push(nub)
        }
                
        

        var max = Math.max.apply(null,arr);
        var min = Math.min.apply(null,arr);

        console.log(arr.sort(function(a,b){
            return b-a
        }));

为什么需要const
const是为了那些一旦初始化就不希望重新被赋值的情况而设计的
使用const的注意事项
声明常量，一旦声明，就必须立即赋值，不能留到后面再赋值;
下面是允许在不重新赋值的情况下修改它的值：
基本数据类型：
没有办法在不重新赋值的情况下修改它的值

const sex = 'male';
sex = 'feamle'; //报错

引用数据类型
可以在不重新赋值的情况下，直接修改它们的值

const person = {name:'Ales'};
person.name = 'ZhangSan';

什么时候用const，什么时候用let
在不知道是常量或变量时，就先用const，后期如果要修改变量，可以把const改为let

let、const、与var的区别

重复声明（var独有）
对于已经存在的变量或常量，
var允许重复声明，
let、const不允许
变量提升（var独有）
var 会提升变量的声明到当前作用域的顶部（返回undefined）
let、const不存在变量的提升
暂时性死区
只要作用域内存在let、const，它们所声明的变量或常量就自动‘绑定’这个区域，不再受到外部作用域的影响（也就是只在作用域内找值，不能向外层寻找它们的值）
window对象的属性和方法（全局作用域中）
var声明的变量和通过function声明的函数，会自动变成window对象的属性和方法；
let、const不会
块级作用域(非常重要)
var 没有块级作用域，只有全局变量和函数变量;

let、const 有块级作用域
｛…｝单独大括号内的就构成块级作用域
for(){}
while(){}
do{}while()
if(){}
switch(){}
结合let和const配合才能形成块级作用域

作用域分为三种：块级作用域、函数作用域、全局作用域
函数作用域表示在函数内：function(){}
对象本身不够成任何作用域

作用域链：内层作用域–>外层作用域–>…全局作用域，一旦找到，立马终止

let、const 的应用

可以造成块级作用域，而不再用闭包的形式记忆环境数据。

模板字符串

模板字符串与一般字符串的区别

和其他东西一起使用的时候，使用模版字符串，方便注入

语法：`字符串 ${只要能得出一个值的都可以放入}`   
        
        const person = {
            name:'Alex',
            age:18,
            sex:'male'
        };

        const info = `我的名字是：${person.name},性别是：${person.sex},年龄是：${person.age}`
        console.log(info);

模板字符串的注意事项

模板字符串中，所有的空格、换行或缩进都会被保留在输出之中
输出特殊字符时，用转义字符来转义 \ 即可，如：\ 这就是反斜杠

模板字符串的应用

主要为了注入一些混用性的信息

箭头函数

箭头函数是简化了的函数形式；声明之后，一般不会重新赋值，所以我们用const来定义

语法：const/let 函数名 = （参数） => ｛函数体｝

const add = (x,y) => {
            return x+y;
        }
        console.log(add(1,1));

箭头注意事项

单个参数可以省略圆括号()
返回单行函数体可以省略大括号{}以及return 要省一起省

const add = (x,y) => x + y
console.log(add(1,1));

this指向

箭头函数没有自己的this, 和 arguments
会根据外部的执行环境来查找自己的作用域链，以继承外层的this指向
箭头函数没有自己的this指向，它会捕获自己定义所处的外层执行环境，并且继承这个this值,指向当前定义时所在的对象。箭头函数的this指向在被定义的时候就确定了，之后永远都不会改变。即使使用call()、apply()、bind()等方法改变this指向也不可以。

不适用箭头函数的场景

作为构造函数
需要this指向调用对象的时候
绑定事件的时候，需要指向dom元素的this，所以不能用剪头函数
需要使用arguments 类数组时，不能用

数组的解构赋值

解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量

原理

1.模式（结构）匹配
等号两侧都是方括号 [] = []

2. 索引值相同的完成赋值

const [a,b,c] = [1,2,3]
        console.log(a);

数组中，如果不想取的，可以直接用 , 逗号跳过

默认值

默认值的基本用法

const [a=1,b=2,c=3] = [undefined]
        console.log(a,b,c);

默认值的生效条件
只有当一个数组成员严格等于（===）undefined时，对应的默认值才会生效

默认值表达式
如果是默认值表达式，默认值表达式是惰性求值的
也就是说用的到的才会执行，用不到的就不会输出结果

数组解构赋值的实际应用

以下是常见的类数组解构赋值的
arguments 获取实参用的类数组；
NodeList 节点列表也是类数组的结构

类数组不可以调用数组的方法

函数参数的解构赋值

const array = [1,1];
        const add = ([x,y]) => x + y
        console.log(add(array))

交换变量的值

let x = 1;
let y = 2;

[x,y] = [y,x] 
console.log(x,y); // 2  1

对象解构赋值的原理

1.模式（结构）匹配
等号两侧都是大括号｛｝ = ｛｝

2. 属性名相同的完成赋值

const {age,name} = {name:'Alex',age:18};
        console.log(name,age);

属性名对应上即可

注意事项

对象解构赋值的默认值和数组相似；
默认值的生效条件
对象的属性值成员严格等于（===）undefined时，对应的默认值才会生效

const {age,name='ZhangSan'} = {age:18};
        console.log(name,age);

默认值表达式
如果是默认值表达式，默认值表达式是惰性求值的
将一个已经声明的变量用于对象解构赋值
那整个赋值需要在圆括号中进行

let x = 2;
({x} = {x:1})

可以取到继承的属性或方法

对象解构赋值的实际应用

函数参数的解构赋值——（重要）

const logPersonInfo = ({username,age}) => console.log(username,age);

logPersonInfo({username:'Alex',age:18})

复杂函数的解构赋值

const obj = {
        x:1,
        y:[2,3,4],
        z:{
            a:5,
            b:6
        }
       }

       const {
        y,
        y:[,yy],
        z,
        z:{b}
       } = obj
        
       console.log(y,b);

其它数据类型的解构赋值

字符串

数组形式的解构赋值
const [a,b,c] = ‘hello’

对象形式的解构赋值
const {0:a,1:b,length} = ‘hello’

数值和布尔值的解构赋值

只可以按对象形式解构
先将等号右边的值转为对象

undefined和null 不能解构赋值

对象字面量的增强与函数参数的默认值

属性和方法的简洁表示法——（重要）

对象字面量是什么？

const person = {
            a:18,
            b:function(){}
        }

属性的简洁表示法
当键名和变量或常量名是一样的时候，可以只写一个

const age = 18;
        const person = {
            age
        }
        console.log(person);

方法的简洁表示法
方法可以省略冒号和function关键字

const person = {
            speak(){}
        }
        console.log(person);

方括号语法的用法

可以放到对象的字面量里
方括号中可以放什么
值或通过计算可以得到的值的（表达式）

const prop = 'age';
        const func = ()=>'age2';
        const person = {
            [prop]:18,
            [func()]:18,
        }

        console.log(person);

方括号语法与点语法的区别
点语法是方括号语法的特殊形式；
如果是合法的javascript命名规划就直接用点语法即可

函数参数的默认值

调用函数的时候传参了，就用传递的参数；如果没有传参，就用默认值
fun (2,1)

函数参数默认值的基本用法

const multiply = (x,y=1) => x*y
console.log(multiply(2));

注意事项：__重要

不传参数，或者明确传入undefined时，只有这两种情况下默认值才会生效
默认值表达式
如果默认值是表达式，默认值表达式是惰性求值的
设置默认值的小技巧
函数参数的默认值，最好从参数列表的右边开始设置

函数参数默认值的应用

接收很多参数的时候
实际开发中，我们一般传入一个对象，然后对象的键名时行解构，再分别加上解构和参数的默认值，这样就算不传参数，都不会报错

const logUser = ({name='ZhangSan',age=18,sex='male'}={}) =>
        console.log(name,age,sex);
        logUser()