首页 > 其他分享 >ES6 语法 浅析

ES6 语法 浅析

时间：2022-11-19 16:04:40浏览次数：48  
标签：ES6 const log show 语法 let console 浅析 函数

ES6 语法 浅析_默认值

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

之前的写的练习大差不差都用了ES6+的语法，当然并不只限于es6版本的语法，还有其他的版本，目前好像都更新到了ES13。所以并不能只局限于ES6，应该是ES6+

ES6 语法

变量声明

新增加的两个关键字：​​let​​ 、 ​​const​​

let 变量
const 常量

var、let、const的区别

  1. 预解析
  • var进行预解析
  • let const 不进行预解析，必须要先声明后使用
  1. 重复变量名
  • var 可以在同一个作用域定义两个相同变量
  • let const 则不可以
  1. 块级作用域（任何一个可以执行代码段的{}，都会形成块级作用域，都会限制变量的使用范围）
  • var没有块级作用域，只能被函数限制其适用范围
  • let const有块级作用域，会被限制适用范围
function show(){
    var a = 100
}

console.log(a)              //不显示

//==========================================

if(true){
    var b = 100
    let c = 200
}
console.log(b)             //100
console.log(c)             //报错，const也一样

let和const的区别

  1. ​​let 变量​​ 可以被修改，​​const 常量​​ 常量是不可以修改
  2. 声明的时候，let定义的变量可以声明不赋值，但是const声明时候必须赋值

模板字符串

反引号： ``

可以换行，可以通过​​${xxx}​​ 传参

箭头函数

箭头函数：

  • 匿名函数可以写成箭头函数（箭头函数就是对曾经匿名函数的简写方式）
  • 声明式函数不能写成箭头函数
  • 语法 (形参)=>{代码段} ，形参可有可不有

箭头函数和匿名函数的区别

//声明函数
    let show = function(){
        console.log('你好')
    }
    show();

//箭头函数
    let show2=() =>{
        console.log('你好')
    }
    show2();

箭头函数的特点：

  1. 可以省略小括号（前提条件是有1个形参，没有形参或多个形参的不能省略）
  2. 可以省略大括号（前提条件：大括号内原本只有一条语句，且该语句默认return出去）
  3. 箭头函数内没有argument
  4. 箭头函数内没有this，箭头函数打印的this是当前箭头函数外部作用域的this
const show=(a,b){
    console.log(a)
    console.log(b)
}
show(1,2)

const list = [1,2,3,4,5,6]
list.forEach((item)=>{
    console.log(item);
})

//也可以单个形参时候，省略小括号
list.forEach(item=>{
    console.log(item);
})

//省略大括号
//常规：
//function sum(a, b) {
//   return a + b
//}

//箭头函数
const sum = (a, b) => a + b

//this
const show5 = ()=> {console.log(this)}    //这里的this是window

函数默认值

函数参数的默认值

包括所有函数都可以应用：

  • 定义形参的时候可以设置默认值
  • 在函数调用阶段如果不写参数会制动按照默认值补充
function show(a= 0 , b = 0){
    console.log(a+b)
}

show()

注意：箭头函数如果定义默认值的话，一个参数也要写小括号

const show = (a = 0){console.log(a)}

对象简写语法

简写场景：

  1. key和value值一样时候
  2. 当对象内有function的时候，可以省略function和冒号
  • 注意，箭头函数不可以省略
const name = 'barbatos'
const age = 5000

//常规
const obj1={
    name:name,
    age:age,
    show:function(){console.log('你好')},
    fn:()=>{console.log('我是一个箭头函数')}
}
console.log(obj)

//ES6 对象简写：
const obj={
    name,
    age,
    score:'score',        //相当于score = 'score'，可以这样
    show(){console.log('你好')},
    fn:()=>{console.log('我是一个箭头函数')}    //箭头函数不可以省略

//  score                   //下边的console.log(obj)报错
                          //score没有定义，key = score 和 value=undefined值不一样
}

console.log(obj)

解构

解构赋值

解构：

解构数组：把数组中的数据取出

​ 语法：​​let [a,b,c,d,e] = arr​​

解构对象：把对象中的值拿到

​ 语法：​​ let {key1,key2,key3} = obj​​

