目录
1. let变量声明特性
1）变量不能重复声明；2）块儿级作用域；3）不存在变量提升；4）不影响作用域链
2. const变量声明特性
1）要赋初始值；2）一般常量使用大写；3）常量的值不能修改；4）块儿级作用域；5）可以修改数组和对象的元素（常量指向的地址没有改变）
3. 变量的解构赋值
1）数组的解构
const arr = ['111', '22', 'hello', 'happy'];
let [a, b, c, d] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);2）对象的解构
const obj = {
name: '',
age: '',
fun: function(){
console.log("hello!");
}
};
let {name, age, fun} = obj;
console.log(name);
console.log(age);
console.log(fun);
fun();4. 模板字符串
1）声明
let str = `hello!`;
console.log(str, typeof str); // hello! string2）内容中可以直接出现换行符
let str = `<ul>
<li>hello</li>
<li>world</li>
</ul>`;3）变量拼接
let str1 = 'hello';
let str2 = `${str1}你好`; // hello你好5. 对象的简化写法
直接写入变量和函数，作为对象的属性和方法
let name = '张三';
let fun = function(){
console.log('hello');
}
// const person = {
// name: name,
// fun: fun,
// f: function(){
// console.log("你好！");
// },
// }
const person = {
name,
fun,
f(){
console.log("你好！");
},
}6. 箭头函数
1）this 是静态的，始终指向函数声明时所在作用域下的 this 的值
2）不能作为构造函数实例化对象
3）不能使用 arguments 变量
4）箭头函数的简写
1.当形参有且只有一个的时候，省略小括号
2.当代码体只有一条语句的时候，省略花括号，此时 return 必须省略，而且语句的执行结
果就是函数的返回值
7. 函数参数默认值设置
1）具有默认值的形参一般位置要靠后
function add(a, b, c=1){
return a + b + c;
}
add(1, 2); // 4
add(1, 2, 3); // 62）与解构赋值结合
function connect({host="", username, password, port}){
console.log(host);
console.log(username);
console.log(password);
console.log(port);
}
connect({ host: "www.com", username: "admin", password: "123456", port: "8080" });
8. rest参数
// ES5 获取实参方式
// function data() {
// console.log(arguments); // 对象
// }
// data("1", "2");
// ES6 引入 rest 参数，用来代替 arguments，rest 参数 ...args 必须放最后
function data(...args) {
console.log(args); // 数组
}
data("1", "2");9. 扩展运算符
... 扩展运算符能将数组转换为逗号分隔的参数序列，['hello', '你好', '！'] =>> 'hello', '你好', '！'
const arr = ['hello', '你好', '！'];
function test(){
console.log(arguments);
}
test(...arr); // test('hello', '你好', '！')1）数组的合并和克隆
const arr1 = ['hello', '!'];
const arr2 = ['你好', '!'];
// const arr = arr1.concat(arr2);
const arr = [...arr1, ...arr2]; // ['hello', '!', '你好', '!']
const arr3 = [...arr1]; // ['hello', '!']2）将伪数组转为真正的数组
常见的伪数组有arguments和DOM对象列表，伪数组与数组一样有索引和length属性，但没有数组方法，__proto__也不一样。
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);10. 新的数据类型Symbol
一共7种数据类型，undefined、string、symbol、object、null、number、boolean。
// 创建Symbol
let s1 = Symbol();
let s2 = Symbol('ab');
let s3 = Symbol('ab');
console.log(s2===s3); // false，Symbol值是唯一的，用来解决命名冲突问题
let s4 = Symbol.for('ab');
let s5 = Symbol.for('ab');
console.log(s4===s5); // true
// Symbol值不能与其他数据进行运算作用：向对象中添加属性方法
let game = {
name: "游戏",
up: function(){
console.log("up函数");
},
down: function(){
console.log("down函数");
},
[Symbol('方法一')]: function(){
console.log("方法一函数");
},
};
let methods = {
up: Symbol(),
down: Symbol(),
};
game[methods.up] = function(){
console.log("添加的up函数");
};
game[methods.down] = function(){
console.log("添加的down函数");
};11. 迭代器
任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（可用 for of 遍历）。工作原理：创建一个指针对象，指向当前数据结构的起始位置，不断调用对象的 next 方法，指针一直往后移动，直到指向最后一个成员。每调用一次next方法返回一个包含value和done属性的对象，{value:"唐僧",done:false}{value:"孙悟空",done:false}...{value:undefined,done:true}。
const arr = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
for(let v of arr){
console.log(v); // 唐僧 孙悟空 猪八戒 沙僧 v保存键值
}
// for(let v in arr){
// console.log(v); // 0 1 2 3 v保存键名
// }12. 生成器
生成器函数是 ES6 提供的一种异步编程解决方案
function * gen(){
yield 111;
yield 'hello';
}
let iterator = gen();
console.log(iterator.next()); // {value:111,done:false}
console.log(iterator.next()); // {value:'hello',done:false}
console.log(iterator.next()); // {value:undefined,done:true}
// 遍历
for(let v of gen()){
console.log(v); // 111 hello
}生成器函数的参数传递
function * gen(arg){
console.log(arg);
let one = yield 111;
console.log(one);
let two = yield 'hello';
console.log(two);
}
let iterator = gen('AAA');
console.log(iterator.next()); // AAA {value:111,done:false}
// next 方法传入实参，作为第一个 yield 语句返回结果
console.log(iterator.next('BBB')); // BBB {value:hello,done:false}
// next 方法传入实参，作为第二个 yield 语句返回结果
console.log(iterator.next('CCC')); // CCC {value:undefined,done:true}function getUsers(){
setTimeout(()=>{
let data = '用户数据';
iterator.next(data); // 作为第一个 yield 的返回值
},1000)
}
function getOrders(){
setTimeout(()=>{
let data = '订单数据';
iterator.next(data);
},1000)
}
function getGoods(){
setTimeout(()=>{
let data = '商品数据';
iterator.next(data);
},1000)
}
function * gen(){
let users = yield getUsers();
console.log(users); // 用户数据
let orders = yield getOrders();
console.log(orders); // 订单数据
let goods = yield getGoods();
console.log(goods); // 商品数据
}
let iterator = gen();
iterator.next();13. 新的数据结构Set(集合)
// 声明一个 set
let s = new Set();
let S2 = new Set(['你好','hello','world']);
// 元素个数
console.log(s2.size);
// 添加新的元素
s2.add('拜拜');
// 删除元素
s2.delete('你好');
// 检测元素是否存在
console.log(s2.has('hello')); // true
// 清空
s2.clear();
for(let v of s2){
console.log(v);
}let arr = [1,2,3,4,5,4,3,2,1];
// 数组去重
let result = [...new Set(arr)];
console.log(result); // [1,2,3,4,5]
// 交集
let arr2 = [4,5,6,5,6];
let result = [...new Set(arr)].filter(item => {
let s2 = new Set(arr2); // 4 5 6
if(s2.has(item)){ // arr2中含有arr元素
return true;
} else {
return false;
}
});
// let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
// 合并
let union = [...new Set([...arr, ...arr2])];
// 差集
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));14. 数据结构Map
// 声明 Map
let m = new Map();
// 添加元素
m.set('name', '张三'); // 第一个参数键名 key ，第二个参数键值 value
m.set('fun', function(){
console.log("你好！");
});
console.log(m.size);
// 删除
m.delete('name');
// 获取
console.log(m.get('fun'));
// 清空
m.clear();
// 遍历
for(let v of m){
console.log(v);
}15. class
1）ES5通过构造函数实例化对象方法
function Person(name, old){
this.name = name;
this.old = old;
}
Person.prototype.call = function(){
console.log("你好！");
}
// 实例化对象
let zhangsan = new Person('张三', 18);
zhangsan.call();2）ES6通过类实例化对象
class Person{
// 构造方法
constructor(name, old){
this.name = name;
this.old = old;
}
call(){
console.log("你好！");
}
// 静态属性属于类，不属于实例对象
static id = 1;
}
// 实例化对象
let zhangsan = new Person('张三', 18);
zhangsan.call();
// 继承
class Student extends Person {
// 构造方法
constructor(name, old, school){
super(name, old);
this.school = school;
}
fun(){
console.log("hello！");
}
// 子类对父类方法重写
call(){
console.log("hello，你好！");
}
}
// 实例化对象
let lisi = new Student('李四', 20);
lisi.call();
lisi.fun();3）class 中 get 和 set 设置
class Phone{
get price(){
console.log("读取价格属性");
return '返回值';
}
set price(newVal){
console.log("修改价格属性");
}
}
let p = new Phone();
console.log(p.price); // 读取实例对象的 price 属性，就会执行里面的代码，且函数返回值就是属性的返回值
// 执行结果 读取价格属性 返回值
p.price = 'free'; // 修改价格属性16. 数值扩展
1）Number.EPSILON 是 JavaScript 表示的最小精度，值接近于2.2204460492503130808472633361816E-16。如果两个数的差值小于EPSILON，则认为这两个数相等。
2）Number.isFinite 检测一个数值是否为有限数。
3）Number.isNaN 检测一个数值是否为NaN。
4）Number.parseInt Number.parseFloat 字符串转数字。
5）Number.isInteger 判断一个数是否为整数。
6）Math.trunc 将数字的小数部分抹掉。
7）Math.sign 判断一个数为正数、负数还是零，对应返回（1，0或-1）。
17. 对象方法扩展
1）Object.is 判断两个值是否完全相等。
2）Object.assign 对象的合并。
3）Object.setPrototypeof 设置原型对象 Object.getPrototypeof 获取原型对象。
18. 模块化
模块功能主要由两个命令构成：export 和 import。
1）暴露数据语法
// 分别暴露
export let name = '张三';
export function(){
console.log("你好！");
}
// 统一暴露
let name = '张三';
function fun(){
console.log("你好！");
}
export {name， fun};
// 默认暴露
export default {
name: '张三',
fun: function(){
console.log("你好！");
}
}2）引入数据语法
// 通用的导入方式
import * as m from "./src/js/m.js";
// 解构赋值形式
import {name, fun} from "./src/js/m.js";
import {name as name1, fun as fun1} from "./src/js/m1.js";
import {default as m2} from "./src/js/m2.js";
// 简便形式，针对默认暴露
import m3 from "./src/js/m3.js";
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
