ECMAscript is international standard of javascript。
ECMA 是 js的国际标准版语言。
为什么之前用var现在需要用let,const呢?
其实就是因为规范作用域的问题。var的作用域无块级
for (var i = 0; i < 10; i++) {
console.log('i')
}
console.log(i)// 10
for (let j = 0; j < 10; j++) {
console.log('j')
}
console.log(j) // 报错
?我们看这个代码会发现代码块里边使用var外边也能访问,而let就不能,所以let更加严谨,const也一样,只不过const是声明常量的词,用作不改变的变量内容。
顺便提一下var的变量提升也是鸡肋的存在,不太严谨,所以let与const的暂时性死区也是解决这个问题的。
功能就是为了方便取值,解构解构先了解之前的结构才能解开,结构需一样,但取值可少取
比如let 【x,y] = [1,2,3]
let arr = [1,2,3]
let a = arr[0]
let b = arr[1]
let c = arr[2]
console.log('数据是', a, b, c)
vs
let [a,b,c] = [1,2,3]
console.log('数据是', a, b, c)
你会发现es6的写法真的很nice
事实上,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。
使用场景上对象的解构赋值非常常用,比如使用Vuex,路由,第三方模块等等。
ES6 加强了对 Unicode 的支持,允许采用
\uxxxx
形式表示一个字符,其中xxxx
表示字符的 Unicode 码点。
let b = '\u0061'
console.log('数据是', b) // a
for (let a of 'hep') {
console.log('数据是', a)
}
提示:这个场景用的最多
let name = 'john'
let age = '18'
let sentence = 'my name is' + name + ',' + 'my age is' + age
console.log(sentence)
let esSentence = `my name is ${name},my age is ${age}`
console.log(esSentence)
String.fromCharCode(0x20BB7)
第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag)
var regex = new RegExp('xyz', 'i');
// 等价于
var regex = /xyz/i;
第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝。
var regex = new RegExp(/xyz/i);
// 等价于
var regex = /xyz/i;
// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45
Number.isInteger()
用来判断一个数值是否为整数。
Number.isInteger(25) // true
Number.isInteger(25.1) // false
Math.trunc
方法用于去除一个数的小数部分,返回整数部分。
Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0
Math.sign
方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。
它会返回五种值。
+1
;-1
;0
;-0
;NaN
。Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign(NaN) // NaN
function Point(x, y) {
this.x = x || 0;
this.y = y || 0;
}
const p = new Point();
p // { x: 0, y: 0 }
vs es6
function Point(x = 0, y = 0) {
this.x = x;
this.y = y;
}
const p = new Point();
p // { x: 0, y: 0 }
当然下边这个更好一些
我们再看下边这个结合解构赋值的例子
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
也就是当一个参数为复杂数据类型的时候使用更加的方便了
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5 的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6 的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
ES6 提供三个新的方法——entries()
,keys()
和values()
——用于遍历数组。它们都返回一个遍历器对象(详见《Iterator》一章),可以用for...of
循环进行遍历,唯一的区别是keys()
是对键名的遍历、values()
是对键值的遍历,entries()
是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
我们常常用Object.keys(obj).length来判断对象是否为null,arr.keys().length也可以啊,其实想一想直接arr.length就可以啊。
Array.prototype.includes
方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes
方法类似。ES2016 引入了该方法。
之前经常使用这个去判断数据当中是否有某一个值,进行判断。
数组的成员有时还是数组,Array.prototype.flat()
用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。
提示:这个你会见的最多? 比如import {name} from ’@/name.js‘
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};
这个用的场景就是有些对象属性不想对外开发,想私有化就用它就对了
let obj = {
[Symbol('name')]: '一斤代码',
age: 18,
title: 'Engineer'
}
Object.keys(obj) // ['age', 'title']
for (let p in obj) {
console.log(p) // 分别会输出:'age' 和 'title'
}
Object.getOwnPropertyNames(obj) // ['age', 'title']
Set理解为数学的集合就行,Map就是为了解决键的多样化的设置,另外就是按顺序迭代,占用空间较小。
可以理解的是这个比较重要,是对代码的再次编程。
var proxy = new Proxy({}, {
get: function(target, propKey) {
return 35;
}
});
proxy.time // 35
proxy.name // 35
proxy.title // 35
其实在Vue中我们知道数据的双向绑定Vue2使用的definePropty(),Vue3使用的就是Proxy
这个非常关键,之前写过一篇。
这个也用的特别多,其实就是就是返回一个Promise对象
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
}
asyncPrint('hello world', 50);
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
目前很多项目都是使用的import,export,比较常用
结语:
工作之余顺便看看之前的知识是一件开心的事,每一次看都会有新的体会。