ES6语法

最新推荐文章于 2022-09-03 12:27:25 发布
最新推荐文章于 2022-09-03 12:27:25 发布
阅读量738 收藏
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/APPTX4869/article/details/122042672
版权

dsaES5和ES6:

我们说的ES5和ES6其实就是在 js 语法的发展过程中的一个版本而已

ES5新增：

一、数组的相关方法：

1. 数组.forEach(function (item, index, arr) {})

2. 数组.map(function (item, index, arr) {})

3. 数组.filter(function (item, index, arr) {})

4. 数组.every(function (item, index, arr) {})

5. 数组.some(function (item, index, arr) {})

二、严格模式

1、 使用"use strict"定义严格模式

2、 严格模式可以定义在函数的最顶端或程序的最顶端

3、 在严格模式下 在变量a 没有声明时 a = 10 ; 这样的赋值会报错，定义两个相同名称的函数参数也会报错

4、 严格模式执行效率更高

三、call()、bind()、apply()改变this指向

先说一说this，每一个函数内部都有一个关键字是 this

函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系

1、全局定义的函数直接调用时，this=>window

<script>
    function fn(){
        console.log(this);
    }
    fn()
</script>

2、对象内部的方法调用，this => 调用者（对象）

  var obj={
        name:"哈哈哈",
        age:18,
        sex:"男",
        say:function(){
           console.log(this);
        }
    }

3、事件处理函数，this => 事件源

三种写法

写法一：

odiv.onclick = function(){

   consoloe.log(this);//事件源odiv

}


写法二：

odiv.onclick = fn;

function fn(){

   consoloe.log(this);//事件源odiv

}

写法三：

<button onclick = "fn(this)">点我</button>


function fn(a){

   console.log(a);//a是实参this，指的是点击的button按钮

}

4、定时器内部的this指向winodw

setTimeOut(function(){

 consoloe.log(this);//事件源window

},10000)






setInterval(function(){

 consoloe.log(this);//事件源window

},10000)

5、自调用函数，this => window

(function(){

  consoloe.log(this);//window

})()

使用call()、bind()、apply()强行改变this指向

1、 call()

语法： 函数名.call(要改变的 this 指向，要给函数传递的参数1，要给函数传递的参数2， ...)

注意：

会立即执行函数

第一个参数是你要改变的函数内部的 this 指向

第二个参数开始，依次是向函数传递参数

  function fn(x,y){
        console.log(x);
        console.log(y);
        console.log(this.age);
    }

    var obj = {
        age: '18'
    }

    fn(1,2); // 输出的结果是1  2  undefined

原因是fn函数是全局函数，全局函数的 this指向window

// function fn(x,y){

    //     全局函数内部的this:window

    //     window对象下没有age，结果是undefined

    //    console.log(x,y,this.age);

    // }

    // fn(1,2)

 需求：想将fn内部的this指向obj,这样的话，就可以使用this.age访问到18

 call：
      作用：改变this指向的
      语法：函数名.call(obj,参数1,参数2...)
      注意：1. 会调用函数
                 2. fn中this指向改变成obj

fn.call(obj,1,2);// 输出的结果是1 2 18

// 1.

    // call()语法：把this的指向改变成obj

    // 语法：函数名.call(this的指向改成谁,正常传参)

    // 注意：fn内部的this已经 改变了，改变成obj

    //       调用函数

    //       this指向改变了

 function fn(x,y){

       console.log(x,y,this.age);

    }

    var obj = {

        age:18

    }

fn.call(obj,10,20);

this指向不再是window，变成obj

2、 apply()

语法： 函数名.apply(要改变的 this 指向，[要给函数传递的参数1， 要给函数传递的参数2， ...])

注意：

会立即执行函数

第一个参数是你要改变的函数内部的 this 指向

第二个参数是一个 数组，数组里面的每一项依次是向函数传递的参数

 function fn(x,y){
        console.log(x);
        console.log(y);
        console.log(this.age);
    }
    var obj = {
        age: '18'
    }

    fn(1,2); // 输出的结果是1 2 undefined 原因是fn函数是全局函数，全局函数的 this指向window

 需求：想将fn内部的this指向obj,这样的话，就可以使用this.age访问到18
    apply：
    作用：改变this指向的
    语法：函数名.apply(obj,[参数1,参数2...])

 function fn(x,y){

       console.log(x,y,this.age);
    }
    var obj = {

        age:18

    }

