es6新语法

已于 2022-09-06 23:25:01 修改
阅读量564 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： js
于 2021-01-07 13:01:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40636998/article/details/112307177

• 对原有语法进行增强
• 解决原有语法上的一些问题或者缺陷
• 全新的对象、全新的方法、全新的功能

• 全新的数据类型和数据结构

1.ES2015 let 与块级作用域

(1)全局作用域

(2)函数作用域

(3)块级作用域

2.let var const

不用var 推荐const 修改用let

3.数组的解构(按照位置提取数据)
// 数组的解构  按照位置提取数据
const arr = [100,200,300]
//1.获取全部值的情况
const [foo,bar,baz] = arr
console.log(foo,bar,baz);
//2.获取指定位置的值
const [,,a] = arr
console.log('a:',a);
//3.获取从当前位置到后面所有值的数据(只能用于最后一个成员)
const [b,...c] = arr
console.log('c:',c);
//4.解构成员少于数据个数,顺序获取;解构成员大于数据个数,大于的undefined
const [d]=arr
console.log('d:',d);
const [e,f,g,h,i] = arr
console.log('h:', h);
//5.设置默认值
const [l,m,n,v=900] = arr
console.log('v:', v);
4.对象的解构(按照属性提取数据)
//对象的解构
const obj = {name:'zce',age:18}
const {name} = obj
console.log('name:', name);
//1.若有名字一样时,可以起别名
const age = 12
const {age: objAge} = obj
console.log(objAge);
//其他同数组解构一致
5.模板字符串``
//模板字符串``
//1.普通方式
const str = 'hello es2015, this is a string'
console.log(str);
//2.支持换行  对于输出html字符串很方便
const str1 = `hello es2015, 

this is a string`
console.log(str1);
//3.支持通过插值表达式方式嵌入数值
const name = 'fufu'
const str2 = `hello,${name}`
console.log(str2);
//4.{}内支持所有JavaScript语句
const str3 = `${1+2+3+4}-----${Math.random()}`
console.log('str3:',str3);
6.带标签的模板字符串
//带标签的模板字符串
const str = console.log`hello world`
const name = 'tom'
const gender = true
//处理中英文 等
function myTagFunc(Strings, name, gender){
    const sex = gender?'man':'woman'
    return Strings[0] + name + Strings[1] + sex + Strings[2]
}
const result = myTagFunc`hey, ${name} is a ${gender}`
console.log(result);
7.字符串的扩展方法 inculdes() startsWith() endsWith()
//字符串的扩展方法  inculdes()      startsWith()      endsWith()
const message = 'Error: foo is not defind.'
//字符串中间是否包含'foo'
console.log(message.includes('foo'));
//检查字符串是否以‘Error'开头
console.log(message.startsWith('Error'));
//检查字符串是否以‘.'结尾
console.log(message.endsWith('.'));
8.参数默认值
//常规操作
function foo(enable){
    //短路操作  这样操作有误
    // enable = enable || true

    enable = enable === undefined ? true:false
    console.log('foo invoked enable:');
    console.log(enable);
}
//参数默认值  未传值时才起作用 如果是多个参数的话 默认值只能传给最后一个参数
// function foo(enable = true){
//     console.log('foo invoked enable:');
//     console.log(enable);
// }
foo()
foo(false)
9.剩余参数
//剩余参数
//之前做法
function foo(){
    console.log(arguments);
}
//es2015
foo(1,2,3,4)
// ...只能使用一次  只能用到形参的最后一位
function foo1(first,...args){
    console.log(args);
}
foo1(1,2,3,4,5)
10.展开数组
//展开数组
const arr = ['foo', 'bar', 'baz']
// 函数对象的apply方法 以数组形式接收参数  this对象 传参
console.log.apply(console, arr);
console.log(arr[0], arr[1], arr[2]);
console.log(...arr);
11.箭头函数

(1).语法: ()=>{函数体}

(2).举例:

