JavaScript第16天_学习笔记_const obja = (child: 'childa',testfn: function(...-CSDN博客

本文详细介绍了ES6中的新特性，包括let和const变量定义，强调了它们的块级作用域和不可重复声明的特点。模板字符串允许方便的字符串操作和变量插入。箭头函数简化了函数定义，并解释了其this指向的特殊性。解构赋值用于简化数组和对象的赋值过程，扩展运算符则用于数组和对象的合并。此外，还讨论了参数默认值和两种模块化的实现方式。最后，简要介绍了ES6中的类概念。

JavaScript第16天_学习笔记

ES6语法

ES6语法

ES6定义变量

以前的定义变量方式var
ES6定义变量方式有两个

使用了let，const(常量)这二者定义的变量不能使用重复的变量名
例如：

let a = 10;
let a = 20; 	//报错
const b = 10;
const b = 20;	//报错 
var c = 10;
var c = 20;		//覆盖

let,const关键字声明的变量没有预解析
例如：

console.log(a);//undefined
var a = 10;

//没有预解析
let a = 10;
console.log(a);//10

//没有预解析
console.log(a);//报错，这个时候变量a还没有定义
const a = 10;

使用let，const关键字声明的变量有块级作用域
例如：

<ul>
    <li>第1个</li>
	<li>第2个</li>
 	<li>第3个</li>
	<li>第4个</li>
	<li>第5个</li>
</ul>

//let 块级作用
let lis = document.querySelectorAll("ul li")
for(let i = 0 ; i < lis.length ; i++){//用var定义变量i的话，下面的输出的始终是5
	lis[i].onclick = function(){
    console.log(i);//而使用let，有块级作用域，这样的话，每点击一次，就会生成一个块，在一个块中将i即点击的li对应的下标输出以后才进入下一次循环
	}
}

let与const的区别
我们一般认为：
– 使用let关键字声明的变量，叫变量，变量的值可以参考for循环中的变量，会随着循环不断发生改变
–使用const关键字声明变量，如同单词意思一样叫常量，即不可改变的量
例如：
```
let a = 10;
a = 20; //将let声明的这个变量的值进行修改了

//常量的值不可改变
const a = 10;
a = 20;
console.log(a);
```
注意：变量初始话可以不赋值，但是常量的初始化必须要赋值

模板字符串

使用撇号声明字符串`我两端的符号就是撇号`
可以换行使用
在字符串当中可以声明变量

箭头函数

箭头函数是对匿名函数的一个进化
例如：

	const fn = function(){
    console.log("这就是一个没有名字的函数");
}
/*
    1. 将function关键字给去掉
    2. 将function使用一个箭头替换掉
    3. 将=>写到()后面
*/
const fn = () =>{
    console.log("这是一个箭头函数");
}

箭头函数的特性1

参数

如果箭头函数只有一个的参数的时候，那么箭头函数的小括号()可以省略
如果箭头函数没有参数，或者有两个或两个以上的参数，那么需要写小括号()

例如：

//两个或两个以上的参数，要加()
const fn = (a,b,c) =>{
	console.log(a,b,c);
}

//只有一个参数，那么可以省略()
const fn = a =>{
	console.log(a);
}
//没有参数，需要加上()
const fn = () =>{}

箭头函数的特性2
在此前的 if 语句中，在 if 语句后面只有一句代码的时候，可以省略大括号不写，箭头函数同理。
函数体即大括号里面的代码，只有一句代码的时候，可以省略大括号，同时省略return
例如：

//获取这个数组所有的奇数
const arr = [1,2,3,4,5,6,7,8]
//普通的匿名函数
const arr1 = arr.filter(function(item){//过滤
	return item % 2 === 1//返回数组中的奇数
})
//改成箭头函数，省略function关键字
const arr1 = arr.filter((item) => {
	return item % 2 === 1
})
//省略大括号以及return关键字,因为只有一个参数item，因此参数item括号省略
const arr1 = arr.filter(item => item % 2 === 1)

箭头函数中的this问题
箭头函数没有自己的this，他的this是沿着作用域链的形式往外找
例如：

<button>点我</button>

    const btn = document.querySelector("button")
    btn.onclick = function(){
        setTimeout(function(){
            console.log("----------------");
            console.log(this); //window
            console.log("----------------");
        })
        //箭头没有自己的this,箭头函数当中this是沿着作用域链的形式往外找
        setTimeout(()=>{
            console.log("+++++++++++++++++");
            console.log(this);//<button>点我</button>
            console.log("+++++++++++++++++");
        })
    }

对象的简写
ES6提供一个语法：可以简写对象的属性与属性值
当对象的key，value一样的时候，可以省略：后面的内容
例如：

    const name = "十九"
    const age = 18;
    const gender = "男"
    //正常写法
    const obj1 = {
        name: name,
        age: age,
        gender: gender,
        eat:function(){
        	console.log("吃吃吃")
        }
    }
    console.log(obj1)
    obj1.eat()
    //进行简写
    const obj2 = {
        name,
        age,
        gender,
        //方法可以简写成
        eat() {
            console.log("吃的简写")
        }
    }
    console.log(obj2)
    obj2.eat()

解构赋值

简化代码

数组的解构
语法：

const arr = [1,2,3,4]
const [a,b,c,d] = arr;
console.log(a,b,c,d);

对象的解构
语法：

const obj = {username:"十九",age:18,gender:"男"}
const {username:account,age,gender} = obj;//给username取了一个别名account
console.log(acount,age,gender)

扩展运算符

扩展数组
语法：

const arr = [1,2,3,4,5,6]
console.log(arr)
console.log("----------")
console.log(...arr)
consoel.log("++++++++++")
console.log([...arr])

扩展对象
语法：

//一般用于合并对象，也可以合并数组
const obj1 = {
	name1:"十九",
	age1:18,
	address:{
		place1:"厦门",
		place2:"深圳"
	}
}
const obj2 = {
	name2:"X.I.X",
	age2:18
}
console.log({...obj1,...obj2})

合并数组
语法：

const arr1 = [1,2]
const arr2 = [3,4]
console.log = ([...arr1,...arr2])

参数默认值

简单的回顾
arguments => 用来干嘛的？
回顾：

function fn(){
	console.log(arguments)
}
fn(1,2,3,4,5,6)

参数

剩余参数
例如：

function fn(a,...rest){	//1传给a，剩余的传过来给rest
	console.log(rest)
}
fn(1,2,3,4,5