ES6新增的特性(上)

最新推荐文章于 2023-08-08 18:05:37 发布
最新推荐文章于 2023-08-08 18:05:37 发布
阅读量116 收藏
点赞数
文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuzhaofa/article/details/115379235
版权

作用域

ES6之前只有两个变量作用域（全局作用域和局部作用域）；ES6中新增了块级作用域 
例如：

if(true) {
var foo = 'sfy'
}
console.log(foo)  
// 这里我们很明显都知道他的结果就是 sfy
但是如果是下面的这种方式
if(true) {
let foo = 'sfy'
}
console.log(foo)
// 这次的结果就和上面的不一样了；他会出现：ReferenceError: foo is not defined 。
// 从这个例子我们就能看出来块级作用域的作用。
//那么我们可以用它来解决什么问题呢？

如果是初学者，肯定会对下面的代码有疑问

<div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
 </div>

const btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    console.log(`点击了第${i + 1}个按钮`)
  }
} 
// 对于初学者来说;他的输出肯定都是点了第几个按钮；就会在控制台输出第几个按钮；但是结果并不是这样；而是不管你点击哪个按钮；控制台输出的都是第五个按钮；
// 可能很多小伙伴到这里就糊涂了，不知道为什么会这样。这里其实是js运行机制问题，如果把这个运行机制弄明白了，也就自然而然的知道原因了；这里小编就不详细解释了；我们直接说这个问题的解决方案吧。

// 对于上面的代码我们可以这样改写
const btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = (function (i) {
    return function() {
    	console.log(`点击了第${i + 1}个按钮`)
    }
  })(i)
 }
// 这里我们用到了闭包来解决这个问题
// 我们也可以用ES6中提供的块级作用域来解决这个问题
const btns = document.querySelectorAll('button');
for (let i = 0; i < btns.length; i++) {
 btns[i].onclick = function () {
    console.log(`点击了第${i + 1}个按钮`)
  }
}

var / let / const相关知识点

我们都知道var有变量提升的作用；但是let有提升作用吗？
当我们执行下面的代码就知道了

console.log(bar)
let bar = 'hello'
// 结果会报：Cannot access 'bar' before initialization；
// 我们可以看出来他不是说bar没有定义；说明是有提升；但是不能在定义前面调用；原因是因为let定义的变量有提升，但是陷入暂时性死区；所以不能再定义前调用。

ES6中新增了const关键词 去声明一个只读的恒量和常量 就是在let的基础上多了只读（声明过后不允许再被修改。const声明的变量必须有初始值；并且不能够修改它所指向的内存地址。

数组解构

// 在ES6之前呢，我们想要获取数组中的元素可以通过对应的索引值来获取；但是呢；ES6中提供了新的方法。
const arr = [100, 200, 300]
const [foo, bar, baz] = arr
console.log(foo, bar, baz)  // 100  200  300
// 这样来获取数组中的元素是不是更方便一点呢
// 如果我们只想获得最后一个元素怎么办呢？
const [, , baz1] = arr
console.log(baz1)  // 结果显而易见就是300

// 但是当我们想获得从当前位置到最后的所有成员的时候就要用到剩余参数了。剩余参数在下面有介绍。
const [foo1, ...rest] = arr
console.log(rest)  // 结果死一个数组 [200, 300]

// 当然了，我们也可以在数组解构的时候加上一个新的元素；并且给他附上默认值；但是它不改变原数组
const  [one, tow, three, four = 400] = arr
console.log(four)
// 举个数组解构的例子:想要获取西面地址中的中间地址
const path = 'foo/bar/baz'
const [, roodir] = path.split('/')
console.log(roodir);

对象解构

const obj = { name: 'zs', age: 19, atm: 'rose' }
const { name } = obj
console.log(name);  // zs
// 如果匹配没有的属性，结果就是undefined
const { hobby } = obj
console.log(hobby)  // undefined
// 也可以设置默认值在对象解构的时候
const { class = '三年级8班'} = obj
console.log(class)
// 在对象解构中会存在一个问题；那就是会出现命名冲突问题。
// 例如：
const atm = 'tom'
const { atm } = obj
console.log(atm) // 这个时候就会报错
// 这个时候我们可以使用重命名方法来避免这个错误
const { atm: Aname } = obj
console.log(Aname) // rose

// 应用实例
const { log } = console
log('hello wrold') // hello world 我们可以这么赖在控制台打印

定义字符串方式

ES6中新增了``来定义字符串的方式;它可以支持多行输入，

