欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6中新增语法

程序员文章站 2022-06-15 20:10:03
...

一、声明变量

1.let

作用:声明变量
特点

  • 只在所处块级(一对{}中的区域)有效(var不行)
  • 防止循环变量成全局变量
  • 不存在变量提升(只能先声明,再使用)
  • 暂时性死区
if(true) {
	let a = 10;
}
console.log(a); //a is not defined

经典面试题
比较一下:

  1. var用法(输出2 2)
    ES6中新增语法
  2. let用法(输出0 1)
    ES6中新增语法

2.cosnt

作用:声明常量
特点

  • 具有块级作用域
  • 声明时必须赋初值
  • 赋值后不可修改

var、let、cosnt区别

ES6中新增语法

二、解构赋值

ES6允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。

1.数组解构

允许按照一一对应的关系从数组提取值,然后赋值给变量!

let ary=[1,2,3]
let [a,b,c]=ary;//这个中括号在等号左边,代表解构,从数组中提取值(不代表数组)
console.log(a);//1
console.log(b);//2
console.log(c);//3

2.对象解构

属性匹配,变量名匹配对象中属性的名字,匹配成功,就将对象中属性的值赋给变量

  1. 写法一
let person = { name:"lily", age:20 };
let { name, age } = person;
console.log(name);//lily
console.log(age);//20
  1. 写法二(修改变量名)
let person = { name:"lily", age:20 };
let { name:myName, age:myAge } = person;//myName,myAge属于别名
console.log(myName);//lily
console.log(myAge);//20

三、箭头函数

ES6新增的定义函数的方式

() => { }
const fn = () => { }

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

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

形参只有一个,可以省略小括号

const fn = v => v;

箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
一个例子

var age = 10;
var obj = {
	age: 20,
	say: () => {
		alert(this.age)
	}
};
obj.say();//弹出10

PS:对象是不产生作用域,所以箭头函数被定义在了全局作用域下,调用时,this指向的是window

四、剩余参数

讲一个不定数量的参数定义成一个数组

function sum(first, ...args) {
	console.log(first);//10
	console.log(args);//[20, 30]
}
sum(10, 20, 30);
与解构配合使用

let students = [‘lily’, ‘lily1’, ‘lily2’];
let [s1, …s2] = students;
console.log(s1);//‘lily’
console.log(s2);//[‘lily1’,‘lily2’]

五、扩展运算符

与剩余参数相反,将数组或对象转为用逗号分隔的参数序列

let ary = [1, 2, 3];
...ary // 1,2,3
console.log(...arg);// 1 2 3

应用

  1. 合并数组
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4]

或者:
arr1.push(arr2);
  • 将伪数组转换成真正的数组
let allDiv = document.getElementsByTagName("div");
allDivList = [...allDiv]

六、Array的扩展方法

1.Array.from()

同上,将伪数组转换成真正的数组

let arrayLike={
	'0': 'a',
	'1': 'b',
	'2': 'c',
	length: 3
}
let arr2=Array.from(arrayLike);//['a', 'b', 'c']
let arr2=Array.from(arrayLike,item=>item+'1');//['a1', 'b1', 'c'1]

2.find()

找到第一个符合条件的数组成员,未找到返回undefined

let res = array.find((item,index) => item.id == 2);//返回第一个id为2的对象

3.findIndex()

找到第一个符合条件的数组成员的位置,未找到返回-1

let res = array.findIndex((item,index) => item.id == 2);//返回第一个id为2的对象索引

4.includes()

表示某个数组是否包含给定的值,返回布尔值

[1,2,3].includes(2); //true

七、模板字符串

模板字符串可以解析变量

let name = 'lily'
let string = 'hello,${name}';//"hello,lily"

模板字符串可以调用函数

const sayHello = function () {
	return "hhhh"
}
let string = 'hello,${sayHello()},lily';//"hello,hhhh,lily"

八、String扩展方法

  • startsWith() :判断参数字符串是否在原字符串头部,返回布尔值
  • endsWith():~~~尾部
let str = 'hello world'
str.startsWith('hel');//true
  • repeat(n):表示将原字符串重复n次,返回一个新的字符串
'x'.repeat(3);//"xxx"

九、Set数据结构

类似于数组,但是成员唯一,无重复值

const s = new Set();
const set = new Set([1, 2, 3, 4, 4])
console.log(set.size);//4

可以利用Set去重
实例方法

  • add(value):添加某个值,返回本身
  • delete(value):删除某个值,返回布尔值
  • has(value):判断是否为其成员,返回布尔值
  • clear():清除所有成员,无返回值

遍历
与数组一样,有forEach方法,用于对每个成员执行某种操作,无返回值

相关标签: # JavaScript