ECMAScript_6.0—[概念普及]

一、ECMAScript的历史

ES6是ECMAScript标准十余年来变动最大的一个版本,为其添加了许多新的语法特性。
•1997年ECMAScript1.0诞生。
•1998年6月ECMAScript2.0诞生,包含一些小的更改,用于同步独立的ISO国际标准。
•1999年12月ECMAScript3.0诞生,它是一个巨大的成功,在业界得到了广泛的支持,它奠定了JS的基本语法,被其后版本完全继承。直到今天,我们一开始学习JS,其实就是在学3.0版的语法。
•2000年的ECMAScript4.0是当下ES6的前身,但由于这个版本太过激烈,对ES3做了彻底升级,所以暂时被"和谐"了。
•2009年12月,ECMAScript5.0版正式发布。ECMA专家组预计ECMAScript的第五个版本会在2013年中期到2018年作为主流的开发标准。2011年6月,ES5.1版发布,并且成为ISO国际标准。
•2013年,ES6草案冻结,不再添加新的功能,新的功能将被放到ES7中;2015年6月,ES6正式通过,成为国际标准。

二、基本数据类型:

number、string、boolean、null、undefined、Symbol

三、复合数据类型:

array、object

四、获得类型:

typeof

五、声明变量:

1、var
1.只要在函数内声明变量的时候,使用了 var 关键字,那么这个变量就是局部变量
2.如果没有使用 var 关键字,那么只有在这个函数被调用之后,这个变量才是全局变量(函数内部定义的方法和变量,要等到函数执行过以后,才会真正定义)
3.var 定义的变量存在变量提升的现象,也就是在未声明之前即可使用,只不过这时变量的值是 undefined
2、let
1.变量所属的作用域是块级作用域(在 ES6 之前,js只存在函数作用域以及全局作用域)
2.不存在变量提升,即变量在声明之前不可使用
3.不能重复定义,即使用 let 关键字重复声明同一个变量
4.存在暂时性死区(暂时性死区的本质就是,只要一进入当前作用域,当前作用域的所有变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量)
3、const
1.const 是用来声明常量,且声明的常量是不允许改变的,而且在声明的同时必须初始化
2.const 与 let 一样,其定义的变量都属于块级作用域,不存在变量提升,不允许重复定义,同时也存在暂时性死区
3.const 的本质: 使用 const 定义的变量并非所有的都是常量,当我们使用 const 来定义常量对象或常量数组时,常量对象或常量数组里的内容其实是可变的,只是不能对这个常量对象或常量数组进行重新赋值的操作,即不能修改(值类型)数字,字符串,布尔且建议变量名大写

六、Symbol类型

1.Symbol 定义的值唯一 ,独一无二,最大的用法是用来定义对象的唯一属性名。
2. 属性名唯一:由于每一个Symbol的值都是不相等的,所以Symbol作为对象的属性名,可以保证属性不重名。
3. 常量值唯一:使用Symbol定义常量,这样就可以保证这一组
常量的值都不相等。
4.Symbol.for()全局创建获得, 单例模式
(首先会在全局搜索被登记的Symbol中是否有该字符串参数作为名称的Symbol值,如果有即返回该Symbol值,若没有则新建并返回一个以该字符串参数为名称的Symbol值,并登记在全局环境中供搜索)

var x = Symbol.for(5)
var y = Symbol.for(5)
console.log(x==y)

5.Symbol.keyFor()
(返回一个已登记的Symbol类型值的key,用来检测该字符串参数作为名称的Symbol值是否已被登记)

注意:
Symbol函数前不能使用new命令,否则会报错因为生成的Symbol是一个原始类型的值,不是对象。
由于Symbol值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。
Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。
Symbol值不能与其他类型的值进行运算,会报错。
Symbol值可以显式转为字符串
Symbol值也可以转为布尔值,但是不能转为数值
在对象的内部,使用Symbol值定义属性时,Symbol值必须放在方括号之中。
Symbol值作为属性名时,该属性还是公开属性,不是私有属性。
Symbol作为属性名,遍历对象的时候,该属性不会出现在for…in、for…of循环中,也不会Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回

七、字符串

扩展的方法:
•includes():返回布尔值,判断是否找到参数字符串。
•trim():返回新的字符串,去除字符串的头尾空格
•startsWith():返回布尔值,判断参数字符串是否在原字符串的头部。
•endsWith():返回布尔值,判断参数字符串是否在原字符串的尾部。
•repeat():返回新的字符串,表示将字符串重复指定次数返回。
•padStart:返回新的字符串,表示用参数字符串从头部(左侧)补全原字符串。
•padEnd:返回新的字符串,表示用参数字符串从尾部(右侧)补全原字符串。

<script>
letstring="apple,banana,orange";
string.includes("banana");//true
string.startsWith("apple");//true
string.endsWith("apple");//false
string.startsWith("banana",6)//true
console.log("Hello,".repeat(2));//"Hello,Hello,"
console.log("Hello,".repeat(2.2));//"Hello,Hello,"
console.log("Hello,".repeat("2"));//"Hello,Hello,"
console.log("h".padStart(5,"o"));//"ooooh"
console.log("h".padEnd(5,"o"));//"hoooo"
console.log("h".padStart(5));//"h"
</script>

