es6

短命女 2022-01-23 06:39 260阅读 0赞

ES6语法

ES6的相关概念

ECMAScript 2016，就是一个语法的规范，想比之前，更加的灵活，更加的方便

ES6新增的语法

let关键字

作用：用来声明变量的

语法：

let num = 1;

特点：

*  具有块级作用域
 *  不会进行变量的提升
 *  具有暂时性死区  
    var num = 10;  
    if(true)\{  
    let num = 20;  
    console.log(num) //20  
    \}  
    //如果把两者调换一下顺序的话  
    if(true)\{  
    console.log(num) //报错  
    let num = 20;  
    \}

const 关键字

作用：用来声明常量的；常量就是一个不可变化的值;

语法：

const num = 20;

特点：

*  具有块级作用域
 *  不会进行变量的提升
 *  初始化必须要赋值
 *  不能去更改const所定义的值
    
     *  简单数据类型，不能去修改值
     *  复杂数据类型，不能修改地址值

var、let、const区别

*  var 不具备块级作用域特点，只具备函数级别的作用域的特点，可以去修改值，存在变量的提升
 *  let 具备块级作用域的特点，不存在变量的提升，可以去修改值
 *  const 具备块级作用域的特点，不存在变量的提升，不可以去修改值

解构赋值

意思：分解数据结构，然后给变量进行赋值

数组

let arr = [2,3,4];
    //进行解构
    let [a,b,c] = arr; //我们定义了三个变量，每个变量对应数组里面相应的值
    //a = 2;b = 3; c = 4;

对象

箭头函数

语法： 特殊的符号 =>

function fn(){
        console.log(111);
    }
    //转成箭头函数
    const fn = () => {
         console.log(111);
    }

注意：

*  如果形参只有一个的话，可以去省略小括号  
    function fn(a)\{  
    console.log(111);  
    \}  
    //转成箭头函数  
    const fn = a => \{  
    console.log(111);  
    \}
 *  如果函数体里面只有一行代码，或者说这一行代码前面有一个关键字return，可以省略大括号  
    function fn(a)\{  
    console.log(111);  
    \}  
    //转成箭头函数  
    const fn = a => console.log(111);
 *  箭头函数里面不绑定this，如果在箭头函数里面使用this的话，那么this是箭头函数所定义的位置所在的作用域

剩余参数

语法： …参数名

应用场景：当实参不确定的情况下使用，和arguments很像

function fn(...arg){
        
    }
    fn(10,20,30,40);//fn调用了这个函数，里面传递了4个实参，那么我们在形参里面定义的 ...arg  实际上获取的是一个数组，里面包含了所有的实参

ES6内置对象的扩展的方法

Array数组

扩展运算符

语法: …

应用场景： 合并数组，把伪数组转成数组

var arr = [1,2,3];
    ...arr// 1,2,3    获取的就是一个参数序列
    var arr1 = [4,5,6];
    
    let ary = [...arr,...arr1];

Array.from 方法

作用： 把伪数组转成真正的数组

let divs = 根据标签获取元素集合;
    //这一行代码就可以把伪数组转成数组
    let divArr = Array.from(divs,function(value){
        //value 代表的就是divs里面每一个元素
    });//第二个参数可以被省略

Array.find 方法

作用：用来查找数组中匹配的元素，只会匹配第一个

let arr = [2,5,7];
    var result = arr.find(value => value == 2);//这个函数里面写的是条件，只有当返回式true的情况下，才会返回相应的元素
    console.log(result);

Array.findIndex 方法

作用：用来查找数组中匹配元素对应的索引号，使用跟 find一致

Array.includes 方法

作用：判断数组是否包含某一个元素

let arr = [2,5,7];
    arr.includes(5); //如果包含，返回true，如果不包含，返回false

String 字符串

模板字符串

语法： let str = \`\`;//反引号

特点：

*  我们不需要利用+号去拼接变量，利用$\{\}
 *  可以在字符串里面去调用函数 $\{fn()\}
 *  会保留空格跟换行，让我们代码看起来更加的整洁

startsWith和 endsWith 方法

作用：判断字符串是否以什么开头或者是结尾

str.startsWith('ab');//判断是否以ab开头 ，如果是就返回true
    str.endsWith('cd'); //判断是否以cd结尾，如果是返回true

repeat方法

作用：重复，copy几次

'a'.repeat(5);//copy a字符串 5次

set 集合

也是一种数据类型，专门用来存储数据的；里面存储的元素都是唯一的，里面没有重复的值

//实例化set对象
    var set = new Set([2,4,5]);
    //操作set
    set.add(6); //添加一个元素  2，4，5，6
    set.delete(6);//删除一个元素  2,4,5
    set.has(3); //判断是否有这个元素  如果有返回true，如果没有返回false
    set.clear(); //清空
    
    //遍历 forEach
    set.forEach(value=>{
        //value 遍历的时候每一个元素的值
    });

es6

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ES6

相关 ES6

相关 ES6

相关 es6

相关 es6？

相关 es6

相关 ES6

相关 es6

相关 ES6

相关 ES6基础-ES6 class