ES6 笔记 part1

最新推荐文章于 2023-05-04 22:20:08 发布
最新推荐文章于 2023-05-04 22:20:08 发布
阅读量191 收藏
点赞数
分类专栏： 前端开发笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18369669/article/details/105302066
版权

let const 命令

  • es5 有两个作用域：全局作用域、函数作用域，es6新增了一个作用域：块级作用域

  • let 声明块级作用域变量

  • const 声明常量，声明时必须赋值

  • 使用es6语法，强制开启严格模式，相当于es5中加入"use strict"

  • // const 声明的常量无法改变
const obj = {a: 1};
obj.b = 2
// const 声明的对象，该变量为一个指针，指针无法改变，但是对象能修改

解构赋值

数组解构赋值

{
  let a, b, rest
  ;[a, b, ... rest] = [1,2,3,4,5,6]
  console.log(a, b, rest) // 1 2 [ 3, 4, 5, 6 ]
}

// 获取函数返回值
{
  function f () {
    return [1, 2, 3, 4, 5, 6, 7, 8, 9]
  }
  // let a, b
  // ;[a, b] = f()
  let [a, ,...b] = f()
  console.log(a, b) // 1 [ 3, 4, 5, 6, 7, 8, 9 ]
}

// 交换变量
{
  let a = 1, b = 2
  ;[a, b] = [b, a]
  console.log(a, b)
}

对象解构


{
  let a, b, rest
  ;({a, b} = {a: 1, b: 2}) // 需要加圆括号，否则js解释器会将花括号解析为代码块
  console.log(a, b)
}

{
  // 把对象中的p赋值给myP,对象中的q赋值给myQ（默认为3）
  // 冒号后面的是let声明的变量，而冒号前面的是对象中的key，等号后面为默认值
  let {p:myP, q:myQ=3} = {p: 100}
  console.log(myP, myQ)
}

// 解析 对象（服务端响应的json）
{
  let json = {
    title: 'this is a title',
    person: [
      {
      'name': 'Tom',
      'age': 18
      },
      {
        'name': 'Jack',
        'age': 21
      }
    ]
  }
  let {title:myTitle, person:[{name: myName1}, {name: myName2}]} = json
  console.log(myTitle, myName1, myName2) // this is a title Tom Jack
}

正则扩展

构造函数

{
  // let regex = new RegExp('xyz', 'i')
  // let regex = new RegExp(/xyz/i)

  // es6 允许第一个参数是//正则表达式, 第二个参数是flags, 会覆盖第一个参数的flags
  let regex = new RegExp(/xyz/i, 'gi')
  console.log(regex.test('Xyz'))
  console.log(regex.flags)
}

y 修饰符

/**
 * y 修饰符的作用与 g 修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。
 * 不同之处在于，g 修饰符只要剩余位置中存在匹配就可，而 y 修饰符确保匹配必须从剩余的第一个位置开始
 **/
let str1 = 'bbb_bb_b'
let reg1 = /b+/g
let reg2 = /b+/y
console.log('1', reg1.exec(str1), reg2.exec(str1))
console.log('2', reg1.exec(str1), reg2.exec(str1))
// 正则对象是否开启了y 修饰符
console.log(reg1.sticky, reg2.sticky)

u 修饰符

/**
 * ES5不支持四个字节的 UTF-16 编码，会将其识别为两个字符
 * u 用来正确处理大于 \uFFFF 的Unicode字符
 * **/
// false
console.log(/\u{61}/.test('a'))
// 加 u 修饰符才会被识别为Unicode码
// true
console.log(/\u{61}/u.test('a'))

// console.log(`\u{20bb7}`)
let str1 = '𠮷'
// false
console.log(/^.$/.test(str1))
// true
console.log(/^.$/u.test(str1))
// false
console.log(/𠮷{2}/.test('𠮷𠮷'))
// true
console.log(/𠮷{2}/u.test('𠮷𠮷'))

字符串扩展

取码值