八、模板字符串

模板字符串相当于加强版的字符串,用反引号,除了作为普通字
符串,还可以用来定义多行字符串,还可以在字符串中加入变
量和表达式。
1.实现多行字符串
2.使用${变量名}的格式将变量与字符串拼接
3.字符串插入变量和表达式。变量名写在${}中,${}中可以放
入JavaScript表达式和函数。
4.console.log 的占位输出方式

console.log('姓名:%s,年龄:%s',name_,age_)

九、解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
在代码书写上简洁且易读,语义更加清晰明了;
也方便了复杂对象中数据字段获取。
•解构的源,解构赋值表达式的右边部分。
•解构的目标,解构赋值表达式的左边部分
1.数组模型的解构(Array)
(1)遍历数组 forEach, 无返回

let x = [3,1,7,9,12]
x.forEach(function(value,index,arr){
// value  值
// index 索引
// arr 数组对象
console.log(value,index,arr)
})

(2)映射数组 map ,返回新数组

let x = [1,2,3,4,5]
let y = x.map(function(value,index,arr){
return value*2
})
console.log(y)

(3)过滤 filter ,返回新数组(现有数组通过一定的规则过滤出新的数组,返回true保留,false 不保留)

let x = [1,2,3,4,5]
let y = x.filter(function(value,index,arr){
return value>3
})
console.log(y)

(4)累计 reduce (方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值)

let x = [1, 2, 3, 4, 5]
let y = x.reduce(function(a,b){
// a 参数是上一次遍历的结果
return a*b
})
console.log(y)

(5)一个 some 检测数组元素中是否有元素符合指定条件(返回true或者false,只要回调函数有一个为true 则整个都返回true)

let x = [3, 1, 4, 6, 2, 4, 9, 14]
let y = x.some(function(value, index, arr) {
return value > 50
})
console.log(y)

(6)每个every检测数值元素的每个元素是否都符合条件(返回true或者false,回调函数都返回为true则整个都返回true)

let x = [3, 1, 4, 6, 2, 4, 9, 14]
let y = x.every(function(value, index, arr) {
return value > 10
})
console.log(y)

(7)复制数组 copyWithin(替换位置,拷贝开始,拷贝结束)(方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中)

let x = ['张三','李四','王五','赵六']
x.copyWithin(3,1,2)
console.log(x)

(8)包含 includes(obj) 返回一个布尔值 arr是否包含obj

let x = [3,1,4,98,2,5]
console.log(x.indexOf(5))
console.log(x.includes(5))

(9)查找 find 返回通过测试(函数内判断)的数组的第一个元素的值

let x = [3, 15, 41, 98, 2, 5]
let y = x.find(function(value) {
return value > 10
})
console.log(y)

(10)查找 findIndex 返回通过测试(函数内判断)的数组的第一个元素的索引值

let x = [3, 15, 41, 98, 2, 5]
let y = x.findIndex(function(value){
return value>10
})
console.log(y)

(11)填充 fill(内容,start,end) 使用一个固定值来填充数组

let x = ['张三','李四','王五','赵六']
x.fill('白七',1,3)
console.log(x)

2.解构赋值,赋值运算的扩展用法
(1)数组的解构

  • 基本解构
let [a,b,c] = [1,2,3]
console.log(a,b,c)
  • 嵌套解构
let [a,[b,c],d] = [1,[2,3],4]
console.log(a,b,c,d)
  • 忽略解构
let [, [, a], ] = [1, [2, 3], 4]
console.log(a)
  • 默认值解构
let [a,b=3]=[7]
console.log(a,b)
  • 不完全解构
let [a,b=3]=[ ]
console.log(a,b)
  • 剩余运算符解构
let [a,...b] = [1,2,3,4,5,6,7,9]
console.log(a,b)
function myFun(...a){
console.log(a)
}
myFun(5,6,7,8,9)

3.字符串的解构

let [a,b,c,...d] = 'hello world'
console.log(a,b,c,d)

4.对象的解构

  • 基本赋值解构
let {name,age}={name:'张三',age:18}
let {sex:sex}={sex:'男'}
console.log(name,age)
console.log(sex)
  • 可嵌套解构
let {student: [name, { age }] } = {student: ['张三', {age: 18}] };
console.log(name,age)
  • 可忽略解构
let {p: [x, {  }] ,q} = {p: ['hello', {y: 'world'}],q:'张三'};
console.log(x,q)
  • 不完全解构
let {p: [x, {  }] ,q} = {p: ['hello', {y: 'world'}]};
console.log(x,q)
  • 剩余运算符解构
let {a,b,...c} = {a:'张三',b:'李四',c:'王五',d:'赵六',e:'田七'}
console.log(a,b,c)
  • 默认值解构
let {a = 10, b = 5} = {a: 3};
a = 3; b = 5;
console.log(a,b)
let {a: aa = 10, b: bb = 5} = {a: 3};
aa = 3; bb = 5;
console.log(aa,bb)