// 写法一：
    fn.apply(obj,[10,20])
function fn(x,y){

       console.log(x,y,this.age);
    }
    var obj = {
        age:18
    }

// 写法二：

 var arr = [10,20]
    fn.apply(obj,arr)


 

 2. fn中this指向改变成obj

    fn.apply(obj, [1, 2])

3、bind()

语法： var newFn = 函数名.bind(要改变的 this 指向，要给函数传递的参数1，要给函数传递的参数2， ...); newFn(传递参数)

返回值：返回一个已经改变了 this 指向的函

   function fn(x,y){

        console.log(x);
        console.log(y);
        console.log(this.age);
    }
    var obj = {

        age: '18'
    }

 fn(1,2);

输出的结果是1 2 undefined 原因是fn函数是全局函数，全局函数的 this指向window

 bind():
    作用：改变this指向的
    语法：函数名.bind(obj,参数1,参数2...)
    注意
         1. 函数返回一个已经改变了this指向的函数
         2. fn中this指向改变成obj

    var newfn = fn.bind(obj, 1, 2)
    newfn();

ES6新增的内容：

1、let和const关键字

let用来声明变量,它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效,类似于C，C++,JAVA局部变量的概念。

let/const和var的区别：

1. 预解析：var会进行预解析，let/const不会

2. 变量重名：var定义变量可以重名，let/const不允许在同一个作用域下，定义重名变量

3. 块级作用域：var没有块级作用域，let/const有

1. 预解析：var会进行预解析，let/const不会
var命令会发生"变量提升"现象,也就是预解析，即变量可以在声明之前使用，值为undefined。
这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

                                     

// var 的情况
console.log(foo);// 输出undefined
var foo = 2;         

// let 的情况
console.log(bar);// 报错   ReferenceError
let bar = 2;
也就意味着被let声明的变量，必须先定义在使用。      

                             

2. 变量重名：var定义变量可以重名，let/const不允许在同一个作用域下，定义重名变量          

       

var a = 123;
var a = 123; //可以实现              

let b = 123;
let b = 123; //Identifier 'a'has already been declared       

3.块级作用域：var没有块级作用域，let/const有   

// if(true){

    //     var x = 10;

    // }

    // console.log(x);//可以访问变量

    if(true){

        let x = 10;
    }

    // // 通过let定义的变量，实质上相当于变量仅限于{}内部访问，外部访问不到
    console.log(x);//不可以访问变量
 for(var i = 0;i<10;i++){}

    console.log(i);//10

    for(let i = 0;i<10;i++){}

    console.log(i);  //报错  由于i只能在{}内部访问

    function fn(){

        var y = 10;
    }
    fn();
    console.log(y);//函数外部访问不到函数内部的变量
{
        var x = 10;//不形成作用域

    }

    console.log(x);//10
 {
        let y = 10;//形成了一个块级作用域
    }

    console.log(y);//报错，访问不到作用域内部的变量

 

let和const的区别：

1. 声明时赋值 2. 值的修改

什么使const命令呢？实际上它也是一种声明常量的方式。
const命令用来声明常量，一旦声明，其值就不能改变。也就是只读变量

const a=10;

a=100; //Assignment to constant variable.报错
a.声明常量

const PI = 3.1415;

console.log(PI) // 3.1415

PI = 3;         // TypeError: Assignment to constant variable.
b.常量必须初始化

const foo;      //报错Missing initializer in const declaration
c.块级作用域

{
    const foo = 123;
}
console.log(foo);上述代码依然报错，和let的效果是一样的。
d.声明不提升(const修饰的变量必须先定义后使用)

if (true) {
    console.log(MAX);// ReferenceError
    const MAX = 5;
}

 1. let和const，var
       let和var的区别？
         1.1 预解析（声明提升）
             var可以预解析
             let不支持预解析
         1.2 变量重名
              var可以变量重复命名
              let不支持变量重复命名
         1.3 块级作用域
              let可以形成块级作用域
              var不能形成作用域

        const和var区别：
            1.1 预解析（声明提升）
             var可以预解析
             let不支持预解析
            1.2 变量重名
              var可以变量重复命名
              let不支持变量重复命名
            1.3 块级作用域
              let可以形成块级作用域
              var不能形成作用域

        const和let区别：
           1. let可以被重新赋值， const不可以被重新赋值
           2. const声明即赋值, let可以先声明，后赋值
           const a ;
           a = 10;//不允许这么写

 e.const修饰的变量不可重复定义