let fn = (num1,num2)=>{
     return num1+num2 
}
console.log(fn(3,6));  //打印结果:9

(3).注意点:

  • 若参数只有一个可以省略()
let fn = v=>{
     return v*v
}
console.log(fn(3));  //打印结果 9
  • 若函数体内只有一句话,可以省略{}
let fn = (num1,num2)=> num1+num2 
console.log(fn(3,6));  //打印结果 9
12.箭头函数与this

箭头函数不会改变this指向(在箭头外面this指的是什么在箭头里面this指的还是什么)

const person = {
    name:'tom',
    // sayHi:function(){
    //     console.log(`hi, my name is ${this.name}`);
    // }
    sayHi: ()=>{
        console.log(`hi, my name is ${this.name}`)
    },
    sayHiAsync: function(){
        // 方法一:
        // const _this = this
        // setTimeout(()=>{
        //     console.log(this.name);
        // },1000)
        // 方法二:
        setTimeout(()=>{
            console.log(this.name);
        },1000)

    }
}

person.sayHiAsync()
13.对象字面量的增强
//对象字面量的增强
//一般写法:
const bar = '234'
const obj= {
    foo: 123,
    bar: bar,
    method1: function(){
        console.log('method111');
    }
}
//增加动态属性
obj[Math.random()] = 123
console.log(obj);
//es2015
const obj1= {
    foo: 123,
    bar,
    method1(){
        console.log('method111');
    },
    //计算属性名
    [Math.random()] : 123
}
console.log(obj1);
  1. 对象扩展方法

    Object.assign:将多个源对象中的属性复制到一个目标对象中

    //Object.assign  对象扩展方法
const source1 = {
    a: 123,
    b: 123
}
const source2 = {
    d: 234,
    e: 234
}

const target = {
    a: 456,
    c: 456
}
//用后面的对象中的对象属性去覆盖第一个对象  源对象数据可以是多个
const result = Object.assign(target,source1,source2)
console.log(target);
console.log(result === target);
//第二种用法---深拷贝
function func(obj){
    // obj.name = 'func obj'
    // console.log(obj);
    const funcObj = Object.assign({}, obj)
    funcObj.name = 'func obj'
    console.log(funcObj);
}
const obj = {name:'global obj'}
func(obj)
console.log(obj);
15.Object.is
//Object.is
console.log(
    // == 相比之前先转换
    0===false,
    //+0 和-0无法比较
    +0 === -0,
    //NaN 两者不能比较
    NaN === NaN,
    //Object.is可以解决 但是平时用的话还是建议使用 ===
    Object.is(+0,-0)
);
16.Proxy
//Proxy  设置访问代理器
// Object.defineProperty
const person={
    name: 'zce',
    age: 20
}
const personProxy = new Proxy(person,{
    get(target, property){
        return property in target ? target[property] : 'default' 
        // console.log(target, property);
        // return 100
    },
    //三个参数  代理目标对象  要写入的属性名称  要写入的属性值
    set(target, property, value){
        if(property === 'age'){
            if(!Number.isInteger(value)){
                throw new TypeError(`${value} is not an int`)
            }
        }
        // console.log(target, property, value);
    }
})

personProxy.gender = true

personProxy.age = '12'
console.log(personProxy.name);
console.log(personProxy.sex);
17.Proxy 对比defineProperty

(1)defineProxy只能监视属性的读写,Proxy能够监视到更多对象操作

//Proxy 对比 defineProxy
const person = {
    name: 'zce',
    age: 20
}
const personProxy = new Proxy(person,{
    deleteProperty(target, property){
        console.log('delete', property);
        delete target[property]
    }
})

delete personProxy.age
console.log(person);

(2) Proxy更好的支持数组对象的监视

以往通过Object.defineProxy去监视数组的操作,常见方式通过重写数组的操作方法,通过自定义的方法覆盖掉数组原型上的pop push等方法,以此来去劫持方法调用的过程

//如何使用Proxy对象监视数组
const list = []
const listProxy = new Proxy(list,{
    set(target, property, value){
        console.log('set', property, value);
        target[property] = value
        return true
    }
})

