特点 | var关键字 | let关键字 |
---|---|---|
变量提升 | √ | × |
作用域 | 没有块级作用域,是函数作用域 | 有块级作用域 |
重复声明 | √ | × |
重新赋值 | √ | √ |
图中可对比看出,如果用var
声明,在循环外部还是可以使用i
变量;但用let
声明变量,循环外部不可以使用n
变量
使用场景
取对象中属性的值,赋值给变量。
例如对于如下对象来说,在ES5与ES6中将对象赋值于变量的方式
let obj = {
name: "波波",
age: 38,
gender: "男",
score: 88,
};
ES5中的写法
let name1 = obj.name;
let age1 = obj.age;
let gender1 = obj.gender;
let score1 = obj.score;
console.log(name1, age1, gender1, score1);
ES6中的写法
以上代码的输出结果都为下图所示
当简写时,对象中没有的属性会赋值为undefined
let obj = {
name: "波波",
age: 38,
gender: "男",
score: 88,
};
let { name, age, gender, fenshu } = obj;
console.log(name, age, gender, fenshu);
简写与全写可以一起用
let { name, age, gender, score: fenshu } = obj;
console.log(name, age, gender, fenshu);
设置默认值。当对象中没有此属性时会赋值为默认值而不是undefined。如果对象中存在这个属性,那么将赋值为对象中的属性,而不是默认值。
let { name, age, gender, score: fenshu, height = 180 } = obj;
console.log(name, age, gender, fenshu, height);
把数组中每一个元素的值依次的赋值给变量。声明如下数组:
// 声明一个数组
let arr = [10, 20, 30, 40];
ES5中的写法
let num1 = arr[0];
let num2 = arr[1];
let num3 = arr[2];
let num4 = arr[3];
console.log(num1, num2, num3, num4);
ES6中的写法
ES5中的写法
function test1(obj) {
console.log(obj.name, obj.age, obj.gender);
}
test1({
name: "波波",
age: 38,
gender: "男",
});
ES6中的写法
function test2({ name, age, gender, height = 180 }) {
console.log(name, age, gender, height);
}
test2({
name: "波波",
age: 38,
gender: "男",
});
test2({
name: "波波",
age: 38,
gender: "男",
height: 160,
});
简单来说,箭头函数就是匿名函数的一个简写。
// 1. 普通的匿名函数
let fn = function (name) {
console.log("my name is ", name);
};
fn("波波");
// 2. 箭头函数
let fn1 = (name) => console.log("my name is ", name);
fn1("波波");
简写规则:
function
改成=>
,=>
可以读成goes toreturn
返回值,那return
也要省略
let fn1 = function (name) { return name + "你好吗?"; }; let fn1 = (name) => name + "你好吗?";let fn2 = function (num1, num2) {
console.log(num1 + num2);
return num1 + num2 + 30;
};
let fn2 = (num1, num2) => {
console.log(num1 + num2);
return num1 + num2 + 30;
};
return
let fn4 = function (age) { return age + 10; }; let fn4 = (age) => age + 10;let name = "千里";
let age = 18;
let gender = "man";
let score = 10;
// es6
let obj = {
name,
age,
gender,
score,
sayHi() {
console.log("哈哈");
},
};
console.log(obj);
obj.sayHi();
在这种写法中,如果传入一个没有赋值的变量,那么就会报错。例如:
let name = "千里";
let age = 18;
let gender = "man";
let score = 10;
// es6
let obj = {
name,
age,
gender,
score,
// fenshu, // 会发生报错,因为外部没有此变量,可以修改为下面的写法
fenshu:score,
sayHi() {
console.log("哈哈");
},
};
console.log(obj);
obj.sayHi();
// 声明一个对象
let chinese = {
skin: "yellow",
hair: "black",
sayHi() {
console.log("Are you eat?");
},
};
let CXK = {
slill: "jump sing rap and play basketball",
song: "啊哈哈哈",
};
let linge = {
// skin: "yellow",
// hair: "black",
// sayHi() {
// console.log("Are you eat?");
// },
// slill: "jump sing rap and play basketball",
// song: "啊哈哈哈",
// 展开语法 等同于上方写法
...chinese,
...CXK,
};
console.log(linge);
当新增属性时,直接添加即可。如果重新定义已经存在的,那么覆盖原来的。
let linge = {
...chinese,
...CXK,
gender: "Man",
hair: "白发苍苍",
};
与对象展开类似。
let arr1 = [10, 20, 30];
let arr2 = [40, 50, 60];
let arr3 = [...arr1, ...arr2, 70];
console.log(arr3);
使用场景:
作用和数组类型,和数组不同的是set不能存放重复的元素。
也可以改写为如下: let arr = [10, 20, 30, 10, 20, 30, 20, 10, 33, 200]; let arrNew = [...new Set(arr)]; console.log(arrNew);
模板字符串会保留原样字符串格式,以及可以占位。其语法为反引号``
let author = "波波";
let str1 = `
静夜思
${author}
哈哈哈
`;
console.log(str1);
let name = "xiaokang";
let age = 12;
function test() {
return "test";
}
console.log(`my name is ${name} and age is ${age}. ${test()}`);
forEach
无返回值
let arr = [10, 20, 30, 40]; arr.forEach(function (item, index) { // item 遍历出的每一项 // index 遍历出来的每一项对应的索引 console.log(item, index); });map
有返回值。
let arr = [10, 20, 30, 40]; let arrNew = arr.map(function (item, index) { // item 遍历出的每一项 // index 遍历出来的每一项对应的索引 // console.log(item, index); return item * item; }); console.log(arrNew);filter
let arr = [10, 20, 11, 21, 30, 31, 23, 43]; let arrNew = arr.filter((item, index) => { console.log(item, index); // 如果条件成立,返回当前项 return item % 2 == 0; }); console.log(arrNew); //[ 10, 20, 30 ]