简单来说，let和const的功能基本类似，只是let用来修饰变量,const用来修饰常量。
无论是let还是const,这并不算新的语法，其实这些内容甚至是其他高级语言"玩剩下的",
这种改动只是将JS脚本语言更加标准化了，可见js的语法也更加的后台化。

2、字符串新增

字符串新增方法：

1. str.includes(元素): 在字符串中判断是否包含某个元素，返回的是布尔值

2. str.startsWith(字符串) 判断字符串是否以某个字符串开始，返回布尔值

3. str.endsWith(字符串) 判断字符串是否以某个字符串开始，返回布尔值

4. str.repeat(n) : 让字符串重复n次

 字符串新增语法
               6.1  语法：str.includes('子字符串')
                    返回值：true/false
                    作用：判断字符串str是否包含子字符串
    
                6.2 语法： str.startsWidth('子字符串substr')
                    返回值：true/false
                    作用：判断str是否以substr开始
                6.3 语法： str.endssWidth('子字符串substr')
                    返回值：true/false
                    作用：判断str是否以substr结束
    
                6.4 语法：str.repeat(n) :      
                    作用：让字符串重复n次
                    返回值：重复后的字符串

3、箭头函数

2.1 ES6 语法中定义函数的一种方式

2.2 函数定义的方式：

2.2.1 声明式 function fn() {}

2.2.2 赋值式 var fn = function () {}

2.2.3 箭头函数（赋值式的一种简化写法） var fn = () => {}

2.3 箭头函数的特点：

2.3.1 当你的形参只有一个的时候, 可以不写小括号

当你的形参只有一个的时候, 可以不写小括号

                     var fn = (a)=>{consloe.log(a)}

                     var fn = a=>{consloe.log(a)}

当你的函数体只有一行代码时, 可以省略大括号不写    

  var fn = (a)=>{consloe.log(a)}

  var fn = a=>consloe.log(a)

      

当你的函数体只有一行代码并且有return，return都可以不写               

 var fn = (a,b)=>{return a+b}

 var fn = (a,b)=>a+b

        

箭头函数内部的this

                   箭头函数内部不绑定this，箭头函数内的this指向箭头函数所在的上下文环境（简单理解就是：this指代的是该箭头函数的上下文）

odiv.onclick = ()=>{

   console.log(this)

}

箭头函数内没有 arguments

4、解构赋值

3.1 解构赋值 快速从对象或者数组中获取一些数据，分为解构数组和解构对象

解构数组 语法: var [ 变量1, 变量2, 变量3, ... ] = 数组

解构对象 语法: var { 键名1, 键名2, 键名3, ... } = 对象

解构对象的时候起一个别名

var arr = [12,4,3,23,45,32,4];

var [a,b,c,d,e,f,g] =[12,4,3,23,45,32,4]  = arr;

console.log(a,b,c,d,e,f,g);
var obj = {name:'张三',age:18,sex:"男"}

var {name,age,sex} = obj;

console.log(name,age,sex);

console.log(obj.name,obj.age,obj.sex);

console.log(obj['name'],obj['age'],obj['sex']);

解构赋值的用途：
用途一：解构赋值可以让一个函数返回多个值使用 []
 

function fun(){

    return [1,2,3];

}
//let a = fun();let [x,y,z] = fun();

//console.log(a);

console.log(x,y,z);

 案例：
返回1~100能被3整除的数之和，以及这样的数有多少个。

function is3(){

    let sum = 0;
    let count = 0;
    for(let i=1; i<=100; i++){
        if(i%3==0){
            sum += i;
          count++;
        }
    }
    return [sum,count];
}
let [sum,count] = is3();
console.log(sum,count);

 用途二：
解构赋值可以实现两个数的交换

let a=10,b=20;

[a,b] = [b,a];

console.log(a,b);

5、默认参数

4.1 概念：给函数的形参设置一个默认值, 当你没有传递实参的时候, 默认参数会生效

语法：function fn(a = 10, b = 20) { } 参数a的默认值是10

// 将函数的形参位置设置一个默认参数，该默认参数在没有传递实参时生效

function fn(a=10,b=20){

    console.log(a,b);
}
 
fn();

 展开:将数组中的元素一一展开，等价于上面的写法

var arr = [12, 34, 45, 2];

    console.log(arr[0], arr[1], arr[2], arr[3]);



    // 展开:将数组中的元素一一展开，等价于上面的写法

    console.log(...arr);

合并: 将传递的实参以数组的形式接受,形参是一个数组形式

 // 合并: 将传递的实参以数组的形式接受,形参是一个数组形式

    function fn(...arr) {
        // console.log(arr);
        var sum = 0;
        arr.forEach(item => {
            sum += item;
        })
        console.log(sum);
    }

    fn(1, 2, 3, 4, 5);//arr = [1,2,3,4,5]
    fn(1, 2, 3, 4, 5, 6);//
    fn(1, 2, 3, 4, 5, 6, 7, 9)

Set和map集合

Set：数据结构，类似于数组，但是它的值不会重复（自动去重）

Set的属性和方法

属性：size获取元素的长度

方法：add(ele) 向Set中添加元素

delete(ele) 删除

has(ele) 是否包含某个元素，返回布尔值

clear()： 清空set集合

Set集合特点自动去重实现数组去重 ：

let arr =[2,3,4,2,3,4,2,3,4];

let set = new Set(arr);

let arr = Array.from(set);//Number("123");

console.log(arr);

map也是一种数据结构，类似于对象

属性：size获取元素的长度

方法：

设置键值对 set(key,value)

获取 get(key)

删除 delete(key)

清空 clear()

包含 has(key) 返回布尔值

<script>
    // map的遍历:
    let map = new Map();
    map.set("1", "校长"); 
    map.set("2", "小明"); 
    map.set("3", "老王");//map.delete("3");map.clear();
    console.log(map.has("0"));
    console.log(map.get("2"));
    console.log(map);
    for (let t of map) {
        console.log(t[0] + t[1]); //0代表Key 1代表value
    }
map的遍历:
for(let t of map){
    console.log(t[0] + t[1]); //0代表Key 1代表value
}
</script>

 for..of循环，

 数组：可以用for..in遍历，也可以用for..of遍历

           for..in循环遍历的是下标， for..of遍历的是数组元素

 对象：可以用for..in遍历，不可以用for..of遍历

           for..in循环遍历的是键

  map集合：不可以用for..in遍历，可以用for..of遍历

 var arr = [12,34,12,5,6]

       for(var k in arr){

           console.log(k);//k代表的是字符串形式的下标
       }
for(var k of arr){

           console.log(k);// k代表的是数组元素

       }