十、Set的属性和方法(类似于数组,但是成员的值都是唯一的,没有重复的值):

let x = new Set([1,2,3,3,2,1])
console.log(x)  //Set(3) {1, 2, 3}

•Set.size:返回Set实例的成员总数。

let x = new Set([1,2,3,3,2,1])
console.log(x.size)

•Set.add(value):添加某个值,返回Set结构本身。

let x = new Set([1,2,3,3,2,1])
x.add('张三')
console.log(x)  //Set(4) {1, 2, 3, "张三"}

•Set.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

let x = new Set([1,2,3,3,2,1])
x.delete(1)
console.log(x)  //Set(2) {2, 3}

•Set.has(value):返回一个布尔值,表示该值是否为Set的成员。

let x = new Set([1, 2, 3, 3, 2, 1])
console.log(x.has(1))  //true

•Set.clear():清除所有成员,没有返回值。

let x = new Set([1, 2, 3, 3, 2, 1])
console.log(x)  //Set(3) {1, 2, 3}
x.clear()
console.log(x)  //Set(2) {}

•Set.keys():返回键名的遍历器

let x = new Set([1, 2, 3, 3, 2, 1])
for(let i of x.keys()){
console.log(i)  // 1,2,3
}

•Set.values():返回键值的遍历器

let x = new Set([1, 2, 3, 3, 2, 1])
for(let i of x.values()){
console.log(i)   // 1,2,3
}

•Set.entries():返回键值对的遍历器

let x = new Set([1, 2, 3, 3, 2, 1])
for(let [i,j] of x.entries()){
console.log(i,j)
}

•Set.forEach():使用回调函数遍历每个成员

let x = new Set([1, 2, 3, 3, 2, 1])
x.forEach(function(val,index,set){
console.log(val,index,set)
})

十一、Map的属性和方法(Map结构类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。):

let x = {
name:'张三',
age:18,
[Symbol('name')]:'李四'
}
console.log(x)  //{name: "张三", age: 18, Symbol(name): "李四"}

•Map.size:属性返回Map结构的成员总数。

let x = new Map([
['郑州', '晴天'],
['洛阳', '阴天'],
['开封', '晴天'],
['东京', '海啸']
]);
console.log(x.size)  //4

•Map.set(key,value):设置键名key对应的键值为value,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。

let x = new Map([
['郑州', '晴天'],
['洛阳', '阴天'],
['开封', '晴天'],
['东京', '海啸']
]);
x.set('新乡', '小雨')
console.log(x)  //{"郑州" => "晴天", "洛阳" => "阴天", "开封" => "晴天", "东京" => "海啸", "新乡" => "小雨"}
x.set('郑州', '晴转多云')
console.log(x)  //{"郑州" => "晴转多云", "洛阳" => "阴天", "开封" => "晴天", "东京" => "海啸", "新乡" => "小雨"}

•Map.get(key):get方法读取key对应的键值,如果找不到key,返回undefined。

let x = new Map([
['郑州', '晴天'],
['洛阳', '阴天'],
['开封', '晴天'],
['东京', '海啸']
]);
console.log(x.get('郑州'))  //晴天
console.log(x.get('许昌'))  //undefined

•Map.has(key):has方法返回一个布尔值,表示某个键是否在当前Map对象之中。

let x = new Map([
['郑州', '晴天'],
['洛阳', '阴天'],
['开封', '晴天'],
['东京', '海啸']
]);
console.log(x.has('郑州'))  //true

•Map.delete(key):delete方法删除某个键,返回true。如果删除失败,返回false。

let x = new Map([
['郑州', '晴天'],
['洛阳', '阴天'],
['开封', '晴天'],
['东京', '海啸']
]);
x.delete('郑州')  //{"洛阳" => "阴天", "开封" => "晴天", "东京" => "海啸"}
console.log(x)

•Map.clear():clear方法清除所有成员,没有返回值。

let x = new Map([
['郑州', '晴天'],
['洛阳', '阴天'],
['开封', '晴天'],
['东京', '海啸']
]);
x.clear() // 清空
console.log(x)

•Map.keys():返回键名的遍历器。

for(let i of x.keys()){
console.log(i,x.get(i))
}

•Map.values():返回键值的遍历器。

for(let i of x.values()){
console.log(i)
}

•Map.entries():返回所有成员的遍历器。

for(let [i,j] of x.entries()){
console.log(i,j)
}

•Map.forEach():遍历Map的所有成员。

x.forEach(function(value,key,map){
console.log(value,key)
})

小结
给你这样一个 Map结构
{“a”=>1,“b”=>2,“c”=>1}
转换为
{1=>[“a”,“c”],2=>[“b”]}

let x = new Map([
['许昌', '阴天'],
['郑州', '晴天'],
['洛阳', '阴天'],
['开封', '晴天'],
['东京', '海啸']
]);
console.log(x)
function change(map) {
let temp = new Map();
for (let i of new Set(map.values())) {
temp.set(i, [])
}
for (let [i, j] of map) {
temp.get(j).push(i)
}
return temp
}
console.log(change(x))
console.log(change(x).get('晴天'))
匿名

发表评论

匿名网友