ES6基础

ES6，是ECMAScript 6的简写，ECMA：欧洲计算机制造商协会，是一个标准化的组织

ECMAScript是由这个组织制定的一个语言标准（JS标准），兼容性很好

HTML和CSS的语言标准是由W3C制定的

• ES6与JavaScript的关系：JavaScript（浏览器端）= ECMAScript（语法+API）+ DOM + BOM
• 安装node，可以脱离浏览器运行js代码（浏览器内有JS解释器），不能运行DOM和BOM
• let和const（let用来声明变量，const用来声明常量），变量初始化后可以重新辅助，常量初始化后不能重新赋值
• const声明的常量，允许在不重新赋值的情况下修改它的值，前提是引用类型，如对象，数组等
• 重复声明（已经存在的变量或常量再次声明，var支持，let和const不支持）
• 变量提升（var会提升变量的声明到当前作用域的顶部，允许先调用后赋值，let和const不支持变量提升）
• 块级作用域：是ES6中新增的一个作用域，指在{}里面使用let或const关键字声明变量或常量，就会形成一个块级作用域（Tips：函数和对象的{}不属于块级作用域，var没有块级作用域）
• 暂时性死区（let和const声明变量时，从块的开始到初始化处理（赋值）之间的代码区域被称为暂时性死区，在这个区域内访问变量会导致一个引用错误）
• window对象的属性和方法（全局作用域中，通过var声明的变量和通过function声明的函数都会自动成为window对象的属性或方法，let和const不会）
• 模板字符串（普通字符串使用单引号或者双引号，模板字符串使用反引号``，模板字符串中的空格、换行和缩进都会被保留）

//字符串拼接
const person = {
    username: "xiaoming",
    age: 18,
    sex: "male",
};
console.log("大家好, 我叫" + person.username + ", 今年" + person.age + "岁, 性别" + person.sex);

 

//模板字符串解析变量(也可以进行计算和判定)
const person = {
    username: "xiaoming",
    age: 18,
    sex: "male",
};
console.log(`大家好, 我叫${person.username}, 今年${person.age}岁, 性别${person.sex === "male" ? "男" : "女"}生`);

 

