js高级复习 ES6语法新增

合为ES6

ES的全称是 ECMAScript 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

ES6新增语法

let，用于声明变量的关键字（后面有它跟var的不同）；

1. let let的声明的变量有一个块级作用域,他只在这个块级有效

if（true） {
     let a=10;  //在这里let  a就有了一个块级作用域,在var声明的里面是没有的
}
console.log(a)   //这个时候是要报错的（a is not defined）a没有

2. let 不存在变量提升；

console.log（a）
   let a = 10;   //这里要报错  在let里面是没有变量提升的  报错的错误是小括号里面的（a is not defined ）

在var里面有变量提升

console.log(a);
        var a = 10   //这个输出的就是undefined的  把var a 提到了log的前面

3. 暂时性死区

 var age = 123;
        if (true) {
            console.log(age);
            let age = 234;  //这个let在声明变量的同时他与if的这个作用域进行了绑定,let声明的同时又有自身的作用域，在作用域前声明在let里面是要报错的
        }

  var arr = []
        for (var i = 0; i < 2; i++) {
            arr[i] = function () {
                console.log(i);
            }
        }
        arr[0]()   //这个结果都是输出的2   这个i是全全局的
        arr[1]()   //这个结果都是输出的2

        let arr = [];
        for (let i = 0; i < 2; i++) {
            arr[i] = function () {
                console.log(i);
            }
        }
        arr[0]();  //1  在每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的
        arr[1]();  //2  函数执行时输出的是自己上一级循环产生的块级作用域作用域下的i值.

const

声明常量，常量就是值（内存地址）不能变化的量

1. const 声明的变量有一个块级作用域,他只在这个块级有效

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

2. 声明常量时必须赋值

const PI; // Missing initializer in const declaration

常量赋值后，值不能修改

// 数组
const age = [1, 2, 3, 4]
age[0] = '11'  //修改数组里面序列号为0的--也就是1(修改的是同一个地址想的里面的内容)
age[1] = '12'
console.log(age);
//   但这种 
age = [11, 12, 3, 4];  //地址变化了  （Assignment to constant variable.）
// 对象
const age = {
    name: 12
}
age.name = 13
console.log(age);  //对象可以让修改  修改的是同一个地址想的里面的内容  地址没有变化

let、const、var 的区别

使用 var 声明的变量，其作用域在该语句所在的函数内，且存在变量提升 现象，值可以更改
使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升,值可以更改
使用 const 声明的是 常量 ，在后面出现的代码中不能再修改 该常量的值

解构赋值

ES6中允许从数组中提取值，按照对应位置，一一对应，进行对变量赋值，对象也可以实现解构
结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
让我们方便的去取对象中的属性跟方法

//数组
let [a, b, c] = [1, 2, 3]  //一一对应
        console.log(a);

let age = { name: 'key', year: 12 }
// let { name, year } = age
// console.log(name);
// console.log(year);
// 下面还有一种
let { name: myname, year: ye } = age  // 这里的myname ye属于别名  有时候类名太多
console.log(myname);
console.log(ye);

箭头函数

新增的定义函数的方式

() => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体
const fn = () => {}//代表把一个函数赋值给fn

案例：

//普通函数】
function sun(a, b) {
            console.log(a + b);
        }
        //箭头函数
        const sun = (a, b) => { console.log(a + b); }
        sun(1, 2)

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

// const sun = (a) => { console.log(a); }
// sun(7)
// 如果形参只有一个，可以省略小括号
const sun = a => console.log(a);
sun(2)

特别注意：：：：箭头函数不绑定this关键字 ,箭头函数里面没有this指向

var age = 100;

var obj = {
	age: 20,
	say: () => {
		alert(this.age)
	}
}
obj.say();//箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域

剩余参数

一个不定数量的参数表示为一个数组 …什么

  function sun(a, ...b) {  //...参数
            console.log(a);  //1
            console.log(b);  //12, 3, 4, 555, 666, 5
        }
        sun(1, 12, 3, 4, 555, 666, 5)

剩余参数(…参数)跟解构(数组中提取值，按照对应位置)配合使用:

let sun = [1, 3, 4, 5, 'AAA', 'bbb']
let [a, ...b] = sun
console.log(a);
console.log(b);

内置对象

Array 的扩展方法

扩展运算符（展开语法）---------可以将数组或者对象转为用逗号分隔的参数序列

let ary = [1, 2, 3];
 ...ary  // 1, 2, 3
 console.log(...ary);    // 1 2 3,相当于下面的代码
 console.log(1,2,3);

扩展运算符可以应用于合并数组

let arra = [1, 2, 3, 4, 5]
let arrb = [6, 7, 8, 9, 10]
let arrc = [...arra, ...arrb]   //声明一个新的arrc把2个放进去
// 还有一种利用push
arra.push[...arrb]  //把...arrb放到arra里面

将类（伪）数组或可遍历对象转换为真正的数组

//定义一个集合
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}; 
//转成数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实例方法：find()

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

let ary = [{
     id: 1,
     name: '张三'
 }, { 
     id: 2,
     name: '李四'
 }]; 
 let target = ary.find((item, index) => item.id == 2);//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个

findIndex()

找出第一个符合条件的数组成员的索引号，如果没有找到返回-1 （这返回值与indeOf一样）

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 2

includes()

判断数组是否包含给的值，返回布尔值。

 var age = [1, 2, 3, 4, 5, 6]
 var to = age.includes(6)//如果有就是true  没有结束flase
 var too = age.includes(7)
 console.log(to);
 console.log(too);

String 的扩展方法 模板字符串

就是反引号 有属性就写${}
模板字符串中可以解析变量

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

模板字符串中可以换行

       let result = {
           name: 'zhangsan',
           age: 20,
           sex: '男'
       }
       let html = `<div>
    <span>${result.name}</span>
    <span>${result.age}</span>
    <span>${result.sex}</span>
</div>`;

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

const sayHello = function () { 
    return '11';
 }; 
 let greet = `${sayHello()} `;//11
 console.log(greet); // 11

startsWith() 和 endsWith()

startsWith()：表示参数字符串是否在原字符串的*[头部]，返回布尔值
endsWith()：表示参数字符串是否在原字符串的*[尾部]，返回布尔值

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

repeat()

原字符串重复n次，返回一个新字符串

'x'.repeat(3)      // "xxx" 
'hello'.repeat(2)  // "hellohello"

Set 数据结构

提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 可以去重

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

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

 const sete = new Set([1, 2, 3, 4, 45, 6, 7, 1, 2, 3, 3])  //首字母大写 可以去重
        console.log(sete);

方法

1. add(value)：添加某个值，返回 Set 结构本身
2. delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
3. has(value)：返回一个布尔值，表示该值是否为 Set 的成员
4. clear()：清除所有成员，没有返回值

遍历
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。