const str = `hello world! 
I am \`tom\``
console.log(str);

// 我们可以在其中嵌入值
const name = 'tom'
const msg = `hello, ${name}；你今年是不是${10 + 15}岁了，----${Math.random()}` 
console.log(msg);

// 带标签的模板字符串
const str = console.log`hello world`    // [ 'hello world' ]


const name1 = 'tomes'
const gender = true
// 定义一个标签函数
function myTagFunc (strings, name1, gender) {
// 这里的strings 就是 [ 'hey, ', ' is a ', '' ]
  const sex = gender ? 'man' : 'woman'
  return strings[0] + name1 + strings[1] + sex + ' ' + gender
}
// 使用该标签函数
const result = myTagFunc`hey, ${name1} is a ${gender}`
console.log(result);  // hey, tomes is a man true

// ES6中还提供了几个方法
// 查看字符串中是否包含某个字符
.includes()
// 查看是否以某个字符开头
.startsWith(目标字符)
.endsWith() 查看是否以什么字符结尾。

参数默认值、剩余参数

设置函数默认值方法

function foo (enable = true) {
  // enable = enable || true
  enable = enable === undefined ? true : enable
  console.log('foo 设置参数默认值');
  console.log(enable);
}

foo()

剩余参数…args 。
…args剩余参数只能使用一次；并且必须在参数的最后位置

function foo (...args) {
  console.log(args);

}
foo(1, 2, 3, 4, 5, 6)

箭头函数

// 这个我相信大家都熟悉的不能再熟悉了
const inc = (n, m) => n + m + 1
console.log(inc(100, 1));
// 箭头函数不影响this指向

对象自变量增强、对象扩展方法

const bar = '345'
const za = '789'
const obj = {
  foo: 123,
  bar: bar,
  za,    // 如果变量名和表示值得变量名是一样的；可以直接写变量就行了
  methods () {
    console.log('你好');
    console.log(this);//这个会指向当前这个对象
  },
  [Math.random()]: 123 //动态增加属性名 以前都是在外面obj[Math.random()] = 123这么增加属性名的
}
console.log(obj);

// ----------------------对象扩展方法------------------------
// assign()  将多个源对象中的属性复制到一个目标对象中  Object.assign方法
const source1 = {
  a: 123,
  b: 123
}
const source2 = {
  ac: 123234,
  bd: 23456745
}
const target = {
  a: 456,
  c: 456
}
const result = Object.assign(target, source1, source2)  // 用后面的属性去覆盖第一个的属性；返回的对象就是目标对象
console.log(target); // { a: 123, c: 456, b: 123, ac: 123234, bd: 23456745 }
console.log(result === target);  // true

console.log(0 == false);  // == 自动转换数据类型  true
console.log(0 === false);  // false  ===不会转换数据类型
console.log(+0 === -0);   // true
console.log(NaN === NaN);   // false

// 通过Object.is()就可以区分 + 0和 - 0
console.log(
  Object.is(+0, -0),  // false
  Object.is(NaN, NaN)  // true
);

// 监控对象中的属性读写 过程
// Object.defineProperty()
// es2015加入了Proxy
const person = {
  name: 'sfy',
  age: 20
}
const personProxy = new Proxy(person, {
  get (target, property) {
    console.log(target, property, '读');
    return property in target ? target[property] : 'default'
  },
  set (target, property, value) {
    console.log(target, property, value, '写');
    if (property === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError(`${value} is not an int`)
      }
    }

    target[property] = value
  }
})

console.log(personProxy.name);

personProxy.gender = true
personProxy.age = 25
console.log(person);   // { name: 'sfy', age: 25, gender: true }
// Object.defineProperty 和 Proxy的区别
// Object.defineProperty 只监视属性的读写
// Proxy 可以监视更多；对对象的操作；delete；调用等

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

delete personProxy.age
console.log(person);

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 是以非入侵的方式监管了对象的读写。

Reflect

// Reflect内部封装了一系列对对象的底层操作

