JS高级笔记7

时间：2019/11/9

5.ES6

1).let关键字
1.具有块级作用域

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

for(let i = 0; i < 2; i++) {}
console.log(i); // i is not defined(防止循环变量变为全局变量)

2.不存在变量提升

console.log(a); // a is not defined
let a = 20;

3.暂时性死区

var num = 10;
if (true) {
  console.log(num);
  // 此时num与块级作用域整体绑定，不受外部影响，num is not defined
  let num = 20;
}

2).const关键字（声明常量，即值(内存地址)不能变化的量）
1.具有块级作用域
2.必须赋初始值
3.常量赋值后，值不能修改

// 基本数据类型值不可更改
const PI = 3.14;
PI = 100; // 报错

// 复杂数据类型地址不可更改
const arr = [1, 2];
arr[0] = 0;
arr[1] = 9;
console.log(arr); // [0, 9]
arr = [0, 9]; // 报错

3).let、const、var的区别

三者区别.jpg

4).解构赋值

1.数组解构（按照一定模式，从数组或对象中提取值，将提取出来的值赋值给另外的变量）
let arr = [1, 2, 3];
let [a, b, c] = arr;
// 解构不成功时，对应值为undefined

2.对象解构(允许使用变量名字匹配对象属性)
let person = {name: '小明', age: 18};
let {name, age} = person; // 同名
let {name: myName, age: myAge} = person; // 别名

5).箭头函数（简化函数定义语法）
1.如果函数体中只有一句代码，且代码执行结果就是函数返回值，函数体大括号与return可省略。
2.如果形参只有一个，则形参外侧的小括号也可省略。
3.箭头函数不绑定this关键字，其中的this继承函数定义位置所属上下文，与执行时的上下文无关。

6).剩余参数（将一个不定数量的参数表示为一个数组）

function sum(...args) {
  let total = 0;
  args.forEach(item => {
    total += item;
  })
  return total;
}
sum(1, 2); // 3
sum(1, 2, 3); // 6

剩余参数和解构配合使用：

let arr = [1, 2, 3];
let [s1, ...s2] = arr;

7).扩展运算符（将数组或对象转为以逗号分隔的参数序列）

// 合并数组
// 方法1
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4]
// 方法2
arr1.push(...arr2);

//将伪数组转换为真数组
var divs = document.getElementsByTagName('div');
var ary = [...divs];

8).Array扩展方法与实例方法

// 扩展方法：Array.from(arrayLike[, mapFn[, thisArg]]) 将伪数组转换为真数组
var arrayLike = {
  "0": "1",
  "1": "2",
  "length": 2
}
var arr = Array.from(arrayLike, item => item * 2); // [2, 4]

// 实例方法：find()
let target = arr.find((item, index) => item.id == 2); // 返回符合条件的第一个item，不存在返回undefined

// 实例方法：findIndex()
let index = arr.findIndex((value, index) => value > 9); // 返回符合条件的第一个item的索引，不存在时返回-1

// 实例方法：includes()
let result = arr.includes('a'); // 返回布尔值（判断数组中是否包含某个值）

9).字符串相关

// 模板字符串
const sayhello = () => `hello`;
let name = `mike`;
let str = `hello,${name}`; // hello,mike
let str1 = `${sayhello()}`; // hello

// String扩展方法
// 实例方法：startsWith() 与 endsWith()
let str = 'hello!';
str.startsWith('h'); // true
str.endsWith('!'); // true

// 实例方法：repeat()
'x'.repeat(3); // xxx 重复字符串3次

10).Set数据结构
1.类似于数组，但成员的值唯一，没有重复的值；
2.本身是一个构造函数，用于生成Set数据结构。

// 创建Set数据结构
const s1 = new Set(['a', 'b'])

// 数组去重
const s2 = new Set(['a', 'a', 'b', 'b']); // 自动过滤重复元素
let arr = [...s2]; // ['a', 'b']

// 实例方法
// add(value) 添加值，返回Set结构本身
const s = new Set();
s.add('a').add('b').add('c');

// delete(value) 删除值，返回布尔值，表示删除是否成功
s.delete('a');

// has(value) 返回布尔值，表示该值是否为Set的成员
s.has('a');

// clear() 清除所有成员，无返回值
s.clear();

// 遍历set
const s = new Set(['a', 'b', 'c']);
s.forEach(value => console.log(value)); // 'a' 'b' 'c'

最后编辑于：2019.11.12 15:30:14