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函数式编程思想

参考：ES6语法（1）—— 用let、const代替var

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

wingchiehpih

原创文章 3 获赞 1 访问量 92

关注私信

ES6语法(一) Let和Const的区别，箭头函数的使用等