05-ES6

214 阅读5分钟

ECMAScript

一项脚本语言的标准化规范

一、 变量

1. let

  • 块级作用域(大括号的作用域)

    		if (true) {
    			let a = 10;
    		}
    		console.log(a);		// a is not defined
    
  • 不存在变量提升

    		console.log(a);		// a is not defined
    		let a = 10;
    
  • 暂时性死区

    		var num = 100;
    		if(true) {
    			console.log(num);		// Cannot access 'num' before initialization 变量没有定义
    			let num = 2;		// 暂时性死区 num会和 if 绑定在一起
    		}
    		console.log(num);		// 100
    

2. const

  • 块级作用域

    		if (true) {
    			const a = 10;
    		}
    		console.log(a);		// a is not defined
    
  • 声明变量时必须赋值

    		const i;		// Missing initializer in const declaration
    

3. var let const 的区别

红宝石总结区别

var定义变量let定义变量const定义常量
作用域函数作用域:局部变量:函数退出时就会销毁块作用域(大括号)块作用域
声明提升:函数定义会提升到顶部❌暂时性死区
全局作用域下成为window对象的属性
冗余声明
1. 声明变量的同时也必须初始化变量 2. 可以修改其内部属性,但其指向的地址不可修改
迭代变量

二、解构赋值

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

    let [a, b, c] = [1, 2, 3];
        console.log(a)		// 1
        console.log(b)		// 2
        console.log(c)		// 3
        console.log(e)		// undefined
    

三、 箭头函数

新增定义函数的方法

简化函数定义语法

() => {}

const fn = () => {}

形参 => 函数体

		const fn = () => {
			console.log(123)
		}
		fn();
  • 函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数的大括号可以省略

    		const sum = (n1, n2) => n1 + n2;
    		result = sum(1, 2);
    		console.log(result);		// 3
    
  • 形参只有一个 可以省略小括号

    		const sum = n => alert(n);
    		sum(3);
    

1. this

箭头函数不绑定this,箭头函数没有自己的this关键字

箭头函数中的this指向箭头函数定义位置中的this

		function fn () {
			console.log(this);		//  {name: "hii"}
			return () => {
				console.log(this)	//  {name: "hii"}
			}
		}
		
		const obj = {name: 'hii'};

		const resFn = fn.call(obj);	//切换this指向 使fn中的this指向obj的对象
									// 用resFn接收fn的返回结果
		resFn();
		var obj = {
			age: 20,
			say: () => {
				alert(this.age)		// this指向的是箭头函数定义区域的this 
									// 当前函数定义在obj对象里面 但obj是一个对象 无法产生作用域
									// 所以这个箭头函数定义在了全局作用域下 即windows
									// 所以这个this函数定义在了windows下 windows没有age属性 即undefined
			}
		}

		obj.say();		// undefined

四、剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

		const sum = (...args) => {		// 三个点代表了代表接收了所有的实参
			let total = 0;
			args.forEach(item => total += item);		// forEach 循环数组 数组当中有多少个值  这个回调函数就会被执行多少次
										// item 当前循环的当前项
			return total;
		};
		console.log(sum(10, 20));		// 30
		console.log(sum(10, 20, 30));		// 60
  • 和解构配合使用
		let ary = ['张三', '李四', '王五'];
		let [s1, ...s2] = ary;
		console.log(s1);	// 张三
		console.log(s2);	// (2) ["李四", "王五"]

五、内置对象扩展

1. Array扩展方法

1). Array

  • 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let ary = [1, 2, 3];
...ary // 1, 2, 3 参数序列
console.log(...ary); // 1 2 3 逗号被看做参数分隔符
console.log(1, 2, 3); // 1 2 3
  • 合并数组
  1. 		let ary1 = [1, 2, 3];
       		let ary2 = [3, 4, 5];
       		// ...ary1		// 拆分 1, 2, 3这样的数组
       		// ...ary2		// 拆分 3, 4, 5
       		let ary3 = [...ary1, ...ary2];
       		console.log(ary3);		// Array(6) {1, 2, 3, 3, 4, 5}
    
  2. .push


		let ary1 = [1, 2, 3];
		let ary2 = [3, 4, 5];
		ary1.push(...ary2);
		console.log(ary1);		// (6) [1, 2, 3, 3, 4, 5]
  • 将伪数组转换为真正的数组

    		var oDivs = document.getElementsByTagName('div');
    		console.log(oDivs);		// 伪数组 图放下面
    		var ary = [...oDivs];
    		console.log(ary);		// 真实数组
    