{
  // let s = '𠮷'
  // console.log(s.length)
  // console.log(0, s.charAt(0))
  // console.log(1, s.charAt(1))
  // console.log(0, s.charCodeAt(0))
  // console.log(1, s.charCodeAt(1))

  let s1 = '𠮷a'
  // es5 charCodeAt
  console.log(s1.length)
  console.log(0, s1.charAt(0))
  console.log(1, s1.charAt(1))
  console.log(2, s1.charAt(2))
  console.log(0, s1.charCodeAt(0))
  console.log(1, s1.charCodeAt(1))
  console.log(2, s1.charCodeAt(2))
  console.log('========')

  // es6 codePointAt
  console.log(s1.codePointAt(0))
  console.log(s1.codePointAt(0).toString(16))
  console.log(s1.codePointAt(1))
  console.log(s1.codePointAt(2))

}

根据码值取字符

// es5 fromCharCode
  console.log(String.fromCharCode("0x20BB7"))
  // es6 fromCodePoint 能处理大于2个字节的unicode字符
  console.log(String.fromCodePoint("0x20BB7"))

遍历字符串

{
  let str = '\u{20BB7}abc'
  for (let i = 0; i < str.length; i ++) {
    console.log(str[i])
  }
  for (let code of str) {
    console.log(code)
  }
}

常用方法

{
  let str = 'string'
  console.log(str.includes('i'))
  console.log(str.startsWith('str'))
  console.log(str.endsWith('ing'))
  console.log(str.repeat(3))
    
  // 补白
  console.log('1'.padStart(3, '0'))
  console.log('1'.padEnd(3, '0'))
}

模版字符串

{
  let a = 'aaa'
  let b = 'bbb'
  let m = `a is ${a}, b is ${b}`
  console.log(m)
}

标签模版

作用： 防xss攻击；多语言转换（中文、英文。。。）

{
  let obj = {
    a: 'aaa',
    b: 'bbb'
  }
  console.log(abc`a is ${obj.a}! b is ${obj.b}`)
  function abc (s, v1, v2) {
    console.log(s, v1, v2)
    return s + v1 + v2
  }

}

String.raw

{
  console.log('a\nb\tc')
  console.log(String.raw`a\nb\tc`)
}

数值扩展

进制

{
  // 二进制
  console.log(0b1000)
  // 八进制
  console.log(0o17)
}

Number.isFinite 和 Number.isNaN

{
  // 判断是否是一个有限的数字
  console.log('15', Number.isFinite(15)) // trun
  console.log('15', Number.isFinite('15')) // false Number.inFinite方法更严格，只能为Number类型
  console.log('15', isFinite('15')) // true isFinite()函数，没有那么严格

  console.log('NaN', Number.isFinite(NaN)) // false
  // 判断是否是数字 true不是，false是
  console.log('NaN', Number.isNaN(NaN)) // true
  console.log('0', Number.isNaN(0)) // false
  console.log('0', Number.isNaN('0')) // false
  console.log('0', isNaN('0')) // false
}

判断是否是整数 是否是安全整数

{
  console.log('25', Number.isInteger(25))
  console.log('25.0', Number.isInteger(25.0)) // true
  console.log('25.1', Number.isInteger(25.1)) // false
  console.log('25 str', Number.isInteger("25")) // false
}

{
  console.log(Number.MAX_SAFE_INTEGER)
  console.log(Number.MIN_SAFE_INTEGER)
  // 判断是否是安全整数
  console.log(Number.isSafeInteger(9007199254740999))
  console.log(Number.MAX_VALUE)
  console.log(Number.MIN_VALUE)
}

取整和判断整数

{
  // 取整
  console.log(Math.trunc(4.1)) // 4
  console.log(Math.trunc(-4.1)) // -4
  // 判断 + - 0
  console.log(Math.sign(5)) // 1
  console.log(Math.sign(0)) // 0
  console.log(Math.sign(-5)) / -1
  console.log(Math.sign('5')) // 1
  console.log(Math.sign('-5')) // -1
  console.log(Math.sign('foo')) // NaN
  console.log(Math.sign('0')) // 0
}

还有立方根，三角函数等api

数组扩展

Array.from

