ES6

JSON对象

1. js对象-->json对象

JSON.stringify(obj/arr);

2. json对象-->js对象

JSON.parse(json);

let

ES6中新增的用于声明变量的关键字

let声明的变量只在所处的块级有效，只在所在的块中有效。var就不具备这个特点。

if(true){
  let a = 10;
}
console.log(a);	//a is not define

　　　　let声明的关键字可以防止循环变量变成全局变量

let不存在变量提升，只能先声明再使用
使用let声明的变量具有暂时性死区，块级作用域声明的变量，不会受外部影响。

面试题

var arr = [];
for(var i = 0; i < 2; i++){
  arr[i] = function(){
    console.log(i);
  }
}
arr[0]();
arr[1]();

存储如图，arr数组中存储的是函数function，执行下边arr[0] ()时，调用了函数，但是函数体中没有定义变量i所以去全局变量中寻找变量i，全局变量中的i应该是执行完循环后的值，为2所以打印出来应该为2，同理。arr[1] ()执行也是打印出2

结果为 2 2

var arr = [];
for(var i = 0; i < 2; i++){
  arr[i] = function(){
    console.log(i);
  }
}
arr[0]();
arr[1]();

执行循环，因为i为let声明所以只在自己的作用域内有效，循环结束后就产生了两个块级作用域。调用arr[0] ()时没有变量i所以去上一级查找，就到了块级作用域中，所以查找到的变量i就是0，同理arr[1] ()时，i为1

结果为 `0 1`

const

作用：声明常量，常量就是地址不变化的量

具有块级作用域
声明常量必须赋值
常量赋值后，值不能更改

解构赋值

数组解构

ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。

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

对象解构

按照一定模式，从对象中提取值，将提取出来的值赋值给另外的变量。

第一种方法

let person = {name:'zhangsan',age:20};
let {name,age} = person;
console.log(name); // zhangsan
console.log(age);	// 20

第二种方法

let person = {name:'zhangsan',age:20};
let{name:myName,age:myAge} = person;
console.log(myName);
console.log(myAge);

箭头函数

ES6中新增的函数方法

() => {};	//格式
// 因为箭头函数没有名字所以我们通常把箭头函数赋值给一个变量，这样就可以调用它了
const fn = () => {};

函数体中只有一句代码，且代码执行结果为返回值可以省略大括号

const sum = (num1, num2) => num1 + num2;

如果形参只有一个，可以省略小括号　　

const fn = v => v;

箭头函数不绑定this，箭头函数中的this指向的是函数定义位置的上下文this

扩展运算符

扩展运算符可以将数组或者对象转化为用逗号分隔的参数序列。

let ary = [1, 2, 3];
...ary; //1, 2, 3
console.log(...ary); // 1 2 3

应用：

应用于合并数组

// 方法一
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
let ary3 = [...ary1 , ...ary2];
// 方法二
ary1.push(...ary2);

　　　2. 将伪数组转化为真正的数组

var ary = [...divs];

Array的方法

Array.from

可以将伪数组转化为真数组

Array.from(arrayLink,item => item*2)第一个参数接收伪数组，第二个参数是一个函数，将数组中的所有数，通过函数进行处理。

Array.find

用于找出第一个符合条件的数组成员，如果没有找到返回undefine

Array.findIndex

用于找出第一个符合条件的数组成员的位置，如果没有返回-1

Array.includes

表示某个数组中是否包含给定值

[1, 2, 3].includes(2); //true

模板字符串

let name = `这是一个模板字符串`;

1. 模板字符串可以解析变量

let name = 'zhangsan';
let sayHello = `hello, my name is ${name}`; //hello, my name is zhangsan

2. 模板字符串中可以换行

3. 模板字符串中可以调用函数

const sayHello = function(){
  return 111;
};
let greet = `${sayHello()}hhh`;
console.log(greet);

strartsWith和endsWith()

startsWith():表示参数字符串是否在原字符串头部，返回布尔值
endsWith():表示参数字符串是否在原字符串结尾，返回布尔值

let str = 'Hello world';
str.startsWith('Hello'); //true
str.endsWith('!') //true

ES6提供了新的数据结构Set。

它类似于数组但是成员的值是惟一的，没有重复的值。

Set本身就是一个构造函数，用来生成Set数据结构

const s = new Set();

set方法

add(value):添加某个值，返回Set结构本身

delete(value):删除某个值，返回一个布尔值，表示删除是否成功

has(value):返回一个布尔值，表示value是否为Set的成员

clear()清除所有成员，没有返回值

遍历

s.forEach(value=>console.log(value))

posted @ 2020-09-26 20:04 呦啊哈阅读(53) 评论(0) 收藏举报

刷新页面返回顶部

呦啊哈

ES6