ES6---学习笔记(一)

ES6

  • 1、let 关键字
  • 2、const 关键字
  • 3、变量和对象的解构赋值
  • 4、模板字符串
  • 5、简化对象和函数写法
  • 6、箭头函数
    • 6.1、问题1
    • 6.2、问题2
  • 7、ES6中函数参数的默认值
  • 8、rest参数
  • 9、扩展运算符
  • 10、Symbol
    • 10.1、基本使用
    • 10.2、Symbol创建对象属性
  • 11、迭代器
    • 11.1、概述
    • 11.2、特性
    • 11.3、工作原理
    • 11.4、迭代器自定义遍历对象

1、let 关键字

let 关键字用来声明变量,使用 let 声明的变量有几个特点:

 1. 不允许重复声明;
 2. 块儿级作用域(局部变量);
 3. 不存在变量提升(let不存在,var存在);
    意思就是let定义的变量声明和变量使用遵守严格的顺序:先声明后使用;
 4. 不影响作用域链;
    什么是作用域链:很简单,就是代码块内有代码块,跟常规编程语言一样,上级代码块中的局部变量下级可用;
// let关键字使用示例:
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100; // 单个声明并赋值
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值

2、const 关键字

const 关键字用来声明常量,const 声明有以下特点:
1. 声明必须赋初始值;
2. 标识符一般为大写(习惯);
3. 不允许重复声明;
4. 值不允许修改;
   对数组元素的修改和对对象内部的修改是可以的(数组和对象存的是引用地址);
5. 块儿级作用域(局部变量);

: 声明对象类型使用 const,非对象类型声明选择 let;

3、变量和对象的解构赋值

什么是解构赋值:
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;

<script>
// ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;
// 1、数组的解构赋值
const F4 = ["大哥","二哥","三哥","四哥"];
let [a,b,c,d] = F4;
// 这就相当于我们声明4个变量a,b,c,d,其值分别对应"大哥","二哥","三哥","四哥"
console.log(a + b + c + d); // 大哥二哥三哥四哥
// 2、对象的解构赋值
const F3 = {
name : "大哥",
age : 22,
sex : "男",
xiaopin : function(){ // 常用

console.log("我会演小品!");
	}
}
let {name,age,sex,xiaopin} = F3; // 注意解构对象这里用的是{}
console.log(name + age + sex + xiaopin); // 大哥22男
xiaopin(); // 此方法可以正常调用
</script>

应用场景:
频繁使用对象方法、数组元素,就可以使用解构赋值形式;

4、模板字符串

