es6 新增 常用 语法 知识点 汇总

最新推荐文章于 2023-11-30 12:25:17 发布
最新推荐文章于 2023-11-30 12:25:17 发布
阅读量179 收藏
点赞数 1
文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyinshaofeng/article/details/126549689
版权

## let关键字

定义一个变量

特征：

1、不能重复声明

2、块级作用域

3、不存在变量提升

4、暂存死区

## const关键字

定义一个常量

特征：

1、const关键字定义的值不能修改

2、不能重复声明

3、块级作用域

4、不存在变量提升

5、暂存死区

## 解构赋值

### 数组的解构

数组按位置解构变量

```javascript

let arr = [5,7,4];

let [a,b,c] = arr;

// 相当于

let a = arr[0];

let b = arr[1];

let c = arr[2];

```

### 扩展运算符

```javascript

let [a1,b1,...c1] = [1,2,3,4,5,6]

console.log(a1) // 1

console.log(c1) // [3,4,5,6] // 扩展运算符的作用就是把解构后剩余的部分赋值给扩展运算符

```

### 结构运算的默认值

```javascript

let arr2 = [1,2];

let [a2=0,b2,c2=9,d2=100] = arr2;

console.log(a2) // 1

console.log(b2) // 2

console.log(c2) // 9

console.log(d2) // 100

let [aa=10,bb=9,cc=8] = [1,null,undefined]

```

### 对象的解构

按键解构变量

```javascript

let obj = {

    name:'xiaoming',

    age:18,

    sex:'男'

}

let {age,name,sex} = obj

console.log(name)

console.log(age)

console.log(sex)

```

### 扩展运算符

```javascript

let obj = {fashi:'安其拉',cike:'兰陵王',tanke:'俄洛伊',adc:'寒冰'};

let { cike, ...oth} = obj;

console.log(cike)

console.log(oth)

```

### 字符串的解构赋值

字符串的解构赋值是按照数据的解构赋值方法进行解构

```javascript

let str = 'hello world';

let [a,b,c,...d] = str;

console.log(a) // 'h'

console.log(b) // 'e'

console.log(c) // 'l'

console.log(d) // ['l','o',' ','w','o','r','l','d']

```

## 模板字符串

在es6中使用一对反引号  (``)  定义一个模板字符串

模板字符串的两个特征：

1、长字符串可以换行

2、在模板字符串中可以插入变量

```javascript

let num = 18;

let con = `<div>

                <p>

                    <span>

                        我是个模板字符串

                        我今年 ${num} 岁

                    </span>

                </p>

            </div>`;

```

## 箭头函数

使用 ()=>{}  代替原来的 function(){}  的形式定义的函数叫做箭头函数。

箭头函数的特点：

```javascript

// ()代表参数体  {} 函数体

        let add = (a,b)=>{

            return a+b

        }

        console.log(add(2,3))

        // 当箭头函数的参数只有一个时  () 可以省略

        let say = t => {

            console.log(t)

        }

        say('今天天气不错')

        // 当函数体代码只有一行时 {} 可以省略

        let add1 = (a,b) => console.log(a+b);

        add1(3,4)

        // 如果 不加 {}  函数体代表return

        let add2 = (a,b) => a+b

        let n = add2(5,6)

        var name = '张三'

        console.log(window.name)

        let xiaoming = {

            name:'小明',

            age:18,

            say:function(){

                console.log('我叫'+this.name)

            },

            // 箭头函数没有this 保留this关键字

            say1:e=>{

                console.log('我叫'+this.name)

            }

        }

        xiaoming.say()

        xiaoming.say1()

        // 函数的arguments可以获取传入的所有参数

        let fn = function(a,b,c,d){

            console.log(arguments)

        }

        fn(1,2,3,4) // [1,2,3,4]

        // 箭头函数没有arguments参数

        let fn1 = (a,b,c,d)=>{

            console.log(arguments) // undefined

        }

        fn1(4,5,6,7)

```

## es6扩展方法

### 字符串的扩展

