开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端学习笔记：ES6 -> 正文阅读

[JavaScript知识库]前端学习笔记：ES6

ECMAScript 6.0

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。日常场合，这两个词是可以互换的。

变量扩展

let：

var声明的变量只有函数的作用域

let声明的变量有块级作用域??{代码块} 。

会向上寻找距离该变量最近的开始的“ { ”，?作用范围就是该“ { ”之内。

{
        let  a=100;
       console.log(a)
   }

    console.log(a)

let声明的变量没有变量提升的概念

{
    console.log(a);
    let a=100;
}

let声明的变量不能重复声明?包括和var一起使用的时候，也是需要避免

let  a=100;
let  a=10;

let声明的变量是一个块级作用域，会绑定该区域不会受外界的影响

  let a=100;
 {
     // let声明的变量是一个块级作用域，会绑定该区域不会受外界的影响
     let a=10;
 }
 let b=10;
 {
     // var声明的变量，会有变量提升。把声明提升到整个作用域的最前面
     var b=100;
 }
var c=100;
{
    let c=100;
}

let暂时性死区:let是块级作用域，没有变量提升的概念。在声明之前的一块区域不能使用

 let a=100;
 {
     console.log(a)
     let a=10;
 }

点击事件：

如果使用var声明变量的时候，不能使用i，因为i是一个全局变量。如果是let声明的话，i的是块级作用域。

 <body>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <script>
            var tags=document.getElementsByTagName('button');
            for(let i=0;i<tags.length;i++){
                tags[i].onclick=function(){
                    // 如果使用var声明变量的时候，不能使用i  i是一个全局变量

                    // 如果是let声明的话，i的是块级作用域
                    tags[i].style.color='red';
                }
            }
 </script>
</body>

const：

const?用法let基本一样??只是const声明的变量不能修改

<script>
           
            const a=10;
            a=100;
        </script>

解构：

解构：把数据按照一定的方式解析进行赋值。

如字符串解构，把字符串中的字符依次赋值给变量?如果变量比较多，会出现声明但是没有赋值的情况，如果字符串比较多,不会报错。

//字符串解构

var [a,b,c,d]='hello';
console.log(a,b,c,d);

数组解构

 // 数组解构
 var [a,b,c,d]=[1,2,3,4]
  console.log(a,b,c,d);

函数的解构

//函数的解构
function fn([x,y]){
    console.log(x,y)
}
fn('12')
fn([1,2])

对象的解构：把对象对象属性的值赋值给变量??对象解构的时候，声明变量需要用{}

 // 对象的解构 
 let {age,user,hobby}={
     user:'zs',
     age:20
 }
 console.log(user,age,hobby)

模板字符串

模板字符串：常量和变量拼接的时候，使用?``(1左边的键)?`常量常量${变量}`

<body>
        <h1 id="txt">文字</h1>

        <script>
            // 模板字符串
            txt.innerHTML=`文字文字${txt.innerHTML}`
        </script>
    </body>

数组扩展：

声明一个数组，长度为10 如果new Array()只有一个数值元素代表的是长度。
如果有多个元素，或者一个元素的时候值不是数值的话，代表数组内部的值。

var arr=new Array(10);
var arr=new Array('10',19)
arr=new Array(10,20,30);
console.log(arr.length)

Array.of()用法和new Array一模一样只是对于一个数值元素的处理不一样
Array.of()会把一个数值元素也当做数组内部的值

  var arr=Array.of(10,1010);
  console.log(arr.length);
 // 得到的是一个类数组(和数组非常类似)

for??in可以用来遍历

forEach只能用来遍历数组

Array.from()把类数组转化为数组

 var tags=document.getElementsByTagName('button');
 // for  in可以用来遍历
  for(var i in tags){
    console.log(i)
 }
 tags=[1,2,3,4,5]
 // forEach只能用来遍历数组
 
 Array.from()把类数组转化为数组
 tags=Array.from(tags)
 tags.forEach(function(item){
     console.log(item)
 });

函数的扩展：

函数参数的默认值：如果传递值，?y的值是传递的参数，否则是默认值。

function fn(x,y=1000){
    console.log(x,y)
}
function fn(x,y){
    if(!y){
        y=3000
    }
    console.log(x,y)
}
fn(233,30000)

arguments获取用户输入的所有实参?是一个类数组

function fn(x,y){
   
     console.log(arguments)
}
fn(1,2,3,4,5)

?箭头函数?去除function?()中间使用箭头=>{}

var fn=()=>{
    console.log(111)
}
fn()

如果函数体只有一句话，可以省略{}?如果这句话是return语句?省略return

 // var fn=()=>console.log(111);
 var fn=()=>111;
 console.log(fn())
 setInterval(()=>{
     console.log(11)
 },1000)

箭头函数注意事项

箭头函数，没有了arguments的概念。但有了剩余参数的概念。

<script>
            var fn=(x,y,z,...a)=>{
                
                // console.log(arguments)
                console.log(a)
            }
            fn(12,3,4,9,5,6)
        </script>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-08-05 17:16:33 更:2021-08-05 17:17:32

360图书馆购物三丰科技阅读网日历万年历 2024年5日历

-2024/5/17 10:00:02-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码