概述:
模板字符串(template string)是增强版的字符串,用反引号(`)标识;

特点:
1、字符串中可以出现换行符;
2、可以使用 ${xxx} 形式引用变量;
<script>
// 声明字符串的方法:单引号('')、双引号("")、反引号(``)
// 声明
let string = `我也一个字符串哦!`;
console.log(string);
// 特性
// 1、字符串中可以出现换行符
let str =
`
  • 大哥
  • 二哥
  • 三哥
  • 四哥
`
; console.log(str); // 2、可以使用 ${xxx} 形式引用变量(使用了Jquery操作文档对象) let s = "大哥"; let out = `${s}是我最大的榜样!`; console.log(out); </script>

应用场景:
当遇到字符串与变量拼接的情况使用模板字符串;

5、简化对象和函数写法

概述:
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁;

<script>
// ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法
// 变量和函数
let name = "訾博";
let change = function(){
console.log("活着就是为了改变世界!");
}
//创建对象
const school = {
// 完整写法
// name:name,
// change:change
// 简化写法
name,
change,
// 声明方法的简化
say(){
console.log("言行一致!");
	}
}
school.change();
school.say();
</script>

6、箭头函数

概述:
ES6允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿名函数的定义;

特性:
1. 箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值;
2. 不能作为构造实例化对象;
3. 不能使用 arguments 变量;

箭头函数的注意点:
1. 如果形参只有一个,则小括号()可以省略;
2. 函数体如果只有一条语句,则花括号{}可以省略,函数的返回值为该条语句的执行结果;
3. 箭头函数 this 指向声明时所在作用域下 this 的值;
4. 箭头函数不能作为构造函数实例化;
5. 不能使用 arguments;
<script>
// ES6允许使用箭头(=>)定义函数
// 传统写法:无参数
var say = function(){
console.log("hello!");
}
say();//hello!
// ES写法2:无参数
let speak = () => console.log("hello 哈哈!");
speak();//hello 哈哈!
// 传统写法:一个参数
var hello = function(name){
return "hello " + name;
}
console.log(hello("訾博"));//hello 訾博
// ES6箭头函数:一个参数
let hi = name => "hi " + name;
运行结果:
console.log(hi("訾博"));//hi 訾博
// 传统写法:多个参数
var sum = function(a,b,c){
return a + b + c;
}
console.log(sum(1,2,3));//6
// ES6箭头函数:多个参数
let he = (a,b,c) => a + b + c;
console.log(he(1,2,3));//6
// 特性
// 1、箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值
const school = {
name : "大哥",
}
// 传统函数
function getName(){
console.log("getName:" + this.name);
}
// 箭头函数
getName1 = () => console.log("getName1:" + this.name);
window.name = "訾博";
// 直接调用
getName();//getName:訾博
getName1();//getName1:訾博
// 使用call调用
getName.call(school);//getName:大哥
getName1.call(school);//getName1:訾博
// 结论:箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值
// 2、不能作为构造实例化对象
// let Persion = (name,age) => {
// this.name = name;
// this.age = age;
// }
// let me = new Persion("訾博",24);
// console.log(me);
// 报错:Uncaught TypeError: Persion is not a constructor
// 3、不能使用 arguments 变量
// let fn = () => console.log(arguments);
// fn(1,2,3);
// 报错:Uncaught ReferenceError: arguments is not defined
</script>

6.1、问题1

点击 div 2s 后颜色变成粉色


<html>
<head>
<meta charset="utf-8">
<title>箭头函数的实践和应用场景title>
<style>
div {
width: 200px;
height: 200px;
background: #58a;
}
style>
head>
<body>
<div id="ad">div>
<script>
// 需求-1 点击 div 2s 后颜色变成『粉色』
// 获取元素
let ad = document.getElementById('ad');
// 绑定事件:这也是错误写法,这里的this还是window
// ad.addEventListener("click", () => {
// // ES6写法
// // 定时器:参数1:回调函数;参数2:时间;
// setTimeout(() => this.style.background = 'pink',2000);
// }
// )
// 绑定事件
ad.addEventListener("click", function(){
// ES6写法
// 定时器:参数1:回调函数;参数2:时间;
// 这个this才是ad
setTimeout(() => this.style.background = 'pink',2000);
}
)
script>
body>
html>

6.2、问题2

从数组中返回偶数的元素

<html>
<head>
<meta charset="utf-8">
<title>箭头函数的实践和应用场景title>
<style>
div {
width: 200px;
height: 200px;
7、ES6中函数参数的默认值
概述:
ES允许给函数的参数赋初始值;
代码示例及相关说明:
background: #58a;
}
style>
head>
<body>
<div id="ad">div>
<script>
// 需求-1 点击 div 2s 后颜色变成『粉色』
// 获取元素
let ad = document.getElementById('ad');
// 绑定事件:这也是错误写法,这里的this还是window
// ad.addEventListener("click", () => {
// // ES6写法
// // 定时器:参数1:回调函数;参数2:时间;
// setTimeout(() => this.style.background = 'pink',2000);
// }
// )
// 绑定事件
ad.addEventListener("click", function() {
// ES6写法
// 定时器:参数1:回调函数;参数2:时间;
// 这个this才是ad
setTimeout(() => this.style.background = 'pink', 2000);
})
//需求-2 从数组中返回偶数的元素
const arr = [1, 6, 9, 10, 100, 25];
// const result = arr.filter(function(item){
// if(item % 2 === 0){
// return true;
// }else{
// return false;
// }
// });
const result = arr.filter(item => item % 2 === 0);
console.log(result);
// 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
// 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
script>
body>
html>

7、ES6中函数参数的默认值

概述:
ES允许给函数的参数赋初始值;

<script>
//ES6 允许给函数参数赋值初始值
//1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
function add(a,b,c=10) {
return a + b + c;
}
let result = add(1,2);
console.log(result); // 13
//2. 与解构赋值结合
// 注意这里参数是一个对象,且对象的三个其他参数都已经提前赋好了值
function connect({host="127.0.0.1", username,password, port}){
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
connect({
host: 'atguigu.com',
username: 'root',
password: 'root',
port: 3306
})
</script>

8、rest参数

概述:
ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments,ES6的rest参数:…args,rest参数必须放在最后面;

<html>
<head>
<meta charset="utf-8">
<title>rest参数title>
head>
<body>
<script>
// ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments;
// ES5获取实参的方式
function data(){
console.log(arguments);
}
data("大哥","二哥","三哥","四哥");//输出的是以对象的类型输出
// ES6的rest参数...args,rest参数必须放在最后面
function data(...args){
console.log(args); // 数组的操作方法:fliter some every map
}
data("大哥","二哥","三哥","四哥");//输出的是以数组的类型输出
script>
body>
html>

9、扩展运算符

介绍:
… 扩展运算符能将数组转换为逗号分隔的参数序列;扩展运算符(spread)也是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包;

<html>
<head>
<meta charset="utf-8">
<title>扩展运算符应用title>
head>
<body>
div>
div> <script> //1. 数组的合并 情圣 误杀 唐探 const kuaizi = ['王太利','肖央']; const fenghuang = ['曾毅','玲花']; // 传统的合并方式 // const zuixuanxiaopingguo = kuaizi.concat(fenghuang); const zuixuanxiaopingguo = [...kuaizi, ...fenghuang]; console.log(zuixuanxiaopingguo);//['王太利','肖央','曾毅','玲花'] //2. 数组的克隆 const sanzhihua = ['E','G','M']; const sanyecao = [...sanzhihua];// ['E','G','M'] console.log(sanyecao); //3. 将伪数组转为真正的数组 const divs = document.querySelectorAll('div'); const divArr = [...divs]; console.log(divArr); // arguments script> body> html>

10、Symbol

Symbol 概述:
ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript 语言的第七种数据类
型,是一种类似于字符串的数据类型;

Symbol 特点:
1. Symbol 的值是唯一的,用来解决命名冲突的问题;
2. Symbol 值不能与其他数据进行运算;
3. Symbol 定义的对象属性不能使用for…in循环遍历 ,但是可以使用Reflect.ownKeys 来获取对象的所有键名;

10.1、基本使用

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>symboltitle>
head>
<body>
<script>
//创建Symbol
let s = Symbol();
// console.log(s, typeof s);
let s2 = Symbol('尚硅谷');
let s3 = Symbol('尚硅谷');
console.log(s2==s3); // false
//Symbol.for 创建
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4==s5); // true
//不能与其他数据进行运算
// let result = s + 100;
// let result = s > 100;
// let result = s + s;
// USONB you are so niubility
// u undefined
// s string symbol
// o object
// n null number
// b boolean
script>
body>
html>

10.2、Symbol创建对象属性

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Symbol创建对象属性title>
head>
<body>
<script>
// 向对象中添加方法 up down
let game = {
name:'俄罗斯方块',
up: function(){},
down: function(){}
};
// 我们要往game对象里面添加方法,但是怕game对象已经存在
// 同名方法,所以我们这时使用到了Symbol
// 方式一
// 声明一个对象
let methods = {
up: Symbol(),
down: Symbol()
};
game[methods.up] = function(){
console.log("我可以改变形状");
}
game[methods.down] = function(){
console.log("我可以快速下降!!");
}
console.log(game);
// 方式二
let youxi = {
name:"狼人杀",
[Symbol('say')]: function(){
console.log("我可以发言")
},
[Symbol('zibao')]: function(){
console.log('我可以自爆');
}
}
console.log(youxi);
// 如何调用方法??? 讲师没讲,这是弹幕说的方法
let say = Symbol('say');
let youxi1 = {
name:"狼人杀",
[say]: function(){
console.log("我可以发言")
},
[Symbol('zibao')]: function(){
console.log('我可以自爆');
}
}
youxi1[say]();
script>
body>
html>

11、迭代器

11.1、概述

遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作;

11.2、特性

ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 消费;原生具备 iterator 接口的数据(可用 for of 遍历):
Array;
Arguments;
Set;
Map;
String;
TypedArray;
NodeList;

11.3、工作原理

  1. 创建一个指针对象,指向当前数据结构的起始位置;
  2. 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员;
  3. 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员;
  4. 每调用 next 方法返回一个包含 value 和 done 属性的对象;
    注:需要自定义遍历数据的时候,要想到迭代器;
    以下可以直接使用for .. of..进行遍历数据是因为数组自身具备了iterator接口

<html>
<head>
<meta charset="utf-8">
<title>迭代器title>
head>
<body>
<script>
// 声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
// 使用 for...of 遍历数组
for(let v of xiyou){
console.log(v);//唐僧,孙悟空, 猪八戒, 沙僧
}
//获取iterator对象,使用next遍历
let iterator = xiyou[Symbol.iterator]();
// 调用对象的next方法
console.log(iterator.next());//value:'唐僧',done:false
console.log(iterator.next());//value:'孙悟空',done:false
console.log(iterator.next());//value:'猪八戒',done:false
console.log(iterator.next());//value:'沙僧',done:false
console.log(iterator.next());//value:undefined,done:true
// 重新初始化对象,指针也会重新回到最前面
let iterator1 = xiyou[Symbol.iterator]();
console.log(iterator1.next());//value:'唐僧',done:false
script>
body>
html>

下面的目的是为了根据自己的需要只遍历banji对象中的stus数组,以下是因为对象是不具备iterator接口的,所以直接在该对象中创建一个iterator接口,值得注意的是iterator接口里需要创建一个指针对象:return {},且指针对象里面有一个next方法:next function(){},每调用 next 方法返回一个包含 value 和 done 属性的对象:return{value:' ',done:' '}

11.4、迭代器自定义遍历对象

<html>
<head>
<meta charset="utf-8">
<title>迭代器自定义遍历数据title>
head>
<body>
<script>
// 声明一个对象
const banji = {
name: "终极一班",
stus: [
'xiaoming',
'xiaoning',
'xiaotian',
'knight'
],
[Symbol.iterator]() {
// 索引变量
let index = 0;
// 保存this
let _this = this;
//返回对象
return {
//创建next方法
next: function() {
if (index < _this.stus.length) {
const result = {
value: _this.stus[index],
done: false
};
// 下标自增

index++;
// 返回结果
return result;
} else {
return {
value: undefined,
done: true
					};
				}
			}
		};
	}
}
// 遍历这个对象
for (let v of banji) {
console.log(v);//xiaoming,xiaoning,xiaotian,knight
}
script>
body>
html>

输出结果:
xiaoming
xiaoning
xiaotian
knight

你可能感兴趣的:(笔记,javascript,学习,前端,es6)