解构的时候重命名：想要给对象拿到的数据重新修改名字的时候

​ 语法：​​ let {key1,key2:key21,key3} = obj​​

//结构数组
const arr = [1,2,3,6,4]

//一般写法
console.log(arr[0])

//es6解构
var [a,b,c,d,e]=arr
console.log(a,b,c,d,e)
//可以来拿多维数组
const data = [1,2,3,4,[5,6,7]]
var [a,b,c,d,[d,e,f]]=data
console.log(data[4][2])//传统  7
console.log(f)  //es6  7

//解构对象
const obj={
    name : 'Morax',
    age : 6000,
    gender : 'M'
}

console.log(obj.name,obj.age,obj.gender)   //传统

//解构
const {name,age,gender}=obj
consloe.log(name,age,gender)   //es6
const obj={
    name : 'Morax',
    age : 6000,
    gender : 'M'
}
//解构重命名
const {name:n,age:nian,gender:g}=obj
consloe.log(nian)   //6000

//面试题
console.log(gender)  // is not defined ,是因为重命名之后gender变量没用了
console.log(gender)  // 打印空值。因为name是js保留字，重命名之后name变为系统默认的空值

扩展运算符

语法： ​​...​​

功能：

1. 展开运算都
    2. 合并运算符

展开

var arr = [100,200,300]
console.log(arr)      //  [100,200,300]
console.log(...arr)   //直接展开为 100 200 300

var arr1 = [100,200,300,400,500]
var arr2 = [1,2,3,4,5]
var arr3 = [...arr1,...arr3]
console.log(arr3)   //[100,200,300,400,500,1,2,3,4,5]

//也可以利用展开操作实现 传递到数组当中的值到方法
var res = Math.max(...arr3)
console.log(res)

//展开合并对象
const obj = {
    name = 'nahida',
    age = 500,
}

const.obj2 = {
    ...obj,          //合并
    name1 = 'morax',
    age2 = 6000 
}

console.log(obj2)  // {name = 'nahida',age = 500,name1 = 'morax',age2 = 6000 }

合并

const arr = [100,200,300]
//const [a,b,c] = arr   
//console.log(a,b)   //100,200

//以下写法；a拿到第一个值100 ，b拿到后面的数形成的一个数组[200,300]
const[a...b] = arr;
console.log[a,b]    //100 [200,300]

//可以通过合并运算符的方式进行箭头函数接收数据工作
const show = (a,...b)=>{
    console.log(a,b)
}

show(100,200,300,400)    // 100 [200,300,400]  a拿到第一个值，剩下的形成一个数组存到b中

案例

<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    let checkAll = document.querySelector('#checkAll');
    let cks = document.querySelectorAll('.ck');
    let all = document.querySelector('.all')
    let items = [...cks]

    //全选操作
    checkAll.addEventListener('click',function () {
      cks.forEach(item=>item.checked = this.checked);
      if (this.checked){
        all.innerHTML = '取消';
      }else {
        all.innerHTML = '全选';
      }

    })

    //当点击每个选项的时候 全部选中，全选按钮也选中
    // 如果有个没选中，全选按钮不能选中
    cks.forEach((item)=>{
      item.addEventListener('click',()=>{
        let res = items.every(function (t) {
          return t.checked;
        })
        if (res){
          checkAll.checked = res;
          all.innerHTML = '取消';
        }else {
          checkAll.checked = res;
          all.innerHTML = '全选';
        }

      })
    })

  </script>
</body>

</html>

模板化语法

在js中可以理解为每一个js文件都是一个一个模块化。每一个模块都是独立的，不对外开放的。

ES6中提出一个模块化概念，可以让每个js文件打通

开放自己的资源，然后其他模块引用使用的时候进行导入的方式来实现模块之间的相互调用

组合方法一：

//导入

语法： ​​import 自定义名字 from "文件地址"​​

import a_data from "./a.js"  ;

//导出

语法：​​export default 对象​​

export default {
    fn,
    n,
}

//引用

在html导入需要引入js的文件的时候 要加上 ​​type="module"​​

<script type="module" src="index.js"></script>

//使用的时候：

import a_data from "./a.js"  ;

a_data.fn();
console.log(a_data.n)

组合方法二

