|
目录
1.变量的使用
（1）let的使用
（2）const的使用
2.解构赋值
(1) 数组解构
（2）对象解构
3.箭头函数
（1）箭头函数的写法
（2）箭头函数的this指向问题
4.三点运算符
（1）剩余运算符
a.传不定参或实参为数组的情形
?b.数组解构
?c.函数传对象
（2）扩展运算符
a.输出数组元素
b.合并数组
c.将类数组转为真正的数组：包括节点类数组、字符串
d.复制数组（相当于深拷贝）
5.数组扩展方法
(1)Array.from()
(2)array.find()或array.findIndex()
(3)array.includes()
?（4）array.map()
（5）array.filter()
（6）array.reduce()
（7）array.fill()
（8）for...of
（9）for...in
（10）遍历对象
(11) forEach()
（12）in的使用
（13）array.some()
(14) array.join()
（15）Array.of()
6.字符串扩展方法
(1)? 模板字符串
（2）startsWith()或endsWith()
(3)repeat()
?7.对象扩展
(1)对象的简写
（2）构建属性
（3）合并对象
8.set数据结构
（1）size获取长度
（2）add添加元素
（3）delete删除元素
（4）has判断元素是否存在
（5）forEach()遍历元素
（6）clear清空元素
9.symbol对象的使用
（1）相同的赋值，变量也相同，除非使用Symbol.for()
（2）不能与运算符进行计算
本文主要介绍ES6中的一些语法。
1.变量的使用
（1）let的使用
a.提供块级作用域
b.不存在变量提升，需要先声明再使用，否则会出现“暂时性死区”
c.不能重复声明
（2）const的使用
a.定义常量，不可更改，声明时需要初始化
b.提供块级作用域
c.定义数组或对象时，可修改其中的元素或属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
let str = "abc";
if (true) {
let str = "123";
console.log("if:", str);
}
console.log("全局:", str);
// 1:块级作用域
// for(let i=1;i<10;i++){
// console.log(i);
// }
// console.log(i);//未定义
// 2:不存在变量提升
// console.log(i);//报错
// let i=1;
// console.log(i);
// 3:"暂时性死区"：用let声明的变量需要先声明后使用
// var i=1;
// if(true){
// i=2;
// let i=3;
// }
// 4:不允许重复声明
// let a=1;
// let a=3; //重复了 报错
// 5:let案例
// let arr = [];
// for(let i=0;i<3;i++){
// arr[i] = function(){
// console.log(i);
// }
// }
// arr[0]();
// arr[1]();
// arr[2]();
</script>
</body>
</html>
2.解构赋值
(1) 数组解构
a.基本解构，一一对应
b.不需要赋值的变量，可不写，要用逗号空出位置
c.一组数可以赋值为一个数组，需要利用三点运算符
d.可为变量取默认值，若未赋值或者赋的值是undefined,会取默认值
（2）对象解构
a.基本解构，通过属性名一一赋值
b.在属性名的冒号后添加名称，可为变量重新命名
c.也可取默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 1:数组的解构赋值
// let arr = [1,2,3];
// let [a,b,c] = arr;
// console.log(a,b,c);
// 2：二维数组
// let [a,[b,c],d] = [1,[2,3],4];
// console.log(a,b,c,d);
// 3:省略变量
// let [a,,c] = [1,2,3];
// console.log(a,c);
// 4:合并数组的值
// let [a, ...b] = [1, 2, 3, 4];
// console.log(b); //数组
// console.log(...b); //a,b,c
// console.log(2, 3, 4);
// 5:默认值 如果是undefined 默认值生效
// let [a, b = '2'] = [1, undefined];
// console.log(b);
// =========对象结构===========
// 1:对象结构
// let Person = {realname:"张三",age:19};
// let {realname:myrealname,age,height=173} = Person;//重命名
// console.log(myrealname,age,height);
// ========解构应用=========
// 1：交换两个变量的值
// let a=1;
// let b=2;
// [b,a] = [a,b];
// console.log(a,b);
// 2:"结构函数"
// function func(){
// return [1,2,3,4];
// }
// let [a,b,c,d] = func();
// console.log(a,b,c,d);
</script>
</body>
</html>
3.箭头函数
（1）箭头函数的写法
一般的，箭头函数的基本写法为：名称()=>{}.
注意：当执行语句只有一条时，可省略大括号和return.当参数只有一个时，可省略小括号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// function sum(a,b){
// return a+b;
// }
// sum(1,2);
// 1:箭头函数的写法
// const sum = (a,b)=>{
// return a+b;
// }
// let res = sum(1,2);
// console.log(res);
// 2: 箭头函数简写
// 代码块只有一句话省略{}和return
// const sum = (a,b)=> a+b;
// let res = sum(1,2);
// console.log(res);
// 3:只有一个参数 小括号可以省略
// const sum = a => a+3;
// let res = sum(1);
// console.log(res);
</script>
</body>
</html>
（2）箭头函数的this指向问题
通过与普通函数的比较，介绍箭头函数的this指向。
a.全局函数下
普通函数的this指向window对象，箭头函数的this也指向window对象
b.对象中
一般而言，普通方法的this指向对象本身，箭头函数的this指向全局对象
c.构造函数中
普通方法和箭头函数中的this都指向实例化对象。要注意的是，箭头函数中的this指向不会变化。
总结：
普通函数的this，与调用者有关。
箭头函数中的this，与上下文有关，是该函数所在作用域下this指向的值。 可以简单理解为，定义箭头函数中的作用域的this指向谁，它就指向谁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//1：全局函数下的this
// 1.1普通函数this 跟调用者有关
// function global(){
// console.log(this);
// }
// global();
// 1.2 箭头函数的this 箭头函数this this静态 根据上下文的this
// const global = ()=>{
// console.log(this);
// }
// global();
// 二：对象方法里面的this。
// const Person = {
// realname:"张三",age:19,
// say:function(){
// console.log(this);
// }
// }
// Person.say(); //person实例
// 2:对象箭头函数的this
// const Person = {
// realname: "张三",
// age: 19,
// say: () => {
// console.log(this);
// }
// }
// Person.say(); //windows
// 三：构造函数的this 构造函数的this就是当前实例
// 箭头函数的this一旦定义了就不允许改变
// function Person(realname, age) {
// this.realname = realname;
// this.age = age;
// this.say = () => {
// console.log(this); //这个this不会 当时new 实例是谁就是谁
// }
// this.say1 = function() {
// console.log(this);
// }
// }
// const P1 = new Person("张三", 19);
// const P2 = new Person("李四", 20);
// P1.say.call(P2);
// P1.say.apply(P2);
// P1.say.bind(P2)();
// P1.say1.call(P2);
// P1.say1.apply(P2);
// P1.say1.bind(P2)();
</script>
</body>
</html>
?下面的案例有助于你理解普通函数与箭头函数中this指向的问题。需要注意的是，当利用call改变fn的调用对象时，调用fn()的普通函数，this会指向obj对象。但是，调用其中返回出来的普通函数时，this的指向仍是window对象，并未改变。
<!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>
</head>
<body>
<script>
const obj = {
name: 'zs'
}
// (1)
// function fn() {
// console.log(this);
// return function() {
// console.log(this);
// }
// }
// fn()();
// 都指向window
// （2）
// function fn() {
// console.log(this);
// return () => {
// console.log(this);
// }
// }
// fn()();
// 都指向Window
// （3）
// let fn = () => {
// console.log(this);
// return function() {
// console.log(this);
// }
// }
// fn()();
// 都指向Window
// （4）
// let fn = () => {
// console.log(this);
// return () => {
// console.log(this);
// }
// }
// fn()();
// 都指向window
// （5）
function fn() {
console.log(this); //obj调用，指向obj
return function() {
console.log(this); //指向window
}
}
fn.call(obj)();
// (6)
// function fn() {
// console.log(this);
// return () => {
// console.log(this);
// }
// }
// fn.call(obj)();
// 都指向obj
// (7)
// let fn = () => {
// console.log(this);
// return function() {
// console.log(this);
// }
// }
// fn.call(obj)();
//都指向window
// (8)
// let fn = () => {
// console.log(this);
// return () => {
// console.log(this);
// }
// }
// fn.call(obj)();
// 都指向window
</script>
</body>
</html>
4.三点运算符
（1）剩余运算符
a.传不定参或实参为数组的情形
// 1.传不定参
function sum(a, ...num) {
let sum = a;
for (let i = 0; i < num.length; i++) {
sum += num[i];
}
return sum;
}
// 2.实参为数组
function addTwo(a, b) {
return a + b;
}
console.log(addTwo(...[1, 6]));
console.log(sum(10, 2, 3, 4));
?b.数组解构
let [a, ...b] = [1, 4, 5, 6];
console.log(a, b);
?c.函数传对象
function obj({
uname: u,
age: a
}) {
console.log(u, a)
}
obj({
uname: 'zs',
age: 16
})
（2）扩展运算符
a.输出数组元素
b.合并数组
c.将类数组转为真正的数组：包括节点类数组、字符串
d.复制数组（相当于深拷贝）
let divs = document.querySelectorAll('div');
// 二、扩展运算符
// 1.输出数组
let array1 = [5, 6, 7, 8];
console.log(...array1);
//2.合并数组
let array2 = [9, 10, 11];
let array3 = [...array1, ...array2]
console.log(array3);
//3.将类数组转为真正的数组
// (1)转节点类数组
console.log(divs);
console.log([...divs]);
//（2）转字符
console.log('890');
console.log([...
'890'
]);
//(3)复制数组（深拷贝）
let array4 = [3, 6, 9];
let array5 = [...array4];
array5[0] = 190;
console.log(array4);
console.log(array5);
5.数组扩展方法
(1)Array.from()
将类数组转为真正的数组
(2)array.find()或array.findIndex()
找到符合条件的第一个元素或其对应的索引
(3)array.includes()
判断数组是否包含某个元素，返回true或false
// 1.Array.from():将类数组转为真正的数组
let str = '123';
console.log(Array.from(str));
let obj = {
0: 'zs',
1: 19,
length: 3
};
console.log(Array.from(obj));
//2.arr.find():找到符合条件的第一个元素
let arra1 = [1, 5, 6, -3, 4]
console.log(arra1.find(item => item < 0));
//2.arr.findIndex():找到符合条件的第一个元素的索引
let arra2 = [1, -3, 6, 4]
console.log(arra2.findIndex(item => item < 0));
//3.arr.includes:判断数组是否包含某个元素
console.log(arra2.includes(-3));
console.log(arra2.includes(16));
?（4）array.map()
修改数组中的每个元素
（5）array.filter()
筛选出符合条件的所有元素
（6）array.reduce()
“累加器”的效果，total为初始值，也是返回值，c代表当前值。第二个参数可设置reduce的初始值。
（7）array.fill()
将数组元素填充为指定内容，第一个参数为指定的内容，后两个规定填充的起始位置
（8）for...of
访问数组的元素
（9）for...in
访问数组元素的下标
（10）遍历对象
a.利用for...in
b.利用Object.keys先获取属性，再利用for...of遍历
c.Object.values()获取对象属性的值
(11) forEach()
遍历数组，三个参数：分别代表数组元素、索引和整个数组
（12）in的使用
判断属性是否存在（数组判断索引，对象判断属性）
（13）array.some()
?判断数组中是否有元素满足特定条件
(14) array.join()
以特定字符连接数组元素
（15）Array.of()
将一串字符转为数组
<!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>
</head>
<body>
<script>
//1.arry.map():修改数组每个元素
let a = [1, 2, 3];
let a1 = a.map(item => item + 100);
console.log(a1);
//2.arry.filter()：过滤出符合条件的所有元素
let b = [-1, 4, -6, 78, 56, -90];
let b1 = b.filter(item => item < 0)
console.log(b1);
//3.arry.reduce():'累加器'
let c = [1, 2, 3, 4, 5];
let sum = c.reduce((total, c) => total - c)
console.log(sum);
//4.arry.fill():填充，结束下标的元素不包括
let d = [1, 2, 3, 4, 5];
let d1 = d.fill(100, 1, 3)
console.log(d1);
//求数组最大值
let e = [12, 45, 34, 67, 23, 2];
let max = e.reduce((i, c) => i < c ? c : i)
console.log(max);
// 5.for...of
let f = [1, 2, 3, 4, 5];
for (let i of f) {
console.log(i);
}
//6. for...in
let g = ['a', 'b', 'c', 'd', 'e'];
for (let i in g) {
console.log(g[i]);
}
//7.遍历对象(利用Object.keys先获取属性，再利用for...of遍历)
let h = {
name: 'zs',
age: 20,
career: 'engineer'
}
let keys = Object.keys(h)
for (let i of keys) {
console.log(h[i]);
}
// 8.forEach()
let j = ['x', 'y', 'z'];
j.forEach(element => {
console.log(element);
});
// 9.in判断属性是否存在（数组判断索引，对象判断属性）
let k = [3, 6, 9, 12];
console.log(3 in k); //true
console.log(4 in k); //false
let l = {
realname: 'zs',
age: 20
}
console.log('age' in l); //true
// 10.some：判断数组中是否有元素满足特定条件
let m = [1, -7, 7, 8];
console.log(m.some(e => e < 0)); //true
// 11.join:以特定字符连接数组元素
console.log('4,6,8'.split(','));
console.log([4, 6, 8].join('*'));
//12.Array.of():将一串字符转为数组
console.log(Array.of(1, 2, 3));
</script>
</body>
</html>
6.字符串扩展方法
(1)? 模板字符串
（2）startsWith()或endsWith()
判断字符串是否以特定字符开始或结束
(3)repeat()
重复字符串
<script>
// 1.模板字符串:可使用变量、函数以及基本的计算
let a = 'Jack';
console.log(`Hello ${a}`);
//2.startsWith,endsWith:判断字符串是否以特定字符开始或结束
console.log('Hello'.startsWith('H'));
console.log('Hello'.startsWith('He'));
console.log('Hello'.startsWith('o'));
console.log('Hello'.endsWith('llo'));
console.log('Hello'.endsWith('ll'));
//2.重复字符串
console.log('James'.repeat(5));
</script>
?7.对象扩展
(1)对象的简写
当属性名与变量名相同时，可省略变量名
（2）构建属性
利用中括号及变量名即可添加指定的属性
（3）合并对象
a.利用Object.assign(对象1，对象2，...)
b.利用三点运算符
<!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>
</head>
<body>
<script>
// 1.简写
let uname = 'zs',
age = 20,
key = 'height';
const Stu = {
uname,
age
};
console.log(Stu);
//2.构建属性
Stu[key] = 178;
console.log(Stu);
//3.合并对象
const Obj1 = {
uname: 'ls'
};
const Obj2 = {
age: 20
};
const Obj3 = Object.assign(Obj1, Obj2);
console.log(Obj3);
const Obj4 = {...Obj1,
...Obj2
}
console.log(Obj4);
</script>
</body>
</html>
</html>
8.set数据结构
set数据结构其最大的特点就是自带去重，不会存储重复的值。下面介绍它的基本使用。
（1）size获取长度
（2）add添加元素
（3）delete删除元素
（4）has判断元素是否存在
（5）forEach()遍历元素
（6）clear清空元素
最后利用set实现数组去重的小案例
<!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>
</head>
<body>
<script>
// 元素唯一
const a = new Set([1, 2, 3, 4]);
console.log(a);
// 长度
console.log(a.size);
// 添加
a.add(5).add(6).add(1);
console.log(a);
// 删除
a.delete(1);
console.log(a);
// 判断是否存在
console.log(a.has(3));
console.log(a.has(100));
// 遍历
a.forEach(i => console.log(i));
// 清空
a.clear();
console.log(a);
//数组去重(解构后用[]包裹)
const a1 = [1, 3, 4, 5, 5, 6, 1, 3];
console.log([...new Set(a1)]);
</script>
</body>
</html>
9.symbol对象的使用
symbol对象有以下特点：
（1）相同的赋值，变量也相同，除非使用Symbol.for()
（2）不能与运算符进行计算
<!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>
</head>
<body>
<script>
// 1、symbol创建完全唯一的值
let a = Symbol(),
c,
d;
let b = Symbol();
console.log(c === d);
console.log(a === b);
let e, f;
// 2、创建唯一值
e = Symbol.for();
f = Symbol.for();
console.log(e === f);
// 3、不能与运算符计算
// e - 1;
const Method = {
say: function() {
console.log('He can say!');
},
sing: function() {
console.log('He can sing!');
},
walk: Symbol(),
run: Symbol()
};
const Person = {
realName: 'zs',
age: 20,
walk: function() {
console.log('会走路');
},
run: function() {
console.log('会跑步');
}
};
// 4.获取所有的键
console.log(Reflect.ownKeys(Method));
console.log(Reflect.ownKeys(Person));
Person[Method.walk] = () => {
console.log('He can walk!');
};
Person[Method.run] = () => {
console.log('He can run!');
};
// 5.获取对象Symbol对应的键,通过键可以调用对应的函数
let sKeys = Object.getOwnPropertySymbols(Person)
console.log(sKeys);
Person[sKeys[0]]()
Person[Method.walk]();
Person.walk();
Person[sKeys[1]]()
Person[Method.run]();
Person.run();
</script>
</body>
</html>
|