APPTX4869
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ie11兼容es6语法资源包
03-08
1、引入browser.min.js，使用es6语法的script标签加 type="text/babel" 2、引入browser-polyfill.min.js，兼容promise语法
JavaScript基础练习题（三）
qqatt的博客
02-06 2万+
一、单选题（共30题，每题2分） 得分：2.0分 1. 以下关于Javascript中事件的描述中，不正确的是 A click——鼠标单击事件 B focus——获取焦点事件 C mouseover——鼠标指针移动到事件源对象上时触发的事件 D change——选择字段时触发的事件 正确答案: D 解析: change事件为input内容发生改变时触发的事件。 根据input的type属性值不同，...
JavaScript练习题四
BUG_Jia
09-09 3423
一、单选题（共30题，每题2分） 1.什么属性用于获取 HTML 文件的根节点 A documentElement B rootElement C documentNode D documentRoot 正确答案: A 解析: html文件的根节点为html，获取方式为document.documentElement 2.关于正则表达式声明6位数字的邮编，以下代码正确的是 A var reg = /\d6/; B var reg = \d{6}\;.
JavaScript题库
CIA的博客
08-16 4920
下面语句得到值为true的有 A C A “1” == 1 B 1===“1” C “2” > “19” D “2”==19 下面哪些方法可以实现将字符串“123”变成数值型 (还没学) A B C D A Number() B parseInt() C parseFloat() D Boolean() 下面声明变量及赋值的写法正确的有__________ B C D A var _myName = 12a B var _myName = “12a” C var myName = .
js学习笔记 - ES6 ES5的区别
weixin_54284859的博客
09-03 1928
ES6 ES5的区别 引入class,promise,async,await,let,const块级作用域，模板字符串，函数默认参数，箭头函数
严格模式
qq_36303110的博客
02-02 442
严格模式 严格模式可以定义在函数的最顶端或程序的最顶端 use strict(es5加入 老版本浏览器不支持) 严格模式下，变量必须先声明后使用 严格模式下的this指向 严格模式中，函数中的this永远不会指向window(undefined) 在严格模式下，eval()拥有独立作用域，用完即销毁(非严格模式下eval()没有独立作用域，变量能保存) 严格模式下,callee被禁用...
webstorm和.vue中es6语法报错的解决方法
12-09
1.webstorm中es6语法报错，解决方法： 打开 Settings => Languages & Frameworks => Javascript 把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错，但是.vue文件中es6语法依然...
es6语法
01-07
3.ES6 允许使用“箭头”（=>）定义函数。 场景：用于替换匿名函数 e.target.value 每次触发DOM事件时会产生一个事件对象（也称event对象），此处的参数e接收事件对象。 e.target表示该DOM元素，然后在获取其相应的...
解决node终端下运行js文件不支持ES6语法
12-20
最近写一些简单的测试代码时，为了方便直接在node终端执行发现有些ES6语法不支持，记录一下解决方式 现象 新建class.js文件后添加如下代码 // constructer class Person { constructor(name,age,sex) { this.name...
利用babel将es6语法转es5的简单示例
11-30
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。 本文讲解需预装node和npm。大家可以参考这篇文章：//...
JS实现禁止高频率连续点击的方法【基于ES6语法】
10-19
主要介绍了JS实现禁止高频率连续点击的方法,通过事件监听结合定时器实现针对高频率点击的限制操作,该功能基于ES6语法实现,需要的朋友可以参考下
es6语法讲解.docx
最新发布
01-15
es6语法.docx
es6-mario：ES由ES6语法和HTML5 Canvas制作的网页游戏
02-05
使用ES6语法和HTML5功能（例如Module, Canvas编写的网络游戏。 通过该项目，您可以对ES6语法， HTML Canvas Related API和Webpack简单配置有特定的印象。 通过@ 的。 还强烈为您推荐此频道！ 非常感谢作者 ，他从...
使用ES6语法重构React代码详解
12-10
使用ES6语法重构React组件 在Airbnb React/JSX Style Guide中，推荐使用ES6语法来编写react组件。下面总结一下使用ES6 class语法创建组件和以前使用React.createClass方法来创建组件的不同。 创建组件 ES6 class创建...
前端javaScript es6语法学习 demo
12-25
js es6语法学习 包括 Map,promise,rest参数,对象扩展,集合set,箭头的使用,解构,扩展运算符,生成器,数值扩展.
js基础试题及答案(三)
热门推荐
陈乾的博客
08-07 2万+
一、单选题（共30题，每题2分） 1.下列关于事件委托说法错误的是 A 事件委托可以解决事件绑定程序过多的问题 B 事件委托利用了事件捕获原理 C 事件委托可以提高代码性能 D 事件委托可以应用在click,onmousedown事件中 正确答案: B 解析: 事件委托利用的是事件冒泡的原理 2.什么属性用于获取 HTML 文件的根节点 A documentElement B rootElement C documentNode D documentRoot 正确答案: A 解析: html
【JavaScript基础16】
San_Diego的博客
12-22 211
ES5和ES6: 我们说的ES5和ES6其实就是在 js 语法的发展过程中的一个版本而已ES5新增： 一、数组的相关方法： 1. 数组.forEach(function (item, index, arr) {}) 2. 数组.map(function (item, index, arr) {}) 3. 数组.filter(function (item, index, arr) {}) 4. 数组.every(function (item, in...
【12-20】ES5复习、ES6新增、
CangGog的博客
12-20 128
【12-20】ES5、ES6
JS——es5的严格模式（1）es3.0和es5.0的区别
abraham的博客
12-30 7172
视频：https://ke.qq.com/course/231577?taid=3983676656552089 “use strict” （1）不在兼容es3的一些不规则语法，使用全新的es5规范 （2）两种用法： （2.1）全局模式 （2.2）局部函数内严格模式（推荐） （3）就是一行字符串，不会对不兼容严格模式的浏览器产生影响 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值