ES6扩展

最新推荐文章于 2022-08-06 16:08:43 发布

Mybabyying

最新推荐文章于 2022-08-06 16:08:43 发布

阅读量144

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Mybabyying/article/details/105419700

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS两大编程思想

面向过程
面向过程就是分析出问题所需要的步骤，然后用函数把这些步骤一步步实现，使用的时候再一个个依次调用
面向对象
面向对象就是把事务分解成一个个对象，然后由对象之间分工与合作

`ES6的新增语法`

新增关键字

let

ES6新增声明变量
特点：
块级作用域

let声明的变量只在所处的块级有效（在所处大括号中有效）
在一个大括号中使用let关键字声明的变量才具有块级作用域，var关键字不具备这个特点
块级作用域可以防止循环变量变成全局变量

不存在变量提升

使用let关键字声明的变量没有变量提升，需要先声明后使用

暂时性死区

在大括号中一旦使用关键字let声明变量，这个大括号中的东西会与let进行绑定，不在与外部的声明有关系

不可重复声明

在一个块级作用域中，使用let关键字声明的变量具有唯一性，不可重复声明。例如：let a=0 声明之后，再次声明 let a =0 就会报错

const

ES6新增声明常量
特点：
具有块级作用域

使用const声明的常量在块级作用域(大括号)以外是无效的

声明常量时必须赋值

使用const声明的常量必须赋初始值

常量赋值后，值的更改

使用const 声明变量后，值不能更改
使用const 声明的数组可以通过数组的内存地址修改，但不能直接赋值更改

let、const、var 的区别

使用var声明的变量，其作用域为该语句所在的函数中，且存在变量提升现象
使用let声明的变量，其作用域为该语句所在的代码块中，不存在变量提升现象
使用const声明的是常量，在后面出现的代码中不能再修改该常量的值（数组可通过内存地址修改）

解构赋值

ES6中允许从数组和对象中提取值，按照对应位置，对应变量赋值。

数组解构

数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋值个变量

	let arr = [1,2,3]
	let [a,b,c] = arr	//解构数组arr
	console.log(a)		//输出解构赋值的变量a

如果解构不成功，变量的值会变成 undefined

	let arr = [1,2,3]
	let [a,b,c,d] = arr	//解构数组arr
	console.log(d)		//因为arr数组中只有三个值，所以这里的d是undefined

对象解构

对象解构允许使用变量的名字匹配对象的属性。匹配成功将对象属性的值赋值给变量

	let obj = {name:"zhangs",age: 20};
	let {name , age} = obj;	//对象解构方法一
	console.log(name);		//输出zhangs
	let {name :names,age:ages} = obj;	//对象解构方法二
	console.log(names);		//输出zhangs

箭头函数

ES6中新增的定义函数的方式

语法
() => {} ;
定义
const fn = () => {}
特点

函数体只有一句代码，且代码的执行结果就是返回值，可以省略大括号

const sum = (num1, num2) =>{
		 return num1+num2
	}

可简写为

const sum = (num1, num2) => num1+num2

如果形参只有一个，可以省略小括号

const sum = (num1) =>{
			console.log(num1)
		}

可简写为

const sum = num1 =>{
			console.log(num1)
		}

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。如果上下文中没有可以this指向的作用域，则this指向windos

const obj = {name: "张三"}
		function fn(){
			console.log(this);
			return ()=>{
				console.log(this)	//箭头函数不绑定this，所以箭头函数中的this绑定的是定义区域的this，也就是fn函数的this
			}
		}
const refn = fn.call(obj)  	//使用call()使obj指向 fn函数中的this
refn();

结果为：
在这里插入图片描述

剩余参数（…value）

当函数中的实参个数大于形参个数时，剩余的参数就是剩余参数；
剩余参数语法允许我们将一个不定数量的参数表示为一个数组；

const fn = (...args)=>{		//...args代表接收所有实参
			let sum = 0;
			args.forEach(item =>{	//forEach 用于循环数组，item代表每次循环的当前项
				sum += item
			})
			return sum;
		};
		console.log(fn(10,20)) 
		console.log(fn(10,20,30))

结果：
在这里插入图片描述

剩余参数和解构配合使用

	let arr = ["小米","红米","黄米"]
	let [a1, ...a2] = arr
	console.log(a1)
	console.log(a2)

结果为：
在这里插入图片描述

数组的扩展方法

数组运算符（展开语法）

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

	let arr = [1,2,3];
	console.log(arr)
	console.log(...arr) //通过...扩展运算法分隔之后，在console中“,”会被当做参数分隔运算符，也就是空格

结果为：
在这里插入图片描述

扩展运算法可应用于合并数组

传统方法

	let arr1 = [1,2,3]
	let	arr2 = [4,5]
	arr1.push(...arr2)
	console.log(arr1)

