ES6新特性
学习ES6到11版本的新特性
ECMA
ECMA是一个致力于信息和通信系统标准化的行业协会。
1.let
变量用let就好
- 不允许重复声明
- 块级作用域
- 不存在变量提升
- 不影响作用域链
let a; //声明一个
let b, c; //声明多个
let d = "",
e = 520,
f = [],
g = true; //声明并赋值
let实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>点击变红</title>
<style>
.item {
/* margin-top: 5px; */
display: inline-block;
height: 20px;
width: 40px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
items[i].onclick = function () {
items[i].style.background = "red";
console.log("i:", i);
};
}
</script>
</body>
</html>
2.const 声明常量
声明对象、数组类型使用 const,非对象类型声明选择 let
- 声明必须赋初始值
- 标识符一般为大写
- 不允许重复声明
- 值不允许修改
- 块级作用域
- 可以修改数组内的值和对象内的属性(常量地址没有改变)
const 实例
const arr = [1, 2, 3, 4];
console.log(arr);
arr.push(5);
arr.unshift(0);
console.log(arr);
arr.pop();
arr.shift();
console.log(arr);
3.解构赋值
频繁使用对象方法、数组元素,就可以使用解构赋值形式。
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为 解构赋值。
const family = ["爸爸", "妈妈", "儿子", "女儿"];
// 对数组进行解构赋值
let [arr1, arr2, arr3, arr4] = family;
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
const person = {
name: "程序员",
age: 18,
func: () => {
console.log("new 一个女朋友");
},
};
// 对对象进行解构赋值
let { name, age, func } = person;
console.log(name);
console.log(age);
func();
4.模板字符串 反引号
- 字符串中可以出现换行符
- 可以使用 ${变量名} 形式输出变量
// 包含换行符
let str1 = `春晓
春眠不觉晓,处处闻啼鸟。
夜来风雨声,花落知多少。`;
console.log(str1);
//字符串与变量拼接
let str2 = `接下来由我朗诵一首古诗:${str1}`;
console.log(str2);
5.简化对象写法
- ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。
- 简化了对象内的方法写法
let name = "我是小白兔呀";
let sayHello = () => console.log(`你好啊!${name}`);
const person = {
name,
// 等价于 name:name
// 属性名和属性值,名相同可以缩写
sayHello,
sayByeBye() {
console.log(`再见了!${name}`);
},
};
console.log("person:", person);
person.sayHello();
person.sayByeBye();
6.箭头函数 =>
适用于与this无关的回调,有关this的回调用匿名函数
call:调用一个对象的一个方法,用另一个对象替换当前对象。
- 箭头函数 this 始终指向声明时所在作用域下 this 的值
- 箭头函数不能作为构造函数实例化对象
// 无参
let fn = () => {
console.log("无参箭头函数");
};
// 有参
let fn2 = (a) => console.log(`有参箭头函数,${a}`);
fn();
fn2(1);
console.log("--------------------------------------------------");
// 箭头函数 this 始终指向声明时所在作用域下 this 的值
// call 用另一个对象替换当前对象,对箭头函数无效
let person = {
name: "小明",
age: 18,
};
let f = () => console.log(this);
let f2 = function () {
console.log(this);
};
f();
f2();
f.call(person);
f2.call(person);
实例
1.改变dom的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector("div");
// console.log(div);
div.addEventListener("click", function () {
setTimeout(() => {
this.style.background = "pink";
}, 1000);
});
</script>
</body>
</html>
2.筛选偶数
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let res = arr.filter((item) => item % 2 === 0);
console.log("res:", res);
9.函数形参初始值
ES6 允许给函数参数设置默认值,当调用函数时不给实参,则使用参数默认值。默认写后面。
let add = function (a, b, c) {
return a + b + c;
};
console.log(add(1, 2, 3));
console.log(add(1, 2));
console.log("--------------------------------------------------");
add = function (a = 1, b = 1, c = 1) {
return a + b + c;
};
console.log(add(1, 2, 3));
console.log(add(1, 2));
与解构赋值结合
let person = {
name: "小白兔",
age: 18,
};
function show({ name = "老灰兔", age = 80 }) {
console.log(name);
console.log(age);
}
show({});
console.log("--------------------------------------------------");
show(person);
10.rest参数(…args获取剩余参数 替代 argument)
rest参数获取函数实参 ( 替代argument )
function show() {
console.log("arguments获取实参:", arguments);
}
show(1, 2, 3);
function show2(...args) {
console.log("rest获取实参:", args);
}
show2(1, 2, 3);
rest参数必须放在最后, 他包含从当前位置开始到最后一个参数
rest剩余的意思
rest用来替代arguments
用途,arguments获取到的是对象,而rest 获取的是数组,方便调用数组对应的api方法,例如filter some every map
11.扩展运算符 …对象
- 在计算机的角度来说, 数组也是对象
- 扩展运算符可以将对象(包括数组)解包。
// 数组(或对象)合并
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log("合并结果:", arr3);
// 数组克隆
let arr4 = [...arr3];
console.log("克隆结果:", arr4);
// 将伪数组转化为真正的数组
const divs = document.querySelectorAll("div");
console.log(divs);
let divArr = [...divs];
console.log(divArr);
…深层拷贝对象
JSON.parse(JSON.stringify(obj))是目前比较常用的深拷贝方法之一
var x = {
name: "苏金凤",
age: 18,
description: {
height: 170,
weight: 50,
hobby: {
game: "王者",
sport: "乒乓球",
},
},
};
var xCopy = { ...x };
console.log(xCopy);
12.Symbol 表示独一无二的值
它是 JavaScript 语言的第七种数据类型,是一种类似于字符串的数据类型。
(其余六种:usonb —— undefined, String, Object, null, Number, boolean)
- Symbol 的值是唯一的,用来解决命名冲突的问题
- Symbol 值不能与其他数据进行运算
- Symbol 定义的对象属性不能使用 for…in 循环遍历,但是可以使用 Reflect.ownKeys 来获取对象的所有键名
// Symbol的三种创建方法
// 第一种 描述为空
let s1 = Symbol();
let s2 = Symbol();
console.log(s1, s2, typeof s1, s1 === s2);
console.log();
// 第二种添加描述字符串
let s3 = Symbol("001");
let s4 = Symbol("001");
console.log(s3, s4, typeof s3, s3 === s4);
console.log();
// 第三中Symbol.for(key);
// 找得到key,返回对应symbol,否则新建 key相同的 Symbol 具有相同的实体。
let s5 = Symbol.for("2");
let s6 = Symbol.for("2");
console.log(s5, s6, typeof s5, s5 === s6);
console.log();
Symbol 的使用
就是给对象添加Symbol属性
但是不知道里面有没有同名的属性或方法
用法一:
在对象1里添加属性或方法
1.声明一个对象2
2.在对象2内添加Symbol属性
3.用对象2的Symbol属性添加属性或方法
// 用法一:
let person = {
name: "陈大",
age: 18,
showName() {
console.log(this.name);
},
};
person.showName();
console.log("--------------------------------------------------");
// 添加showName,showAge函数,可能用同名函数在里面(对象太大,不好找)
let methods = {
showName: Symbol(),
showAge: Symbol(),
};
person[methods.showAge] = function () {
console.log(this.age);
};
person[methods.showName] = function () {
console.log(this.name);
};
// 调用
person[methods.showName]();
person[methods.showAge]();
注:调用时,不可以用点的方式了,只能用[]的方式了.
用法二:
let say = Symbol("say");
let age = Symbol("age");
let dog = {
name: "小白",
age: 3,
[say]: function () {
console.log(this.name);
},
[age]: function () {
console.log(this.age);
},
};
dog[say]();
dog[age]();
// 这样也可以读取
// let dog = {
// name: "小白",
// age: 3,
// [Symbol.for("say")]: function () {
// console.log(this.name);
// },
// [Symbol.for("age")]: function () {
// console.log(this.age);
// },
// };
// console.log(dog);
// dog[Symbol.for("say")]();
// dog[Symbol.for("age")]();
13.迭代器
1. 迭代器原理
const arr = [];//对象只读属性用readonly修饰, 只读变量用const修饰; 对象地址不可变,但内容可以
arr.push("西施");
arr.push("杨玉环");
arr.push("貂蝉");
arr.push("王昭君");
console.log(arr);
let iterator = arr[Symbol.iterator]();
console.log(iterator);
console.log(iterator.next()); //第一次next, 返回第一个value,和done
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next()); // 结束返回值
// for of 是根据iterator封装的, 取出的元素是value
for (let e of arr) {
console.log(e);
}
// for in 下标
for (let e in arr) {
console.log(e);
}
2. 迭代器用法 —— 自定义遍历数据(遍历对象内的某个数组)
箭头函数:
const person = {
name: "小小",
age: 18,
sex: "女",
hobby: ["乒乓球", "羽毛球", "王者荣耀", "荒野求生"],
[Symbol.iterator]() {
// 迭代器遍历索引
let index = 0;
// let _this = this;
return {
next: () => { //箭头函数写法(没有this,向外层寻找this)
if (index < this.hobby.length) {
const res = { value: this.hobby[index], done: false };
index++;
return res;
} else {
return { value: undefined, done: true };
}
},
};
},
};
for (let e of person) console.log(e);
匿名函数:
const person = {
name: "小小",
age: 18,
sex: "女",
hobby: ["乒乓球", "羽毛球", "王者荣耀", "荒野求生"],
[Symbol.iterator]() {
// 迭代器遍历索引
let index = 0;
let _this = this;
return {
next: function () { // 等价 next()
if (index < _this.hobby.length) {
const res = { value: _this.hobby[index], done: false };
index++;
return res;
} else {
return { value: undefined, done: true };
}
},
};
},
};
for (let e of person) console.log(e);
结果都是: