JavaScript--ES6相关知识_什么是javascript的es6-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_68211919/article/details/132345471

ES6：全称为ECMAScript6.0（欧洲计算机制造商协会脚本6.0版本），主要为了解决前面es5的先天不足（缺乏块级作用域、没有模板字符串、缺乏解构赋值等语法不成熟问题）

五大浏览器：

各浏览器使用的内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；　　

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；　　

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；　　

4、Safari浏览器内核：Webkit内核；　　

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

变量声明与表达式

1.变量声明

let和const：相同之处（1）都是用于声明变量的（2）都要先声明变量后才可以使用（3）都有作用域，（4）在同一作用域中变量不能同名（5）两者都不具备变量提升规则

let和const区别：let声明变量可以不给初始值，之后let的值可以修改

const需要声明变量并且初始化才可以使用，在后续其值修改不了

（2）都要先声明变量后才可以使用，若先使用再会显示下面错误

（3）都有作用域且在同一作用域中变量不能同名

同一作用域变量不能同名

let可以不给初始值，之后可以修改值

const必须给初始值，且后续修改不了

const虽然不可以修改值，但对于对于对象或数组这些数据，虽然不能改变变量引用的对象或数组本身，但可以修改对象或素组的属性值或元素

2.解构赋值

含义：从数组或对象中提取值并赋值给变量的简单写法，使用解构赋值可以方便获取数组的元素或对象的属性，并将其赋值给相应的变量

格式：（1）对象模型：let {n1,n2...}=obj:n1,n2,表示变量名n1,n2...,右边的obj：变量取值的数据源

55行相当于执行了以下操作

（2）数组：数组模型：let [n1,n2...]=array

 <script>
let math=[1,4,35,13,12]
        let [a,b,s]=math//相当于执行了：let a=math[0];let b=math[1];let s=math[2]
        console.log(a,b,s,e)
    </script>

若传入的对象或数组的属性或元素不够，则该变量的返回值为undefined

默认值：若let修饰的变量在obj或array中没找到，可以给该变量设置默认值，找到了就返回找到了的值，若没找到，则返回设定的默认值

       </script>
        let math=[1,4,35]
        let [a,b,s,c=10,f]=math//给c设置了默认值,f没有
        console.log(a,b,s,c,f)//math数组的元素不够，c取到了设定的默认值10,f没取到，也没设置默认值，返回undefined
    </script>

"..."：扩展运算符；将多余的参数装到一个数组中：可以将多个数组给合到一个数组中去

<script>
        let math=[1,4,35,23,40,11,12,123,]
        let [a,b,...c]=math//取到a，b的值，并将剩下的元素装入一个新的数组中去
        console.log(a,b,c)
    </script>

":"只适用于对象中，数组不适用格式：{a:b }=obj 从 obj 对象中提取 a 属性，并将a赋值给变量 b。

<script>
         let person = {name: "John",age: 30,hobby:"play"}
        let {name,age:hobby}=person//将age赋值给hobby==>let name=person.name,let hobby=person.age
        console.log(name,hobby)
    </script>

symbol：用于创建唯一标识符的数据类型，每次调用symbol（）都会返回唯一的symbol值

<script>
        let a=Symbol(10)
        let b=Symbol(10)
        console.log(a,b,a==b)
    </script>

a，b是不一样的数据，

ES6新出的方法

1.字符串

（1） includes（）：用于检查字符串或数字中是否包含指定的元素，返回值是布尔值

<script>
        let arr=[10,30,"hello",true,function(){},"您好啊"]
        console.log(arr.includes("hello"))//查看在数组中 是否有“hello”这个元素
        console.log(arr.includes("jack"))//查看在数组中 是否有“jack”这个元素
    </script>

（2）startsWith（），endsWith ：分别是否以“ ”开头和结尾

 <script>
        let arr="hello,晚上好呀,今天的晚饭是板面"
        console.log(arr.startsWith("h"))//true
        console.log(arr.endsWith("面"))//true
        console.log(arr.startsWith("ello"))//false
    </script>

（3）repeat（n）：字符串重复的次数（n次）

 <script>
        let arr="今天的晚饭是板面,"
        console.log(arr.repeat(2))//将arr字符串重复两次
       </script>

（4）padStart（）、padend（）

<script>
        let arr="今天的晚饭是板面,"
        console.log(arr.padStart(13,"晚上好"))//总的字符串个数为13各，在字符串开头用晚上好填充
        console.log(arr.padEnd(16,"好吃"))
       </script>

2.数字：

（1）进制数：0b/0B：二进制 0o/0O：八进制 0x/0X:十六进制

<script>
        let n=0b1010//将1234转换为二进制数
        console.log(n)//控制台输出的是十进制数
       </script>

<script>
        let n=0x453AB//将453AB转换为十六进制数
        console.log(n)//控制台输出的是十进制数
       </script>

（2） parseInt():可以将字符串转换为整数，返回值是一个number型

<script>
        let n=parseInt("1221",3)//将字符串“1221”转换为数字当作三进制将其转换为十进制数，并且为整数
        console.log(n)//52
       </script>

若遇到下面的情况，

<script>
        let arr=[1,2,3,1]
        let n=arr.map(parseInt)
        console.log(n)//[1,NAN,NAN,1]
       </script>

（3）方法：

Number.isFinite():用于判断一个数值是否是有限的

math：Math.hypot(n) :n的立方根 Math.hypot(a,b,c)：a,b,c等分别平方之和再平方根

<script>
       let b=27
       let re=Math.cbrt(b)//求27的立方根
       console.log(re)//3
       </script>

<script>
       let b=4
       let c=3
       let re=Math.hypot(b,c)//b的平方+c的平方和再平方根
       console.log(re)//5
       </script>

3.数组：将对象转换为数组后便可以使用数组的方法

4.对象的新用法：

（1）将变量存到对象中去

 <script>
        let a=20
        let {age}={age:a}//我们使用对象解构赋值将属性名称改为 age，
                        //并将变量 a 的值赋给了 age。最终输出结果为 20，与变量 a 的值相同。
        console.log(age)//20
       </script>

5.深拷贝：创建一个新的对象或数组，并将原始对象或数组中的所有属性或对象复制到新创建的对象的过程，完全复制，和原对象或数组一模一样。这就要求复制的对象或数据中不能有：时间对象，null，正则表达式

（2）将字符串转换为对象，将对象转换为字符串

<script>
        let  str= '{name: "John",age: 30}'
        let b=JSON.parse(str)//将字符串转换为对象
        console.log(b)
        let person = {name: "John",age: 30,hobby:"play"}
        let c=JSON.stringify(person)//将对象转换为字符串
        console.log(c)
       </script>

（3）数据容器：map（）和set（）

map（）：是一个数组方法，用来创建一个新数组，其中每个元素都是经过某各函数的处理后得到的结果，原数组不会被改变

<script>
        var n=new Map()
        n.set("name","jsck")//用set向刚刚创建的对象map中添加了三个键值对
        n.set("age","22")
        n.set("sex","boy")
        console.log(n) //打印了map整个对象
        console.log(n.get("name")) //使用get方法获取了name对应的值
       </script>

set（）：返回值是一个集合，里面没有重复的元素，在进行比较时若有相同的元素只显示一个

       <script>
        var n=new Set()
        n.add(10)//用set向刚刚创建的对象set添加了10，20，30，30，12，12元素
        n.add(20)
        n.add(30)
        n.add(30)
        n.add(12)
        n.add(12)
        console.log(n) //打印了set整个对象，若有重复的，直接去掉了
       </script>