标签：Es6 arr console log 前端 特性 let age name
1 Es6
全称为ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言则是规范的具体体现。
1.1 Es6新特性
① let与var
- 作用域
<script>
{
var a = 1;
let b = 2;
}
console.log(a)
console.log(b) // b is not defined
</script>
var声明的变量往往可以跨域，let则有严格的作用域
- 声明次数
<script>
var m = 1
var m = 2
let n = 1
let n = 2
console.log(m)
console.log(n) // Identifier 'n' has already been declared
</script>
let只能声明一次而var可以声明多次
- 变量提升
<script>
console.log(x) // undefined
var x = 1
console.log(y) // Cannot access 'y' before initialization
let y = 2
</script>
未经声明的变量使用，var声明的变量会输出为undefined
let则会报错
② const声明常量（只读变量）
<script>
const a = 1
console.log(a)
a = 2 // Assignment to constant variable.
</script>
③ 解构表达式
数组解构
<script>
const arr = [1, 2, 3]
const [a, b, c] = arr
console.log(a, b, c)
</script>
对象解构
<script>
const person = {
name: "jack",
age: 18,
language: ["java", "python", "c"]
}
const {name:mingzi, age, language} = person
console.log(mingzi, age, language) // jack 18 (3) ['java', 'python', 'c']
</script>
④ 字符串扩展
startsWith()
endWith()
includes()
⑤ 字符串模板
使用反引号 `` 可以声明多行字符串
⑥ 字符串插入变量和表达式
在字符串中使用${}可以使用变量和表达式
⑦ 默认参数
在函数参数上赋值，则为空的时候启用该默认值
⑧ 不定参数
function fun(...value) value表示多个参数的数组形参
⑦ 箭头函数
箭头前面的表示参数，后面表示函数体
<script>
let print = (msg) => {console.log(msg)}
print(123)
</script>
函数参数只有一个值可以省略括号，只有一个返回值则可以省略大括号。
<script>
let add = a => ++a
console.log(add(1)) // 2
</script>
箭头函数加对象解构
<script>
const person = {
name: "jack",
age: 18,
language: ["java", "python", "c"]
}
var hello = ({name:mingzi}) => console.log("hello", mingzi)
hello(person) // hello jack
</script>
⑨对象优化
Api方法
-
Object.keys() 获取对象键
-
Object.values() 获取对象值
-
Object.entries() 获取对象键值对
const person = {
name: "jack",
age: 18,
language: ["java", "python", "c"]
}
console.log(Object.keys(person)) // ['name', 'age', 'language']
console.log(Object.values(person)) // ['jack', 18, Array(3)]
console.log(Object.entries(person)) // 0: (2) ['name', 'jack']
// 1: (2) ['age', 18]
// 2: (2) ['language', Array(3)]
- Object.assign()合并对象
<script>
target = {a:1}
source1 = {b:2}
source2 = {c:3}
target = Object.assign(target, source1, source2)
console.log(target) // {a: 1, b: 2, c: 3}
</script>
- 声明对象名的简写
当属性名与变量名一致时，只需要写一个即可
- 对象的函数属性简写
箭头函数尽量不要使用this指针
- 对象的扩展运算符 ...：表示深度拷贝对象，即拷贝对象的全部属性
<script>
let person = {
name: 'jack',
age: 18,
language: ['java', 'python', 'c']
}
let person1 = {...person}
console.log(person1) // {name: 'jack', age: 18, language: Array(3)}
</script>
- 合并对象
let name = {name: 'jack'}
let age = {age: 18}
let person = {...name, ...age}
console.log(person) // {name: 'jack', age: 18}
区别于Object.assign是将其他对象的属性加到第一个参数的对象，这个是合成一个新的对象
⑩ 数组优化
-
map：可以传入一个函数，以每一个数组元素作为参数返回其处理之后的值
-
reduce：传入一个函数和一个值作为初始元素值，然后函数的参数分别为上一个元素和当前处理元素
-
☆filter
<script>
let arr = ['1', '20', '-5', '3']
// arr = arr.map(item => {
// return item * 2
// })
arr = arr.map(item => item * 2)
console.log(arr) // [2, 40, -10, 6]
</script>
let arr = ['1', '20', '-5', '3']
arr = arr.reduce((a, b) => {
return a * 1 + b * 1
}, 100)
console.log(arr) // 119
表示不断将上个元素加到当前元素，最开始元素值为100，故结果为119
<script>
let arr = ['1', '20', '-5', '3']
arr = arr.filter(item => {
if (item == '1')
return false;
return true;
})
console.log(arr)
</script>
表示删除1
1.2 ☆promise异步编排
promise可以封装异步操作，特别重要单独放到下面讲了。
1.3 Es6模块化
模块化：模块化就是把代码进行拆分，方便反复利用。类似于java中的导包，要使用一个包必须要导包。而JS中没有包的概念，取而代之的是模块。
模块的主要操作包括：
export：暴露，不仅可以暴露对象，一切js变量都可以导出，比如基本类型变量、函数、数组、对象。
js、css、图像等等静态资源可以直接使用不需要暴露
import：导入
1.3.1 三种暴露方法
三种暴露方法的结果都是暴露js文件中的对象给其他地方使用。
默认暴露：直接将一个对象暴露
export default {
...
}
一个js文件中只能有一个export default
暴露出一个对象,直接就可以拿来使用，且在import的时候任意命名
分别暴露：将多个对象放在一起进行暴露，在import的时候需要使用{}进行导入
整体暴露：整体(统一)暴露是一个对象这个对象是我们自己需要写的，把所有的需要暴露的变量写到我们的对象当中
标签：Es6,arr,console,log,前端,特性,let,age,name 来源： https://www.cnblogs.com/tod4/p/16597277.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。