const obj = {
  foo: '123',
  bar: '456'
}
const proxy = new Proxy(obj, {
  // 如果我们没有定义get、或者set方法；就是默认创建了get；然后把get/set的参数都交给Reflect来处理
  get (target, property) {
    console.log('这里是自己写的监视逻辑');

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

console.log(proxy.foo);

// Reflect 意义：同意提供了一套用于操作对象的API
const obj = {
  name: '烛照',
  age: 25,
  class: '3-2'
}
console.log('name' in obj);
console.log(delete obj['name']);
console.log(Object.keys(obj));  // 获取对象的所有属性名

// Reflect提供了上述所需要实现的方法
// console.log(Reflect.has(obj, 'name')); // true
// console.log(Reflect.deleteProperty(obj, 'name'));
// console.log(obj);
// console.log(Reflect.ownKeys(obj)); // 获取对象的所有属性名

Class类

ES6中提供了更简便的定义类的方法
es6之前定义类的方法:

function Preson (name) {
  this.name = name
}
Preson.prototype.say = function () {
  console.log(`hi, my name is ${this.name}`);

}

ES6中新增的定义类的方法:

class Person {
  // 构造函数
  constructor (name) {
    this.name = name
  }
  say () {
    console.log(`hi, my name is ${this.name}`);
  }
  // 定义一个静态方法
  static create (name) {
    return new Person(name)
  }
}

const p = new Preson('tom')
p.say() // 调用普通方法

// 调用静态方法
const tom = Person.create('zhuzhao')
tom.say()
// 类的继承
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('jack', '200')
s.hello()

Set数据结构

Set内部的值不允许重复；也就是说set内部的值都是惟一的

const s = new Set()
s.add(1).add(2).add(3).add(4).add(2)
console.log(s);  //Set(4) { 1, 2, 3, 4 }
console.log(s.size); // 获取集合的长度
console.log(s.has(100));  // false  查看集合中是否包含某个值
console.log(s.delete(3));  // ture  代表删除成功
console.log(s);   // Set(3) { 1, 2, 4 }
// 清除当前集合中的全部内容
s.clear()
console.log(s); // Set(0) {}
应用地方：可以给数组去重
const arr = [1, 2, 3, 4, 5, 6, 90, 7, 5, 43, 3, 2, 1]
const result = new Set(arr)
console.log(result);  // Set(8) { 1, 2, 3, 4, 5, 6, 90,7, 43 }
console.log(Array.from(result));  // 把set集合重新转换为一个数组
console.log([...result]);

Map数据结构

map数据结构和对象的最大的区别就是它可以以任意类型的数据作为键；而对象实际上只能用字符串

const obj = {}
obj[true] = 'value'
obj[123] = 'value'
obj[{ a: 1 }] = 'value'
console.log(Object.keys(obj));  //[ '123', 'true', '[object Object]' ]  结论：当我们给的键不是字符串的时候；会自动转成字符串类型
console.log(obj[{}]);   // value
console.log(obj['123']);   // value

const m = new Map()

const tom = { name: 'tom' }
m.set(tom, 90)
console.log(m);   // Map(1) { { name: 'tom' } => 90 }
console.log(m.get(tom));  // 90
他也有下面三个方法
// m.has()
// m.delete()
// m.clear()

Symbol

const cache = {}

cache['foo'] = Math.random()

cache['foo'] = '234'
console.log(cache);


const s = Symbol()   //特点：通过Symbol创建的值是唯一的
console.log(s, typeof s);

console.log(Symbol('foo'));
console.log(Symbol('fo2'));

const obj = {
  [Symbol()]: 123
}
console.log(obj);

//私有成员

// a.js文件 ============================
const name = Symbol()
const person = {
  [name]: 'sfy',
  say () {
    console.log(this[name]);

  }
}
//b.js文件调用say
person.say()

// Symbol的唯一性
console.log(Symbol() === Symbol());  // false
// 当我们想使用上一个Symbol值得时候可以赋值给一个全局变量或者用Symbol里面提供的静态方法for实现
const s1 = Symbol.for('foo')
const s2 = Symbol.for('foo')
console.log(s1 === s2);   // true  维系的时候字符串和Symbol对应的关系；如果不是字符串就会把它转换成字符串
console.log(Symbol.for(true) === Symbol.for('true')); // true


const obj = {}
console.log(obj.toString());  // [object Object]
const obj1 = {
  // toStringTag是Symbol内置常量
  [Symbol.toStringTag]: 'Xobject'  // 自定义字符串标签(就是toSting()之后打印的结果)
}
console.log(obj1.toString()); // [object Xobject]
// 但是Symbol类型的属性名没有办法通过for循环来拿到；或者Object.keys()来获取属性名也获取不到


const obj = {
  [Symbol()]: 'symbol value',
  foo: 'normal value'
}
for (let key in obj) {
  console.log(key, '999');  // 获取不到Symbol的值

}
console.log(Object.keys(obj)); // Object.keys只能获取到对象中字符串的属性名
console.log(Object.getOwnPropertySymbols(obj)); // 这个只能获取到Symbol类型的属性名

for…of…循环

const arr = [1, 2, 3, 4, 5]
for (const item of arr) {
  console.log(item); //  for...of拿到的直接就是元素而不是下标
}

for (const item of arr) {
  console.log(item); //  for...of比forEach的优点还有一个就是可以使用break终止循环
  if (item > 2) {
    break
  }
}
// 可以遍历Set对象
const s = new Set(['foo', 'zar'])
for (const item of s) {
  console.log(item);

}

// 遍历map对象
const m = new Map()
m.set('foo', '123')
m.set('bar', '122')
for (const item of m) {
  console.log(item); // item的值就是 [ 'foo', '123' ]

}
for (const [key, value] of m) {
  console.log(key, value); // item的值就是 foo 123

}


// 遍历普通对象
const obj = { foo: 123, bar: 456 }
for (const item of obj) {
  console.log(item); // 会报错TypeError: obj is not iterable
}
是不是很多小伙伴都蒙了；为什么遍历普通对象会报错，还提示obj不是一个可迭代的对象；如果你想知道原因；请看小编的下一篇博客ES6新增的特性(下)。
玉慕冰
关注
Es6中函数的新特性
katherine5980的博客
03-11 337
1. 函数的默认参数 1.1 es5处理默认参数 function add(a, b) { a = typeof a === "undefined" ? 0 : a; b = typeof b === "undefined" ? 0 : b; return a + b; } 1.2 es6形参默认值 function add(a = 0, b = 0) { return a + b; } 1.3 es6形参变量默认值 可以使用外层作用域内定义的变量当作默认值，后面的参数也可以
ES6新增的特性
I'm your wrong princess
02-10 205
let 和 const 命令 var 之前，我们写js定义变量的时候，只有一个关键字： var var 有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。 例如这样的一段代码： for (var i = 0; i < 5; i++){ console.log(i); } console.log("循环外：" + i)//i=4 未报错 i成为了全局变量 let let 所声明的变...
ES6（函数新增特性）
姜皓的博客
05-02 696
ES6（函数新增特性）1.函数参数默认值没有 y 时，默认就是world有 y 时，输出值即可（错误）（C有默认值，正确）默认值后面不能再有没有默认值的变量 2.作用域y 取其前面的 x ;而不是 x = test;  x 不在 y 的前面 3.test 参数将输入参数（离散值）转化成数组 4.扩展运算符 将数组转化成离散值 5.箭头函数arrow为函数名，第一个 = 后为参数， =&gt;后为返...
ES6中新增函数新特性
qq_52908359的博客
06-15 266
使用箭头函数的作用： 💬 简化回调函数的写法： 💬 箭头函数中的this是函数声明时所在的对象；
es6的新增特性有哪些？
q4717529的博客
06-02 277
es6的新增特性有哪些？ 去掉function,没有参数或者多个参数时需要加括号()，多个参数时使用逗号分隔，一个参数时括号可以省略。 隐士返回，如 下面的代码可以去掉return,代码移到一行，减少代码量。 解决了this的指向问题，原生的写法this指向的是调用者，箭头函数this绑定的是定义时的那个对象。 .symbol ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值 使用Set实现数组去重 Map 数组的复制 比如
JavaScript ES6新增特性
最新发布
09-20
JavaScript ES6新增特性
es6新增特性总结
W9728的博客
06-13 823
es6新增特性1.let和const关键字2.解构赋值3.箭头函数4.模板字符串：使用反引号``代替双引号创建字符串5.标签模板6.扩展运算符7.新增了一些字符串和数组方法8.Symbol9.迭代器(Iterator)10.生成器11.Promise承诺1.let和const关键字var/let/const的共同点：在函数内部都可以访问到在外部通过var/let/const声明的变量或常量。let: 变量不能重复声明。let a = 1;
js es6 新特性
程序员良仔
08-30 1144
es6都有哪些新特性
ES6新增语法二（数组新特性）
weixin_43765641的博客
10-09 777
注意：自动将每一个元素放入callback中进行处理，如果返回值为true，将元素放入新数组中，否则不操作。作用：对数组进行遍历，如果有一个不满足条件，则返回false，并终止遍历，否则返回true。作用：对数组进行遍历，如果有一个满足条件，则返回true，并终止遍历，否则返回false。作用：对数组进行遍历，将计算后的值返回新数组。作用：帮助数组遍历每一个索引值与value值。作用：检索数组是否包含某个值，返回布尔值。作用：过滤数组单元，将满足条件的元素过滤。作用：验证是否是一个数组，返回布尔值。
JavaScript ES6新特性
weixin_43930421的博客
05-21 2480
JavaScript ES6带来了新的语法和特性，使得代码更加的现代和可读。它包括许多重要功能，如箭头函数、模板字符串、解构赋值等等。 const 和 let const 是 ES6 中用于声明变量的新关键字。const 比 var 强大。一旦使用，变量就不能重新分配。换句话说，它声明的是一个只读的常量。 这对于定位选择器非常有用。例如，当我们有一个触发事件的按钮时，或者当您想在JavaScript中选择HTML元素时，请使用const而不是var。 // ES5 var btn = document.
ES6新特性的使用
CC酱写前端的博客
10-18 1817
ES5之后的JS语法统称ES6！！！ 一、关于取值的吐槽 取值在程序中非常常见，比如从对象obj中取值。 const obj = { a:1, b:2, c:3, d:4, e:5, } 吐槽： const a = obj.a; const b = obj.b; const c = obj.c; const d = obj.d; const e = obj.e; 或者 const f = obj.a + obj.d; const g = obj.c + obj.
ES6的一些笔记
Chaos__的博客
08-27 120
一、声明变量 使用let、const，会创建块级作用域 二、字符串和正则 字符串多了个codePointAt方法，找到字符串的码点 正则多了个标志u，使用码点进行匹配 三、函数 参数默认值、剩余参数、展开运算符、箭头函数 四、类 使用class关键字创建构造函数（类） class User { constructor(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } sayHel
Vue的学习笔记 ---- 015 使用ajax
热门推荐
诗水人间
09-07 3万+
方式一：使用vue-resource npm install --sava vue-resource main.js 导入和使用 import VueResource from 'vue-resource' Vue.use(VueResource) //给Vue对象添加$http属性 获得get()和post()方法 代码： <template> &...
前端：你不知道的async await
接着奏乐接着舞的博客
02-24 5127
你是否知道async是什么？作用是什么？await是什么执行逻辑是怎样的？await下面的代码是什么样的执行顺序？
Ant Design Pro V4.5 从服务器请求数据的坑（typescript版）
シ❤゛甜虾的个人博客
08-05 429
因为后台使用了APB所有前端的数据获取都围绕着APB的api进行开发，在做用户管理时，新建了页面加了model和server，数据也请求回来了，很久没有写前端了，有些生疏，出现了数据无法解析的情况，后台返回的数据如下 { "result":{ "totalCount":1, "items":[ { "userName":"admin", "name":"admin", "surname":"admin", "emailAddress":"admin@aspnetboilerplate.c...
Javascript内容理解
Aaron Con的博客
04-26 1108
常用javascript知识的理解和总结
箭头函数的特点
NaYouZenMeYang的博客
08-08 338
6、箭头函数通过apply()和call()调用不会改变this的指向。2、函数体中return后只有一条语句 可以省略return 和{}7、箭头函数的this指向父作用域(定义它的地方)3、箭头函数没有arguments内置对象。1，有一个形参可以省略小括号。4、箭头函数不能作为构造函数。5、箭头函数没有原型属性。
箭头函数的特点/作用
lan128lan的博客
04-09 7246
一、箭头函数的特点 箭头函数是匿名函数 1. 箭头函数使表达更加简洁，隐式返回值 const isEven = n => n % 2 === 0; const square = n => n * n; 箭头函数的一个用处是简化回调函数，如下： // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数...
循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理
三分恶的博客
11-05 648
转载   原文作者：伍华聪    原文地址：https://www.cnblogs.com/wuhuacong/p/13158307.html 文章目录1、ABP开发框架的回顾2、Vue+Element整合ABP框架的前端登录处理 VUE+Element 前端是一个纯粹的前端处理，前面介绍了很多都是Vue+Element开发的基础，从本章随笔开始，就需要进入深水区了，需要结合ABP框架使用（如果不知道，请自行补习一下我的随笔：ABP框架使用），ABP框架作为后端，是一个非常不错的技术方向，但是前端再.
es6新增的特性有哪些
06-06
以下是ES6的一些新增特性： 1. let和const关键字用于声明变量和常量 2. 箭头函数语法 3. 模板字面量（Template literals） 4. 解构赋值（Destructuring assignment） 5. 默认参数值和可变参数（Rest parameters） 6...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值