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.模板字符串 ``我叫"{name}"，今年"{age}"岁``](#1.模板字符串
- 六、数组扩展
-
- [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));//true3.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));//false4.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));//true2.find 返回满足条件的第一个值
javascript
//find返回满足条件的第一个值；
const arr = ['aaa',20,39,57,29,'bbb'];
let result = arr.find(function (item,index) {
return item > 50;
})
console.log(result);//573.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));//302.解构赋值和形参默认值配合使用；
javascript
//2.定义函数时参数使用解构赋值方式；
function add ({x,y = 10}){
console.log(x+y);
}
//传入实参是对象形式
//key必须和定义函数时指定的变量名一致；
add({x:3});//13
add({x:10,y:15});//253.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;
}十、三点表达式（展开表达式）
