一、数据类型(let/const)
1、在其他语言(如C/C++/java等)中,变量最小作用域是以{}括起来的块级作用域,相对而言,在es5前,js中最小的作用域为函数,这样会导致在某些场景下,运用起来会比较繁琐。
举例子
1 for (var i = 0; i < 3; i++) {
2 setTimeout(function() {
3 console.log(i);
4 }, 0);
5 }
7 console.log(i);
执行结果:
5 //循环体外打印
5
5
5
我们原本期望通过循环和定时器能够依次打印0、1、2,但是由于通过var声明的变量的最小作用域为函数,导致函数体外的i最终污染了循环体中的i。当然我们可以通过函数来解决问题
解决办法:
for (var i = 0; i < 3; i++) {
(function(i) {
setTimeout(function(){
console.log(i);
}, 0);
})(i)
}
console.log(i);
这样借助自执行函数的方式可以解决,但是比较麻烦,es6中的let关键字,可以很容易的帮助我们解决该问题。
for (let j = 0; j < 3; j++) {
setTimeout(function() {
console.log(j);
}, 0);
}
console.log(j);
这样在循环体外访问会报错 not define。let允许声明一个作用域被限制在块级作用域中的变量、语句或者表达式,而var只能声明在全局或者函数块的变量。
2、const关键字声明变量的作用域同let,不同点是,它是用于声明常量的关键字,声明时必须赋值,赋值后不能被变更,即只读。
二、字符串
1、模板字符串:允许嵌入表达式的字符串字面量。可以使用多行字符串和字符串插值功能。
//之前
console.log('hello \n world')
//之后
console.log(`hello
world`)
//执行结果
hello
world
let name = 'mili';
let age = 23;
console.log(`Hello, my name is ${name}, I am ${age}`);
2、includes(str, index):检测字符串中是否存在子串
3、startsWith(str, index):检测字符串是否以某子串开头
4、endsWith(str, index):检测字符串是否以某子串结尾
如果要查询某子串在字符串中的具体位置,可以使用indexOf
三、数组
在es5之前数组有些超好用的方法,如(map、filter、some、every等)都非常实用,具体细节此处就不做展开;
1、find():传入回调函数,找到数组中符合条件的第一个元素,并返回;
2、findIndex():传入回调函数,找到数组中符合条件的第一个元素的下标,并返回;
let objArr = [{name: 'a', age: 10},{name: 'b', age: 20},{name: 'c', age: 30}];
let dest = objArr.find((item) => {return item.age > 10;});
let destIndex = objArr.findIndex((item) => {return item.age > 10});
console.log(dest);
console.log(destIndex);
输出结果:
{name: "b", age: 20}
1
3、arr.fill(value, start, end):用新元素替换掉数组内的元素,可以指定替换的下标范围;
4、arr.copyWithin(target, start, end):选择数组的某个下标,从该位置开始复制元素,也可以指定复制的元素范围;
const copyArr = [1, 2, 3, 4, 5];
console.log(copyArr.copyWithin(3)) // [1,2,3,1,2] 从下标为3的元素开始,复制数组,所以4, 5被替
console.log(fillArr);
console.log(copyArr);
输出结果:
[1, 7, 6]
[1, 2, 3, 1, 2]
四、函数
1、箭头函数:箭头函数没有自己的this(this来自父级最近的非箭头函数)、arguments、super或者new.target
普通函数涉及到this指针:1、函数座位全局函数被调用,this指向全局对象;2、函数座位对象的方法被调用,this指向对象;
let arr = [2, 10, 8, 20];
let newArr = arr.filter((item) => {
return item > 8
})
console.log(newArr);
2、函数参数默认值
// es6前
function handle(num, callback) {
num = num || 6;
callback = callback || function (data) {console.log(data)};
callback(num);
}
// es6后
function handle(num = 6, callback = function (data) {console.log(data)}) {
callback(num);
}
五、其他
迭代器、promise与异步编程、proxy代理待更新