• 输出特殊字符：在特殊符号左边加上转义字符 \ ，如输出反引号：\ `
• 箭头函数：语法结构（var 函数名 = （）=> {函数体；}；）
• 箭头函数的简化：

//初始代码
var hello = (username) => {
    return "大家好, 我叫" + username;
};
var info = hello("小明");
console.log(info);

//单个参数可以简化，去掉小括号（无参数或多个参数不能简化）
var hello = username => {
    return "大家好, 我叫" + username;
};
var info = hello("小明");
console.log(info);

//单行函数可以省略{}，多行函数不能省略
var hello = (username, age) => console.log("大家好, 我叫" + username + ", 年龄是" + age);

hello("小明", 19);

//单行函数且是return，可以继续省略return
var hello = (username, age) => "大家好, 我叫" + username + ", 年龄是" + age;

var info = hello("小明", 19);
console.log(info);

//如果返回的是一个对象，需要用小括号包裹
var hello = (username, age) => {
    var user = {
        username: username,
        age: age,
    };
    return user;
};

var info = hello("小明", 19);
console.log(info);

//简化后
var hello = (username, age) => ({ username: username, age: age });

var info = hello("小明", 19);
console.log(info);

 

• 箭头函数中的this（this的指向和函数的定义无关，和调用有关）

　　箭头函数：

1. 箭头函数没有自己的this、arguments，箭头函数里面的this用的是parent作用域的this
2. 箭头函数里的this是词法作用域，是由代码结构决定的，与在哪里调用无关，与箭头函数在代码里的位置有关
3. 确定箭头函数里this的指向，可以静态分析代码结构，一直往上找function，能找到就是最近的function里的this，找不到就是window
4. 箭头函数里的this，一旦确定不可更改

• 不能使用箭头函数的场景

1. 构造函数不能使用箭头函数
2. 需要把this指向调用对象的时候，不能使用箭头函数
3. 需要使用arguments的时候，不能使用箭头函数

• 数组的解构赋值：把数据从数组中取出来放在不同的变量中，可以提高代码的可读性，减少赋值所需的操作

//解构赋值
const [a,b,c] = [1,2,3]
console.log(a,b,c);

 

•  解构赋值注意事项：

1. 模式，结构匹配
2. 索引值相同，可以完成赋值
3. 如果不取，可以不写，用逗号跳过

• 数组解构赋值的默认值

const [a, b] = [];
console.log(a, b); // undefined undefined

const [a, b] = [1];
console.log(a, b); // 1 undefined

// 给b设置默认值
const [a, b = 3] = [1];
console.log(a, b); // 1 3

//默认值的生效条件是===undefined
const [a, b = 3] = [1, null];
console.log(a, b); // 1 null

const [a, b = 3] = [1, undefined];
console.log(a, b); // 1 3

//默认值支持表达式，表达式是惰性的
// 不触发求默认值的动作, 函数不会执行
function demo() {
    console.log("hello");
    return 123;
}
const [a, b = demo()] = [1, 2];
console.log(a, b); // 1 2

const [a, b = demo()] = [1];
console.log(a, b);
//hello
//1 123

 

• 函数传参和解构赋值

//解构赋值适用于函数的传参
const arr = [1, 2, 3];
function add([a, b, c]) {
    return a + b + c;
}
console.log(add(arr));

//且不影响函数参数设置默认值
function add([a = 0, b = 1, c = 2]) {
    return a + b + c;
}
var arr = [1];
console.log(add(arr)); // 1+1+2

//解构赋值可以快速交换变量的值
var 杯子A = "雪碧";
var 杯子B = "可乐";

[杯子A, 杯子B] = [杯子B, 杯子A];

console.log(杯子A);//可乐
console.log(杯子B);//雪碧

 

• 对象的解构赋值

1. 模式，结构匹配
2. 属性名相同，可以完成赋值（与顺序无关）

// 定义一个对象
const user = {
    username: "zhangsan",
    age: 18,
    sex: "male",
};
// 解构赋值
const { username: username, age: age, sex: sex } = user;
console.log(username, age, sex);

 

• 对象解构赋值的默认值

// 定义一个对象
const user = {
    username: "zhangsan",
    age: 18,
    sex: "male",
};
// 解构赋值
const { username, age, sex, height } = user;
console.log(username, age, sex, height); // height 是 undefined

//可以给height设置默认值
const user = {
    username: "zhangsan",
    age: 18,
    sex: "male",
};
const { username, age, sex, height = 180 } = user;
console.log(username, age, sex, height); // height 是 180

//默认值的生效条件，对象的属性值===undefined
const user = {
    username: "zhangsan",
    age: 18,
    sex: "male",
    height: null,
};
const { username, age, sex, height = 180 } = user;
console.log(username, age, sex, height); // height 是 null

//默认值支持表达式且表达式是惰性的
const user = {
    username: "zhangsan",
    age: 18,
    sex: "male",
};
const { username, age, sex, height = getHeight() } = user;
function getHeight() {
    console.log("getHeight is running ....");
    return 190;
}
console.log(username, age, sex, height); // height 是 190


const user = {
    username: "zhangsan",
    age: 18,
    sex: "male",
    height: null,
};
const { username, age, sex, height = getHeight() } = user;
function getHeight() {
    console.log("getHeight is running ....");
    return 190;
}
console.log(username, age, sex, height); // height 是 null

//已经声明的变量进行解构赋值，需要在小括号内进行
let x = 2;
({ x } = { x: 1 });
console.log(x); // 1

//可以获取继承的属性
const {toString} = {}；
console.log(toString);//Function: toString

 

• 字符串的解构赋值

//按数组形式解构赋值
const [a, b, c] = "hello";
console.log(a, b, c);//h e l

//按对象形式解构赋值
const { 0: a, 1: b, length: c } = "hello";
console.log(a, b, c);//h e 5

 

• 对象声明的两种方式

//实例化构造函数声明对象
const xiaoming = new Object();

xiaoming.name = "小明";
xiaoming.age = 18;
xiaoming.sex = "male";

console.log(xiaoming);

//对象字面量
const xiaoming = {
    name: "小明",
    age: 18,
    sex: "male",
};
console.log(xiaoming);

 

• 剩余参数

const demo = (a, b, ...args) => {
    console.log(a, b, args);
};

demo(1, 2, 3, 4, 5, 6);
//1,2,[3,4,5,6]

//剩余参数只能写在最后
// 这种写法报错...
const demo = (...args,a,b) => {
    console.log(args);
};

demo(1, 2, 3, 4, 5, 6);

//剩余参数也可以用于数组和对象
const [a, ...args] = [1, 2, 3, 4, 5];
console.log(a, args);
const { b, c, ...args } = { a: "first", b: "second", c: "third", d: "fourth", e: "fifth" };
console.log(b, c, args);
//second third { a: 'first', d: 'fourth', e: 'fifth' }

 

• 展开运算符

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(...arr);
//1 2 3 4 5 6 7 8

 // 求最大值
 console.log(Math.max.apply(null, arr));
 console.log(Math.max(...arr));

 

• 展开运算符和剩余参数的区别

　　　　展开运算符：数组===>参数列表 [1,2,3]===>1,2,3

　　　　剩余参数： 参数列表===>数组 1,2,3===>[1,2,3]

• 用展开运算符进行浅克隆

//展开运算符只适合浅克隆
const a = [1, 2, 3, 4, 5, 6];
const b = [...a];
a.push(7);
console.log(b);

 

• 用展开运算符进行数组合并

//数组合并不能直接用数组相加，会变成字符串拼接
const a = [1, 2];
const b = [3, 4];
const c = [5, 6, 7];

const d = [...a, ...b, ...c];
console.log(d);

 

• 展开运算符实现字符串转数组

const a = "hello world";
console.log(a.split(""));
console.log([...a]);

 

• 展开运算符：类数组转数组

function demo() {
    console.log(arguments);//[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
    console.log([...arguments]);//[ 1, 2, 3, 4, 5 ]
}

demo(1, 2, 3, 4, 5);

 

• 对象的展开（相当于对象的浅克隆）

const xiaoming = {
    username: "小明",
    age: 18,
    sex: "male",
};
// 对象的浅克隆，使用中括号{}
console.log({...xiaoming}); 
console.log(xiaoming);

 

• 对象的浅克隆

const xiaoming = {
    username: "小明",
    age: 18,
    sex: "male",
};
// 对象的浅克隆
const xiaohong = {...xiaoming};
xiaohong.age++;
console.log(xiaoming);
console.log(xiaohong);
//{ username: '小明', age: 18, sex: 'male' }
{ username: '小明', age: 19, sex: 'male' }

 

• 对象的合并（与数组一样，对象相加也不能合并）

//名字相同的属性，后面的会覆盖前面的
const xiaoming = {
    username: "小明",
    age: 18,
    sex: "male",
    weight: 100,
};
const xiaohong = {
    username: "小红",
    age: 17,
    sex: "female",
    height: 180,
};

console.log({ ...xiaoming, ...xiaohong });
//{ username: '小红', age: 17, sex: 'female', weight: 100, height: 180 }
console.log({ ...xiaohong, ...xiaoming });
//{ username: '小明', age: 18, sex: 'male', height: 180, weight: 100 }

•  set（主要用于去重）

　　　　set与数组很像，数组是一系列有序的数据合集（可重复，有顺序），set是一系列无序，但是没有重复值的合集（不重复，无顺序）

const set = new Set();

set.add(1);
set.add(2);
set.add(1);

console.log(set);// Set(2){1,2}

 

• set的属性和方法

const set1 = new Set();
const set2 = new Set();
set1.add(1);
set1.add(2);
set1.add(1);

1.add，用来新增元素，支持链式操作

set2.add(1).add(2).add(1); // 链式操作
console.log(set1, set2);

2.has，用来判断set中是否拥有某个成员（数组中用的是includes）
const set1 = new Set();
const set2 = new Set();

console.log(set1.has(1), set2.has(2), set2.has(3));
//true true false

3.delete，删除指定成员（如果没有该成员，不会有任何反应，不会报错）（数组中使用splice）

set.delete(2);
console.log(set.has(2));

4.clear，清除全部数据（数组中使用splice：arr.splice(0,arr.length);）

set.clear();
console.log(set);

5.forEach遍历set
const set = new Set();

set.add("xiaoming").add("xiaohua").add("xiaomei");

//当前值 当前键 目标set对象
set.forEach(function (value, key, s) {
    console.log(value, key, s);
});
//xiaoming xiaoming Set(3) { 'xiaoming', 'xiaohua', 'xiaomei' }
//xiaohua xiaohua Set(3) { 'xiaoming', 'xiaohua', 'xiaomei' }
//xiaomei xiaomei Set(3) { 'xiaoming', 'xiaohua', 'xiaomei' }

//可以设置this的指向（传递document作为回调函数内部this的指向）
set.forEach(function (value, key, s) {
    console.log(value, key, s);
    console.log(this);
}, document);

6.size，获取set成员个数，相当于数组的length
const set = new Set();
set.add("xiaoming").add("xiaohua").add("xiaomei");
console.log(set.size); // 3

set.delete("xiaoming");
console.log(set.size); // 2

 

• set构造方法的参数

1.数组
const set = new Set(["xiaoming", "xiaohua", "xiaomei"]);
console.log(set);

2.字符串，把字符拆开然后去重
const set = new Set("hello");
console.log(set);//Set(4) { 'h', 'e', 'l', 'o' }

3.arguments，通过set可以去重
function demo() {
    console.log(new Set(arguments));
}
demo(1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1);
//Set(6) { 1, 2, 3, 4, 5, 6 }

4.nodelist，因为每个标签是不同的，无法去重
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

<script>
    console.log(new Set(document.querySelectorAll("p")));
</script>

5.可以传一个set，实现浅克隆（set也不能直接赋值）
let set1 = new Set([1, 2, 3, 3, 2, 1]);
let set2 = new Set(set1); // 浅克隆
set1.delete(1);
console.log(set1, set2);
//Set(2) { 2, 3 } Set(3) { 1, 2, 3 }

 

• set中判断重复的标准

　　　　使用全等判断是否相等（例外：set认为NaN与另外一个NaN是全等的，只保留一个）

　　　　空数组和空对象并不重复，全部保留

　　　　数字和字符不重复

• 使用set去重

1.数组去重
const arr = [1, 2, 3, 4, 5, 6, 7, 6, 5, 4, 3, 2, 1];
const set = new Set(arr);
// set 转 数组
console.log([...set]);

2.字符串去重
const str = "abcabcabbcddacc";
// 字符串转set, 去重
const set = new Set(str);
// set转数组
const arr = [...set];
// 数组转字符串
const str1 = arr.join("");
// 得到去重的字符串
console.log(str1);

 

• set操作DOM元素

　　　　set可以使用forEach，而document.getElementByTagName()得到的HTMLCollection不能使用forEach，所有可以将HTMLCollection转成set来使用forEach遍历

<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<script>
    var htmlCollection = document.getElementsByTagName('p')
　　//将htmlCollection转成set
    var set1 = new Set(htmlCollection);
　　//使用forEach遍历set
    set1.forEach(function (value) {
        value.style.color = "red";
        value.style.backgroundColor = "yellow";
    });
</script>

 

• map

　　　　map和对象很像，都是键值对

　　　　对象以字符串作为键名，而map可以用其他的数据类型作为键值对，如String，Number，array，object，function，set，map，boolean等

const xiaoming = {
    username: "xiaoming",
    age: 18,
    sex: "male",
};

const xiaohong = new Map();


xiaohong.set("username", "xiaohong");
xiaohong.set("age", 18);
xiaohong.set("sex", "male");

console.log(xiaoming);
console.log(xiaohong);
//{ username: 'xiaoming', age: 18, sex: 'male' }
//Map(3) { 'username' => 'xiaohong', 'age' => 18, 'sex' => 'male' }

 

• map的方法和属性

1.set可以向map中添加新的元素，支持链式操作，如果有重复，后面的会覆盖前面的，与对象类似
const xiaohong = new Map();
xiaohong.set("username", "xiaohong").set("age", 18).set("sex", "male").set("age", 19);
console.log(xiaohong);
//Map(3) { 'username' => 'xiaohong', 'age' => 19, 'sex' => 'male' }

2.get，通过键名获取map中的成员
const xiaohong = new Map();
xiaohong.set("username", "xiaohong").set("age", 18).set("sex", "male");

console.log(xiaohong.get("age"));//18
console.log(xiaohong.get("address"));//undefined，获取不存在的键名返回undefined

3.has，判断map有没有对应的键名（对象中判断是否包含键名用 in）
const xiaohong = new Map();
xiaohong.set("username", "xiaohong").set("age", 18).set("sex", "male");

console.log(xiaohong.has("username")); // true
console.log(xiaohong.has("age")); // true
console.log(xiaohong.has("hello")); // false

4.delete，通过键名删除map成员，键名不存在也不会报错
const xiaohong = new Map();
xiaohong.set("username", "xiaohong").set("age", 18).set("sex", "male");

console.log(xiaohong.has("username"));
xiaohong.delete("username");
console.log(xiaohong.has("username"));
console.log(xiaohong);

4.clear，一键清除所有map成员
const xiaohong = new Map();
xiaohong.set("username", "xiaohong").set("age", 18).set("sex", "male");
console.log(xiaohong);
xiaohong.clear();
console.log(xiaohong);

5.forEach，遍历所有map
const xiaohong = new Map();
xiaohong.set("username", "xiaohong").set("age", 18).set("sex", "male");
xiaohong.forEach(function (value, key, map) {
    console.log(value);
    console.log(key);
    console.log(map);
    console.log("-------------");
});

6.size，获取map的对象个数
const xiaohong = new Map();
xiaohong.set("username", "xiaohong").set("age", 18).set("sex", "male");
console.log(xiaohong.size); // 3

 

• map构造函数的参数

1.二维数组
const xiaohong = new Map([
    ["username", "xiaohong"],
    ["age", 19],
    ["sex", "male"],
    ["height", 188],
]);

console.log(xiaohong);
/*Map(4) {
  'username' => 'xiaohong',
  'age' => 19,
  'sex' => 'male',
  'height' => 188
}*/

2.set
const set = new Set([
    ["username", "xiaohong"],
    ["age", 19],
    ["sex", "male"],
    ["height", 188],
]);

const xiaohong = new Map(set);

console.log(xiaohong);
/*Map(4) {
  'username' => 'xiaohong',
  'age' => 19,
  'sex' => 'male',
  'height' => 188
}*/

3.使用map作为参数，实现浅克隆
const xiaoming = new Map([
    ["username", "xiaoming"],
    ["age", 19],
    ["sex", "male"],
    ["height", 188],
]);

const xiaohong = new Map(xiaoming);
xiaoming.set("weight", 100);
console.log(xiaohong);
/*Map(4) {
  'username' => 'xiaoming',
  'age' => 19,
  'sex' => 'male',
  'height' => 188
}*/

 

• map中判断重复的标准，与set判断的标准一致，用===判断，且NaN===NaN
• for of循环（只有可遍历的元素才能使用for of，包括Array，String，Set，Map，arguments，NodeList等）

const arr = ["one", "two", "three", "four", "five"];

//默认获取里面的每一个值
for (const item of arr) {
    console.log(item);
}

//也可以使用values
for (const item of arr.values()) {
    console.log(item);
}

//获取索引需要使用keys
for (const item of a.keys()) {
    console.log(item);
}

//同时获取索引和值，需要使用entries()
for (const [key, value] of a.entries()) {
    console.log(key + "====>" + value);
}

 

• for in（一般用于对象的遍历）

const user = {
  username: "小明",
  age: 18,
  sex: "male",
};

获取对象的key
for (const key in user) {
  console.log(key);
}

使用key获取value
for (const key in user) {
  console.log(user[key]);
}