1、变量声明
ES6之后,JavaScript中声明变量的方法有:var、function、import、class、const、let 其中最常用的便是const和let了。
const:
- 声明常量:const声明常量,声明在之后,就不可以更改。
- 声明变量:const声明变量,必须立即初始化。
ps:若这个变量是数组或者对象的话,它里面持有的内容是可以被更新的。因为使用const声明一个复合类型的数据(主要是对象和数组),变量名不指向数据,而是指向数据的地址。
let:
- 作用域:
let
声明的变量只有所在的代码块有效,可以理解为let
声明有作用域。 - 不存在变量的提升:使用
let
声明的变量要在声明后使用,否则会报错。 - 暂时性死区:使用let命令声明变量之前,该变量都是不可用的。
let类似于var,但是不同于var
- var定义的变量,存在变量的提升。
- var和function声明的全局变量,顶层对象可访问
ps:顶层对象,浏览器中指的是window对象,在Node中指的是global对象。
以浏览器为例:
//使用var定义的变量,存在变量的提升。
console.log(a); //undefined
var a = 10;
//使用let定义的变量,不存在变量的提升,所以下面的代码会报错
console.log(b); // ReferenceError: b is not defined
let b = 20;
//var和function声明的全局变量,顶层对象可访问。如下:
var a = 1;
window.a //1
function b(){}
window.b //ƒ b(){}
//let声明变量为,顶层对象不可访问
let c=2;
window.c //undefined
2、模板字符串
//使用反引号包裹内容,可以使用${},插入变量
//字符串中嵌入变量
let name = 'Bob',time = 'today';
let str = `Hello ${name},how are you ${time}`
3、字符串扩展方法
- includes
- startWith
- endsWith
4、箭头函数
-
写法简化
-
箭头函数不改变
this
指向const name = 'tony' const people = { name: 'tom', getName: () => console.log(this.name), peopleName: function () { console.log(this.name) } } people.getName() //tony person.peopleName() //tom
5、函数参数增强:参数默认值
const fn = function (x=1, y) {
console.log("x:",x)
console.log("y:",y)
}
fn()// x:1 y:undefined
6、...操作符
const arr = [1,2,3,4]
console.log(...arr) //1 2 3 4
7、使用export和import实现模块化
//app.js
let person = {
age:'10',
name:'jack'
};
module.exports = person; //所暴露出的对象
//index.js
let person = require('./app'); //加载app模块
console.log('姓名'+person.name); //姓名jack
8、新方法
Object.assign()
//合并多个对象,第一个参数就是最终的返回值,如果对象的属性名相同,后面的覆盖前面的
let A = {
a: 'a',
b: 'b'
}
let B = {
b: 'bbb',
c: 'c'
d: 'd'
}
let result = Object.assign({}, A, B)
console.log(objA, result)
//{a: "a", b: "b"} {a: "a", b: "bbb", c: "c",d:"d"}Object.is()
//es5中,对于0的判断不区分正负值,-0 == +0返回true,NaN == NaN返回 返回false;
//Object.is()规避了这些问题
Object.is(+0, -0)//false
Object.is(NaN, NaN) //true
Object.keys()
Object.keys({a:1,b:2}) //["a", "b"]
Object.values()
Object.values({a:1,b:2}) //[1, 2]
Object.entries()
Object.entries({a:1,b:2}) // [["a",1],["b",2]]
9、数据结构
set 是一种类数组,是只存储key的集合,key不能重复,
Set去重 -0 与+0 NaN与NaN 是相等的,对象始终是不相等的,
Array.from方法可以将 Set 结构转为数组。
常用方法:
add(value):添加某个值,返回Set结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。//用于数组去重
const arr = [1,2,3,2,4]
console.log([... new Set(arr)]) //[1,2,3,4]
//Set去重 -0 与+0 NaN与NaN 是相等的,对象始终是不相等的
console.log(...new Set([NaN, NaN, +0, -0]));//NaN 0
console.log(...new Set([{1:1},{1:1}]));//{ '1': 1 } { '1': 1 }
//Array.from方法可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5]); //items {1, 2, 3, 4, 5}
const array = Array.from(items); //array [1, 2, 3, 4, 5]
Set 结构的实例有四个遍历方法,可以用于遍历成员。
常用方法:
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员
map
// 创建 let m = new Map([[1,'a'], [2,'b']]);
console.log(m) // {1 => "a", 2 => "b"}
// 取值
m.get(1) // 'a'
// 赋值
m.set(3, 'c')
// 删除
m.delete(3) // true or false
// 验证 Key 是否存在
m.has(3) // true or false
// 长度
m.size // 2
// 获取 Key | 返回一个可迭代对象,具体查看迭代相关章节
m.keys() // MapIterator {1, 2}
// 获取 Value
m.values() // MapIterator {'a', 'b'}