//导入

语法：​​import { , , } from "文件地址"​​

import {genshinImpact,str,show} from "./b.js";

//导出

语法：​​export 变量​​

export const genshinImpact = 'morax';
export const str = 'nahida';
export function show(){
    console.log('from b')
}

//引用

在html导入需要引入js的文件的时候 要加上 ​​type="module"​​

<script type="module" src="index.js"></script>

//使用的时候：

import {genshinImpact,str,show} from "./b.js";

console.log(genshinImpact)
console.log(str)
show();

其他

this指向

全局时候，this指向window

私有作用域当中（函数内部）

+私有作用域当中的this指向问题？

+决定权在函数的调用方式（不同的调用方法htis指向不一样）

函数调用方式

1. 普通调用：  函数名()
          - this指向：windows
                2. 通过对象来调用：对象.函数名()
    - this指向对象本身
                3. 通过定时器调用：setTimeout(函数，数字)
    - this指向：window
                4. 事件处理函数
    - this指向事件源 元素
                5. 箭头函数打印的this是当前箭头函数外部作用域的this

改变this的指向性

  1. call()
  • 函数名.call(指向,参数1,参数2,...)
  • 执行时主动调用
  1. apply()
  • 函数名.call(指向，数字参数列表)
  • 执行时主动调用
  1. bind()
  • 函数名.bind(指向,参数1,参数2,...)
  • 不调用
  • 本质是复制了这个函数形成新的函数
  • 返回值：新的函数 this被锁死
function show(a,b){
    console.log(a,b);
    console.log('this',this);
}

let obj = (name:'周杰伦'，age:22);

//1.call() this指向性
show.call(obj,100,200)      //100,200    
                            //this:obj{name:'周杰伦'，age:22}          //主动调用，this指向obj

//2.apply()改变this指向性
var list = [1,2,5,3,6,89,45,68];
var result = Math.max.apply(null,list)
console.log(result)     //89

//bind()
var show_c = show.bind(obj,1000,3000)
show_c()    //复制了show方法

标签：ES6,const,log,show,语法,let,console,浅析,函数
From： https://blog.51cto.com/u_15870498/5870442

相关文章

  • ES6中setTimeout函数的this
    在编程的过程中有同学遇到不太清楚ES6中​​this​​指向的问题，代码抽象如下：functionmyFunction(){varmthis=this;setTimeout(()=>{//this=mthisco......
  • ES6中setTimeout函数的this
    在编程的过程中有同学遇到不太清楚ES6中this指向的问题，代码抽象如下：functionmyFunction(){varmthis=this; setTimeout(()=>{//this=mthiscons......
  • MySQL 源码解读之-语法解析（四）
    MySQL源码解读之-语法解析（四）在上篇文章中，我们分析了一条sql语句select*frombank;警告bison语法解析器（MYSQLparser函数）生成的AST树的结构，如下图所示：mysql需......
  • JavaScript语法_流程控制语句和JavaScript语法_流程控制语句
    JavaScript语法_流程控制语句：//1．语句以;结尾，如果一行只有一条语句则;可以省略（不建议)//1.语句以;结尾，如果一行只有一条语句则可以省略（不建议）leta=3......
  • ES6之 ...扩展运算符
    <script>//『...』扩展运算符能将『数组』转换为逗号分隔的『参数序列』//声明一个数组...consttfboys=['易烊千玺','王源','王俊......
  • ES6之rest参数
     （1）//ES6引入rest参数，用于获取函数的实参，用来代替arguments//ES5获取实参的方式functiondate(){console.log(arguments);......
  • ES6之函数参数默认值
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>函数......
  • Day01_MarkDown语法
    Markdown学习标题几级标题就几个#加一个空格三级标题这里面的![]()......都是英文的四级标题字体helloworl（粗体：前后两个*）helloworl！（斜体：前后三个*）helloworl......
  • 3.3语法树与二义性
    1、推导和语法树最左推导和最右推导从一个句型到另一个句型的推导往往不唯一E+E⇒i+E⇒i+iE+E⇒E+i⇒i+i最左推导：任何一步α⇒β都是对α中的最左......
  • 03 jsx语法规则
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>jsx语法规则</title><style>.title{background-color:......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99