本文详细介绍了ES6中的核心概念，包括let和const的使用，解构赋值的数组和对象方式，箭头函数的特性和this指向，以及三点运算符在不同场景的应用。此外，还涵盖了数组扩展方法如find、map和reduce，字符串的新方法如模板字符串和startsWith，以及对象的简写和合并。同时，文章讨论了Set数据结构和Symbol对象的特性，为JavaScript开发者提供了全面的ES6语法指南。
目录
(2)array.find()或array.findIndex()
（1）相同的赋值，变量也相同，除非使用Symbol.for()
本文主要介绍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>
扫一扫
1466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
