从零开始学前端—ES6入门

1.let 和 const命令

1.let声明变量

1.变量不能重复声明
2.块级作用域（只在代码块中有效）
3.不存在变量提升（不允许在变量声明之前使用变量）
4.不影响作用域链

2.const声明常量

1.常量声明格式

1.一定要赋初始值
2.一般常量使用大写（潜规则，语法要求）
3.常量值不能修改
4.块级作用域
5.对于数组和对象的元素的修改，不算做对常量的修改

在开发过程中默认使用const，在数据需要发生变更时使用let，使用var可能会出现重复变量

3.解构赋值(适用场景：方法的重复调用)

1.数组的解构

const F4 = ['小沈阳'，'赵四','刘能','宋小宝']
let [xiao,zhao,liu,song] = F4;

2.对象的解构

const zhao = {
    name:'赵本山',
    age:'不详',
    xiaopin:function(){
        console.log('我可以演小品');
    }
};
let {name,age,xiaopin} = zhao;
//从对象获取K对应的值赋值给前面的值
const {name} = zhao;

2.模板字符串

1.声明格式---``
2.内容中可以直接出现换行符
3.变量拼接
	拼接语法:let out = `${xx}xxx`

3.简化对象写法

1.es6 允许在大括号中，直接写入变量和函数，作为对象的属性和方法

4.箭头函数（=>）

1.语法简明

语法：删除funtion关键字，加上=>，没有参数加括号，一个参数可选择，多个参数逗号分隔

2.可以以是返回

3.不绑定this

原因：箭头函数没有自己的this值，在箭头函数定义时就指定了this，就是它的父级this

//声明一个函数
//()写形参
let fn = (a,b) =>{
    //代码体
}

1.箭头函数声明的特性

1.this 是静态的，this 始终指向函数声明时所在作用域的 this 的值

2.不能作为构造函数实例化对象

3.不能使用 arguments 变量

4.箭头函数的简写

1.省略小括号（当形参有且只有一个时）
2.省略花括号（当代码体只有一条语句时），此时return语句必须省略

5.箭头函数的不适用场景

1.作为构造函数，一个方法需要绑定到对象

<script>
    //错误示例
    const Person = (name,points)=>{
        this.name = name;
        this.points = points;
    }
    //正确示例
    const Person = function(name,points){
        this.name = name;
        this.points = points;
    }
    //错误示例
    const Jelly = new Person('jelly',5);
	Person.prototype.updatePoints = () =>{
        //this指向时window
        this.points++;
        console.log(this.points)
    }
    //正确示例
    const Jelly = new Person('jelly',5);
	Person.prototype.updatePoints = function(){
        this.points++;
        console.log(this.points)
    }
</script>

2.当真的需要this的时候

<script>
    //错误示例 this指向window
	const button = document.querySelector('.zoom');
	button.addEventListener('click',()=>{
        this.classList.add('in');
        setTimeout(()=>{
            this.classList.remove('in');
        },2000);
    })
	//正确示例
	const button = document.querySelector('.zoom');
	button.addEventListener('click',function(){
        this.classList.add('in');
        //正确
        setTimeout(()=>{
            this.classList.remove('in');
        },2000);
        //错误
        setTimeout(function(){
            //this指向window
            this.classList.remove('in');
        },2000);
    })
</script>

3.需要使用arguments对象

//错误
const sum = () =>{
    return Array.form(arguments)
    			.reduce((prevSum,value)=>prevSum+value,0)
}
//正确
const sum = function() {
    return Array.form(arguments)
    			.reduce((prevSum,value)=>prevSum+value,0)
}

5.函数参数的默认值

es6允许给函数参数赋初始值

1.形参初始值，具有默认值的参数，一般位置靠后
function add(a,b,c=10){
    return a+b+c;
}
let result = add(1,2);
2.与解构赋值结合

6.Symbol

Symbol:原始数据类型，表示独一无二的值，主要用来定义对象的唯一属性名

7.Map 和Set

1.map对象

Map对象保存键值对。任何值（对象或者原始值）都可以作为一个键或一个值。

Maps和objects的区别

一个Object的键只能是字符串或者Symbols，但一个Map的键可以是任意值。
Map中的键值是有序的（FIFO原则），而添加到对象中的键则不是。
Map的键值对个数可以size属性获取，而Object的键值对个数只能手动计算。
object都有自己的原型，原型链上的键名可能和你自己在对象上设置的键名产生冲突。

Map的迭代

for…of

let myMap = new Map();
myMap.set(0,"zero");
myMap.set(1,"one");
for (let [key,value] of myMap){
    console.log(key + "=" + value)
}

