JavaScript初探

scooo 发布于

let 与 var 的区别

不存在变量提升

let 不存在变量提升，var 会变量提升:

1
2
3
4
console.log(a); //ReferenceError: a is not defined 
let a = "apple"; 
console.log(b); //undefined 
var b = "banana";

变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。

变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。

函数

arguments

arguments 可以使函数传入任意数量参数,用来保存函数的实参

1
2
3
4
5
6
function log()
{
    console.log(arguments[0]);
}

log("abc");

闭包

函数内部内部再定义一个函数

1
2
3
4
5
6
7
8
9
function s(a,b)
{
    function square(x)
    {
        return x * x;
    }

    return square(a) + square(b);
}

柯里化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function addThreeNum(a)
{
    return function(b)
    {
        return function(c)
        {
            return a + b + c;    
        };   
    };
}


//
let fixedTwo = addThreeNum(1)(2);
//a，b已经固定，
//此时函数已经传递给fixedTwo
let result = fixedTwo(3);  // result = 1 + 2 + 3 = 6

柯里化的好处，可以固定a，b的值，重复使用函数

箭头函数

箭头函数本质上是一种匿名函数，如果需要在后面调用，应该用一个常量保存 

1
2
3
4
5
const f = (a,b) => {
    return a + b;
}

let temp = f(1,2); // temp = 3

  • 如果函数体内部只有一个return 语句那么可以省略大括号和return

  • 如果函数体内部只有一个参数，也可以省略小括号

  • 如果没有参数，小括号则不能省略

  • 箭头函数没有arguments -> 它是一个类数组对象

    • 使用 ...args 剩余参数，和arguments作用一样（args可以自定义）

  • 箭头函数没有this，（没有自己的this）,它的this总是全局作用域的this（window）

1
2
3
4
5
6
7
8
9
10
const f = (a,b) => a + b; // 省略了return；
const f = a => a * 2;
const f = () => 5;
//第三行相当于：
function f()
{
    return 5;
}

const fn3 = () => {console.log(this)}; // window

自执行函数

1
2
3
4
5
6
(function()
{
  let a = 123;
    console.log(a);  
})();
//这个函数自己会执行，此时变量a只在此作用域中，防止命名冲突

回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function request(cb)
{
    console.log("请求数据");
    cb();
    console.log("请求结束");
}
// cb is a function


//一般使用箭头函数简化代码
request( result => {
   console.log("aaaaa"); 
});

//缺点：回调函数不能重复使用

内置函数

setTimeout( () => { console.log('hi');} , 500) 用于延后500毫秒

数组

forEach

forEach 用来遍历元素

1
2
3
let arr = [1,2,3];
arr.forEach( (e,i,arr) => { console.log(e); } );
//e为当前元素，i为当前索引，arr为数组本身

forEach 接收一个回调函数（在c语言中，回调函数就是传入一个函数的地址，相当于forEach传入一个匿名函数）

map

map用于遍历数组，并返回一个同等长度的新数组。

1
2
3
4
let arr = [1,2,3];
let arr2 = arr.map(e => e * 2);
// arr.map( (e)=>{e*2} ) map同样传入一个回调函数
console.log(arr2); // [2,4,6];

filter

filter用于过滤数组，返回指定条件的元素。

1
2
3
let arr = [1,2,3];
let arr2 = arr.filter(e => e >= 2);
console.log(arr2); // [2,3]

filter同样需要传入一个回调函数。

reduce

reduce()，用来整合数组。它可以对数组中的值进行计算，最终将数组中的所有元素合并为一个值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Arrow function
reduce((previousValue, currentValue) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)
​
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);
console.log(sumWithInitial);
// expected output: 10

数组测试

1
2
3
4
5
6
let arr = [1,2,3,4,5,6];
let result = arr.every(item => item >２)； // every必须所有元素满足要求
console.log(result); // 返回一个true或者false 这里返回false

let r2 = arr.some(item => item > 7);
console.log(r2); //只要有一个满足就行

