ES6介绍和使用（一）

摘要：ES6、ES7简介和调试方法

简介：

ES 就是 ECMAScript的简称，ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。
ES6 也叫 ES2015 全称是ECMAScript2015

const 和 let

1.1 const 用来定义常量。所谓的常量就是一次性定义终身不变的量。
常量的名字一般大写字母开头，暗示这是一个常量。

const HELLO = "你好";

1.2 let 用来定义{}级作用域下的变量。注意{}级我们叫做块级作用域。
用let来定义的循环变量，它的神奇之处，自带闭包。

for(let i = 0; i < 10 ; i++){
	console.log(i);
};
console.log(i); //报错

数组和对象解构

2.1 当等号右侧是数组的时候，等号左侧可以将变量装入[]中接收，一一对应。

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

对象可以解构。当等号右侧是对象的时候，等号左侧可以将变量装入{}接收，一一对应。

let { id, name, sex } = { id:1, name:"张三", sex:"男" };
console.log(id); // 1
console.log(name); // 张三
console.log(sex); //男

如果解构不成功，变量的值就等于undefined。

let [x,y,...z] = ["a"];
console.log(x); // "a"
console.log(y); // undefined
console.log(z); // []

拓展运算符...

3.1 我们可以用 ... 拓展运算符强制展开一个对象，通常用于另一个对象的赋值，数组同样也可以强制打开

let obj = {
	a:1,
	b:2,
	c:3
}
let obj1 = {
	...obj,
	b:8
}

console.log(obj1); //{ a:1,b:8,c:3 }

let arr1 = [1,2,3];
let arr2 = [4,5];
let arr3 = [...arr1,...arr2];

console.log(arr3); // [1,2,3,4,5]

在ES5以前求一个数组相加的结果

const sum = function(a,b,c,d){
    return a + b + c + d;
}
var arr = [1,2,3,4];
var result = sum.apply(null,arr);

console.log(result); //10

上面的示例中，可用ES6的拓展运算符解决apply方式调用

const sum = function(a,b,c,d){
    return a + b + c + d;
}
let arr = [1,2,3,4];
let result = sum(...arr);

console.log(result); //10

拓展运算符还有参数解耦功能，注意:...只能做为最后参数使用

let [a,b] = [1,2,3,4,5,6];
console.log(a); // 1
console.log(b); // 2

let [a,...b] = [1,2,3,4,5,6]
console.log(a); // 1
console.log(b); // [2,3,4,5,6]

字符串相关处理

includes() 返回布尔值，表示是否找到了参数字符串。 它和 indexOf 很像。
startsWith() 返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith() 返回布尔值，表示参数字符串是否在原字符串的尾部。
repeat(num) 返回一个新字符串，表示将原字符串重复n次。

let str = "你好世界！";
let a = str.includes("好");
let b = str.startsWith("你");
let c = str.endsWith("!");

console.log(a); //true
console.log(b); //true
console.log(c); //true

let str = "你好世界！";
let a = str.includes("世界",2);
let b = str.startsWith("世界",2);
let c = str.endsWith("你好",2);

console.log(a); //true
console.log(b); //true
console.log(c); //true

let a = "hello".repeat(2);
console.log(a); // "hellohello"

参数如果是小数，会被取整。
参数NaN等同于 0。
如果repeat的参数是负数或者Infinity，会报错。

let a = "hello".repeat(2.1); // "hellohello"
let b = "hello".repeat(0);   // ""
let c = "hello".repeat(-0.9);// ""
let d = "hello".repeat(NaN); // ""
let e = "hello".repeat(Infinity); // RangeError
let f = "hello".repeat(-2); // RangeError

如果repeat的参数是字符串或者布尔值，则会先转换成数字。

let a = "hello".repeat("he"); // ""
let b = "hello".repeat("2"); // "hellohello"
let c = "hello".repeat(true); // "hello"

---

对象处理

1.1 Object.is()

比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。
它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。
Object.is就是部署这个算法的新方法。
它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

Object.is("foo","foo"); // true
Object.is({},{}); // false
Object.is([],[]); // false

不同之处只有两个：一是+0不等于-0，二是NaN等于自身

+0 === -0 // true
NaN === NaN // false

Object.is(+0,-0); // false
Object.is(NaN,NaN); // true

---

1.2 Object.assign()

Object.assign方法用于对象的合并, 第一个参数是目标对象，后面的参数都是源对象。
注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

