当前位置：首页 > news >正文

ES6 混合 ES5学习记录

news 2024/12/13 21:40:08

基础

数组

let arr = [数据1，数据2，...数组n]

使用数组

数组名[索引]

数组长度

arr.length

操作数组

在这里插入图片描述
arr.push() 尾部添加一个,返回新长度
arr.unshift() 头部添加一个,返回新长度

arr.pop() 删除最后一个,并返回该元素的值
shift 删除第一个单元

数组的尾部有点像栈顶,头部像栈底
所以,push的时候,在尾部添加,pop的时候再尾部删除
shift,unshift操作的就是栈底的东西,也就是头部

数组进阶用法

map() 遍历

    <script>const arr = ['red', 'blue', 'pink']const newArr = arr.map((ele,index) => {console.log(ele);console.log(index);return ele;})console.log(newArr);</script>

map有返回值,forEach没有返回值
map里边的函数,ele,index不是必须要写的
但是只有一个参数的话,看作是element

join()
有点像java中的合并数组

    <script>const arr = ['red', 'blue', 'pink']let a = arr.join();console.log(a);let a1 = arr.join("");console.log(a1);let a2 = arr.join("|");console.log(a2);</script>

在这里插入图片描述
空则就是逗号分隔

forEach
加强版for

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

element必须写,index可选

filter
array.filter(function(element, index, arr), thisValue)
除了element是必须,其他都是可选

index索引
arr当前数组
thisValue 传this给回调函数,因为作用域不同

filter函数就是遍历加筛选,然后返回一个数组

reduce
累加
数组名.reduce(function(上一次值，当前值){ },起始值)
有初始值,就加上初始值

from
Array().from()
把伪数组转成真数组

块级作用域和函数作用域

{} 花括号里边就是块级作用域
一般为了块级作用域里边的数据不和外边的干扰,里边的变量用let

函数作用域
函数里边的作用域

let const var

前两个是ES6
const 是常量,必须初始化,不能再被赋值
但是引用变量里的值可以修改,毕竟引用变量实际上是地址

let 声明于块级作用域的变量,和var相比有更小的的作用域范围,只在块级作用域里边有效,不会提升到函数作用域

    <script>if(true) {let i = 0;}console.log(i);    </script>

在这里插入图片描述

var是ES5
var 现在一般不使用,毛病多
可以先使用再声明,且可以重复声明

    <script>var i;console.log(i);i = 10;var j = 1;var j = 2;console.log(j);</script>

var声明的变量有点像全局变量,所以在块级作用域里边的时候,会被提升到外部函数作用域

    <script>if(true) {var i = 0;}console.log(i);    </script>

在这里插入图片描述

模版字符串

``
有点类似于php中的字符串,可以写变量,写表达式,写多行字符串

        const name = 'jjking';const msg = `Hello,${name}`;const a = 10;const b = 5;const msg1 = `${a + b}`;const msg2 = `hhellddd`console.log(msg);console.log(msg1);console.log(msg2);

在这里插入图片描述

注意事项

要输出 `反引号得用 \
换行会被保留直接写 \n
可以嵌套模版字符串
兼容性可能不好,要兼容低版本浏览器,用插件

箭头函数

ES6引入

(argument1, argument2, ...) => {// 函数体
}

有点像java里边的lambda

返回的如果是一个对象,得加一个括号

    <script>const fun = () => ({name:'jjking'});console.log(fun());</script>

特点

没有this,继承父级作用域的this
没有arguments对象
没有Constructor,无法new fun()
没有prototype

箭头函数和普通函数的转换

只有一个参数,可以省略括号
只有一行的话,可以省略return,和{}

类似于java中的lambda

this指向

全局作用域的this
严格模式下,this是undefined
非严格,浏览器是window,node.js是global对象

一般函数this
指向的是自己

箭头函数的this
指向的父类的作用域

不适合箭头函数的场景

构造函数
需要this获取自身对象
需要使用arguments

解构赋值

数组的解构赋值

按照索引位置进行赋值

// 基本用法
const [a, b, c] = [1, 2, 3];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3// 使用默认值
const [x, y, z = 0] = [4, 5];
console.log(x); // 输出: 4
console.log(y); // 输出: 5
console.log(z); // 输出: 0（默认值）

把右边的值,一个一个赋值给左边,左边的可以有默认值

函数的解构赋值

按照属性名字进行赋值

// 基本用法
const {name, age} = {name: "Alice", age: 20};
console.log(name); // 输出: "Alice"
console.log(age); // 输出: 20// 使用别名
const {name: personName, age: personAge} = {name: "Bob", age: 25};
console.log(personName); // 输出: "Bob"
console.log(personAge); // 输出: 25// 使用默认值
const {firstName = "Unknown", lastName = "Unknown"} = {firstName: "Charlie"};
console.log(firstName); // 输出: "Charlie"
console.log(lastName); // 输出: "Unknown"（默认值）

注意

对于已经声明的变量进行解构赋值,必须在圆括号里边进行

let x, y;// 错误的写法：解析为代码块
{x, y} = {x: 1, y: 2};// 正确的写法：圆括号中进行解构赋值
({x, y} = {x: 1, y: 2});console.log(x,y); // 输出: 1 2

js会把{} 看做是代码块,所以会有歧义

其他的解构赋值

字符串

const [a, b, c] = 'abc';
console.log(a); // 输出: 'a'
console.log(b); // 输出: 'b'
console.log(c); // 输出: 'c'

数值和布尔值的解构赋值：会先将数值和布尔值转换为对应的包装对象类型（Number、Boolean），然后再进行解构赋值。

const {toString: numToString} = 123;
console.log(numToString === Number.prototype.toString); // 输出: trueconst {valueOf: boolValueOf} = true;
console.log(boolValueOf === Boolean.prototype.valueOf); // 输出: true

undefined 和 null 的解构赋值：在解构赋值时，如果源值是 undefined 或者 null，则会使用默认值

const [x = 0, y] = [undefined, 2];
console.log(x); // 输出: 0（默认值）
console.log(y); // 输出: 2const {z = 'default'} = {z: null};
console.log(z); // 输出: null（原始值）