解构赋值

  • 可以用rest把没有解构元素用数组的方式保存起来

    • 注意：这个rest名字不是必须的，只是比较有代表意义，可以用任意变量名

    • rest 用作函数

  • spread展开运算符(…)可以复制一个数组

  • ... 表示取剩下的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let [a,b] = [1,2,3];
console.log(a,b); // 1,2

let [a,,b] = [1,2,3];
console.log(a,b); // 1,3

//rest
let [a, ...rest] = [1,2,3];
console.log(a,rest); // 1,[2,3]
//可以接收无数个参数

function resttemp(... args){
    console.log(args);
}

resttemp(1,2,3,34321,34543); // 传入多少个数字都已数组的形式打印出来

//spread
let arr = [1,2,3];
let arr2 = [... arr];
console.log(arr2);

用途：用于解构一个函数返回的数组

for…of

使用for…of循环也可以遍历一个数组

1
2
3
4
5
6
7
let arr = [1,2,3];
for(let e of arr)
{
    console.log(e);
}
//1,2,3
//此时e为索引

对象

是JavaScript中最灵活的数据结构

1
2
3
4
5
6
7
8
9
10
11
let obj = {
    a: 1,
    b: true,
    f() {

    },
    arr: [1,2,3],
    obj: {
        c: 2
    }
}

  • 是key: value 键值对的元素属性

  • 中间的元素不需要写let var function等关键字

  • 中间元素使用“，”隔开，最后一个不需要

  • 访问对象，修改仍然可以使用键值对格式

  • 对象也支持结构赋值，但结构中变量名字应与对象的属性名字一致

遍历对象

1
2
3
4
5
for(let p in obj)
{
    console.log(p,obj[p]);
}

遍历对象使用 for in 语句

类

实例属性与类属性

  • 实例属性需要用变量引用

  • 类属性可以直接用类名引用，方法是在函数/变量前加一个static

1
2
3
4
5
6
7
class MyClass{
    static fn = () =>{
    console.log(this);
    }
}

MyClass.fn(); // 可以直接访问，此时this是类的this，因为没有实例

模块化

Export（导出）

在创建JS模块时，我们通过export向模块外部暴露内容（函数、对象、原始值）。在其他模块中可以通过import引入这些内容。使用了export的模块会自动开启严格模式。

export导出的方式有两种：

  1. 默认导出（default）

  2. 命名导出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 导出变量（命名导出）
export let name1, name2, …, nameN; 
export let name1 = …, name2 = …, …, nameN; 
​
// 导出函数（命名导出）
export function functionName(){...}
​
// 导出类（命名导出）
export class ClassName {...}
​
// 导出一组
export { name1, name2, …, nameN };
​
// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };
​
// 解构赋值后导出
export const { name1, name2: bar } = o;
​
// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
​
// 聚合模块
export * from …; // 将其他模块中的全部内容导出（除了default）
export * as name1 from …; // ECMAScript® 2O20 将其他模块中的全部内容以指定别名导出
export { name1, name2, …, nameN } from …; // 将其他模块中的指定内容导出
export { import1 as name1, import2 as name2, …, nameN } from …; // 将其他模块中的指定内容重命名导出
export { default, … } from …;

Import（引入）

import用来引入其他模块中导出的内容，注意！只有通过export导出的内容才能够通过import引入。和export一样，使用了import的模块会自动启用严格模式。

异步

setTimeout & setInterval

这两个是系统提供的异步函数操作

  • setTImeout 在指定时间后执行一次；传入一个回调函数和时间，由于是异步的，不会阻断底下代码的执行

    • clearTimeout中断执行

  • setInterval 每隔一段时间执行一次；传入一个回调函数和时间，由于是异步的，不会阻断底下代码的执行

    • clearInterval中断执行

Promise

Promise是可以自定义的异步操作，把耗时的操作交给promise

## Ant-Design-Pro

scooo

scooo

星辰大海

9
0
5
NOTICE

None

CATEGORYS
TAGS
FAQs Javascript ROS React SwiftUI