JavaScript知识点

最新推荐文章于 2024-10-09 00:58:21 发布

萌新不会编程

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量1.1k

点赞数 36

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_80382316/article/details/136179588

版权

ES6

全称 ECMAScript 6，是 JavaScript 的第六个版本标准，也被称为 ECMAScript 2015。ES6 在 2015 年发布，引入了许多新的语法特性和功能，大大丰富了 JavaScript 的能力和表现力。一些 ES6 的主要特性包括箭头函数、模板字符串、let 和 const 变量声明、类、模块化等。ES6 的推出加快了 JavaScript 语言的发展，让开发者能够更高效地编写代码和开发应用。

箭头函数

引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁。

使用场景:箭头函数更适用于那些本来需要匿名函数的地方

基本语法

箭头函数基本语法：

const fn = () => {
console.Log(123)
}
fn()
const fn =(x)=>{
console. log(x)
}
fn(1)

箭头函数属于表达式函数，因此不存在函数提升。
箭头函数只有一个参数时可以省略圆括号()。
```
const fn =x=>{ console.log(x)
```

箭头函数函数体只有一行代码时可以省略花括号{}，并自动做为返回值被返回。

//只有一行代码的时候，我们可以省略大括号
const fn = x => {
console. Log(x)
}
const fn = x => console. Log(x)
// 只有一行代码的时候，可以省略return 
const fn =x=> {
return x+x
}
const fn =x=>x+x

加括号的函数体返回对象字面量表达式。

// 箭头函数可以直接返回一个对象
const fn = (uname) => ({ name: uname}) 
//name: uname表示将对象名由name修改为uname

箭头函数参数

箭头函数没有arguments动态参数，但是有剩余参数..args

// 利用箭头函数来求和
const getSum = (...arr) => { 
let sum =0
for (let i = 0; i < arr.length; i++) { 
sum += arr[i]
return sum
}
const result = getSum(2，3) 
console.log(result)

箭头函数this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

箭头函数的this 是上一层作用域的this指向 
const fn =()=>{
console. log(this) // window
}
//对象方法箭头函数 this 
const obj = {
uname:'pink老师'， 
sayHi: () => {
console.log(this) // this 指向 window

founction函数是谁调用它this指向谁。

解构赋值

数组解构

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

基本语法:

1.赋值运算符=左侧的[]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量。 2.变量的顺序对应数组单元值的位置依次进行赋值操作。

// 普通的数组
const arr = [1,2，3]
// 同时将数组单元值123依次赋值给变量abc 
const [a, b, c] = arr 
console.iog(a) // 1 
console.log(b) // 2 
console.log(c) // 3

注意：分号有些地方需要添加。

// 1.立即执行函数要加
(function () {})();
(function () { })();
// 2.使用数组的时候
// const arr =[1,2，3] 
const str = 'pink';//不加分号的话，系统会认为const str = 'pink'[1，2，3].map(function (item)，'pink'[1，2，3]不合理
[1，2，3].map(function (item) { 
console.log(item)
})
//交互两个变量
let a=1 
let b=2;
[b，a] = [a,b]
console.log(a， b)

变量多单元值少的情况:

// 变量多，单元值少
const [a，b，c，d] =['小米'，'苹果'，'华为'] 
console.log(a) // 小米 
console.log(b) // 苹果 
console.log(c) // 华为
console.log(d) // undefined

变量少单元值多的情况:

// 变量少，单元值多
const [a,b，c] =['小米'，'苹果'，'华为'，'格力'] 
console.log(a) // 小米 
console.log(b) // 苹果 
console.log(c) // 华为

利用剩余参数解决变量少单元值多的情况:

// 利用剩余参数变量少，单元值多
const [a, b, ...tel] =['小米'，'苹果'，'华为'，'格力'，'vivo'] 
console.log(a) // 小米 
console.log(b) // 苹果
console.log(tel) // ['华为'，'格力'，'vivo']

防止有undefined传递单元值的情况，可以设置默认值:

const [a ='手机'，b='华为']=['小米'] 
console.log(a) // 小米 
console.log(b) // 华为

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

按需导入，忽略某些返回值:

// 按需导入，忽略某些值
const [a，，c，d] =['小米'，'苹果'，'华为'，'格力'] 
console.log(a) // 小米 
console.log(c) // 华为 
console.log(d) // 格力

支持多维数组的结构:

const [a，b] =['苹果'，['小米'，'华为']] 
console.log(a) // 苹果
console.log(b) // ['小米'，'华为']

想要拿到小米和华为怎么办?

const [a,[b,c]]=['苹果'，['小米'，'华为']] 
console.log(a) // 苹果 
console.log(b) // 小米 
console.log(c) // 华为

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法:

1.赋值运算符=左侧的{}用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量。 2.对象属性的值将被赋值给与属性名相同的变量。

//普通对象  
const user = {
name:'小明'，
age: 18};
// 批量声明变量 name age
// 同时将数组单元值小明18依次赋值给变量 name age 
const {name, age} = user
console.log(name) // 小明 
console.log(age) // 18

注意：

解构的变量名不要和外面的变量名冲突否则报错。
对象中找不到与变量名一致的属性时变量值为undefined

给新的变量名赋值: 可以从一个对象中提取变量并同时修改新的变量名

// 普通对象
const user = { name:'小明’， age: 18};
// 把 原来的name 变量重新命名为uname
const{name: uname,age} = user   
console.log(uname) // 小明 
console.log(age) // 18

冒号表示“什么值:赋值给谁"

数组对象解构：

const pig = [
{
name:‘佩奇'，  
age:6
}
]
const [{ name, age }] = pig 
console.log(name,age)

解构传下来的JSON数组：

//msg为传下来的JSON数组。data为里面的一个内容。
const{ data }= msg
function render({ data }) {
// const { data} = arr
//我们只要 data 数据
console.log(data)
}
render(msg)

遍历数组 forEach 方法

forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。

语法:

被遍历的数组.forEach(function (当前数组元素，当前元素索引号){

// 函数体}

例如:

const arr = ['pink', 'red', 'green' ] 
arr.forEach(function (item,index) {
console.log(`当前数组元素是:${item}`) // 依次打印数组每一个元素
console.log(`当前数组元素的索引是:${index}`) //依次打印数组每一个元素的索引})

注意: