再不学ES6你就out啦

Posted 2021-11-24 奶茶丶

目录

一、概念

二、声明变量 let var const 的区别 

2.1 let 关键字声明变量

2.2、const关键字声明变量

2.3 声明变量的总结

三、解构赋值 

3.1数组解构 

3.2对象解构 

四、箭头函数

五、Array的扩展运算符 

5.1、扩张运算符可以运用于合并数组

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

5.3、find()方法

5.4、findIndex()方法

5.5、includes方法

六、模版字符串 

七、内置对象扩展

八、新的数据结构Set 

---

一、概念

ES的全称是ECMAScript,它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范；新增的好用的语法规范

为什么要使用ES6呢？

以前的javascript：

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

二、声明变量 let var const 的区别 

2.1 let 关键字声明变量

 使用let声明的变量：变量只能在大括号中进行访问，在大括号的外部是访问不到的；ES6中新增的用于声明变量的关键字

• let声明的变量只在所处于的块级有效
• 块级作用域实际上就是大括号产生的作用域
• 在大括号里，使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性
• let好处：防止循环 变量变成全局变量（i）
• 不存在变量提升，只能先声明再使用
• 暂时性死区，也就是说在块级作用域中变量会被整体绑定在整个块级区域，不再受外部代码影响，虽然两个变量名相同但是里面的变量跟外面的变量是没有关系的

案例：

a是没有定义的，也就是说在外面是不可以访问到a的 

if(true) {
     let a =10;
}
log(a) //a是没有定义的，也就是说在外面是不可以访问到a的

 let没有变量提升 ，所以不能这样先使用后声明：

//let没有变量提升 ，所以不能这样先使用后声明：
console.log(a)   //a is not defined
let a =20;

 大括号里面的tmp变量不会受外部tem变量的影响

//大括号里面的tmp变量不会受外部tem变量的影响
var tmp = 123;
if(true) {
   tmp ='abc'; //会报错，报变量没有定义的错
   let tmp;
}

2.2、const关键字声明变量

作用：用于声明常量，常量就是值（内存地址)不能变化的量
特点：

• 具有块级作用域------作用在大括号里面
• 声明常量时必须赋初始值
• 常量赋值后，值不能更改，比如简单数据类型：数值、字符串不能更改；复杂数据类型时：不能重新赋值，也就是常量里面的对应的内存地址不可以更改，但是可以修改数据结构中的值比如数组或者对象，里面的值是可以更改的

案例

const ary =[100,200];
ary[0]='a';
ary[1]='b';
ary['a','b']; //是正确的
ary=['a','b']; //但是这种是错误的 不能重新赋值

2.3 声明变量的总结

使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象--函数作用域 值可更改
使用let声明的变量，其作用域为该语句所在的块级内，不存在变量提升--块级作用域  值可更改
使用const声明的是常量，在后面出现的代码中不能再修改该常量的值--块级作用域  值不可以更改
  
函数的定义、派值、存储的数据不需要变化、数学公式中不变的值，const比let的效率高

三、解构赋值 

很容易的从数组和对象中取值；ES6中允许从数组中提取值，按照对应位置，对应量赋值。对象也可以实现解构

3.1数组解构 

数组解构的基本形式

形式一：变量与数组的值的个数相同

等号左边代表的是解构不是代表的数组是变量；与数组中的值是一一对应的关系

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

 形式二：变量与数组中的值的个数不相同  不对等的值是undefined的

let ary = [1,2,3];
let[a,b,c,d,e]=ary;
 //d和e的值是undefined

3.2对象解构 

实际上是属性的匹配如果匹配成功就将对应的值赋给变量

写法一：

let person ={name:'章三'，age:20};
let {name,age} =person ; //左边相当于解构
console.log(name) //章三
console.log(age)  //20

写法二：变量的名字和对象里面的属性名不一样

myName 和 myAge 属于别名；属性名匹配就将右侧name的值赋值给myName 和 myAge

let person ={name:'章三'，age:20};
let{name:myName,age:myAge} = person;
console.log(myName); //章三
console.log(myAge);  //20

剩余参数   (...args)表示接受所有的实参

剩余参数语法允许我们将一个不定数量的参数表示为一个数组；就是当实参大于形参的时候，将剩余的参数放入到一个数组中

        const sum = (...args) => {
            let total = 0;
            args.forEach(item => total += item); //item是箭头函数的参数   
            return total;
        };
        console.log(sum(10, 20));;
        console.log(sum(10, 20, 30));;

 剩余参数和解构搭配使用

        let arr =['里斯','斯','里'];
        let[s1,...s2] =arr;
        console.log(s1); //里斯
        console.log(s2); //[斯，里]