let target = { a:1, b:1, c:1 };
let source1 = { b:2, c:2 };
let source2 = { c:3 };
Object.assign(target,source1,source2); // { a:1, b:2, c:3 }

如果只有一个参数，Object.assign会直接返回该参数。

let target = { a:1 };
Object.assign(target); // {a:1}

注意：Object.assign方法实行的是浅拷贝，而不是深拷贝。
也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

---

1.3 Object.keys() and Object.values()
Object.keys() 可以将对象所有的key名字列为一个数组
Object.values() 可以将对象所有的value值列为一个数组

let Obj = {
    a:1,
    b:2,
    c:3
}
Object.keys(Obj); // [ a, b, c]
Object.values(Obj); // [ 1, 2, 3]

---

数组处理

ES6新增的4个循环方式：forEach(),map(),filter(),reduce()。

---

1.1 forEach()
forEach() 方法用来遍历数组，里面的参数是item,index,分别是遍历到的这一项和这一项的下标。
forEach没有return 返回值。

let arr = [ "你好", "世界" ];
arr.forEach((item,index)=>{
    console.log("第" + index + "项是" + item);
})
// 第0项是你好
// 第1项是世界

---

1.2 map()
map() 能创建新数组，Map的机理就是依次是遍历数组中的每一项，将每一项都执行一遍你的函数中的过程，返回一个新的数组。

let arr = [ 1,2,3,4,5,6]
let arr2 = arr.map(item=>{
    return item*2
})
console.log(arr2); // [2,4,6,8,10,12]

---

1.3 filter()
过滤，从原来的数组中过滤符合条件项，组合成为新的数组。
filter的机理是：数组中的每一个值后依次的执行函数，当return的值true的时候，判断是否在该数组中，反之不在。

let arr = [
    { id: 1, name:"小张", sex:"男" },
    { id: 2, name:"小王", sex:"女" },
    { id: 3, name:"小李", sex:"男" },
    { id: 4, name:"小赵", sex:"女" },
    { id: 5, name:"小胡", sex:"男" }
]
let arrData = arr.filter((item)=>{
    return item.sex == "女"
})

console.log(arrData); // [{ id: 2, name:"小王", sex:"女" },{ id: 4, name:"小赵", sex:"女" }]

1.4 reduce()
reduce的机理是：数组迭代器，第一个参数为每次return的值，第二个参数是当前所迭代的值，每次循环的得到的结构会返回作为第一个参数，供下次迭代使用

let arr = [1,2,3,4];
let sum = arr.reduce((a,b)=>{
    return a+b;
})

console.log(sum); // 10

reduce() 求数组最大值

let arr = [10,30,22,89,23,45,2,12,78];
let max = arr.reduce((a,b)=>{
    return a > b ? a : b ;
});

console.log(max); // 89

1.5 find()与 findIndex()
本方法不会遍历完整的数组，遇见第一个retrun true的时候就停止了。
本方法是用来找到第一个符合条件的数组成员。
本方法的参数是一个函数，所有的数组成员依次的执行函数，直到知道第一个为true的成员，然后返回，如果没有符合条件的成员，则返回undefined。

let num = [1,3,12,-1,10,20].find((item)=>{ 
    return item < 0;
});

或

let num = [1,3,12,-1,10,20].find((item)=> item < 0 );

//以上返回的结果都是找到第一个不小于0的值就返回，不在向下执行。
console.log(num); // -1

findIndex(),本方法返回第一个符合条件的下标。

let numIndex = [1,3,12,-1,10,20].find((item)=> item < 0 );

//返回符合条件的下标
console.log(numIndex); // 3

注意： find（）结合return使用可以实现break 终止循环效果

1.6 some() 和 every()
some(),判断数组中是否至少有一个元素满足条件,只要有一个满足就返回true,只有都不满足时才返回false.

let arr = [1,2,3,4,5];
let a = arr.some((value,index,array)=>{
    return value % 2 == 0 ;
})

console.log(a); // true

every(),判断数组中是否每个元素都满足条件,只有都满足条件才返回true,只要有一个不满足就返回false。

let arr = [1,2,3,4,5];
let a = arr.every((value,index,array)=>{
    return value % 2 == 0 ;
})

console.log(a); //false

未完待续。。。。

赏

×

有钱的捧个钱场！没钱的捧个人场

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