2). Array.from( )

  • 将伪数组转换成一个真正的数组

    		var arrayLike = {
    			"0": "a",
    			"1": "b",
    			"2": "c",
    			"length": 3
    		}
    		var ary = Array.from(arrayLike);
    		console.log(ary);		// (3) ["a", "b", "c"]
    
  • 接收第二个参数,作用对每个元素进行处理 将处理后的值放入返回的数组

    		var arrayLike = {
    			"0": "5",
    			"1": "6",
    			"2": "7",
    			"length": 3
    		}
    		var ary = Array.from(arrayLike, item => item *2);
    		console.log(ary);		// (3) [10, 12, 14]
    

3). find( )

​ 找出数组中第一个符合条件的对象 没有找到就返回undefined

let target = ary.find((item, index) => item.id == 2);		// *item代表当前循环到的值 index代表循环到的索引*
		var ary = [{
			id: 1,
			name: '张三'
		},
		{
			id: 2,
			name: '李四'
		}];
		var target = ary.find(item => item.id == 2);
		console.log(target);		// id: 2 name: "李四"

4). findIndex( )

​ 用于找出第一个符合条件的数组成员的位置,如果没有找到返回**-1**

let index = ary.findIndex((value, index) => value > 9);
		var ary = [1, 2, 8, 11, 15];
		var target = ary.find(item => item > 9);
		console.log(target);		// 3

5). includes( )

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

[1, 2, 3].includes(2) // true 
[1, 2, 3].includes(4) // false
		var ary = [1, 2, 8, 11, 15];
		var target = ary.includes(11);
		console.log(target);		// true

2.String的扩展方法

1). 模板字符串

  • 解析变量

    		let name = `Lisa`;
    		let sayHello = `Hello, I'm ${name}`;
    		console.log(sayHello);		// Hello, I'm Lisa
    
  • 换行

    		let result = {
    			name: "Lisa",
    			age: 20
    		};
    
    		let html =`
    			<div>
    				<span>${result.name}</span>
    				<span>${result.age}</span>
    			</div>
    		`;
    		console.log(html);
    

  ![](E:\EPInterest\js高阶\笔记\img\屏幕截图 2021-01-26 002910.jpg)

  • 调用函数

    		const fn = () => {
    			return `我是fn函数`
    		};
    
    		let html = `我是模板字符串 ${fn()}`;
    
    		console.log(html);		// 我是模板字符串 我是fn函数
    

2). startsWith( ) 和 endsWith( )

  • startsWith():表示参数字符串是否在原字符串的头部,返回布尔值

  • endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值

3). repeat( )

  • 将原字符串重复n次,返回一个新字符串。
'x'.repeat(3) // "xxx" 
'hello'.repeat(2) // "hellohello"

3. set 数据结构

类似于数组,但是成员的值都是唯一的,没有重复的值。

  • 本身是一个构造函数,用来生成 Set 数据结构

    const s = new Set();
    
  • Set函数可以接受一个数组作为参数

    		const s1 = new Set([1, 2, 5]);
    		console.log(s1.size);		// 3
    
    		// 数组去重
    		const s2 = new Set([1, 2, 2, 5]);
    		console.log(s2.size);		// 3
    
    		const s3 = new Set([1, 2, 2, 5]);
    		const s = [...s3];
    		console.log(s);		// (3) [1, 2, 5]
    

1). 实例方法

  • add(value)添加某个值,返回 Set 结构本身
  • delete(value)删除某个值,返回一个布尔值,表示删除是否成功
  • has(value):返回一个布尔值,表示该值是否为 Set 的成员
  • clear()清除所有成员没有返回值

2). 遍历 forEach

		const s1 = new Set([1, 2, 5]);
		s1.forEach(value => console.log(value));		// 1 2 5