四、箭头函数

语法：（）=> { }

const fn = () =>{ }

调用函数 fn()

通常给函数定一个变量，函数名字就是变量名字，调用函数就是调用变量名字就可以了  常量fn的值就等于箭头函数

特点：

1. 函数体只有一句代码，且代码的执行结构就是返回值，可以省略大括号 const sum=（num1,num2）=>num1+num；相当于返回num1+num2的值给sum
2. 如果形参只有一个，可以省略小括号。const fn = v =>v;返回值是将v的值返回给fn，输出就直接调用fn(20)

五、Array的扩展运算符 

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

let ary =[1,2,3];
console.log(...ary)  // 1 2 3  

5.1、扩张运算符可以运用于合并数组

方法一：
let ary1 = [1,2,3]
let ary2 = [4,5,6]
let ary3 =[...ary1 , ...ary2];

方法二：

let ary1 = [1,2,3]
let ary2 = [4,5,6]
let arr1.push(...ary2) 可以将多个参数追加到arr1数组中

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

方法一：

将伪数组转换为真正的数组 oDivs = [...oDivs];

好处：就是可以调用数组下面的方法

let oDivs =document.getElemnetsByTagName("div");
oDivs = [...oDivs]; 

方法二：

构造函数方法 Array.from()
将伪数组或可遍历对象转换为真正的数组

let arr1 ={
      '0':'a',
      '1':'b',
      '2':'c',
      length:3  
  }
let arr2 =Array.from(arr1)  //['a','b','c']

此方法还可以接受第二个参数，作用类似于数组的each方法，用来对每个元素进行处理，将处理后的值放入返回的数组
Array.from(arr1,(item)=>{}) 函数里面的形参item就是当前要处理的值
 

let arr1 ={
      '0':20,
      '1':21,
      '2':22,
      length:3  
  }
let newary =Array.from(arr1 , item=>item *2)  //函数是将数组中的每个值都乘以2

5.3、find()方法

 用于找出第一个符合条件的数组成员，如果没有找到返回undefined   返回值就是你要查找的那个元素

let  ary =[{
      id:1,
      name:'张三'
},
{
      id:2,
      name:'李三'
}
]；
let target =ary.find((item,index)=>item.id ==2)

5.4、findIndex()方法

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

let ary =[1,2,3,4,5,9];
let index = ary.findIndex((value,index) => value>4);
console.log(index) //  4
//注意查找的第一个符合的值 是5 所以返回5的索引号是4

5.5、includes方法

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

[1,2,3].includes(2) //true
[1,2,3].includes(4) //false

六、模版字符串 

创建字符串的方式，使用反引号定义
let name = `张三`

特点

• 模版字符串中可以解析变量

let name='张三'
let sayHello = `hello,my name is ${name}`; 就不要用加号拼接字符串了

• 模版字符串中可以换行

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

• 模版字符串中可以调用函数

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

七、内置对象扩展

方法	说明	演示 let str =" Hello world!"
startsWith()	表示参数字符串是否在原字符的头部，返回布尔值	str.startsWith('Hello')  //true
endsWith()	表示参数字符串是否在原字符串的尾部，返回布尔值	str.endsWith("!")         //true
repeat()	表示将原字符串重复n次，返回一个新字符串	'x'.repeat(3)  // 'xxx'

八、新的数据结构Set 

 新的数据结构类似于数组，但是成员的值都是唯一的，没有重复的值，一般用于搜索，记录搜索历史，过滤掉重复语句

创建：

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

const  s = new Set()

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

const set = new Set([1,2,3,4,4])

console.log(s.size)  //可以返回s数据结构里面数据的数量

利用它的特点可以实现数组去重

const set =new Set([‘a','a','b','b']) 输出的数据的数量是2它会把重复的值去掉
const arr = [...set];
console.log(arr)  //['a','b']

实例方法：

• add(value) :添加某个值，返回Set结构本身
• delete(value) :删除某个值，返回一个布尔值，表示删除是否成功
• has(value) :返回一个布尔值，表示该值是否为Set的成员
• clear() :清楚所有成员，没有返回值

const s = new Set();
s.add(1).add(2).add(3) //向set结构中添加值 链式调用

s.delete(2) //删除set结构中的2值
s.has(1)    //表示set结构中是否有1这个值
s.clear()   //清楚set结构中的所有值

遍历 

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

const s =new Set([‘a','a','b','b']);
s.forEach(value => console.log(value));