ES6基础语法

molly cheung2024-04-13 11:57

ES6基础语法

一、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的区别

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

四、 解构赋值

  1. 概念：解构赋值就是将对象或数组中的数据拆解出来分别赋给几个变量/常量。
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);
  1. 正常的解构赋值：前面是对象，后面也是对象；前面是数组，后面也是数组。-----不能交叉
  2. 别名：一旦使用了别名，原名就会失效；
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.
  1. 变量数量与对象单元不对等，按key正常赋值，没有值，则赋值为undefined。
  2. 数组中不对等，使用 ... 方式
    如果使用 ... 则多余出来的盒子会以数组形式保存在最后一个变量中；
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;	
}

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

相关推荐
清灵xmf15 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据21 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_3901617730 分钟前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理：Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法，脚手架，父子传参，refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解