ES6基础

ES6基础

let,const

let和const都是块级作用域，以{ }代码块作为作用域范围 ，只能在代码块里面使用，而var声明的变量全局有效/局部(函数)内部有效.

let 和 const声明不存在变量提升，只能先声明再使用，否则会报错。不允许重复声明，不存在变量提升。

 console.log(a);      //undefined 
   var a = 666;
 
   //ES6中声明变量不会提升
   console.log(b);     //报错   在代码块内，在声明变量b之前，该变量b都是不可用的  所以报错
   let b = 1;   

const有关知识
1.const声明的常量在声明时就必须要赋值，不能只声明不赋值

2.const声明的常量不能被修改，且只能初始化赋值一次。

3.当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING

4.常在项目中用于一些不变的量：比如说网址。。。。

如果const的是一个引用数据，里面的数据改了，但是引用地址没改，也不会报错

<script>
    const obj = {
        a:1
    }
    obj.a = "123";
    console.log(obj);//{a: '123'}
 
    const arr = [1,2,3];
    arr[0] = "a";
    console.log(arr); //(3) ['a', 2, 3]
</script>

解构赋值

数组解构赋值

数组解构允许我们从数组中按照一一对应的关系从数组中提取出值，然后将值赋值给变量。

let arr=[1,2,3]
let [a,b,c,d]=arr
console.log(a)//1
console.log(b)//2
console.log(c)//3
console.log(d)//undefined(结构不成功为undefined)
数组中不想要的元素也可以通过添加额外的逗号来把它丢弃：
// 不需要第二个元素
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
alert( title ); // Consul

对象解构

对象结构允许我们通过通过对象的名字匹配对象的属性，匹配成功将对象的值赋给变量

变量名和属性名相同
let person={name:'zkm',age:'20'}
let {name,age}=person
console.log(name)
console.log(age)
变量名和属性名不同
let{name:myName,age:myAge}=person
console.log(myName)
console.log(myAge)

箭头函数

语法
()=>{}
var fn=()=>{}
如果函数体中只有一句代码，并且执行结果就是函数的返回值，可以省略大括号
const sum=(a,b)=>a+b
console.log(sum(1,2))//3
如果形参只有一个可以省略小括号
const a=a=>console.log(a)
a(1)//1

箭头函数this关键字
箭头函数不绑定this关键字，箭头函数中的this指向的是函数定义的上下文this
const obj={name:'zkm'}
function fn(){
    console.log(this)
    return ()=>{
        console.log(this)//指向fn区域中的this
    }
}
const resFn=fn.call(obj)//call方法改变this指向，指向obj对象
resFn()

剩余参数

function sum (first, ...args) {
    console.log(first); // 10
    console.log(args); // [20, 30] 
}
sum(10, 20, 30)；

const sum=(...args)=>{
	let total=0;
	args.forEach(item=>{
	total+=item
	})
	return total
}

var ary1=['z','k','m']
var [si,...s2]=ary1

扩展运算符

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
let arr=[1,2,3]
扩展运算符将数组拆分成逗号分隔的参数序列
console.log(...arr)///1 2 3逗号会被当做分隔符
console.log(1,2,3)//1 2 3
可以用来数组合并
let arr1=[4,5,6]
let arr3=[...arr,...arr1]
也可用push方法
arr.push(...arr1)
运用扩展运算符将伪数组转换成真正的数组（比如dom对象）
也可以用from方法
let newAry=Array.from(arrayLike,item=>{})也可以有第二个参数，是一个函数，对每个元素进行处理
find方法找出第一个符合条件的元素
var arr2=[{
    id:1,
    name:'1'
},{
    id:2,
    name:'2'
}
]
var target=arr2.find(item=>item.id==2)
console.log(target)//{id: 2, name: '2'}
fingIndex()方法查找下标的元素

ES6模块化

意义：
① ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。

定义：
① 每个 js 文件都是一个独立的模块
② 导入其它模块成员使用 import关键字
③ 向外共享模块成员使用 export关键字

用法：
① 默认导出与默认导入
② 按需导出与按需导入
③ 直接导入并执行模块中的代码

定义暴露模块export default 默认导出的成员
引用注入模块import 接收名称 from '模块标识符'
let n1 = 10 //定义模块私有成员n1
let n2 = 20 //定义模块私有成员n2 (外界访问不到n2 因为他没有共享出去)

function show() {} //定义模块私有方法 show

export default { //使用export default 默认导出语法 向外共享n1 和 show 两个成员
    n1,show
}
每个模块中，只允许使用唯一的一次export default，否则会报错
默认导入时的接收名称可以任意名称，只要是合法的成员名称即可

按需导入与按需导出
export 类型 成员（定义暴露）
import { 成员 } from '模块标识符'（引用注入）
import aixos from '@/utils/request.js'

// login 请求
export const userLogin = (data) => {
    return aixos({
        method: 'post',
        url: '/login',
        data
    })
}

// register 请求
export const userRegister = (data) => {
    return aixos({
        method: 'post',
        url: '/register',
        data
    })
}
每个模块中可以使用多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用 as 关键字进行重命名
按需导入可以和默认导入一起使用