slice和splice区别
slice
和 splice
是 JavaScript 数组的两个常用方法,它们用于处理数组,但有不同的用途和行为。
slice
方法
slice
方法用于从一个数组中提取一部分,返回一个新数组,不会修改原数组。它有两个参数:
start
(可选): 提取开始的位置(包含该位置)。如果省略,则默认为0
。end
(可选): 提取结束的位置(不包含该位置)。如果省略,则默认为数组的长度。
语法:
array.slice(start, end)
示例:
const arr = [1, 2, 3, 4, 5]; const newArr = arr.slice(1, 4); console.log(newArr); // [2, 3, 4] console.log(arr); // [1, 2, 3, 4, 5] (原数组未变)
splice
方法
splice
方法用于在数组中添加或删除元素,并会修改原数组。它有三个主要参数:
start
: 开始修改的位置。deleteCount
(可选): 要删除的元素数量。如果为0
,则不删除任何元素。item1, item2, ...
(可选): 要添加到数组中的元素。
语法:
array.splice(start, deleteCount, item1, item2, ...)
示例:
const arr = [1, 2, 3, 4, 5]; arr.splice(2, 2, 'a', 'b'); console.log(arr); // [1, 2, 'a', 'b', 5] console.log(arr.length); // 5 (原数组长度已变)
主要区别
-
返回值:
slice
: 返回新数组,原数组不变。splice
: 修改原数组,返回被删除的元素组成的数组(如果有删除的话)。
-
修改原数组:
slice
: 不修改原数组,只返回提取的部分。splice
: 直接修改原数组,可以增加、删除或替换元素。
-
用途:
slice
: 用于从数组中提取一个子数组,通常用于不改变原数组的情况下。splice
: 用于在数组中添加、删除或替换元素,直接对原数组进行操作。
总结
slice
是一个不修改原数组的方法,用于创建数组的一部分的新副本。splice
是一个会修改原数组的方法,用于在数组中进行添加、删除或替换操作。
数组和字符串的方法
数组方法
1. push
用途: 在数组末尾添加一个或多个元素。
array.push(element1, element2, ...)
参数:
element1, element2, ...
: 要添加到数组末尾的元素。
是否改变原数组: 是,push
会修改原数组。
示例:
const arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
2. pop
用途: 从数组末尾删除一个元素,并返回该元素。
语法:
array.pop()
参数: 无
是否改变原数组: 是,pop
会修改原数组。
示例:
const arr = [1, 2, 3];
const last = arr.pop();
console.log(last); // 3
console.log(arr); // [1, 2]
3. shift
用途: 从数组开头删除一个元素,并返回该元素。
语法:
array.shift()
参数: 无
是否改变原数组: 是,shift
会修改原数组。
示例:
const arr = [1, 2, 3];
const first = arr.shift();
console.log(first); // 1
console.log(arr); // [2, 3]
4. unshift
用途: 在数组开头添加一个或多个元素。
语法:
array.unshift(element1, element2, ...)
参数:
element1, element2, ...
: 要添加到数组开头的元素。
是否改变原数组: 是,unshift
会修改原数组。
示例:
const arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
5. slice
用途: 返回数组的一部分,创建新数组。
语法:
array.slice(start, end)
参数:
start
: 开始提取的位置(包括该位置)。如果省略,则默认为0
。end
(可选): 结束提取的位置(不包括该位置)。如果省略,则默认为数组的长度。
是否改变原数组: 否,slice
不会修改原数组。
示例:
const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 4);
console.log(newArr); // [2, 3, 4]
console.log(arr); // [1, 2, 3, 4, 5]
6. splice
用途: 删除、替换或添加数组中的元素。
语法:
array.splice(start, deleteCount, item1, item2, ...)
参数:
start
: 开始修改的位置。deleteCount
(可选): 要删除的元素数量。如果为0
,则不删除任何元素。item1, item2, ...
(可选): 要添加到数组中的元素。
是否改变原数组: 是,splice
会修改原数组。
示例:
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 2, 'a', 'b');
console.log(arr); // [1, 2, 'a', 'b', 5]
console.log(arr.length); // 5
map
用途: 创建一个新数组,其结果是该数组中每个元素调用一个提供的函数后返回的结果。
语法:
array.map(callback(currentValue[, index[, array]])[, thisArg])
参数:
callback
: 为每个数组元素执行的函数。它接收三个参数:currentValue
: 当前处理的元素。index
(可选): 当前元素的索引。array
(可选): 调用map
方法的数组。
thisArg
(可选): 执行callback
时this
的值。
是否改变原数组: 否,map
不会修改原数组,而是返回一个新数组。
示例:
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] (原数组未变)
filter
用途: 创建一个新数组,包含所有通过测试的数组元素。
语法:
array.filter(callback(element[, index[, array]])[, thisArg])
参数:
callback
: 测试每个数组元素的函数。它接收三个参数:element
: 当前处理的元素。index
(可选): 当前元素的索引。array
(可选): 调用filter
方法的数组。
thisArg
(可选): 执行callback
时this
的值。
是否改变原数组: 否,filter
不会修改原数组,而是返回一个新数组。
示例:
const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]
console.log(numbers); // [1, 2, 3, 4, 5] (原数组未变)
reduce
用途: 对数组中的每个元素执行一个累积操作,最终计算出一个单一的值。
语法:
array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
参数:
callback
: 对每个数组元素执行的函数。它接收四个参数:accumulator
: 累加器,累计函数的返回值。currentValue
: 当前处理的元素。index
(可选): 当前元素的索引。array
(可选): 调用reduce
方法的数组。
initialValue
(可选): 作为第一次调用callback
时第一个参数的值。如果没有提供,使用数组的第一个元素。
是否改变原数组: 否,reduce
不会修改原数组,而是返回计算出的单一值。
示例:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10
console.log(numbers); // [1, 2, 3, 4] (原数组未变)
forEach
用途: 对数组中的每个元素执行一个指定的操作。没有返回值。
语法:
array.forEach(callback(currentValue[, index[, array]])[, thisArg])
参数:
callback
: 对每个数组元素执行的函数。它接收三个参数:currentValue
: 当前处理的元素。index
(可选): 当前元素的索引。array
(可选): 调用forEach
方法的数组。
thisArg
(可选): 执行callback
时this
的值。
是否改变原数组: 否,forEach
不会修改原数组,但可以对原数组的元素执行操作。
示例:
const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2)); // 输出: // 2 // 4 // 6
find
用途: 返回数组中第一个符合条件的元素。如果没有符合条件的元素,则返回 undefined
。
语法:
array.find(callback(element[, index[, array]])[, thisArg])
参数:
callback
: 用于测试数组元素的函数。它接收三个参数:element
: 当前处理的元素。index
(可选): 当前元素的索引。array
(可选): 调用find
方法的数组。
thisArg
(可选): 执行callback
时this
的值。
是否改变原数组: 否,find
不会修改原数组。
示例:
const numbers = [1, 2, 3, 4];
const found = numbers.find(num => num > 2);
console.log(found); // 3
console.log(numbers); // [1, 2, 3, 4] (原数组未变)
字符串方法
1. charAt
用途: 返回指定位置的字符。
语法:
string.charAt(index)
参数:
index
: 字符的位置,从0
开始。
是否改变原字符串: 否,charAt
不会修改原字符串。
示例:
const str = 'hello';
const char = str.charAt(1);
console.log(char); // 'e'
2. concat
用途: 将一个或多个字符串连接成一个新的字符串。
语法:
string.concat(string1, string2, ...)
参数:
string1, string2, ...
: 要连接的字符串。
是否改变原字符串: 否,concat
不会修改原字符串。
示例:
const str1 = 'hello';
const str2 = 'world';
const result = str1.concat(' ', str2);
console.log(result); // 'hello world'
3. slice
用途: 提取字符串的一部分,返回新字符串。
语法:
string.slice(start, end)
参数:
start
: 提取的开始位置(包括该位置)。如果为负值,则从字符串末尾开始计算。end
(可选): 提取的结束位置(不包括该位置)。如果省略,则默认为字符串的末尾。
是否改变原字符串: 否,slice
不会修改原字符串。
示例:
const str = 'hello world';
const part = str.slice(0, 5);
console.log(part); // 'hello'
4. split
用途: 将字符串分割成数组。
语法:
string.split(separator, limit)
参数:
separator
: 用于分割字符串的分隔符。可以是字符串或正则表达式。limit
(可选): 分割的最大数组元素数量。
是否改变原字符串: 否,split
不会修改原字符串。
示例:
const str = 'a,b,c,d';
const arr = str.split(',');
console.log(arr); // ['a', 'b', 'c', 'd']
5. replace
用途: 替换字符串中匹配的子字符串或正则表达式。
语法:
string.replace(searchValue, newValue)
参数:
searchValue
: 要替换的子字符串或正则表达式。newValue
: 替换后的字符串。
是否改变原字符串: 否,replace
不会修改原字符串。
示例:
const str = 'hello world';
const newStr = str.replace('world', 'everyone');
console.log(newStr); // 'hello everyone'
总结
-
数组方法:
push
,pop
,shift
,unshift
,splice
会修改原数组。slice
不会修改原数组,返回一个新数组。map
,filter
,slice
,find
: 这些方法不会修改原数组,而是返回一个新数组或值。reduce
: 不会修改原数组,返回一个单一值。forEach
: 不会修改原数组,但可以对数组元素执行操作。
-
字符串方法:
charAt
,concat
,slice
,split
,replace
不会修改原字符串,返回新值或新数组。
这些方法对于数组和字符串的操作提供了强大的功能。理解它们的行为和参数能帮助你更好地处理和操作数据。
forEach和map
主要区别
-
返回值:
forEach
: 没有返回值,返回undefined
。map
: 返回一个新数组,包含callback
函数处理后的结果。
-
用途:
forEach
: 主要用于对数组的每个元素执行副作用操作,如打印、修改数组中的元素(不改变原数组)等。map
: 用于创建一个新数组,每个元素是原数组元素经过callback
函数处理后的结果。
-
链式调用:
forEach
: 不支持链式调用,因为它返回undefined
。map
: 支持链式调用,因为它返回一个新数组。
js中 为什么0.1 + 0.2 !== 0.3
浮点数表示
JS中采用 IEEE754
双精度版本 (64位)标准来表示浮点数, 0.1 + 0.2 会被计算机转成二进制,转换过程后最终的结果存成64位发生了截取,导致计算后的结果再转成十进制时发生了精度丢失.
解决办法
- toFixed(), 相加后保留几位小数
(0.1+0.2).toFixed(2)
- 乘一个10的N次整数,相加后再除以这个数
(0.1 * 100 + 0.2 * 100) / 100