```javascript

// padStart 在字符串前填充某字符串到某长度

console.log("i".padStart(3,'hello')) // hei

console.log("i".padStart(10,'hello')) // hellohelli

// padEnd 在字符串后填充某字符串到某长度

console.log("i".padEnd(7,'hello')) // ihelloh

console.log("i".padEnd(3,'hello')) // ihe

// startsWith 判断是否以某字符串开头

let str = "An apple is an apple";

console.log(str.startsWith('a')) // false

console.log(str.startsWith('A')) // true

// endsWith 判断是否以某字符串结尾

console.log(str.endsWith('a')) // false

console.log(str.endsWith('n apple')) // true

// includes 判断一个字符串是否包含某字符串

str.includes('an apple') // true

```

### 数组的扩展

```javascript

// Array.from 把一个类数组转换成数组  类数组:键是数字 + length属性

let obj = {

    0:4,

    3:6,

    6:1,

    9:9,

    length:5

}

console.log(obj)

console.log(Array.from(obj))// array

// fill 以特定内容填充数组

let arr = new Array(10) // 以构造方法创建数组时 参数只传一个数字时 代表数组的长度

arr.fill('2') // ['2' x 10]

arr=[1,2,3,4,5,6,7,8]

// fill接收三个参数：要填充的内容  开始填充的位置  结束的位置

arr.fill('2',0,3)

console.log(arr) // ['2','2','2',4,5,6,7,8]

// includes  判断数组中是否包含某元素

arr=[1,2,33,4,55,6,7,8];

console.log(arr.includes(4)) // true

console.log(arr.includes(44)) //false

// keys 获取数组中的所有键 组成新数组

for(let i of arr.keys()){

    console.log(i) // 每个数据的下标

}

// values 获取数组中的所有值 组成新数组

for(let i of arr.values()){

    console.log(i) // 每个数据的值

}

// entries 获取每一组键和值

for(let [k,v] of arr.entries()){

    console.log(k,v)

}

// find 根据条件（回调）按顺序遍历数组，当回调函数返回为true时 find返回对应的第一条数据

let arr = [7,11,4,18,66,33];

// 回调函数接收三个参数：value index arr  v是必填

let res = arr.find(function(v,k,arr){

    console.log("v:",v)

    console.log("k:",k)

    console.log("arr:",arr)

    return v % 2 == 0

})

console.log('----')

console.log(res) // 4

// findIndex 根据条件（回调）按顺序遍历数组，当回调函数返回为true时 find返回对应的第一条数据的下标

let arr = [7,11,4,18,66,33];

// 回调函数接收三个参数：value index arr  v是必填

let res = arr.findIndex(function(v,k,arr){

    console.log("v:",v)

    console.log("k:",k)

    console.log("arr:",arr)

    return v % 2 == 0

})

console.log('----')

console.log(res) // 2

// map 依次遍历数组  返回一个处理后的数据

let arr = [7,11,2,18,66,33];

let res = arr.map(function(item){

    return item*2

})

console.log(res) // [14,22,4,36,132,66]

// some 检测是否有符合条件的元素 返回布尔值

let arr = [7,11,2,18,66,33];

let res = arr.some(function(item){

    return item<2

})

console.log(res) // false

// filter 过滤 当回调返回值为false时 过滤符合条件的值 返回过滤的值

let arr = [7,11,2,18,66,33];

let res = arr.filter(function(item){

    return item<10

})

console.log(res) // [7,2]

```

### 数值的扩展

```javascript

// parseInt 转换成整数型

console.log(window.parseInt('1.23')) // 1

console.log(window.parseInt(12.3)) // 12

console.log(Number.parseInt(1.23)) // 1

//parseFloat 转换成浮点型

console.log(Number.parseFloat('1.23')) // 1.23

// isNaN判断是否不是数值类型 es之后将其挂载到Number上 而不是window

// isFinite 判断是否是数值类型

// Number.isSafeInteger 判断是否是有效数字

// 有效数字的取值范围是：-2^53-1 ~ 2^53-1

// 在es6中使用Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 获取最大有效值和最小有效值

// 幂的运算 ** 从右向左运算

2**10**0  // 2

(2**10)**0 // 1

es6之后  使用 0o 开头定义16进制

        使用 0b 开头定义2进制

```

## Promise

promise是对一个异步操作最终状态的一个解释（要么成功，要么失败）

### 回调

当一个方法的参数是一个函数时，那么这个函数就是这个方法的回调函数。

```javascript

function fn(cb){

    // 模拟ajax

    setTimeout(function(){

        cb && cb()

    },1000)

}

// 以回调嵌套回调的形式 一般称为回调地狱

// 回调执行一个依赖结果的方法时 代码会很冗余，不便于修改

fn(function(){

    console.log('第一次请求')

    fn(function(){

        console.log('第二次请求')

        fn(function(){

            console.log('第三次请求')

        })

    })

})

```