使用扩展运算符

	let arr1 = [1,2,3]
	let	arr2 = [4,5]
	let arr3 = [...arr1,...arr2]
	console.log(arr3)

结果都是一样的：
在这里插入图片描述

扩展运算符可应用于将类数组或可遍历对象（伪数组）转换为真正的数组

<body>								
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>

<script type="text/javascript">
	let div = document.getElementsByTagName('div')
	let divs = [...div]
	console.log(div)
	console.log(divs)
</script>
</body>

结果：
在这里插入图片描述

使用Array.from()，将伪数组转换为真正的数组

var arr = {
	"0":"a",
	"1":"b",
	"2":"c",
	"length":"3"
}
let arrs = Array.from(arr)	//将伪数组转换为真正的数组
console.log(arr)
console.log(arrs)

结果：
在这里插入图片描述

数组实例方法

find()方法

用于找出第一个符合条件的数组成员，如果没有找到则返回undefined

var arr = [
			{
				id:1,
				name:"小米"
			},
			{
				id:2,
				name:"红米"
			}
		]
		//通过find方法寻找id为2的数据
		let num1 = arr.find(int =>int.id == 2)
		//通过find方法寻找id为3的数据
		let num2 = arr.find(int =>int.id == 3)
		console.log(num1)
		console.log(num2)

结果为：
在这里插入图片描述

finIndex()方法

用于找出第一个符合条件的数组成员的位置(索引)，如果没有找到返回-1

	let arr = [1,2,3];
		//通过findIndex寻找数组中值为2的索引
	let num1 = arr.findIndex( int =>int == 2)	
		//通过findIndex寻找数组中值为4的索引
	let num2 = arr.findIndex( int =>int == 4)
	console.log(num1)
	console.log(num2)

结果：
在这里插入图片描述

includes()方法

判断某个数组是否包含给定的值，返回布尔值。

	let arr = [1,2,3]
		//通过includes方法判断数组中是否包含1
	let num1 = arr.includes(1)
		/通过includes方法判断数组中是否包含4
	let num2 = arr.includes(4)
	console.log(num1)
	console.log(num2)

结果:
在这里插入图片描述

String的扩展方法

模板字符串

ES6新增的创建字符串的方式，使用反引号(`)定义

特点：

可以解析变量

	let name = `小米`;
	let hi = `我是一台${name}`
	console.log(hi)

结果：
在这里插入图片描述

内容可以换行

let arr = {
			name:"小米",
			age:10
		}
		let html = `
			<div>
				<span>${arr.name}</span>
				<span>${arr.age}</span>
			</div>
		`;
	console.log(html)

结果：
在这里插入图片描述

可以调用函数

	const fn =()=>{
		return '你好'
	}
	let int = `你好哦, ${fn()}`
	console.log(int)

结果：
在这里插入图片描述

String实例方法

startsWith()

判断参数字符串是否在原字符串的头部，返回布尔值

	let str = 'xiaomi'
	let str1 = str.startsWith('x')
	let str2 = str.startsWith('i')
	console.log(str1)	//返回true	
	console.log(str2)	//返回false

endsWith()

判断参数字符串是否在原字符串的尾部，返回布尔值

		let str = 'xiaomi'
		let str1 = str.endsWith('i')
		let str2 = str.endsWith('x')
		console.log(str1)		//返回true
		console.log(str2)		//返回false

repeat()

将原字符串重复n次，返回一个新字符串

	let str = 'x'
	let str1 = str.repeat(3)
	console.log(str1) 	//返回新字符串'xxx'

Set数据结构

ES6提供了新的数据结构set。类似于数组，但其成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成set数据结构
const s = new Set();
Set 函数可以接受一个个数组作为参赛，用来初始化
const set = new Set( [1，2，3 ] )
例：

	const s1 = new Set();
	console.log(s1.size);
	const s2 = new Set(["a","b","c","c"]) //重复的c不会显示
	console.log(s2)

结果：
在这里插入图片描述

Set实例方法

const s2 = new Set()；

s2.add(value)
向set结构中添加值
s2.delete(value)
删除set结构中的值
s2.has(value)
判断set结构中是否有这个值，返回布尔值
s2.clear()
清除set结构中所有的值

遍历Set值

Set使用forEach()遍历

		const s2 = new Set(["a","b","c","c"]) //重复的c不会显示
		s2.forEach(int =>console.log(int))	//使用forEach遍历s2

结果：
在这里插入图片描述

Mybabyying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6扩展

JS两大编程思想面向过程面向过程就是分析出问题所需要的步骤，然后用函数把这些步骤一步步实现，使用的时候再一个个依次调用面向对象面向对象就是把事务分解成一个个对象，然后由对象之间分工与合作ES6的新增语法letES6新增声明变量特点：块级作用域let声明的变量只在所处的块级有效（在所处大括号中有效）在一个大括号中使用let关键字声明的变量才具有块级作用域，var关键字不具...
复制链接

扫一扫