首页 > temp > JavaScript教程 >
-
4-es6(壹)
1. 新增关键字
1.1 let
let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值
let
允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var
关键字不同的是,var
声明的变量只能是全局或者整个函数块的
就像const
一样,let
不会在全局声明时(在最顶部的范围)创建window
对象的属性
- 作用域规则
let
声明的变量只在其声明的块或子块中可用,而var
声明的变量的作用域是整个封闭函数。
- 重复声明
在同一个函数或块作用域中重复声明同一个变量会引起SyntaxError
错误
- 暂存死区
通过 let
声明的变量直到它们的定义被执行时才初始化。在变量初始化前访问该变量会导致 ReferenceError
,该变量处在一个自块顶部到初始化处理的“暂存死区”中。
function die() {
console.log(foo);
alert('从die函数开始到下面let声明foo变量,foo变量都处在"暂存死区中"')
let foo = 2;
}
1.2 const
常量是块级范围的,常量的值是无法(通过重新赋值)改变的,也不能被重新声明
此声明创建一个常量,其作用域可以是全局或本地声明的块。 与var
变量不同,全局常量不会变为 window 对象的属性。所以必须在声明的同一语句中指定它的值。
const
声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的,只是变量标识符不能重新分配。例如,在引用内容是对象的情况下,这意味着可以改变对象的内容(常量可以定义成对象和数组)。
关于暂存死区的所有说明都适用于let
和const
。
一个常量不能和它所在作用域内的其他变量或函数拥有相同的名称。
1.3 var、let、const的区别总结
- let和const声明的都是块级作用域,var是全局或整个封闭函数的
- let和const不可以重复声明,var可以
- let和const存在暂存死区,未初始化前不能使用。var存在变量提升,可以先声明后赋值
- const在声明时必须初始化
2. 解构赋值
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量
var a, b, rest;
[a, b] = [10, 20];//数组
console.log(a); // 10
console.log(b); // 20
({ a, b } = { a: 10, b: 20 });//对象
console.log(a); // 10
console.log(b); // 20
[a,b] = ["呀哈喽"]//字符串
console.log(a); // 呀
console.log(b); // 哈
2.1 默认值
可以为任意对象预设默认值;函数的参数也可以设定默认值
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
2.2 交换变量
在一个解构表达式中可以交换两个变量的值。没有解构赋值的情况下,交换两个变量需要一个临时变量
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
2.3 接收函数的返回值
function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
2.4 嵌套的解构赋值
var a, b, c;
[a, [b, c]] = [1, [2, 3]]
var { d: { e } } = { "parent": { "child": 1 } }
3. ES6-String
3.1 模板字符串
模板字符串是允许嵌入表达式的字符串字面量
var a = 1;
var b = 1;
console.log(`Two is ${a + b} and not ${2 * a + b}.`);
//"Fifteen is 15 and not 20."
3.2 新的函数
1. repeat函数
返回包含指定字符串的指定数量副本的新字符串,不会改变原字符串
let two = "abc".repeat(2);
console.log(two);//abcabc
2. includes函数
用来判断一个数组是否包含一个指定的值
如果在数组中找到了则返回 true
,否则为false
(如果传入了第二个参数 ,表示在第二个参数指定的索引后寻找)
two.includes('a', 2)//true
3. startsWith函数
用来判断当前字符串是否以另外一个给定的子字符串开头
如果在字符串的开头找到了给定的字符则返回true
;否则返回false
(如果传入了第二个参数 ,表示在第二个参数指定的索引后判断)
4. endsWith函数
用来判断当前字符串是否是以另外一个给定的子字符串结尾的
如果传入的子字符串在搜索字符串的末尾则返回true
;否则将返回 false
(如果传入了第二个参数 ,表示要判断的字符串的长度)
two.startsWith('b', 1);//true
two.endsWith('c', 3);//true
5. String.raw函数
用来获取模板字符串的原始字符串;会将字符串中特殊字符转义输出
let fok = "lks"
console.log(String.raw`name is ${fok}`);
4. ES6-Array
4.1 新的函数
1. Array.of函数
用于将一组值,转换成数组Array.of(1, 2, 3, 5, 4);
返回数组[1,2,3,5,4]
2. Array.from函数
用于从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
可用于:伪数组对象和可迭代对象;可以后接函数用来处理新数组
Array.from([1, 2, 3], x => x + x);
返回数组[2,4,6]
3. find/findIndex函数
用于找出数组中满足提供的测试函数的第一个元素的值/索引
let array1 = [5, 12, 8, 130, 44];
let foundv = array1.find(element => element > 10);
let foundi = array1.findIndex(element => element > 10);
console.log(foundv);//12
console.log(foundi);//1
4. fill函数
用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,不包括终止索引。
let array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4));//[1,2,0,0]
5. entries / keys / values 函数
entries:返回一个新的Array
迭代器对象;它的原型(__proto__
:Array Iterator)上有一个next方法,可用于遍历迭代器取得原数组的[key,value]
keys :返回一个包含数组中每个索引键的Array
迭代器对象
values :返回一个包含数组中每个索引值的Array
迭代器对象
let array1 = ['a', 'b', 'c'];
let iterator1 = array1.entries();
console.log(iterator1.next().value);//Array [0, "a"]
console.log(iterator1.next().value);//Array [1, "b"]
__EOF__