### promise实例

将上例代码改为promise

```javascript

function fn(){

    // promise的第一个参数 resolve

    return new Promise((resolve)=>{

        setTimeout(function(){

            resolve()

        },1000)

    })

}

fn().then(function(){

    // 这个方法就是promise实例中对应的resolve方法  也可以理解成是fn方法的回调

    // 还可以继续返回promise实例

    return fn()

}).then()

// ....

```

### promise错误处理

```javascript

function fn(flag){

    // promise中接收第二个参数 reject 代表失败时的操作

    return new Promise((resolve,reject)=>{

        if(flag){

            // ajax请求成功执行

            resolve()

        }else{

            // ajax请求失败执行

            reject()

        }

    })

}

// 用法1：

fn()

    // 在then方法中传入第二个方法 就是对应的reject

    .then(function(){},function(){})

// 用法2：

fn()

    .then()

    .catch(function(){

        // catch中执行的方法就是reject方法

    })

    .finally(function(){

        // 最终结果 无论成功与否都会执行 且不影响then/catch

    })

```

### promise.all()

```javascript

// promise.all 将多个promise实例组成一个新的promise 接收一个数组 数组的每一项就是一个promise实例

// promise.all 数组中所有的promise返回结果都成功是 all方法就成功，当数组中有一个是失败时，all方法就失败

    function getData1(f1){

        return new Promise((resolve,reject)=>{

            setTimeout(function(){

                if(f1){

                    console.log('这是getData1')

                    resolve()

                }else{

                    reject()

                }

            },500)

        })

    }

    function getData2(f2){

        return new Promise((resolve,reject)=>{

            setTimeout(function(){

                if(f2){

                    console.log('这是getData2')

                    resolve()

                }else{

                    reject()

                }

            },1000)

        })

    }

    function getData3(f3){

        return new Promise((resolve,reject)=>{

            setTimeout(function(){

                if(f3){

                    console.log('这是getData3')

                    resolve()

                }else{

                    reject()

                }

            },200)

        })

    }

Promise.all([getData1(true),getData2(false),getData3(true)])

    .then(function(){

        console.log('成功')

    }).catch(function(){

        console.log('失败')

    }).finally(function(){

        console.log('最终结果')

    })

```

### promise.race()

```javascript

// promise.race 将多个promise实例组成一个新的promise 接收一个数组 数组的每一项就是一个promise实例

// promise.race 的执行结果 受第一个执行的promise实例影响 第一个promise返回成功 race方法就成功，否则相反

    function getData1(f1){

        return new Promise((resolve,reject)=>{

            setTimeout(function(){

                if(f1){

                    console.log('这是getData1')

                    resolve()

                }else{

                    reject()

                }

            },500)

        })

    }

    function getData2(f2){

        return new Promise((resolve,reject)=>{

            setTimeout(function(){

                if(f2){

                    console.log('这是getData2')

                    resolve()

                }else{

                    reject()

                }

            },1000)

        })

    }

    function getData3(f3){

        return new Promise((resolve,reject)=>{

            setTimeout(function(){

                if(f3){

                    console.log('这是getData3')

                    resolve()

                }else{

                    reject()

                }

            },200)

        })

    }

Promise.race([getData1(true),getData2(false),getData3(true)])

    .then(function(){

        console.log('成功')

    }).catch(function(){

        console.log('失败')

    }).finally(function(){

        console.log('最终结果')

    })

```

## class类

```javascript

// 通过class关键字定义一个类

class Car{

    // constructor 是类的构造函数 钩子 会在实例化的时候自动执行

    constructor(name,age){

        this.name = name

        this.age = age

    }

}

// 通过new关键字 创建一个对象

let car1 = new Car("张三",18);// 类接收的参数 就会执行到constructor方法上

```

### 静态属性&方法

```javascript

// 静态属性和方法 static   静态属性和方法  只能类自身去调用

class Car{

    static total = 0;

    constructor(color){

        this.color = color

        Car.total += 1

        Car.repair()

    }

    static repair(){

        console.log('我是静态方法')

    }

}

```

### getter和setter

在调用类中的属性是会触发getter方法，在修改类中的属性时会触发setter方法

