【ECMAScript6】变量声明、解构、字符串数组方法、函数默认参和箭头函数等(内附详细使用方法)——day01

大家好，最近几天会分享ECMAScript6学习的知识点，一起加油~

1.变量声明

1.1 let

区别 ：

- let关键字就是用来声明变量的

- let声明的变量只在所处于的块级有效

- 在一个大括号中，使用let关键字声明的变量才具有作用域；var关键字是不具备这个特点的

- 防止循环变量变成全局变量

- 使用let关键字声明的变量没有变量提升

- 使用let关键字声明的变量具有暂时性死区特性

01 let 与var 基本一致，用作变量声明

 02 let在一对括号{}形成局部作用域

03 let声明的变量不会变量提升

04 let在同一作用域不能重复声明（同一作用域）

面试题 

 

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

 

1.2 const

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

01 与let一致（局部，不提升，不能重复声明）

02 声明必须赋值

03 赋值不能修改（值类型）

04 建议大写

1.3 let 、const、var 的区别

2.解构

2.1数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

• 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

• 变量的顺序对应数组单元值的位置依次进行赋值操作

• 变量的数量大于单元值数量时，多余的变量将被赋值为 undefined

• 变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位

• 允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

• 注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析

01数组解构：把数组解析为单个变量

02 通过逗号跳过

03 ...接收剩余值

04 可以给默认值

05可以快速交换变量

2.2对象解构

对象解构：按照一定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量

• 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

• 对象属性的值将被赋值给与属性名相同的变量

• 对象中找不到与变量名一致的属性时变量值为 undefined

• 允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效

• 注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析

 不用按顺序解构

3.新增字符串方法

查找：实例对象：startsWith() 和 endsWith()

检测是否包含字符串，包含返回true,不包含返回false

• startsWith() ：表示参数字符串是否在原字符串的头部，返回布尔值 , 满足条件返回true 不满足条件返回false

• endsWith()：表示字符串是否在原字符串的尾部，返回布尔值 ,满足条件返回true 不满足条件返回false

//判断 str 是否以 Hello 开头
let str = 'Hello ECMAScript 2015'
let r1 = str.startsWith("Hello")  
console.log(r1) // true

// 判断 str 是否以 2015 结尾
let str = 'Hello ECMAScript 2015'
let r1 = str.endsWith("2015")  
console.log(r1) // true

let r2 = str.endsWith("2016")  
console.log(r2) // false

 遍历 for...of

补齐 padStart(len,symobol) 和padEnd(len,symobol)

• padStart(总位数maxLength，填充字符串string)
• padEnd(总位数maxLength，填充字符串 string)

去空白 trim() 两端

• trimLeft 移除左侧空白
• trimRight 移除右侧空白

repeat() 方法

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

console.log('y'.repeat(5)) //yyyyy

4.数组高阶

sort()

arrObj.sort(function(a,b){return a-b})按升序排列

arrObj.sort(function(a,b){return b-a})按降序排列

遍历forEach()

• forEach(function(item,index,self){ })
• item当前遍历的元素
• index当前的下标
• self被遍历的数组

代码运行结果： 

map映射

一一对应的方式产生一个新的数组

reduce() 累计

• reduce(function(a,b){ })
• a上一次返回的结果
• b当前遍历的元素

filter()过滤

• 过滤不符合条件的元素（返回true 保留，返回false 过滤掉）

• filter 通常可以实现数组的去重

some()  有一个

• 检测数组所有元素是否都符合指定条件,
• 如果所有元素都不符合指定条件才会返回false，
• 有一个元素符合条件，返回true, 并且剩余元素不再进行检测
• 返回值：布尔值

every()  每一个

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
• 如果所有元素都满足条件，则返回 true

fill() 填充

find()

• find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

findIndex() 查找符合条件元素的下标

arrObj.findIndex(function(item){ return 条件; })

用于查找满足条件的数组里的第一个元素所在的位置

返回值：查找到的元素对应的下标 或 -1(找不到时的返回值)

5.函数的默认参

不定参（形参，定义的时候）

拓展参（实参，定义的时候）

  

6.对象新增

Object.create() 通过现有对象创建一个新的对象

        创建一个新的对象并以源对象作为prototype原型

Object.keys() 获取对象所有键的集合成为一个数组

Object.values()获取值的集合

Object.assign() 合并对象

7.箭头函数

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

2、在箭头函数中，如果形参只有一个，形参外侧的小括号可以省略

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

01  箭头函数：函数的简写

• =>左侧是参数
• => 右侧是执行语句 也是返回值

 02 如果参数不是一个，需要添加（）

 03 如果有多行语句用{ }，返回用return

 

 04 如果需要返回对象用（{}）

 箭头函数的this指向的是函数的上一层作用域的this

8.模板字符串

  使用反引号

• 模板字符串 中可以解析变量

Let name = `张三`
let sayHello = `Hello,我的名字叫${name}`
console.log(name)   //`Hello,我的名字叫张三

• 模板字符串 中可以换行

let result = {
    name:'zhangsan',
    age:20
}
let html = `
    <div>
        <span>${result.name}</span>
        <span>${result.age}</span>
    </div>  
`
console.log(html) 
// <div>
//       <span>zhangsan</span>
//       <span>20</span>
// </div>

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

const fn = () => {
    return `我是fn函数`
} 
let html = `我是模板字符串 ${fn()}`  // 在调用函数的位置会显示函数的返回值
console.log(html)   //我是模板字符串 我是fn函数

今天的分享就结束了~