listProxy.push(100)

Proxy是以非侵入的方式监管了对象的读写

18.Reflect(13种方法)

Reflect属于一个静态类,不能new Reflect(),只能调用类中的静态方法,Reflect.get(),同Math对象

Reflect内部封装了一系列对对象的底层操作,Reflect成员方法就是Proxy处理对象的默认实现

const obj ={
    name: 'zce',
    age: 20
}
const proxy = new Proxy(obj,{
    //不写get方法的话,默认是 Reflect.get  最好写上方便处理业务逻辑
    get(target, property){
        //逻辑处理
        console.log('watch logic~');

        return Reflect.get(target, property)
    }
})

console.log(proxy.name);

统一提供了一套用于操作对象的API

const obj={
    name: 'zce',
    age: 20
}
//1.判断某个属性是否存在与某个对象
console.log('name' in obj);
//2.删除某个对象的某个属性
console.log(delete obj['age']);
//3.查看某个对象的所有属性
console.log(Object.keys(obj));

//统一换成Reflect对象的方法后
console.log(Reflect.has(obj, 'name'));
console.log(Reflect.deleteProperty(obj, 'age'));
console.log(Reflect.ownKeys(obj));
19.Promise

romise ES2015的内置对象,提供了一种更优的异步编程解决方案,通过链式调用解决了传统异步编程中回调函数嵌套过深的问题

20.class类
//class类 使用举例:
class Person {
    constructor(name){
        this.name = name
    }
    say(){
        console.log(`hi, my name is ${this.name}`);
    }
}
const P = new Person('tom')
P.say()
21.静态方法

实例方法就是通过这个类型构造的实例对象对调用

静态方法 直接通过类型本身去调用

//示例:
class Person{
    constructor(name){
        this.name = name
    }
    say(){
        console.log(`Hi, my name is ${this.name}`);
    }
    static create(name){
        return new Person(name)
    }
}

const tom = Person.create('tom')
tom.say()
22.类的继承
//类的继承  示例:
class Person{
    constructor(name){
        this.name = name
    }
    say(){
        console.log(`hi, my name is ${this.name}`);
    }
}
class Student extends Person{
    constructor(name, number){
        super(name)
        this.number = number
    }
    hello(){
        super.say()
        console.log(`my school number is ${this.number}`);
    }
}

const s = new Student('tom', '100')
s.hello()
23.Set
//Set数据结构  集合 和数组类似  但是不允许内部成员重复 
const s = new Set()
s.add(1).add(2).add(3).add(4).add(5)

console.log(s);

//遍历方法一:
for(let i of s){
    console.log(i);
}
//遍历方法二:
s.forEach(item=>console.log(item))

//获取长度
console.log(s.size);

console.log(s.has(100));
console.log(s.delete(3));
// s.clear()
// console.log(s);

const arr = [1,2,3,4,4,5]
//利用Set去重数组中的值
//1.
// const result = Array.from(new Set(arr))
//2
const result = [...new Set(arr)]
console.log(result);
24.Map
//Map数据结构 键值对集合  映射任意数据类型之间的关系  与对象类似  
const obj = {}
obj[true] = 'value'
obj[123] = 'value'
obj[{a:1}] = 'value'
 // 打印得知 键都被转化成了字符串
console.log(Object.keys(obj));

//对象只能使用字符串作为键

const m = new Map()
const tom = {name: 'tom'}
m.set(tom,90)
console.log(m);
console.log(m.get(tom));

// m.has()
// m.delete()
// m.clear()

m.forEach((value, key) =>{
    console.log(value, key);
})
25.Symbol---------一种全新的原始数据类型

避免对象属性名重复

最主要的作用就是为对象添加独一无二的属性名 (截止ES2019 7中数据类型)

26.Symbol补充
27.for … of 循环。将作为遍历所有数据结构的统一方式

for 适合遍历普通数组

for…in 适合遍历键值对

