ES6语法复习
定义:ES是ECMAScript的缩写,是一个制定脚本语言标准的组织
学习资源地址:阮一峰大神的书
1、Let和Const的区别
let定义变量
const定义常量
let,const与var的区别
let和const | var | |
---|---|---|
能否重复声明变量 | 不可以 | 可以 |
作用域范围 | 块作用域 | 函数作用域 |
let代替var的优势:局部变量不去污染全局变量
let price = 10;
if(price < 59){
const deliveryFee = 5;
price += deliverFee;
}
console.log(price); #15
console.log(deliveryFee); #not defined
const使用频率大于let:
JavaScript函数式编程思想
2、箭头函数
特点:
- 能够使函数的写法更加简洁
- 函数返回值可以被隐式返回
- 不用重新绑定this的值
const doubleValue = value => {
return value * 2;
};
console.log(doubleValue(3)); #6
const greeting = () => console.log("Hello World");
greeting(); #Hello World
conost printName = name => "Hello" + name;
console.log(printName("Mike")) #HelloMike
const addNumbers = (a, b) => a + b;
console.log(addNumbers(1, 2)) #3
const square = a => a*a;
sonsole.log(square(3));
const companies = ['google', 'huawei', 'samsung'];
const result = companies.map(company => company + 'is a company')
console.log(result)
<!-- Array(3) 0: "googleis a company" 1: "huaweiis a company" 2: "samsungis a company" length: 3-->
const ages = [14, 19, 21];
const result = ages.filter((age) => age > 18);
console.log(result);
const result2 = ages.filter((age) => {
const nextYearAge = age + 1;
return nextYearAge > 18;
});
console.log(result2);
<!-- 0: 19 1: 21 length: 2 -->
不牵涉到this绑定问题,推荐使用箭头函数
模板字符串
const person = {
name: '小毕',
hometown: '杭州',
hobby: '学习',
age: 20,
};
const intro = `大家好,我叫${person.name},今年${person.age}岁,我来自${
person.hometown
},我的爱好是${person.hobby},我已经是${
person.age > 18 ? '成年人' : '未成年人'
}`;
console.log(intro);
#大家好,我叫小毕,今年20岁,我来自杭州,我的爱好是学习,我已经是成年人
set和map
1.set对象的声明
const numberSet = new Set()
2.添加新的元素
numberSet.add()
3.获取元素数量
numberSet.size
4.检测元素是否存在
numberSet.has()
5.删除元素
numberSet.delete()
6.清除元素
numberSet.clear()
7.遍历元素
numberSet.forEach(number => console.log(number))
1.map对象的声明
const person = new Map()
2.添加新的元素
person.set('key', 'value')
3.获取元素
person.get('key')
4.获取元素数量
person.size
5.检测元素是否存在
person.has('key')
6.删除元素
person.delect(key)
7.遍历元素
解构赋值
基本用法
1、对象
const person = {name:'小毕', age:20, city:'杭州'};
const {name, age, city} = person;
console.log(name, age, city); #小毕 20 杭州
const person = {name:'小毕', age:20, city:'杭州', social: {qq: '3251255218', bili: 'chieh_bili',};
const { qq, bili } = person.social;
console.log(qq, bili); #3251255218 chieh_bili
const person = {name:'小毕', age:20, city:'杭州', social: {qq: '3251255218', bili: 'chieh_bili',};
const { name, social: { bili } } = person;
console.log(name, bili); #小毕 chieh_bili
解构赋值给变量改名:
const {name:stuName, age:stuAge} = person;
设置默认值:
const {name:stuName = 'guest', age:stuAge} = person;
2、数组
const info ='小毕, 18, bili_chieh'
const person = info.split(',');//先将字符串通过split分割成数组
const [name, age, bili] = person;//通过数组解构
console.log(name , age, bili)
使用方法:互换变量
let a = 1;
let b = -1;
[a, b] = [b, a]
console.log(a, b)
剩余和扩展参数
剩余参数
const team = ['易建联', '郭艾伦', '翟晓川', '赵继刚', '周琦'];
const [captain, assistant, ...players] = team;
console.log(captain, assistant, players)
排序问题:
function sortNumbers(...nums){
if(nums.length === 0){
return [];
}else{
return nums.sort((a,b) => a-b);
}
}
console.log(sortNumbers(1, 2, 10))
扩展参数
const captain = '易建联';
const assistant = '郭艾伦';
const players = ['翟晓川', '赵继伟', '周琦'];
const team = [captain, assistant, ...players];
console.log(team);
合并数组:
const food =['香辣鸡腿堡', '老北京鸡肉卷', '吮指原味鸡'];
const drink = ['百事可乐', '七喜', '橙汁'];
const kfc = food.concat(drink);
console.log(kfc)
ES6写法:特点特别灵活
const food =['香辣鸡腿堡', '老北京鸡肉卷', '吮指原味鸡'];
const drink = ['百事可乐', '七喜', '橙汁'];
const kfc = [...food, '圣代', ...drink, '葡式蛋挞'];
console.log(kfc)
默认值参数字符串方法与for of
默认值参数
function orderCombo(comboName, drink = '可口可乐') {
console.log(`你点了${comboName},饮料是:${drink}。`);
}
orderCombo('巨无霸套餐', '雪碧');
字符串方法
// 字符串includes,startsWith,endsWith
const string = 'abc';
const substring = 'ab';
console.log(string.includes(substring)); #true
console.log(string.includes('d'));#false
console.log(string.startsWith(substring)); #true
console.log(string.startsWith('b'));#false
// 传入的参数为从指定位置开始
console.log(string.startsWith('b', 1)); #true
// 传入的参数为截止到指定位置
console.log(string.endsWith('c', 1));#false
for…of数组遍历
const foods = ['香辣鸡腿堡', '老北京鸡肉卷', '吮指原味鸡'];
for (const food of foods) {
console, console.log(food);
}
// 香辣鸡腿堡
// 老北京鸡肉卷
// 吮指原味鸡
数组解构和for…of结合使用
const foods = ['香辣鸡腿堡', '老北京鸡肉卷', '吮指原味鸡'];
for (const [index, food] of foods.entries()) {
console.log(`第${index + 1}号套餐的汉堡是${food}`);
}
// 第1号套餐的汉堡是香辣鸡腿堡
// 第2号套餐的汉堡是老北京鸡肉卷
// 第3号套餐的汉堡是吮指原味鸡
对象遍历for…of
const person = new Map();
person.set('name', '小毕');
person.set('age', 20);
person.set('hobby', ['看电影', '读书', '打游戏']);
for (const [key, value] of person) {
console.log(key, value);
}
// name 小毕
// age 20
// hobby (3) ["看电影", "读书", "打游戏"]
对象遍历for…in
const person = { name: '小毕', age: 20, city: '杭州' };
for (const key in person) {
console.log(key, person[key]);
}
// name 小毕
// age 20
// city 杭州
对象的遍历使用for…in,其余的使用for…of