ES6入门

已于 2023-09-23 14:00:48 修改
阅读量458 收藏
点赞数 1
分类专栏： html css js 文章标签： javascript 前端 es6
于 2022-06-07 20:15:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nefss_/article/details/125172435
版权

目录结构

ES6介绍

1996年11月，在ECMA的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262，我们现在使用的JavaScript符合ECMA标准化。
1998年6月，ECMAScript 2.0版发布。
2009年12月，ECMAScript 5.0版发布。
2015年6月，ECMAScript 6.0版发布，叫做ES6，或者以年号命名叫做ECMAScript 2015。
从2015年6月之后发布的版本统一叫做ES6。

ES6中的变量和常量

1. let关键字

作用：用于声明变量，代替var关键字
特点：有块级作用域；不存在变量提升；暂时性死区

块级作用域：

  • 块级作用域在ES6中才有，一对大括号就是一个块级作用域
  • 在大括号中使用let声明的变量出了大括号就无效了
  • 在循环、分支结构中使用let声明的变量，出了这个循环、分支也会无效

例1：
let声明的变量出了大括号就无效

{
	let num=10;
}
//报错"num is not defined"
console.log(num);

var声明的变量全局有效

{
	var num=10;
}
//可以打印num的值
console.log(num);

例2：
在循环结构中使用let声明的变量，出了这个循环无效

for(let i=0;i<5;i++){
}
//报错"i is not defined"
console.log(i);

var声明的变量全局有效

for(var i=0;i<5;i++){
}
//可以打印i的值
console.log(i);

变量提升：
例：
let没有声明的变量不能直接输出

//打印会报错“cannot access 'num' before initialization”
console.log(num);
let num=10;

var会将声明变量提到前面

//打印结果为undefined
console.log(num);
var num=10;

将声明提到了前面，如下代码：

var num;
console.log(num);
num=10;

暂时性死区：
let声明的变量会被绑定在块级作用域内，不受外部的影响

var num=1;
{
	//因为暂时性死区导致这里的num不受外界影响，而内部的num还未定义，所以这里会报错"Cannot access 'num' before initialization"
	console.log(num);
	let num=10;
}

适用let的场景：

循环为所有按钮绑定点击事件，在事件中输出当前i的值
例：

<body>
	<button>btn0</button>
	<button>btn1</button>
	<button>btn2</button>
</body>

使用let声明变量可以正确输出