//for of  可以break
//1.遍历数组  若使用forEach无法break停止
const arr = [100,200,300,400]
for(const item of arr){
    console.log(item);
}
//2.遍历伪数组
const s = new Set(['foo', 'bar'])
for(const item of s){
    console.log(item);
}
//3.遍历Map对象
const m = new Map()
m.set('foo', '123')
m.set('bar', '345')
for(const [key, value] of m){
    console.log(key, value);
}
//4.遍历普通对象  不可以
const obj = {foo: 123, bar: 456}
for(const item of obj){
    console.log(item);
}
28.可迭代接口

实现Iterable接口就是for…of 的前提

ES6语法
weixin_50756332的博客
01-03 1318
本文对部分ES6语法做了介绍，以及一些基本的用法标注
==、=== 和 Object.is()：你真的了解JS中的‘相等’吗？
CbukeJ的博客
05-29 35
通过这篇指南，希望你不再被JS的“相等”谜题困扰！下次遇到比较，记得“三思而后行”哦！凌晨2点，程序员小林正赶工一个电商促销功能。被转为数字0，而优惠码0对应的是1折活动。，系统却给满100元的商品打了。：自动转换类型，但隐藏陷阱！：类型和值必须严格一致，
Es6新语法
深度
12-18 758
目录 1.变量声明 1.1let 声明的变量是局部变量,只在范围内有效 1.2 const 修饰的变量不能自增 2. 解构表达式 2.1 数组 2.1.1 取出数组的前两位并赋值给两个变量 2.1.2 取出数组的后两位 2.1.3 拷贝一个数组 2.2 对象 2.2.1 把对象中的...
ES6的新语法
weixin_45808386的博客
04-18 855
ES6的一些新语法 ES6语法新增的变量的定义 let 定义变量 let 定义的变量，不会进行预解析 let 不能重复定义变量名称,一个变量名称只能定义一次 定义的变量,如果是定义在 { } 中,只能在 { } 中被执行被调用 let 在不同 { } 中,是不同作用域中定义let 变量 此时,变量的名称与 其他 { } 中的变量名称,或者{ }之外的变量名称,是可以重...
ES6新语法不要让语法阻挡前进的方向
01-05
ES6新语法：变量声明和作用域 在ES6中，引入了新的变量声明方式，包括let和const关键字，目的是为了解决传统的var关键字带来的问题。 1. 使用var关键字定义变量 在传统的JavaScript中，我们使用var关键字来...
es6新语法.快速上手 搬运与掘金三心哥md
11-29
基础和常用的东西 适合新人快速上手
ES6核心语法
06-21
本课程4小时带你快速运用ES6的核心用法，其中包括: let和const命令、 箭头函数、解构、扩展的对象和数组、Symbol/Set/Map新数据类型、强大的迭代器和生成器、Promise和async解决 异步操作、class类 的使用以及ES6的...
ES6新语法
致我那些年搬过的砖
09-01 394
console.log('******set******'); const s=new Set(); [2,3,5,4,5,2,2].forEach(x=>s.add(x)); for (let i of s){ console.log(i); } console.log('spread'); const set2=new Set([1,2,3,4,5,5,5]); console.log(
ES6 新增功能点整理
bihansheng2010的博客
05-13 992
1、webpcak 打包工具 入口 (entry) 输出 (output) loader 插件 (plugins) 2、gulp 自动化构建工具 const gulp = require('gulp'); // default 表示一个任务名，为默认执行任务 gulp.task('default', function() { // 放置默认的任务代码 }) 3、新的关键字 let 、const let 作用域在当前代码块 （var 是全局） const 定义只读变量，值不能变化...
前端 es6 新语法特性
最新发布
07-08
### 介绍ES6新增语法特性 ES6（ECMAScript 2015）引入了多种新特性，极大地增强了JavaScript的表达能力和开发效率。以下是一些重要的新增语法特性及其示例。 #### 块级作用域变量声明 ES6引入了`let`和`const`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值