forEach()

let myMap = new Map();
myMap.set(0,"zero");
myMap.set(1,"one");
myMap.forEach(function (value,key){
    console.log(key +"=" + value)
},myMap);

2.Set对象（相当于java中的set,起去重复的作用）

8.for循环

1.for of循环

目前不支持对象

const fruits = ['Apple','Banana','Oragnge','Mango'];
for(let fruit of fruits){
    //支持循环终止和跳过
    if(fruit === 'Oragnge'){
        //break;
        continue;
    }
    //得到属性值
}

//使用示例
for(let fruit of fruits.entries()){
    //同时得到索引值和value值
}

2.for in循环（遍历对象上所有的可枚举属性）

const fruits = ['Apple','Banana','Oragnge','Mango'];
for(let fruit in fruits){
    //得到属性名
}

9.Array.from() and .of

1.Array.from()

1.可以将内数组转换为数组，调用map方法得到值

const todos = document.querySelectorAll('li');
const names = Array.from(todos,todo=>todo.textContent);

arguments内数组对象转换为数组

function sum(){
    return Array.from(arguments).reduce((prev,curr)=>prev+curr,0);
}

等。。。。

2.Array.of()

返回由参数组成的数组（保证返回结果的一致性）

10.数组中的新方法

1、.find()

获取数组中某一个满足条件的值

const inventory = [
    {name:'apples',quantity:2},
    {name:'bananas',quantity:0};
    {name:'cherries',quantity:5};
]

const bananas = inventory.find(fruit=>{
    if(fruit.name === 'bananas'){
        return true
    }
    return false
})
//简写
const bananas = inventory.find(fruit=>fruit.name === 'bananas')

2、.findIndex()

获取数组中元素的索引

const inventory = [
    {name:'apples',quantity:2},
    {name:'bananas',quantity:0};
    {name:'cherries',quantity:5};
]

const bananas = inventory.findIndex(fruit=>fruit.name === 'bananas')

3、.some()

如果元素满足返回true,不会执行后面的操作

const inventory = [
    {name:'apples',quantity:2},
    {name:'bananas',quantity:0};
    {name:'cherries',quantity:5};
]

const isEnough = inventory.some(fruit=>fruit.quantity > 0)

4、.every()

当所有元素满足返回true，当有一个元素为false，返回false ,不执行后面的操作

const inventory = [
    {name:'apples',quantity:2},
    {name:'bananas',quantity:0};
    {name:'cherries',quantity:5};
]

const isAllEnough = inventory.every(fruit=>fruit.quantity > 0)

11.剩余参数

应用场景：

1.对函数参数的处理

function sum(...numbers){
    return numbers.reduce((prev,curr)=> prev + curr, 0)
}

sum(1,2,3,4)

2.变量的解构

const player = ['jelly',123,5.4,6.7,3.4,7.8]

const[name,id,...scores] = player;

12.拓展运算符

把可遍历对象的元素扩展为一个新的参数序列,

const youngers = ['George','John','Thomas'];

const olders = ['James','Adrew','Martin'];

//数组整合
const members = youngers.concat(olders);

//扩展运算符
let members = [...youngers,...olders];
//添加元素
let members = [...youngers,'Mary',...olders];

13.运算符的扩展

1.指数运算符(**)

//**(相当于2的多少次方)
2**2
//=**(新的赋值运算符)
let a = 10;
a=**2 //等同于 a = a * a

2.链判断运算符(?.)

//message?.body?.firstname如果不存在，则firstName等于default
const firstName = message?.body?.firstname || 'default'

3.Null判断运算符

// ||运算符
//如果response.seettings.headerText为Null或undefined，则显示默认值
//如果属性值为字符串或false或0，默认值不会生效
const headerText = response.seettings.headerText || 'hello,world'
//？？运算符(只有在运算符左侧的值为NUll或undefined，才会返回右侧的值)
const headerText = response.seettings.headerText ?? 'hello,world'

14.Promise

就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。可以理解为对异步编程的一个反馈

1. .then() .catch (事件监听)

let username;
const usersPromise = axios.get('https://api.github.com/users')
// 监听usersPromise
usersPromise.then(reponse=>{
    username = reponse.data[0].login;
    return axios.get(`https://api.github.com/users/${username}/repos`)
}).then(repose =>{
    console.log(repose.data)
})
//监听错误的发生
.catch(err =>{
    console.log(err)
})

原文链接：https://blog.csdn.net/qq_56730681/article/details/122874683