ES6知识点小结
1，let与块级作用域
for(let i =0;
i<3;
i++){
let i = "foo";
console.log(i)
}打印输出是
文章图片
它等同于
let i = 0;
if (i < 3) {
let i = "foo";
console.log(i);
}
i++;
if (i < 3) {
let i = "foo";
console.log(i);
}
i++;
if (i < 3) {
let i = "foo";
console.log(i);
}
i++;
2，const
const声明的常量不能修改指的是声明之后的常量不能重新指向一个新的地址，并不是指不能修改成员数据。
最佳实践：不用var,尽量使用const,配合使用let
3，数组
数组解构
const arr = [1, 2, 3]
const [a, b, c] = arr;
console.log(a, b, c)打印
1,2,3const arr = [1, 2, 3]
const [,,c] = arr;
console.log(c)打印
3const arr = [1, 2, 3]
const [a,...rest] = arr;
console.log(rest)打印
[2,3]
这里的
...操作符只能放在最后一位使用
const arr = [1, 2, 3]
const [a, b, c, d = 4] = arr;
console.log(a, b, c, d)大于数组长度解构，如果不给默认值，会提示undefined。
4，对象解构
const obj = {name:'a',age:1};
const name ="b";
const {name:objName} = obj;
console.log(name)当对象解构与定义常量重名时，可以给解构变量重命名
objName。这时候打印的name为b，程序不会报错。5，模板字符串
带标签的模板字符串
const str = console.log`how are you`打印出一个数组
文章图片
标签就是一个函数。
为什么打印的会是一个数组
const print = (strs)=>{
console.log(strs)
}
const name1 = 'jim'
const name2 = 'tom'
const str = print`${name1} how are you,${name2}`打印
文章图片
打印内容是模板标签分割过后的内容，模板标签中可能存在嵌入的表达式，数组其实是按照表达式分割之后静态的内容，所以是一个数组。模板标签函数还能接收到模板字符串中可能出现的表达式的返回值
const name1 = 'jim'
const name2 = 'tom'
const print = (strs,name1,name2)=>{
console.log(strs,name1,name2)
}
const str = print`${name1} how are you,${name2}`打印
文章图片
6，字符串扩展方法
字符串的头尾，中部查找方法
startsWith() ,endsWith(), includes().const str = 'he is a man.'
console.log(
str.startsWith('he'),
str.endsWith('.'),
str.includes('is'),
)【ES6知识点小结】
文章图片
7,参数默认值
当函数参数是可选参数值。函数体内判断方式应该判断是否是
undefinedfunction foo(para) {
para = para === undefined ? true : false
}8，箭头函数与this。
箭头函数内的this始终指向当前作用域。
const person = {
name:"tom",
say: function (){
console.log(`my name is ${this.name}`)
},
arrowSay:()=>{
console.log(`my name is ${this.name}`)
}
}person.say();
person.arrowSay()打印如下
文章图片
另一个案例
const person = {
name: "tom",
asyncSay: function () {
setTimeout(function () {
console.log(`my name is ${this.name}`)
}, (1000));
},
asyncArrowSay: function () {
setTimeout(() => {
console.log(`my name is ${this.name}`)
}, (1000));
}
}person.asyncSay();
person.asyncArrowSay()
文章图片
第一行打印是
undefinde是因为setTimeout内的函数最终会放在全局对象对象上去调用，拿不到当前作用域的对象，拿到的是全局作用域的对象。一般解决办法是添加一个
_this保存当前this。借助闭包机制const _this = this;
console.log(`my name is ${_this.name}`)第二行能打印出
tom是因为当前this始终指向当前作用域。9，计算属性名
可以用
[]包含用来表示一个动态属性名。const obj = {
[Math.random()]: 1,
method() {
console.log(this);
}
}obj.method()
文章图片
10，Object.assign方法
Object.assign()方法用于合并对象。第一个参数为目标对象，方法的返回值就是目标对象。 const source = {
a:1,
b:2,
} const target = {
a:3,
c:4
}
const result = Object.assign(target,source);
console.log(result)
console.log(result === target)
文章图片
这个方法常用于复制一个对象
11，Object.is
Object.is()用于判断两个对象是否相等console.log(0 == false, 0 === false, +0 === -0, NaN === NaN, Object.is(+0, -0), Object.is(NaN, NaN))
文章图片
12，proxy
目前接触的不多。
const person = {
name: "tom",
age: 18,
}const personProxy = new Proxy(person, {
// 监听对象访问
get(target, property) {
return property in target ? target[property] : "default"
},
// 为代理目标设置属性
set(target, property, value) {
if (property === "age") {
if (!Number.isInteger(value)) {
throw new TypeError(`${value} is not integer`)
}
}
target[property] = value
}
})personProxy.age = 20
personProxy.gender = true
console.log(personProxy.name)
console.log(personProxy.any)
文章图片
他比defineProperty更为强大，后者只能监听对象读写，前者能监听的操作更多
文章图片
此外还能监听数组变化。
const arr = [];
const arrProxy = new Proxy(arr, {
set(target, property, value) {
console.log("监听到：", property, value);
target[property] = value;
return true;
// 表示设置成功
}
})arrProxy.push(1);
arrProxy.push(2)
文章图片
能够判断出下标
13，for...of循环
for...of循环内可以使用break关键字，forEach则不行。for...of不仅可以遍历数组，还可以遍历伪数组对象遍历map对象
const m = new Map();
m.set('a', 1);
m.set('b', 2);
for (let i of m) {
console.log(i)
}
//运用数组结构方法
for (let [key, value] of m) {
console.log(key, value)
}
文章图片
14，生成器
Generator实现一个发号器//惰性执行
function * createidMaker(){
let id = 1;
while(true){
yield id++;
}
}
const idMaker = createidMaker();
console.log(idMaker.next());
console.log(idMaker.next().value);
console.log(idMaker.next().value);
console.log(idMaker.next().value);
console.log(idMaker.next().value);
文章图片
使用
Generator函数实现iterator方法const obj = {
value: [1, 2, 3],
english: ['a', 'b', 'c'],
word: ['一', '二', '三'],
[Symbol.iterator]: function* () {
const all = [...this.value, ...this.english, ...this.word]
for (const item of all) {
yield item
}
}
}for (const item of obj) {
console.log(item)
}
文章图片
15，ES2016
includes()方法用于数组查找，
indexOf方法无法查找NaNconst arr = ['a',1,NaN,false]
console.log(arr.indexOf('a'));
console.log(arr.indexOf(NaN));
console.log(arr.indexOf(false));
console.log(arr.includes(NaN))
文章图片
指数运算符
console.log(Math.pow(2, 10));
console.log(2 ** 10)
文章图片
16，ES2017
Object扩展方法const obj = {
a: 1,
b: 2
}//Object.values()对象值集合
console.log(Object.values(obj))
// Object.entries()数组方法返回对象中的键值对,转换成Map结构
console.log(Object.entries(obj))
for (let [key, value] of Object.entries(obj)) {
console.log(key, value)
}
console.log(new Map(Object.entries(obj)))
文章图片
String.property.padStart,String.property.padEnd当打印对象时，因为长度不一样，看起来不一致。
// String.property.padStart,String.property.padEnd
const person = {
tom: 5,
jerry: 16,
williams: 120
}
for (let [name, age] of Object.entries(person)) {
console.log(name, age)
}
console.log('String.property.padStart,String.property.padEnd')
console.log('用给定的字符串来填充目标字符串的开始和结束位置')
for (let [name, age] of Object.entries(person)) {
// padEnd固定字符15个长度，空白位置用-填充
console.log(`${name.padEnd(15,'-')} | ${age.toString().padStart(3,'0')}`)
}
文章图片
推荐阅读
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)
- 小学英语必考的10个知识点归纳，复习必备！
- 六步搭建ES6语法环境
- (六)Component初识组件
- java|java 常用知识点链接
- 心理学知识点总结（1）
- AsyncTask的个人小结
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 改变从现在开始，行动胜于一切——准初三暑假学习小结（二）
- 高效执行力第六课-小结