ES6基础语法

一、let关键字
二、const常量
[三、var 、let和const的区别](#三、var 、let和const的区别)
[四、 ==解构赋值==](#四、 ==解构赋值==)
五、字符串扩展
- [1.模板字符串 ``我叫" ${name}"，今年"$ {age}"岁``](#1.模板字符串 我叫"${name}"，今年"${age}"岁)
- [2.includes() 返回布尔值](#2.includes() 返回布尔值)
- [3.startsWith() 和 endsWith()返回布尔值](#3.startsWith() 和 endsWith()返回布尔值)
- [4.padStart() 和 padEnd()](#4.padStart() 和 padEnd())
六、数组扩展
- [1.includes() 返回布尔值-全等判断](#1.includes() 返回布尔值-全等判断)
- [2.find 返回满足条件的第一个值](#2.find 返回满足条件的第一个值)
- 3.findIndex返回满足条件的第一个值的索引
七、定义对象的简洁方式
八、函数扩展
九、箭头函数（）=>{}
十、三点表达式（展开表达式）

一、let关键字

没有变量提升；
强制将变量提升会报错。
有块级作用域；
在大括号{}内部声明的变量，大括号外面会失效；
在循环体中用let声明的变量,在大括号之外一样会失效。
不能重复声明变量

javascript 复制代码

let i = 10;
console.log(i);
let i ='abc';//已经声明过的变量，再次声明会报错

二、const常量

1、概念：一旦被赋值就不能改变量就是常量；

javascript 复制代码

const name="池震";
console.log(name);
name = "温岭";//常量不能重复赋值
console.log(name);//此处会报错

2、特点：

没有常量提升；
常量也有块级作用域；
必须要有初始化值；
能用常量就用常量，因为常量速度更块

三、var 、let和const的区别

var 和let都能声明变量，但let更加严谨，es6推荐使用let来声明变量；
let的特殊点：不能提升变量（保证逻辑通畅）；有块级作用域（避免变量交叉污染）；不能重复声明保证变量的唯一性。
const用来声明常量：不能改变，不能提升，有块级作用域，有初始值。

四、解构赋值

概念：解构赋值就是将对象或数组中的数据拆解出来分别赋给几个变量/常量。

javascript 复制代码

//将对象中的数据解构赋值到三个常量中；
//注意：变量、常量名要和对象的属性名一致；
const{name,gender,type}={name:'瑞文',gender:'女',type:'战士'};
console.log(name);
console.log(gender);
console.log(type);
//将数组中的数据解构赋值到几个变量中；
const [cn,wen,lala,aaa]=['wenjain',{name:'maoning'},123,[12,34,45,56,56]];
console.log(cn);
console.log(wen);
console.log(lala);
console.log(aaa);

正常的解构赋值：前面是对象，后面也是对象；前面是数组，后面也是数组。-----不能交叉
别名：一旦使用了别名，原名就会失效；

javascript 复制代码

//使用别名
const {name:username,age,gender:sex}={name:'婷婷',age:'18',gender:'famale'};
console.log(username);
console.log(age);
console.log(sex);
console.log(name);//使用原名会报错，name is not defined.

变量数量与对象单元不对等，按key正常赋值，没有值，则赋值为undefined。
数组中不对等，使用 ... 方式
如果使用 ... 则多余出来的盒子会以数组形式保存在最后一个变量中；

javascript 复制代码

const [a,b,...c]=[1,2,3,4,5,6,7];
console.log(a);
console.log(b);
console.log(c);
//1
2
[ 3, 4, 5, 6, 7 ]

五、字符串扩展

1.模板字符串 `我叫"${name}"，今年"${age}"岁`

使用反引号来声明的字符串就是模板字符串（Esc下面的键）
使用反引号定义字符串时，字符串中可以可以忽略单双引号的嵌套问题
在模板字符串中要输出变量可以使用 ${变量名} 的形式

javascript 复制代码

//在使用单双引号声明字符串时，一定要注意单双引号的拼配问题；
const str1 = '<a href="a.php">删除</a>';
const str2 = "<a href='a.php'>删除</a>";
//模板字符串中单双引号可以随便使用；
const str3 = `<p><a href='a.php' title = "删除操作">删除</a></p>`;
const {name,age}={name:'炸弹人',age :200};
const str4 = '我叫"'+name+'"，今年"'+age+'"岁';
console.log(str4);
//打印：我叫"炸弹人"，今年"200"岁
const str5 = `我叫"${name}"，今年"${age}"岁`;
console.log(str5);
//打印：我叫"炸弹人"，今年"200"岁

2.includes() 返回布尔值

includes() 判断一个字符串是否包含另一个字符串中

str.includes(char): 判断char是否在str中，存在则返回true，不存在则返回false

javascript 复制代码

const str='abgdfajsd;fjlsafj';
const inner = 'ab';
console.log(str.includes(inner));//true

3.startsWith() 和 endsWith()返回布尔值

startsWith(): 判断一个字符串是否以另一个字符串开始
endsWith(): 判断一个字符串是否以另一个字符串结束

javascript 复制代码

const str='abgdfajsddfasdfnfjlsafj';
const star = 'ab';
const end ='fj';
const inner = 'wenjian';
console.log(str.startsWith(star));//true
console.log(str.endsWith(end));//true
console.log(str.endsWith(inner));//false

4.padStart() 和 padEnd()

padStart(): 设置字符串总长度，如果长度不够则使用某个字符填充到字符串的开头
padEnd(): 设置字符串总长度，如果长度不够则使用某个字符填充到字符串的结尾

javascript 复制代码

const str = 'abc';
const char ='-';
const s='$';
console.log(str.padStart(7,char));//----abc
console.log(str.padEnd(7,s));//abc$$$$

六、数组扩展

1.includes() 返回布尔值-全等判断

判断一个值是否存在于一个数组中返回布尔值

javascript 复制代码

const arr = ['aaa',111,222,3];
const val = '222';
const vai=222;
//全等方式比较
console.log(arr.includes(val));//false
console.log(arr.includes(vai));//true

2.find 返回满足条件的第一个值

javascript 复制代码

//find返回满足条件的第一个值；
const arr = ['aaa',20,39,57,29,'bbb'];
let result = arr.find(function (item,index) {
    return item > 50;
})
console.log(result);//57

3.findIndex返回满足条件的第一个值的索引

有则索引，没有则-1

javascript 复制代码

//findIndex返回满足条件的第一个值的索引值；
const arr = ['aaa',20,39,57,29,'bbb'];
let result = arr.findIndex(function (item,index) {
    return item > 50;
})
console.log(result);//3

七、定义对象的简洁方式

javascript 复制代码

//定义对象的简洁方式：在声明对象时，值的变量名和属性相同时，可以只写属性而不写值；
const name = '许愿';
const age = 30;
const type = 'gold';
const obj = {
    name,
    age,
    type
};
console.log(obj);
//{ name: '许愿', age: 30, type: 'gold' }

八、函数扩展

1.函数声明时，指定形参的默认值；

javascript 复制代码

//1.函数声明时，指定形参的默认值；
function add (x = 1,y = 5) {
	return x+y;
}
//函数调用时，如果不设置实参，则使用默认值；
//若设置了实参，则使用实参。
console.log(add());//6
console.log(add(10,20));//30

2.解构赋值和形参默认值配合使用；

javascript 复制代码

//2.定义函数时参数使用解构赋值方式；
function add ({x,y = 10}){
    console.log(x+y);
}
//传入实参是对象形式
//key必须和定义函数时指定的变量名一致；
add({x:3});//13
add({x:10,y:15});//25

3.rest参数（可变参数）

javascript 复制代码

//3.rest参数（可变参数）：函数调用时，实参会以数组形式保存
//...args就叫rest参数；
//作用是接收可变参数；
//函数调用时，所用参数会议数组形式保存在args中；
function getData(...args) {
    console.log(args); 
}
getData(111,'abc',3,1415,'haha','hehehe');
//[ 111, 'abc', 3, 1415, 'haha', 'hehehe' ]

九、箭头函数（）=>{}

1.箭头函数不能作为构造函数;
2.箭头函数arguments不再保存实参,要使用rest参数方式；
3.箭头函数中的this指向外层函数的this；
4.箭头函数，当执行代码只有一句并设置返回值，则不需要写{}，也不需要写return
5.箭头函数，当只有一个形参时，则不需要写小括号（）；

javascript 复制代码

//箭头函数是一个匿名函数。
(x,y)=>{
	return x + y;	
}

ES6基础语法

ES6基础语法

一、let关键字

二、const常量

三、var 、let和const的区别

四、 解构赋值

五、字符串扩展

1.模板字符串 我叫"${name}"，今年"${age}"岁

2.includes() 返回布尔值

3.startsWith() 和 endsWith()返回布尔值

4.padStart() 和 padEnd()

六、数组扩展

1.includes() 返回布尔值-全等判断

2.find 返回满足条件的第一个值

3.findIndex返回满足条件的第一个值的索引

七、定义对象的简洁方式

八、函数扩展

九、箭头函数（）=>{}

十、三点表达式（展开表达式）

四、解构赋值

1.模板字符串 `我叫"${name}"，今年"${age}"岁`