{
  let obj = {
    0: 1,
    1: 2,
    length: 5
  }
  let arr = Array.from(obj)
  console.log(arr) // [ 1, 2, undefined, undefined, undefined ]

  let arr1 = Array.from([1,2,3], function (item) {
    return item * 2
  })
  console.log(arr1) // [ 2, 4, 6 ]

  let arr2 = Array.from(obj, function (item) {
    return item * 2
  })
  console.log(arr2) //[ 2, 4, NaN, NaN, NaN ]

}

Array.fill

{
  console.log([1, 2, 3, undefined].fill(7)) // [ 7, 7, 7, 7 ]
  // 第一个参数替换内容，第2、3个参数，替换的位置
  console.log(['a', 'b', 'c'].fill(7,1,3)) // [ 'a', 7, 7 ]

}

// copyWithin方法，内部替换
{
  // 从0开始替换，替换的位置为4到6-1
  console.log([1,2,3,4,5,6].copyWithin(0,4,6)) // [ 5, 6, 3, 4, 5, 6 ]
}

.keys() 、.values()、.entires() 遍历

{
  // 
  for (let index of ['1', 'c', 'ks'].keys()) {
    console.log(index)
  }
  for (let index of ['1', 'c', 'ks'].values()) {
    console.log(index)
  }
  for (let [index, value] of ['1', 'c', 'ks'].entries() ){
    console.log(index, value)
  }
}

.find()、.findIndex() 查找

{
  console.log([1,2,3,4,5,6].find(function (item) {
    return item > 3
  }))

  console.log([1,2,3,4,5,6].findIndex(function (item) {
    return item > 3
  }))
}

函数扩展

参数默认值

{
  function test (x, y = 'world') {
    console.log(x, y)
  }

  test('hello')
}

参数作用域问题

{
  let x ='test'
  function test1 (x, y=x) {
    console.log('作用域', x, y)
  }
  test1('kill') //作用域 kill kill

  function test2 (c, y=x) {
    console.log('作用域', c, y)
  }
  test2('kill') // 作用域 kill test
}

rest 参数

rest参数之后不能再有其它参数了

{
  function test3 (first, ...arg) {
    for (let v of arg) {
      console.log(v)
    }
  }
  test3(1,2,'a')
}

扩展运算符

扩展运算符 和 rest 是“逆运算”, f(...[1, 2, 3])把数组拆成多个参数传入f

{
  console.log(...[1, 2, 3])
  console.log(0, ...[1, 2, 3])
  function test (...arg) {
    console.log(arg)
  }
  test(0, ...[1, 2, 3])
}

箭头函数

{
  let arrow0 = v => v * 2
  let arrow1 = (v) => v * 2
  let arrow2 = (v) => {return v * 3}
  console.log(arrow0(3)) // 6
  console.log(arrow1(4)) // 8
  console.log(arrow2(5)) // 15
}

尾调用优化

尾调用优化 ” （ Tail call optimization ），即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是 “ 尾调用优化 ” 的意义

尾调用

function f() {
	let m = 1;
	let n = 2;
	return g(m + n);
}
f();
//  等同于
function f() {
	return g(3);
}
f();
//  等同于
g(3);

对象扩展

简洁表示法

{
  let o = 1
  let k = 2
  let es5 = {
    o: o,
    k: k,
    say: function () {console.log('hhh')}
  }
  let es6 = {
    o,
    k,
    say () {console.log('hhh')}
  }
  console.log(es5)
  console.log(es6)
  es5.say()
  es6.say()
}

属性表达式

{
  let a = 'b'
  
  let es5 = {
    a: 'c'
  }
  
  // [a] 中的a就是'b'
  let es6 = {
    [a]: 'c'
  }

  console.log(es5, es6)
}

新增API Object.is 等同于 ===

{
  console.log('String', Object.is('abc', 'abc'), 'abc' === 'abc')
  console.log('Array', Object.is([], []), [] === [])
  console.log('Object', Object.is({}, {}), {} === {})

  let arr = []
  let arr1 = arr
  console.log('Array', Object.is(arr, arr1), arr === arr1)
  let obj = {}
  let obj1 = obj
  console.log('Object', Object.is(obj, obj1), obj === obj1)
}

新增API Object.assign 拷贝

{

 console.log(Object.assign({a: 'a'}, {b: 'b'}))

 let objA = {a: 'a'}

 let objB = {b: 'b'}

 console.log(Object.assign(objA, objB))

 console.log('objA', objA)

 console.log('objB', objB)

}

