文章目录
ES6新特性
概述
ES2015概述
- 解决原有语法上的一些问题或缺陷（const、let）
- 对原有语法进行增强
- 全新的对象、方法、功能
- 全新的数据类型和数据结构（symbol、map）
变量声明
let和块级作用域
通过let定义的内部变量，在块级作用域内部能够被访问，let是不会进行变量提升的
-
在循环的时候使用let，可以让内部循环不影响外部的循环
for (var i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) { console.log(i); } } -
通过循环添加事件的时候，循环会在点击前执行结束，我们可以采用闭包(IIFE中)解决，或者直接将变量定义为let类型
var eles = [{}, {}, {}]; for (let i = 0; i < eles.length; i++) { eles[i].onclick = function() { console.log(i); } } eles[1].onclick();//1 eles[2].onclick();//2- 循环实际上由两层作用域，for中条件的变量作用域和for执行函数中的作用域
const（主用）
- 在let的基础之上增加了一个只读的效果，不可以修改内部存储的值
- 在声明的过程中必须同时赋初始值
- 可以更改指针指向内部的值，但是不能重新修改指向
数组解构
-
可以更加便捷的获取数组中的内容
-
获取数据
const arr = [100, 200, 300]; const fo1 = arr[0]; const fo2 = arr[1]; const fo3 = arr[2]; 等同于 const [fo1, fo2, fo3] = arr; -
解析指定位置数据
解析指定位置 const [, , fo3] = arr; -
生成数组数据
const [fo1, ...res] = arr; console.log(res); //(2) [200, 300] -
未定义可单独置数
const arr = [100, 200, 300]; const [fo1, fo2, fo3 = 400, fo4 = 600] = arr; console.log(fo3); //300 console.log(fo4); //600
-
对象解构
-
可以对对象中的内容进行化简提取
-
基本使用
const obj = { name: "zs", age: 18 } const name = "Tom"; //如果之前有定义个属性名，需要重新给属性名赋值 const { name: newName } = obj; console.log(newName); //zs，值不会发生改变 -
console.log方法简化
const { log } = console; log("hahah"); //hahah
-
模板字符串
简介
-
使用`可以回车换行
const str = `string 换行了`; -
可以将变量插值嵌入到字符串中
const name = "Tom"; const str = `hey,${name},${1 + 1},${Math.random()}`; console.log(str); //hey,Tom,2,0.7531086677680354
标签函数
-
在定义模板字符串前定义一个标签，对模板字符串进行加工
-
可以实现中英文双文输出，或者查看是否有不安全字符
const name = "zs"; const gender = true; function myTagFunc(strings, name, gender) { //这个标签函数能够分割为数组 // console.log(strings); //(3) ['hi,', ' is a ', '', raw: Array(3)] //也可以获取到之前全局下定义过的值 // console.log(strings, name, gender); //(3) ['hi,', ' is a ', '', raw: Array(3)] zs true //对获得到数据进行处理后 const sex = gender ? "man" : "woman"; return strings[0] + name + strings[1] + sex + strings[2];//strings[2]是为了把全部内容拿到 } const str = myTagFunc `hi,${name} is a ${gender}`; console.log(str); //hi,zs is a man
字符串扩展
-
includes（）
-
startsWith（）
-
endWith（）
const msg = `Error:foo is not defined.` console.log(msg.startsWith('Error')); //true console.log(msg.endsWith('.')); //true console.log(msg.includes('foo')); //true
参数默认值
-
定义函数对其默认值进行的添加
function foo(bar, enable = true) { // enable = enable || true; // enable = undefined ? true : enable console.log(enable); } foo("bar");//存在多个参数需要写在前面
剩余操作符
-
我们之间通过arguments获取到的实参是一个类数组
-
通过…ars后得到的是一个真实数组
function fun(n, ...ars) { // console.log(arguments); //Arguments(4) [1, 2, 3, 4] console.log(ars); //(4) [1, 2, 3, 4] //(3) [2, 3, 4]带n后表示从第一个数往后存在数组中 } fun(1, 2, 3, 4);
展开操作符
-
简化apply和数组打点调用的方法
const arr = ['foo', 'bar', 'baz']; console.log.apply(console, arr);//foo bar baz console.log(...arr);//foo bar baz
箭头函数
简介
-
简化回调函数的书写过程
//（）里面的是传入参数，右边{}中为函数指向代码 const plus = (a, b) => { return a + b; } console.log(plus(1, 2)); //3 -
filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 我们需要筛选数组中的偶数
const arr = [1, 2, 3, 4, 5, 6, 7] const arr1 = arr.filter(function(item) { return item % 2; }) //(4) [1, 3, 5, 7] const arr2 = arr.filter(i => i % 2);//(4)[1, 3, 5, 7]
this
-
箭头函数没有this这个机制
const person = { name: "Tom", // sayhi: function() { // console.log(`hi,my name is ${ this.name }`); // } hi,my name is Tom sayhi: () => { // =>箭头函数内部没有this，所以就获取不到name的值 console.log(`hi,my name is ${ this.name }`); hi,my name is } } -
如果自己没有找到this，就会去找外面的this，这样在函数内部使用延时器的时候不会发生this错乱的问题
sayhi: function() { const _this = this; setTimeout(function() { console.log(`hi,my name is ${_this.name }`) }, 1000) //延时器中的this指向window，获取不到name的值 // 可以通过箭头函数来找外部的this指向 setTimeout(() => { console.log(`hi,my name is ${this.name }`) }, 1000);
对象字面量
-
对象字面量是对象中属性添加的一个灵活使用
const bar = "bar"; const age = "sex"; const obj = { name: "Tom", bar,//属性名和属性值一致可以直接使用 sayhi() { console.log(this); },//指向自己的函数 [age]: 18//前面的变量定义可以对属性名任意更改 } console.log(obj); //{name: 'Tom', bar: 'bar', sayhi: ƒ, sex: 18}
Object.assign方法
-
用于将多个源对象中的属性复制到一个目标对象中，如果属性名相同会进行值的覆盖
-
两个参数，第一个是复制到的目标对象，第二个参数是复制源对象(可以多个)，返回的就是目标对象自己
const source = { a: 123, b: 123 } const target = { a: 456, //会被源复制对象覆盖 c: 789 } const result = Object.assign(target, source); console.log(target); //{a: 123, c: 789, b: 123} console.log(target === result); //true -
复制对象的应用，在options对象参数接收时可以简化
function Block(options) { // this.width = options.width; Object.assign(this, options); } const block1 = new Block({ width: 100, height: 100, x: 50, y: 50 }) console.log(block1); //Block {width: 100, height: 100, x: 50, y: 50}
Object.is方法
-
判断两个值是否相等
console.log( Object.is(+0, -0) //false Object.is(NaN, NaN) //true )
class类
-
相比较传统函数方法更加方便
class Person { constructor(name, age) { this.name = name; this.age = age; } sayhi() {console.log(`hi,my name is ${this.name }`) } } const p1 = new Person("Tom", 20); p1.sayhi(); // hi, my name is Tom console.log(p1); //Person {name: 'Tom', age: 20}
静态static
-
静态static中this指向的并不是实例对象，而是原来的函数
static create(name, age) { console.log(this); return new Person(name, age); } } static const p1 = Person.create("Tom", 19); console.log(p1); //Person {name: 'Tom', age: 19}
类的继承extends
-
extends继承父级，super继承内容
class Student extends Person { constructor(name, age, number) { super(name, age) this.number = number } hello() { super.sayhi() console.log(`学号是${this.number}`) } } const s1 = new Student("Tom", 20, 201); //Student {name: 'Tom', age: 20, number: 201}
其他方法
Set
-
实例中的数据不能重复
const s = new Set(); s.add(1).add(2).add(3).add(4).add(2) //Set(4) {1, 2, 3, 4},自动删除重复项 -
数组遍历的方法
-
for of遍历
for (let i of s) { lconsole.log(i); } -
箭头函数方法
s.forEach(i => console.log(i))
-
-
set中常用方法
-
size、has、delete、clear
console.log(s.size); //4 console.log(s.has(4)); //true console.log(s.delete(4)); console.log(s); // true Set(3) console.log(s.delete(100)); console.log(s); //false s.clear(); console.log(s); //Set(0) -
应用实例数组去重
//数组去重 const arr = [1, 2, 5, 4, 2, 3, 4]; const b = new Set(arr); console.log(b); //Set(5) {1, 2, 5, 4, 3} console.log(Array.from(new Set(arr))); //(5) [1, 2, 5, 4, 3]转化为数组 const a = [...(new Set(arr))]; console.log(a); //(5)[1, 2, 5, 4, 3],通过...展开存放到数组中
-
Map
-
解决的是在对象中无法通过组合对象名称来获取键值value
const map = new Map(); const a = { a: 1 } map.set(a, 100); console.log(map); //Map(1) {{a: 1} => 100} console.log(map.get(a)); //100 -
同样Map数据结构具有has、delete、clear、forEach方法
map.forEach((value, key) => { console.log(key, value) }) //{a: 1} 100
Symbol数据类型
-
Symbol符号表示一个独一无二的值，在外部是无法被引用的，是一个私有成员
const obj = { [Symbol()]: 789, name: "zs" }//可以内部传值也可以在外面通过symbol obj[Symbol()] = 123 obj[Symbol()] = 456 console.log(obj) //{name: 'zs', Symbol(): 789, Symbol(): 123, Symbol(): 456} console.log(obj.name) //zs console.log(Symbol() === Symbol()) //false -
通过symbol函数创建的值是两个不同的值，如果使用for方法传入相同的字符串值，那么两个值相等
const a = Symbol.for(true)//会自动转化为字符串值 const b = Symbol.for("true") console.log(a === b) //true -
可以通过symbol来自定义object的tostring标签
const obj = {[Symbol.toStringTag]: "XObject"} //[object XObject]} console.log(obj.toString()) //[object Object] -
symbol属性名经常会被忽略，可以作为私有属性名
const obj = { [Symbol()]: "Symbol value", foo: "foo value" } for (var k in obj) { console.log(k) }//foo console.log(Object.keys(obj)); //['foo'] console.log(JSON.stringify(obj)); //{"foo":"foo value"} console.log(Object.getOwnPropertySymbols(obj)); //(1) [Symbol()],只能获取到symbol的
for…of遍历
-
对比forEach优势在于可以打断循环，能够对数组，Set，Map中的内容进行输出，但是一般的数据对象使用for…in方法进行输出
const arr = [100, 200, 300, 400, 500] for (var k of arr) { console.log(k); if (k >= 300) break; }
ES2015其他内容
- 可迭代接口、迭代器模式、生成器
- Proxy代理对象 、Reflect统一的对象操作API
- Promise异步解决方案、ES Modules语言层面模块化标准
ES2016概述
-
includes方法的引入，解决indexOf无法查找NaN的问题
-
指数运算符，语言本身的运算符
console.log(Math.pow(2, 3)) console.log(2 ** 3)
2442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
