文章目录
1.let const var比较
- let 和 const 定义的变量不会出现变量提升，而 var 定义的变量会提升。
- let 和 const 是JS中的块级作用域
- let 和 const 不允许重复声明(会抛出错误)
- let 和 const 定义的变量在定义语句之前，如果使用会抛出错误(形成了暂时性死区)，而 var 不会。
- const 声明一个只读的常量。一旦声明，常量的值就不能改变(如果声明是一个对象，那么不能改变的是对象的引用地址)
2.反引号（`）标识
用一对反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，也可以在字符串中嵌入变量，js表达式或函数，变量、js表达式或函数需要写在${ }中。
var str = `abc
def
gh`;
console.log(str);
let name = "小明";
function a() {
return "ming";
}
console.log(`我的名字叫做${
name}，年龄${
17+2}岁，性别${
'男'}，游戏ID：${
a()}`);
3.函数默认参数
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
function A(a,b=1){
console.log(a+b);
}
A(1); //2
A(2+3); //5
4.箭头函数
在es6中，提供了一种简洁的函数写法，我们称作“箭头函数”。
写法：函数名=(形参)=>{……} 当函数体中只有一个表达式时，{}和return可以省略，当函数体中形参只有一个时，()可以省略。
特点：箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数，如果没有最近的函数就指向window。
//省略写法
var people = name => 'hello' + name;
var getFullName = (firstName, lastName) => {
var fullName = firstName + lastName;
return fullName;
}
5.属性简写
- 属性的简写。ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。
var foo = 'bar';var baz = {
foo}; //等同于 var baz = {foo: foo}
6.方法简写
方法的简写。省略冒号与function关键字。
var o = {
method() {
return "Hello!";
}
};
// 等同于
var o = {
method: function() {
return "Hello!";
}
};
7.Object.keys()方法，获取对象的所有属性名或方法名
- Object.keys()方法，获取对象的所有属性名或方法名（不包括原形的内容），返回一个数组。
var obj={
name: "john", age: "21", getName: function () {
alert(this.name)}};
console.log(Object.keys(obj)); // ["name", "age", "getName"]
console.log(Object.keys(obj).length); //3
console.log(Object.keys(["aa", "bb", "cc"])); //["0", "1", "2"]
console.log(Object.keys("abcdef")); //["0", "1", "2", "3", "4", "5"]
8.Object.assign ()原对象的属性和方法都合并到了目标对象
Object.assign ()，assign方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数，第一个参数是目标对象，后面的都是源对象。
var target = {
}; //目标对象
var source1 = {
name : 'ming', age: '19'}; //源对象1
var source2 = {
sex : '女'}; //源对象2
var source3 = {
sex : '男'}; //源对象3，和source2中的对象有同名属性sex
Object.assign(target,source1,source2,source3);
console.log(target); //{name : 'ming', age: '19', sex: '男'}
9.for…of 循环
是遍历所有数据结构的统一的方法。for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、Generator 对象，以及字符串。
var arr=["小林","小吴","小佳"];
for(var v of arr){
console.log(v);
}
//小林
//小吴
//小佳
10.import和export
ES6标准中，JavaScript原生支持模块(module)了。这种将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。
export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口。
import用于在一个模块中加载另一个含有export接口的模块。
import和export命令只能在模块的顶部，不能在代码块之中。
//导入部分
//全部导入
import Person from './example'
//将整个模块所有导出内容当做单一对象，用as起别名
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())
//导入部分
import {
name } from './example'
//导出部分
// 导出默认
export default App
// 部分导出
export class User extend Component {
};
11.Promise对象
Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败。
Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。then()方法接收两个参数：onResolve和onReject，分别代表当前 promise 对象在成功或失败时。
var promise = new Promise((resolve, reject) => {
var success = true;
if (success) {
resolve('成功');
} else {
reject('失败');
}
}).then(
(data) => {
console.log(data)},
(data) => {
console.log(data)}
)
promise的执行过程
setTimeout(function() {
console.log(0);
}, 0);
var promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(function () {
var success = true;
if (success) {
resolve('成功');
} else {
reject('失败');
}
},2000);
}).then(
(data) => {
console.log(data)},
(data) => {
console.log(data)}
);
console.log(promise); //<pending> 进行中
setTimeout(function () {
console.log(promise); //<resolved> 已完成
},2500);
console.log(2);
//1
//Promise {<pending>}
//2
//0
//成功
//Promise {<resolved>: undefined}
12.解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
- 数组的解构赋值
数组中的值会自动被解析到对应接收该值的变量中，数组的解构赋值要一一对应 如果有对应不上的就是undefined
var [name, pwd, sex]=["小周", "123456", "男"];
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男
- 对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
var obj={
name:"小周", pwd:"123456", sex:"男"}
var {
name, pwd, sex}=obj;
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男
13.set数据结构（可用于快速去重）
Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数。
属性和方法：
size 数据的长度
add() 添加某个值，返回 Set 结构本身。
delete() 删除某个值，返回一个布尔值，表示删除是否成功。
has() 查找某条数据，返回一个布尔值。
clear() 清除所有成员，没有返回值。
var arr = [1,1,2,2,3];
var s = new Set(arr);
console.log(s); //{1, 2, 3}
console.log(s.size); //3
console.log(s.add(4)); //{1, 2, 3, 4}
console.log(s.delete(4)); //true
console.log(s.has(4)); //false
s.clear();
14.Spread Operator 展开运算符(…)
将字符串转成数组
var str="abcd";
console.log([...str]) // ["a", "b", "c", "d"]
将集合转成数组
var sets=new Set([1,2,3,4,5])
console.log([...sets]) // [1, 2, 3, 4, 5]
两个数组的合并
var a1=[1,2,3];
var a2=[4,5,6];
console.log([...a1,...a2]); //[1, 2, 3, 4, 5, 6]
在函数中，用来代替arguments参数
rest参数 …变量名称
rest 参数是一个数组 ，它的后面不能再有参数，不然会报错
function func(...args){
console.log(args);//[1, 2, 3, 4]
}
func(1, 2, 3, 4);
function f(x, ...y) {
console.log(x);
console.log(y);
}
f('a', 'b', 'c'); //a 和 ["b","c"]
f('a') //a 和 []
f() //undefined 和 []
- 移除某几项
//数组
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//对象
const user = {
username: 'lux',
gender: 'female',
age: 19,
address: 'peking'
}
const {
username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"
15.字符串新增方法
// 1. includes()返回布尔值：表示是否找到了参数字符
let str = 'hahay'
console.log(str.includes('y')) // true
// 2. repeat(): 获取字符串重复n次
let s = 'he'
console.log(s.repeat(3)) // 'hehehe'
// 3. startsWith()返回布尔值：表示参数字符串是否在源字符串的头部
console.log("lxy".startsWith('l'));//true
console.log("lxy".startsWith('x'));//false
// 4. endsWith()返回布尔值，表示参数字符串是否在源字符串的尾部
console.log("lxy".endsWith('y'));//true
console.log("lxy".endsWith('x'));//false