es6学习(1)

发表于 | 分类于

简介

es6主要是为了解决es5的先天不足，例如js里没有类的概念，大多数浏览器支持es6的语法，不过只实现了es6的部分特性和功能。

let和const

let声明的变量只在let命令所在的代码块是有效的，在其余地址无效
const声明一个只读的变量，一旦声明，常量的值便无法修改。

1
2
3
4
5
6
7
{
    let a = 0;
    console.log(a);
    var b = 1;
}
console.log(b);
console.log(a);

a在外部无法打印出，在大括号内部可打印出,b声明的变量是全局有效的。在外部可打印出。
const声明的变量在声明后便无法进行修改。
值得注意的是，const其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许变动。此时，你可能已经想到，简单类型和复合类型保存值的方式是不同的。是的，对于简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。

1
const PI = 3.14

解构赋值

解构赋值是对赋值运算符的扩展。
是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁易读，语义也更加清晰明了。

1
2
let [a,b,c] = [1,2,3];
console.log(b);

可进行忽略的

1
2
let [c,,d] = [1,2,3];
console.log(d);

剩余运算符

1
2
3
≈
console.log(a);
console.log(b);

将1赋值给a，剩余的全都赋值给b
对象模型的解构(object)

1
2
3
let{foo,bar} = {foo:'aaa',bar:'bbb'};
console.log(foo);
console.log(bar);

必须让对应的key对应上，否则将不会对应上。解构。
可嵌套可忽略

1
2
3
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
console.log(x);

可进行解析赋值。
剩余运算符

1
2
3
4
let {a,b,...rest} = {a:10,b:20,c:30,d:40};
console.log(a);
console.log(b);
console.log(rest);

将a,b进行赋值，为10和20，剩余的全都赋值给rest

Symbol对象

es5有5种基本数据类型。分别为number,string,null,undefined和boolean,
es6则新增了symbol。
symbol函数栈不能用new命令，因为symbol是原始数据类型，不是对象。可以接受一个字符串作为参数。

1
2
3
let sy = Symbol("kk");
console.log(sy);
console.log(typeof (sy));

输出为Symbol(kk)和类型为symbol.
使用场景 可以作为属性名. 每一个symbol的值都是不相同的。所以symbol作为对象的属性名，可以保证属性不重名。

1
2
3
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);

ES6的map和set

map对象保存键值对，任何值都可以作为一个键或者一个值。
object中的键只能是字符串或者是symbol.但一个map的键可以是任意值。
key是字符串

1
2
3
4
var myMap = new Map();
var keyString = "a string";
myMap.set(keyString,"键是字符串");
console.log(myMap.get(keyString));

key是对象

1
2
3
4
var myMap = new Map();
var keyObj = {};
myMap.set(keyObj,"key是对象");
console.log(myMap.get(keyObj));

key是函数

1
2
3
4
var myMap = new Map();
var keyFunc = function(){};
myMap.set(keyFunc,"key是函数");
console.log(myMap.get(keyFunc));

Map的迭代
for…of 的迭代

1
2
3
4
5
myMap.set(0,"zero");
myMap.set(1,"one");
for(var [key,value] of myMap){
    console.log(key + "=" + value);
}

只显示key

1
2
3
for(var key of myMap.keys()){
    console.log(key);
}

只显示value

1
2
3
for(var key of myMap.values()){
    console.log(key);
}

forEach的遍历

1
2
3
myMap.forEach(function(value,key) {
    console.log(key + "=" + value);
});

Set对象
set对象允许你存储任何类型唯一的值，无论是原始值或者是对象引用。

1
2
3
4
5
let mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add("some text");
console.log(mySet);

字符串等的一些操作

es5判断包含字符串，用indexOf的方法。
es6新增了includes(),startWith()方法，但只能返回布尔值，
若要知道具体是第几个位置，还是需要用indeOf或者lastIndexOf

1
2
3
4
5
let str = "apple,banana,orange";
console.log(str.includes("banana"));
console.log(str.startsWith("a"));
let str = "ge,banana,orange";
console.log(str.indexOf("ge"));

数值的操作

浮点数的判断相等往往会出现问题
例如

1
console.log(0.1 + 0.2 === 0.3);

会输出false
Number.EPSILON属性表示1与大于1的最小浮点数之间的差。
测试数值是否在误差范围内。

1
console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON);

对象的简单表示

1
2
3
4
5
6
7
//对象的简洁表示法
  const age = 12;
  const name = "Amy";
  const person = {age,name};
  //等同于
 // const person = {age:age,name:name};
  console.log(person);

对象中的方法也可以进行缩写

1
2
3
4
5
const person = {age,name,
    sayHi(){
    console.log("hello");
    }
};

允许用表达式作为属性名字，但是一定要将表达式放在方括号的内部

1
2
3
4
5
const obj = {
    ["he" + "llo"](){
        return "ckq";
    }
}

…这个运算符可进行两个对象之间的合并。
但是要注意的是，自定义的属性和拓展运算符对象里面属性相同的时候，自定义的属性在拓展运算符后面，则拓展运算符的会将其覆盖
如果拓展的在后面，则会将前面那个覆盖
如下

1
2
3
4
5
let person = {name:"Amy",age:15};
let someone = {...person,name:'Mike',age:17};
console.log(someone);
let sometwo = {name:"Mike",age:"17",...person};
console.log(sometwo);

第一个输出name:Mkie,age:17，而第二个输出name:Amy,age:15。

创建数组的方法

1
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]

参数值可为不同的类型

1
console.log(Array.of(1, '2', true)); // [1, '2', true]

Array.from可将对象迭代转化成为数组
mapFn可以进行迭代，对每个元素进行处理，随后放入数组的是处理后的元素。

1
2
3
console.log(Array.from([1, 2, 3], (n) => {
 return  n * 5;
})); // [5, 10, 15]

thisArg 可选，用于指定map函数执行时候的this对象.

1
2
3
4
5
6
7
8
9
let map = {
    do: function (n) {
        return n * 7;
    }
}
    let arrLike = [1,2,3];
    console.log(Array.from(arrLike,function (n) {
        return this.do(n);
    },map));

表示将map对象传入，随后可以将arrLike中的值进行计算返回。