【JS】基础知识

一、数据类型

JavaScript中共有两种数据类型,分别是基本数据类型和引用数据类型(Object类型)。

1. 基本数据类型:number、string、boolean、undefined、null。

2. 引用数据类型:对象、数组、函数。

3. typeof 操作符

  • 数值——返回 “number”
  • 字符串——返回 “string”
  • 布尔值——返回 “boolean”
  • 未定义——返回 “undefined”
  • null 或 对象——返回 “Object”
  • 函数——返回 “function”

二、EL表达式

1. 语法结构:${expression} 。
2. EL 提供“.“和“[ ]“两种运算符来存取数据。

三、ES6 扩展运算符( ... )

1. 扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值。

var str = 'hello'
var arr = [1, 2, 3]
var obj = {
    x:1,
    y:2,
}

console.log(...str)   // h e l l o
// 字符串转数组
console.log([...str]) // [ 'h', 'e', 'l', 'l', 'o' ]
console.log({...str}) // { '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' }

console.log(...arr)   // 1 2 3 
console.log([...arr]) // [ 1, 2, 3 ]
console.log({...arr}) // { '0': 1, '1': 2, '2': 3 }

console.log({...obj}) // { x: 1, y: 2 }

2. 应用场景

(1)数组拼接,代替 concat 方法

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [...arr1, ...arr2];

console.log(arr3);  // [ 1, 2, 3, 4, 5, 6 ]

(2)数组深拷贝

var arr1 = [1, 2, 3];
var arr2 = arr1;
var arr3 = [...arr1];

console.log(arr1 === arr2); // true, 说明arr1和arr2指向同一个数组
console.log(arr1 === arr3); // false, 说明arr1和arr3指向不同数组

(3)数组最大值

var arr1 = [1, 2, 3];
var arr2 = Math.max(...arr1);

console.log(arr2); // 3  

(4)数组去重

var arr1 = [1, 2, 2, 3];
var arr2 = [...new Set(arr1)];

console.log(arr2); // [1, 2, 3]  

(5)函数调用传参

var foo = function(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var arr = [1, 2, 3];

// 传统写法
foo(arr[0], arr[1], arr[2]);

// 使用扩展运算符
foo(...arr);
// 1
// 2
// 3

参考:

妙用ES6解构和扩展运算符让你的代码更优雅

ES6 扩展运算符 三个点(...)

四、Rest运算符( ... )

1. Rest运算符也用三个点号表示,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组。

2. 应用场景

(1)配合解构赋值使用 (只能放在最后一位,否则会报错)

var [a, ...args] = [1, 2, 3, 4];
console.log(a);   // 1
console.log(args); // [2, 3, 4] 

(2)函数调用传参

// 主要用于不定参数,所以ES6开始可以不再使用arguments对象
var bar = function(...args) {
    for (let el of args) {
        console.log(el);
    }
}

bar(1, 2, 3, 4);
// 1
// 2
// 3
// 4


var bar = function(...args) {
    console.log(args);
}

bar('h', 'e', 'l', 'l', 'o'); 
// [ 'h', 'e', 'l', 'l', 'o' ]


bar = function(a, ...args) {
    console.log(a);
    console.log(args);
}

bar(1, 2, 3, 4);
// 1
// [ 2, 3, 4 ]

参考:

妙用ES6解构和扩展运算符让你的代码更优雅

五、位运算符

运算符 描述 例子 等同于 结果 十进制
& 5 & 1 0101 & 0001 0001 1
| 5 | 1 0101 | 0001 0101 5
~ ~ 5 ~0101 1010 10
^ 异或 5 ^ 1 0101 ^ 0001 0100 4
<< 零填充左位移 5 << 1 0101 << 1 1010 10
>> 有符号右位移 5 >> 1 0101 >> 1 0010 2
>>> 零填充右位移 5 >>> 1 0101 >>> 1 0010 2

JavaScript 将数字存储为 64 位浮点数,但所有按位运算都以 32 位二进制数执行。

在执行位运算之前,JavaScript 将数字转换为 32 位有符号整数。

执行按位操作后,结果将转换回 64 位 JavaScript 数。

上面的例子使用 4 位无符号二进制数。所以 ~ 5 返回 10。

由于 JavaScript 使用 32 位有符号整数,JavaScript 将返回 -6。

00000000000000000000000000000101 (5)

11111111111111111111111111111010 (~5 = -6)

有符号整数使用最左边的位作为减号。

负数是正数的二进制补码加 1 。

把十进制转换为二进制

function dec2bin(dec){
    return (dec >>> 0).toString(2);
}

把二进制转换为十进制

function bin2dec(bin){
    return parseInt(bin, 2).toString(10);
}

六、数组方法

1. Array​.prototype​.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

持续更新中。。。

猜你喜欢

转载自blog.csdn.net/Dora_5537/article/details/90402648