```javascript

class Human{

    name="张三"

    say(){

        console.log('我叫'+this.name)

    }

    set age(val){

        console.log('age被修改成了：'+val)

    }

    get age(){

        console.log('age被访问了')

    }

}

let zs = new Human();

zs.age = 5 // 会触发 set age()方法 其中形参 val 就是被修改后的值

console.log(zs.age) // 会触发 get age()方法

```

### 类的继承

使用extends继承一个类

```javascript

// 定义一个父类

class Human{

    constructor(name,age,sex,hobby){

        this.name = name

        this.sex = sex

        this.age = age

        this.hobby = hobby

    }

    say(){

        let {name,age,sex,hobby} = this

        console.log(`我叫${name}，今年${age}岁，我是${sex}的，我喜欢${hobby.join('和')}`)

    }

}

let xiaoming = new Human('小明',18,'男',['吃饭','睡觉','打豆豆'])

xiaoming.say()

// 定义一个子类

// extends 继承

class son extends Human{

    constructor(name,age,sex,hobby,skill){

        super(name,age,sex,hobby)// super方法用于传递父类的参数

        this.skill = skill

    }

    say(){

        let {name,age,sex,hobby,skill} = this

        console.log(`我叫${name}，今年${age}岁，我是${sex}的，我喜欢${hobby.join('和')},我会${skill}`)

    }

}

let zs = new son('张三',16,'女',['唱','跳'],'vue')  // 在子类中依然可以访问父类的属性和方法

zs.say() // 子类的方法和属性会覆盖父类的方法和属性

```














 