对象遍历

注意 Array.prototype.entries 、 Object.entries

{
  let obj = {
    a: 1,
    b: 2,
    c: 3
  }
  for (let [key, value] of Object.entries(obj)) {
    console.log(key, value)
  }
}

扩展运算符

{
  let {a, b, ...c} = {
    'a': 'test a',
    'b': 'test b',
    'c': 'test c',
    'd': 'test d',
  }

  console.log(a, b, c) //test a test b { c: 'test c', d: 'test d' }
}
晔晔炅萤
关注
专栏目录
ES6
sj1027523的博客
07-28 259
ES6新特性 现在使用主流前端框架中，如ReactJS、Vue.js、angularjs等，都会使用到ES6的新特性，作为一名高级工程师而 言，ES6也就成为了必修课。 了解ES6 ES6，是ECMAScript 6的简称，它是 JavaScript 语言的下一代标准，己于 2015 年 6 月正式发 布。 它的目标是使 JavaScript语言可以用于编写复杂的的大型应用程序，成为企业级开发语言。 什么是ECMAScript？ 前端的发展历程： web1.0时代： 最初的网页以HTML为主，是纯静态的网
尚硅谷 ES6-12 笔记
LiuKairui的博客
06-18 1583
文章目录ES介绍ES6新特性eval函数(ES3函数补充)let关键字const关键字变量解构赋值模板字符串简化对象写法箭头函数函数默认参数REST参数...Spread扩展运算符Symbol 数据类型迭代器生成器PromiseSetMapclass 类数值扩展对象方法的扩展模块化ES7新特性Array的includes**运算符ES8新特性async & await对象方法的扩展ES9新特性REST参数与Spread扩展正则扩展ES10新特性Object.fromEntries方法trimStar
ES6箭头函数中的this指向
bukuaileya的博客
12-30 408
(1)箭头函数中没有this: 这意味着 call() apply() bind()无法修改箭头函数中的this (2)箭头函数中的this指向 ：访问上一个作用域的this
ES6入门笔记（一）
yuzhongkai的博客
02-14 437
安装babel 由于浏览器对ES6的支持还不是很好，编写ES6代码前我们要安装一个babel工具将ES6代码编译成ES5代码，用如下命令安装babel： npm install -g babel-core //安装babel核心库 npm install -g babel-cli //安装babel命令行工具 安装成功后，我们将a.js的ES6代码编译为b.j
ES6解构简写console.log
simple5960的博客
10-11 622
var {log}=console log(111) 效果如下
javaScript中console.log()的用法
热门推荐
夏朵朵的博客
04-16 5万+
console.log()类似于alert啊，不过不会打断操作。主要是方便调式javascript用的。你可以看到你在页面中输出的内容，不过需要浏览器支持控制台输出。在浏览器界面使用快捷键 F12 就能打开控制台，这个F12 最确切的叫法是开发人员工具。其中，Console 即控制台。点击右键的 Clear console 菜单 或者 输入 clear() /console.clear()然后按回...
微信小程序学习笔记（起步）——part 03
笙
05-04 79
简单了解小程序代码的构成
fullstackopen-2020-part10
03-01
【压缩包子文件的文件名称列表】"fullstackopen-2020-part10-master" 可能是课程资源的主目录，其中包含所有相关材料，如HTML、CSS、JavaScript代码、笔记、练习、测试、项目文件等。"master"通常指的是主分支或主线...
Node.js-Learning:Node学习笔记。A learning notes about Node.js
05-26
Node.js 学习笔记 不要忘记star一下 加油！ 目录 Node.js离不开JS，所以要好好巩固JS，这一块多是巩固ES6的相关特性 Class Symbol 作用域篇 扩展运算符 Part2 Node.js模块 学习Node.js的原生模块，从根本理解Node.js...
JavaScript 权威指南--第七版--阅读笔记--number 部分
huaqi_的博客
03-15 1512
JavaScript 权威指南阅读笔记Number部分
ES6——基本语法与详情解析
zxy9602的博客
10-18 7122
1、let命令 作用：用于声明变量，类似于var，但是，它只在let所在的代码块内部有效。 { var a=100; let b=200; } console.log(a); //100 console.log(b); //Error，b is not defined 性质： （1）let不存在变量提升（let VS var） //ES5
ECMAScript2015
weixin_30659829的博客
12-19 147
一.什么是es6 es6 是js语言的下一代标准，15年6月发布，也就是ECMAScript（2015） ECMAScript就是JavaScript的国际标准，js是es的实现 es的历史： 1996年11月，网景公司把js语言提交给国际标准组织ECMA，希望能成为国际标准推广，1997年，ECMA发布ECMAScript 1.0 兼容的不是很好，但是写起来方便也多...
es6常用方法总结
wild__programmer的博客
09-26 5172
demo结构dist为编译后的代码 src放es5代码 环境搭建<!-- 安装babel --> npm install --save-dev babel-cli <!-- //转换es5 --> cnpm i --save-dev babel-preset-es2015 babel-cli<!-- 创建一个.babelrc文件 --> { "presets": [ "e
ES6的新增特性1
Hero4399的博客
09-05 743
ES新特性 1.块级作用域绑定 let声明与const声明 注意: 1.使用let声明的变量具有块级作用域,只能在声明的块中访问,在外部无法访问 2.let声明的变量没有声明提前这一特性 3.在同一块中,let声明的变量也不能重复声明 4.const声明常量,必须初始化值,一样具有块级作用域的特性 doctype html> html lang="en"> head>
console.log不执行_ES6 Promise 执行解析
weixin_30338049的博客
12-22 899
作为一门单线程的语言，刚学习 JavaScript 语言的时候，我曾怀疑过 JavaScript 在处理 ajax 数据请求，文件解析等过程效率会很低，而且在执行这些任务较大的代码中，会严重阻塞后面代码的执行。但让人兴奋的是，这门语言具有异步加载的特性事件循环1. 含义javascript 提供一种机制来处理程序中多个块的执行，且每个执行块都调用了 JavaScript 引擎，这种机制被称为事件循...
es6 console 控制台
新技术革命
05-28 751
每个JavaScript开发人员都曾用到过console.log("message")这个方法。 它提供了一个简单的调试控制台，类似于web浏览器提供的JavaScript控制台机制。 在本文中，我们将讨论一些常用的JS控制台方法。 以下所有方法在全局实例控制台中可用 ，因此不需要控制台模块。 默认值：console.log()|info()|debug()|warn()|error() 这些控制台方法将根据提供的事件类型直接以适当的颜色打印原始字符串。 console.log...
console.log打印对象时属性缺失的解决方法
码飞_CC的博客
05-22 5688
文章目录1. 序2. console.log()输出对象属性缺失3. 获取正确的结果3.1 方法1：对象展开3.2 方法2： JSON.stringfy()看字符串 1. 序 在编写代码时，我们常常用console.log()的方式将信息在控制台中打印出来以帮助我们进行前端调试。一般情况下，我们打印普通值都没有问题，但在打印对象类型时，我们就需要注意点了，要不然可能会出现不符合期望的结果。 2. ...
es6---回调地狱
m0_62690153的博客
10-29 187
什么是回调地狱,回调地狱就是多层回调函数相互嵌套,就形成了回调地狱,今天所讲的方法就解决了回调地狱的弊端 回调地狱 概念: 多层回调函数相互嵌套,就形成了回调函数 解决回调地狱:promise使用promise来解决回调地狱的问题 promise基本概念 1.promise是一个构造函数,可以通过new promise得到promise实例对象 Promise.prototype 上包含一个 .then() 方法 实例化对象可以访问then方法 then() 方法用来预先指定成...
ES6 模块化
m0_62690153的博客
10-17 110
ES6 模块化 nodeJs 如何将文件里面的成员向外暴露 module.exports exports nodeJs 导入模块 require() 用户自定义模块需要加路径 什么是es6模块化规范 ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范 es6 模块化规范的定义 每一个js文件都是一个独立的模块 向外共享成员使用 export 导入成员使用 im
pink es6 笔记
最新发布
07-27
- *1* *3* [es6笔记](https://blog.csdn.net/weixin_42235173/article/details/115300118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值