<script>
	//获取到所有button按钮
	var btns=document.querySelectorAll('button');
	for(let i=0;i<btns.length;i++){
		//给每个按钮绑定点击事件
		btns[i].onclick=function(){
			console.log(i);
		}
</script>

使用var声明变量，由于没有暂时性死区和块级作用域，循环走完后i的值为3，每次点击按钮都会打印3，如下所示：

```javascript
<script>
	//获取到所有button按钮
	var btns=document.querySelectorAll('button');
	for(var i=0;i<btns.length;i++){
		//给每个按钮绑定点击事件
		btns[i].onclick=function(){
			//每次都打印3
			console.log(i);
		}
</script>

内存图：
在这里插入图片描述

2. const关键词

作用：用于声明常量
特点：有块级作用域；声明常量时必须赋值，且赋值后不能修改

块级作用域
例：

{
	const PI=3.1415;
}
//作用和let一样,打印报错，"PI is not defined"
console.log(PI);

声明常量时必须赋值
例：

//报错“Missing initializer in const declaration”
const PI;

赋值后不能修改
例：

const PI=3.1415;
//报错“Assignment to constant variable”
PI=3.14159264;

3. var、let、const的区别

  • var和let都能声明变量，但是适用不同，在ES6以后推荐使用let声明变量
  • let的特殊点：不能提升变量（保证程序的逻辑通畅）、有块级作用域（避免变量交叉污染）、暂时性死区
  • const用来声明常量，常量不能改变值，有块级作用域，不能提升，初始化时常量时必须赋值
  • 推荐在代码中尽量使用const

解构赋值

概念：结构赋值就是将数组或者对象中的单元分别取出并保存在单独的变量中。

1、对象解构

变量（常量）名和对象的属性名一致

例：

const{name,age,gender}={id:1,name:"小明",age:8}; 
console.log(name); // 小明
console.log(age);  	// 8
console.log(gender); // undefined

这里的变量（常量）名可以设置别名，不过使用了别名后，原名就不能使用了，如下代码所示：

const{name:username,age,gender}={id:1,name:"小明",age:8}; 
console.log(username); // 小明
console.log(age);  	// 8

2、数组解构

例：
这里前面的逗号代表前面有一个变量，所以name对应小明，age对应8

const[,name,age]={1,"小明",8};
console.log(name); // 小明
console.log(age); // 8

注意：这里的变量名可以随意设置，使用的是数组索引进行匹配的

扩展运算符

扩展运算符 …： 把后面多的值以数组的形式保存起来
例：

const[n1,n2,...n]=["张三","李四","王五","赵六","韩七"];
console.log(n1); // 张三
console.log(n2); // 李四
console.log(n); // ["王五","赵六","韩七"]

字符串扩展

1、模板字符串

模板字符串:使用反引号声明的字符串
例：

let str=`你好我好大家好！`

两个优点：

  • 字符串可以换行（方便声明标签结构）
  • ${}：方便解析变量或者函数

例：

<div></div>

const{name,age,gender}={id:1,name:"小明",age:8}; 
function sayHi(){
	return `hi`;
}

//使用 ``拼接字符串可以换行，书写方便, 清晰
let str=`
	<ul>
		<li>姓名：${name}</li> //使用${}拼接变量（常量）
		<li>年龄：${age}</li>
		<li${sayHi}></li> 	//使用${}调用函数
	</ul>
	`
document.querySelector('div').innerHTML=str;

2、字符串扩展函数

常用的字符串函数：

1）includes(）：判断一个字符串是否包含另一个字符串

例：

const str='abcdef';
str.includes('a'); //true,str中包含'a'
str.includes('g'); //false,str中不包含'g'

2）startWith() 和 endsWith()
startWith()：判断一个字符串是否以另一个字符串开始
endsWith()：判断一个字符串是否以另一个字符串结束

例：

const str='abcdef';
str.startWith('abc'); //true,str是以'abc'开头
str.startWith('adb'); //false,str不是以'adb'开头
str.endWidth('ef'); //true,str是以'ef'结尾

3.repeat()：返回一个新的字符串，表示将原字符串重复n次
例：

const str='abcdef';
const str1=str.repeat(2); //返回一个新的字符串：abcdefabcdef

数组函数扩展

1、数组扩展函数

1）includes：判断一个数组中是否包含某个值

例：

const arr=['a',10,20,'111','abc'];
arr.includes(10); //true,arr中包含10
arr.includes(123); //false,arr中不包含123

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

const arr=['a',10,20,'111','abc'];
//item：代表每次循环得到的当前单元的值
//index：代表每次循环当前单元的索引
let result=arr.find(function(item,index){
	if(item>10){
		return item;
	}
})
console.log(result);  //20

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

const arr=['a',10,20,'111','abc'];
let result=arr.find(function(item,index){
	if(item>10){
		return index;
	}
})
console.log(result);  //2

2、形参默认值

形参默认值：声明函数时给形参设置一个默认值
例：

function add(a=10,b=20){
	reutrn a+b;
}
console.log(add()); //不传入实参时使用默认值，30
console.log(add(1,3)); //传入实参时使用实参，4

形参默认值练习：

	let titles=[
            '一大仙在公安局"跳大仙"对周围人发功说：“你今晚必死无疑”',
            '小偷给关二爷下跪，给民警送锦旗',
            'nginx反向代理配置中你不知道的二三事',
            '女子怀疑家中进小偷，报警后发现是自己老公',
            '美国男子抢劫中餐厅，因言语不通空手而归'
        ];
        let str="";
        for(let i=0;i<titles.length;i++){
            str+=`
            <li>
                <a href="#">${titleHandle(titles[i])}</a>
            </li>
            `;
        }
        document.querySelector('ul').innerHTML=str;
        //封装一个函数对标题进行处理
        //判断标题长度是否超过20个字符，如果没有超过不处理
        //如果超过20个字符，则截取20个字符，再拼接...

        //title表示要处理的标题
        function titleHandle(title,length=15,mark='~~'){
            if(title.length<length){
                return title;
            }else{
                return title.substr(0,length)+mark;
            }
        }

3、解构赋值和形参默认值配合

//定义函数时参数使用对象形式
function add({x,y=10}){
	console.log(x+y);
}
//传入实参是对象形式
//key必须和定义函数时制定的变量名一致
add({x:10});
add({x:10,y:15});

4、rest参数

es6之前调用函数时可以传入不定数量的参数,通过在函数体内使用arguments获取多个参数
es6中取消了arguments，使用扩展运算符来接收参数

例：
es6之前

function show(){
	console.log(arguments);
}
show(1,3,4,'小明') //arguments以伪数组形式保存了show中所有的参数

es6时

//...扩展运算符
//args形参，可以修改为任意变量名
function show(...args){
	console.log(args);
}
show(1,3,4,'小明') //args以数组形式保存了show中所有参数

箭头函数

写法：

1、普通函数和箭头函数写法

function show(){}  //普通函数
let show = () => {} // 箭头函数

2、匿名普通函数和匿名箭头函数写法

function (){} //匿名普通函数
() => ()  //匿名箭头函数

箭头函数特点：

1）箭头函数不能作为构造函数

构造函数：

function Person(name,age){
	this.name=name;
	this.age=age;
	this.sayHi=function(){}
}
let p=new Person('小明',9);

以上构造函数改为箭头函数的形式会报错。

2）箭头函数没有arguments,要使用可变参数可以使用rest方式

箭头函数在Es6出现，使用可变参数不再使用arguments,而是使用rest方式

let show=(...agrs)=>{
	console.log(args);
}
show(1,2,3); //[1,2,3]

3）箭头函数没有this对象，在箭头函数中的this指的函数外层的对象
例：
普通函数中：

<button>btn</button>

<script>
document.querySelector('button').onclick=function(){
	//这里this指事件的调用者：button
	console.log(this);
}
<script>

箭头函数中：

<button>btn</button>

<script>
document.querySelector('button').onclick=()=>{
	//这里this指外层的对象：window
	console.log(this);
}
<script>

4）如果函数体只有一句并且设置了返回值，则不需要使用大括号，不需要return
例：

let add=(a,b)=>{
	return a+b;
}

上面的代码可以写为：

  let add(a,b)=>a+b;

5）如果函数中只有一个参数，则不需要写小括号
例：

let add=(a)=>{
	return a+10;
}

上面的代码可以写为：

 let add = a => a+10;

定义对象的简洁方式

声明对象时，如果值的变量名和属性名相同，可以只写属性不写值
例1：

let goods="键盘";
let obj={
//前面的goods代表对象的属性，后面的goods代表前面的变量
	goods:goods;
}
obj.goods; //键盘

上面代码可以写为：

let goods="键盘";
let obj={
	goods;
}
obj.goods; //键盘

例2：

const id=001;
const name="小明";

const obj={
	id;
	name;
	ad(){}
}

上面ad()函数如果使用箭头函数可以写为：

const id=001;
const name="小明";

const obj={
	id;
	name;
	ad:()=>{}
}
小矮多
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6查找数组元素下标的两种方法
举世武双的博客
05-25 2万+
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
es6入门教程
04-17
ECMAScript 6入门》是一本开源的JavaScript语言教程，全面介绍ECMAScript 6新引入的语法特性。本书覆盖 ES6/ES7 与 ES5 的所有不同之处，对涉及的语法知识给予详细介绍，并给出大量简洁易懂的示例代码。本书为中级...
ES6中的一个小规范和Vue2+element ui 导航栏的一个小错误
lyxzmlmy的博客
03-30 189
ES6箭头函数 和 element ui 的一个小问题
findIndex数组条件判断
weixin_44705688的博客
12-12 674
findIndex() 方法 findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置 let info = [2,6,7,9] let idx = info.findIndex((ele: any) => { return ele === 2 // 判断条件，返回符合条件第一个元素的下标，后续就不再运行，都不符合将返回-1 }) ...
Error in v-on handler: "TypeError: Cannot read property 'findIndex' of undefined"
yhr0322的博客
10-16 1万+
Error in v-on handler: “TypeError: Cannot read property ‘findIndex’ of undefined” 报错“findindex‘ of undefined 一般来说就是findindex前边的不是数组 要不就是单词拼写有错 或者是内部的条件错了 大部分都是粗心导致的 ...
ES6中常用数组方法总结
Misnice的博客
02-20 3239
1.Array.find() array.find()返回值是第一个符合条件的数组子项，找到符合条件的之后就不在继续遍历。 let arr = [{ name: '张三', age: 1 }, { name: '李四', age: 2 },{ name: '王五', age: 3 }] let findItem = arr.find(item => item.name === '张三') // 返回子项 console.log(findItem) // { name: '张三', age: 1
es6入门.xmind
01-29
es6的入门思维导图,java程序员的前端基本需要掌握的知识
es6入门.zip
08-28
**ES6 入门详解** ES6，全称 ECMAScript 2015，是 JavaScript 语言的一个重要版本更新，引入了许多新特性，极大地提高了开发效率和代码质量。本教程将带你逐步深入理解 ES6 的核心概念和用法。 **1. 变量声明：let...
es6根据对象属性获取到当前值的index
weixin_43166729的博客
10-27 742
var index = 数组.findIndex(item=> item.value=== id);//item.value=== 0是条件
es6获取数组中，键值对的下标和对应内容
github_38696818的博客
03-14 2万+
const fruits = [ {name: 'apples', quantity: 2},    {name: 'bananas', quantity: 0},    {name: 'cherries', quantity: 5}];const index = fruits.findIndex(fruit =&gt; fruit.name === 'cherries');console.lo...
es6查找指定字符下标，并把第一个字符前面的内容删掉
浩星
03-01 1409
前言： 用es6实现查找指定字符下标，并把第一个字符前面的内容删掉。 原字符串 ： abc-123-bcd-444 目标字符： 123-bcd-444 实现方法： let abc = 'abc-123-bcd-444' let mmm = abc.indexOf('-') let nnn = abc.substring(abc.indexOf('-')+1, abc.length) 可以看到：nnn就是我们想要的内容 最终结论方法：...
ES6——find()、findindex()、indexof、includes()以及some
NanChen的博客
09-28 1317
find let ary = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '李四' } ]; /* let target = ary.find((item,index)=>item.name === '李四2'); */ let target = ary.find(
vue.js中报错： TypeError: Cannot read property 'indexOf' of undefined
热门推荐
感恩、奋进、自信
07-25 10万+
[Vue warn]: Error when evaluating expression "name.indexOf('jack') >= 0": TypeError: Cannot read property 'indexOf' of undefined ypeError: Cannot read property 'indexOf' of undefined，从这句话中indexOf
findIndex语法
weixin_44462907的博客
03-21 489
findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。 findIndex() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。 如果没有符合条件的元素返回 -1 注意: findIndex() 对于空数组，函数是不会执行的。 注意: fin...
findIndex() 方法
Yetian_2000的博客
11-06 1万+
findIndex(fn) 方法 : （注意：1.不需要return 2.参数fn就是检索条件 ） 返回 在数组中查找符合条件第一个元素的index索引。 var arr=[12, 16, 18, 20] let index = arr.findindex((item)=>{ item >= 18 }) // 打印index为2 ...
js通过数组内容来获取数组下标
weixin_44867717的博客
07-05 1万+
js
解决findindex、includes等不兼容ie的解决方案附代码
m0_45456399的博客
06-03 4835
解决findindex、includes兼容ie方法附代码 前提：今天遇到兼容性问题，写了半天代码，在谷歌上测试没问题，然而被告知还要考虑IE的兼容！ 瞬间爆炸，记得写了好多findIndex、includes 可怎么办，百度了好多解决办法，也没有解决。翻到了个个好的网站，上面的解决办法，参考了下，下面进入正题。 上代码！ //这个是判断 没有findindex 方法的 if (!Array.prototype.findIndex) { Object.defineProperty(Arra
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值