阿狸lyinshaofeng
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6常用知识点学习总结
12-10
压缩包包含了ES6中比较常用的知识点代码总结，这是博主自学过程中存下来的，包括，le&const，变量的解构，模块化，函数参数默认值，箭头函数，字符与对象的拓展，class类，try/catchz异常处理，promise等等，请放心...
【ES6】新增语法
weixin_49487698的博客
05-12 1597
一、定义变量 var–> let：定义变量 ​ const：定义常量 note： var的预解析：在声明var之前输出，是undefined，而在声明let、const之前输出，直接报错 var不局限于某一个块，可声明多次，let、const只能在相对应的块中使用，只可声明一次 二、箭头函数 ：对原来函数表达式的简写（省略function） note：1、当箭头函数只有一个形参时，可以不写（） ​ 2、当箭头函数只有一句话时，可以不写{}，并且返回值是 { } 里面的内容 ​ 3、普通函数
ES6的常见新增语法
weixin_58448088的博客
01-24 5227
详解ES6常见新增语法：立即执行函数、箭头函数、this指向、改变this指向的三种方法：call(),apply(),bind()、合并展开运算符、解构赋值、map数据类型、set数据类型
ES6新增的语法
sun_qqq的博客
03-14 392
ES5数据类型：number、string、boolean、null、undefined、object。Array新增的from方法，与es5新增的Set数据类型，可以配合使用，达到过滤数组的功能如下。Array.from: 将类数组转为数据，比如set、map、argument、dom对象。set：数组的拓展，set相当于没有重复项的数组。Set的构造函数可接收数组。ES6数据类型：bigInt、symbol。Array.of： 将一组数组转为数组。
ES6 新增功能点整理
bihansheng2010的博客
05-13 888
1、webpcak 打包工具 入口 (entry) 输出 (output) loader 插件 (plugins) 2、gulp 自动化构建工具 const gulp = require('gulp'); // default 表示一个任务名，为默认执行任务 gulp.task('default', function() { // 放置默认的任务代码 }) 3、新的关键字 let 、const let 作用域在当前代码块 （var 是全局） const 定义只读变量，值不能变化...
ES6+新语法
qq_50582468的博客
03-16 645
当代码在执行之前，会把所有在当前作用域下var声明的变量提升到当前作用于的最前面，只提升声明，不提升赋值，然后依次执行代码。可以把数组进行展开，可以利用其求数组的最大值以及合并数组的操作，剩余参数在函数内部进行使用。剩余参数允许我们将一个不定数量的参数表示为一个数组，其为真数组，例如其用...参数数组名。动态参数是伪数组，箭头函数里没有arguments，剩余参数为真数组，开发中剩余参数常用。：另外如果还有其他参数，则会先把用户输入的数给其他参数，剩余的参数给定义的数组参数。2、以数组进行开头的时候。
ES6新增的数组知识实例小结
10-15
主要介绍了ES6新增的数组知识,结合实例形式分析了ES6的数组新增知识点、使用技巧与相关注意事项,需要的朋友可以参考下
ES6新增语法笔记，方便学习
03-25
最新ES6语法整理笔记，内涵各个部分小示例，方便理解和使用，记录了整个ES6新增语法部分，以及与之前版本的比较！
ES6基本语法及新增语法
08-20
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
ES6新增语法之真香
01-20
二：相关语法 1.定义变量 let const let是声明变量的关键字，特点如下： a.不允许重复声明 b.没有预解析阶段，不会被提升 c.自带独立的作用域，在大括号中声明的变量只能在大括号中使用 可以解决循环中定时器里使用...
前端基础之ES6的新增语法
黑马程序员官方博客
02-27 333
ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。
ES6有哪些新语法？
金木讲编程
05-10 447
这些新的语言特性和改进提供了更简单、更直观的语法和更好的可读性，同时也增加了代码的可维护性和可复用性。对于 JavaScript 开发者来说，掌握 ES6 的新语法是非常重要的，可以提高代码的质量和效率。13、async/await 异步编程语法糖。1、let 和 const 声明变量的方式。14、rest 和 spread 操作符。10、Map 和 Set 数据结构。12、generator 函数。11、Symbol 数据类型。7、Promise 对象。
ES6新增语法
weixin_45950790的博客
04-18 977
ES6的语法规范 一、定义变量的关键词 1、let <1> 特点： （1）定义的变量名称不能重复 （2）定义的变量会像forEach()循环类似会建立独立的相互之间不影响的 （3）定义在{}和循环中的变量 只能在{}和循环中使用 <2> 使用： （1）定义基本数据类型 （2）在循环中使用 定义循环变量 2、const <1> 特点： （1）定义的变量名称不能重复...
ES6的新语法（语法糖）
jt15881622410的博客
11-30 1217
ES6引入了许多新的语法用过很多了，但是总没有区分开，哪些是es6新加的，最近面试有问到，所以这里整理一下，算是比较全的，这里只涉及到了语法相关的。
es6新语法
qq_43260366的博客
06-06 414
ES2015(2015年发布的， javascript的第六个版本) 以及后续版本就是统称为ES6；解构赋值语法是一种 Javascript 表达式。通过**解构赋值，**可以将 属性/值 从 对象/数组 中取出，赋值给其他变量； es6-解构赋值 语法 ：let [变量1，变量2，…变量3] = 数组举例说明 利用数组解构赋值交换两个变量的值 非解构-借助第三个变量进行交换 解构 [2]对象 es5-非解构赋值 es6-解构赋值 语法1：
学习js入门之ES6（新增的函数和语法）
skipple11的博客
03-15 616
我们来分析一下这是怎么做到的：首先，我们使用obj调用say方法时，say内创建了AO对象，并且该AO对象的this属性指向了obj（这里不明白的请回去复习一下我的《JavaScript之深入函数/对象》），然后，say内部又声明了一个箭头函数。总结：使用 export 向外输出成员时，可以同时输出多个，并且必须用‘｛｝’大括号包裹，在其他地方使用 import 导入时，接收成员的变量名必须和这里输出的名称一致，同时，可以根据实际情况，仅接收实际需要的的成员（接收的时候也要用大括号包裹）。
ES6的新增语法
LiuYQing的博客
09-25 785
letES6中新增的用于声明变量的关键字 特点： 1.let声明的变量只在所处于的块级有效 if(true){ leta=10; } console.log(a)//aisnotdefined 2.在业务逻辑比较复杂时，能够防止内层变量覆盖外层变量 3.拥有块级作用域的变量还有一个好处防止循环变量变成全局变量 4.不存在...
ES6新增语法 剩余参数
Kanyeee的博客
07-07 91
剩余参数允许我们将一个不定数量的参数表示为一个数组 和解构配合使用 ... 就代表剩余数组
ES6新语法
许小墨的菜鸡博客
04-01 440
es6新增语法详解
es6新增语法有那些
最新发布
02-06
以下是ES6新增的一些主要语法： 1. let和const关键字：用于声明块级作用域的变量。let声明的变量可以被重新赋值，而const声明的变量是常量，不可被重新赋值。 2. 箭头函数：使用箭头（=>）定义函数，简化了函数的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值