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;	
}

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

相关推荐
JUNAI_Strive_ving8 分钟前
番茄小说逆向爬取
javascript·python
看到请催我学习17 分钟前
如何实现两个标签页之间的通信
javascript·css·typescript·node.js·html5
twins352037 分钟前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js
qiyi.sky1 小时前
JavaWeb——Vue组件库Element（3/6）：常见组件：Dialog对话框、Form表单（介绍、使用、实际效果）
前端·javascript·vue.js
煸橙干儿~~1 小时前
分析JS Crash（进程崩溃）
java·前端·javascript
哪 吒1 小时前
华为OD机试 - 几何平均值最大子数（Python/JS/C/C++ 2024 E卷 200分）
javascript·python·华为od
安冬的码畜日常1 小时前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕（下）—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
l1x1n02 小时前
No.3 笔记 | Web安全基础：Web1.0 - 3.0 发展史
前端·http·html
Q_w77422 小时前
一个真实可用的登录界面！
javascript·mysql·php·html5·网站登录
昨天；明天。今天。2 小时前
案例-任务清单
前端·javascript·css
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache