1.在前端开发的过程中,我们总会遇到一些困惑,下面我来分享一下我的理解,希望对你有有所帮助。
2.null你不知道的点:
2bac534b499be5cf64943cb6f38ed84.png

// 来自JavaScript高级程序设计第4版

3.来自0.3的疑惑:
1a4bddeabfaf2f249bea24cc4fc228b.png

// 来自JavaScript高级程序设计第4版

4.一元运算符在不同数据类型上面的表现:

let s1 = '01';
let s2 = '1.1';
let s3 = 'z';
let b = false;
let f = 1.1;
let o = {
    valueOf(){
        return -1;
    }
}

s1 = +s1; // 值变成数值 1
s2 = +s2; // 值变成数值 1.1
b = +b;// 值变成树值0
f = +f;// 不变,还是1.1
o = +o; // 值变成数值-1
/*
* 一元减由一个减号(-)表示,放在变量前头,主要用于把数值变成负值,
* 如把 1 转成 -1
* */
let num = 25;
num = -num;
console.log(num); // -25

/*
* 对数值使用一元减会将其变成相应的负值(如上面的例子)
* 在应用到非数值时,一元减会遵循与一元加同样的规则,先
* 对它们进行转换,然后再取负值:
* */
let s1 = '0.1';
let s2 = '1.1';
let s3 = 'z';
let b = false;
let f = 1.1;
let o = {
    valueOf() {
        return -1;
    }
}

s1 = -s1;// 值变成数值-1
s2 = -s2;// 值变成数值 -1.1
s3 = -s3;//值变成NaN
b = -b;//值变成数值 0
f = -f;//变成 -1.1
o = -o;//值变成数值 1
/*
* 一元加和减操作符主要用于基本的算数,但也可以像上面的例子那样,用于数据类型的转换。
* */

5.判断是否为整数:

isInteger()方法与安全整数

ES6 新增了 Number.isInteger()方法,用于辨别一个数值是否保存为整数。有时候,小数位的 0
可能会让人误以为数值是一个浮点值:
console.log(Number.isInteger(1)); // true 
console.log(Number.isInteger(1.00)); // true 
console.log(Number.isInteger(1.01)); // false

6.提取字符串的方法:

slice()、substr()和 substring()。这
3个方法都返回调用它们的字符串的一个子字符串,而且都接收一或两个参数。第一个参数表示子字符串开
始的位置,第二个参数表示子字符串结束的位置。对 slice()和 substring()而言,第二个参数是提取结
束的位置(即该位置之前的字符会被提取出来)。对 substr()而言,第二个参数表示返回的子字符串数量。
任何情况下,省略第二个参数都意味着提取到字符串末尾。与 concat()方法一样,slice()、substr()
和 substring()也不会修改调用它们的字符串,而只会返回提取到的原始新字符串值

6-1.例子如下:

let stringValue = "hello world"; 
console.log(stringValue.slice(3)); // "lo world" 
console.log(stringValue.substring(3)); // "lo world" 
console.log(stringValue.substr(3)); // "lo world" 
console.log(stringValue.slice(3, 7)); // "lo w" 
console.log(stringValue.substring(3,7)); // "lo w" 
console.log(stringValue.substr(3, 7)); // "lo worl"
在这个例子中,slice()、substr()和 substring()是以相同方式被调用的,而且多数情况下返
回的值也相同。如果只传一个参数 3,则所有方法都将返回"lo world",因为"hello"中"l"位置为 3。
如果传入两个参数 3 和 7,则 slice()和 substring()返回"lo w"(因为"world"中"o"在位置 7,
不包含),而 substr()返回"lo worl",因为第二个参数对它而言表示返回的字符数。
当某个参数是负值时,这 3 个方法的行为又有不同。比如,slice()方法将所有负值参数都当成字
符串长度加上负参数值。

6-2.例子如下2:

而 substr()方法将第一个负参数值当成字符串长度加上该值,将第二个负参数值转换为 0。
substring()方法会将所有负参数值都转换为 0。看下面的例子:
let stringValue = "hello world"; 
console.log(stringValue.slice(-3)); // "rld" 
console.log(stringValue.substring(-3)); // "hello world" 
console.log(stringValue.substr(-3)); // "rld" 
console.log(stringValue.slice(3, -4)); // "lo w" 
console.log(stringValue.substring(3, -4)); // "hel" 
console.log(stringValue.substr(3, -4)); // "" (empty string)
这个例子明确演示了 3 个方法的差异。在给 slice()和 substr()传入负参数时,它们的返回结果
相同。这是因为-3 会被转换为 8(长度加上负参数),实际上调用的是 slice(8)和 substr(8)。而
substring()方法返回整个字符串,因为-3 会转换为 0。
在第二个参数是负值时,这 3 个方法各不相同。slice()方法将第二个参数转换为 7,实际上相当
于调用 slice(3, 7),因此返回"lo w"。而 substring()方法会将第二个参数转换为 0,相当于调用
substring(3, 0),等价于 substring(0, 3),这是因为这个方法会将较小的参数作为起点,将较
大的参数作为终点。对 substr()来说,第二个参数会被转换为 0,意味着返回的字符串包含零个字符,
因而会返回一个空字符串。

7.trim()方法

这个方法会创建字符串的一个副本,删除前、
后所有空格符,再返回结果:

let trimmedStringValue = stringValue.trim(); 
console.log(stringValue); // " hello world " 
console.log(trimmedStringValue); // "hello world"
由于 trim()返回的是字符串的副本,因此原始字符串不受影响,即原本的前、后空格符都会保留。
另外,trimLeft()和 trimRight()方法分别用于从字符串开始和末尾清理空格符。

8.repeat()方法

在所有字符串上都提供了 repeat()方法。这个方法接收一个整数参数,表示要将字
符串复制多少次,然后返回拼接所有副本后的结果。
let stringValue = "na "; 
console.log(stringValue.repeat(16) + "batman"); 
// na na na na na na na na na na na na na na na na batman

9.ES6 新增的用于创建数组的静态方法:from()和 of()

from()用于将
类数组结构转换为数组实例;
而 of()用于将一组参数转换为数组实例
Array.from()的第一个参数是一个类数组对象,即任何可迭代的结构,
或者有一个 length 属性和可索引元素的结构。这种方式可用于很多场合

9-1.字符串拆分成数组

// 字符串会被拆分为单字符数组
console.log(Array.from("Matt")); // ["M", "a", "t", "t"]

9-2.from()将集合和映射转换为一个新数组

// 可以使用 from()将集合和映射转换为一个新数组
const m = new Map().set(1, 2) 
 .set(3, 4); 
const s = new Set().add(1) 
 .add(2) 
 .add(3) 
 .add(4); 
console.log(Array.from(m)); // [[1, 2], [3, 4]] 
console.log(Array.from(s)); // [1, 2, 3, 4]

9-3.Array.from()对现有数组执行浅复制

// Array.from()对现有数组执行浅复制
const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1); 
console.log(a1); // [1, 2, 3, 4] 
alert(a1 === a2); // false

9-4.from()也能转换带有必要属性的自定义对象

const arrayLikeObject = { 
 0: 1, 
 1: 2, 
 2: 3, 
 3: 4, 
 length: 4 
}; 
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]

9-5.Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值,而无须像
调用 Array.from().map()那样先创建一个中间数组。还可以接收第三个可选参数,用于指定映射函
数中 this 的值。但这个重写的 this 值在箭头函数中不适用。

const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1, x => x**2); 
const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2}); 
console.log(a2); // [1, 4, 9, 16] 
console.log(a3); // [1, 4, 9, 16]
Array.of()可以把一组参数转换为数组。
这个方法用于替代在 ES6之前常用的 Array.prototype. 
slice.call(arguments),
一种异常笨拙的将 arguments 对象转换为数组的写法:
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 
console.log(Array.of(undefined)); // [undefined]

10.迭代方法

ECMAScript 为数组定义了 5 个迭代方法。
每个方法接收两个参数:以每一项为参数运行的函数,
以及可选的作为函数运行上下文的作用域对象(影响函数中 this 的值)。
传给每个方法的函数接收 3个参数:数组元素、元素索引和数组本身。
因具体方法而异,这个函数的执行结果可能会也可能不会影响方法的返回值
every():对数组每一项都运行传入的函数,如果对每一项函数都返回 true,
则这个方法返回 true。 
filter():对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回。
forEach():对数组每一项都运行传入的函数,没有返回值。
map():对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。
some():对数组每一项都运行传入的函数,如果有一项函数返回 true,则这个方法返回 true。

10-1.对 every()来说,传入的函数必须对每一项都返回 true,它才会返回 true;否则,它就返回 false。

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
let everyResult = numbers.every((item, index, array) => item > 2); 
alert(everyResult); // false 

10-2.对 some()
来说,只要有一项让传入的函数返回 true,它就会返回 true。

let someResult = numbers.some((item, index, array) => item > 2); 
alert(someResult); // true

10-3.filter()方法。这个方法基于给定的函数来决定某一项是否应该包含在它返回的数组中

// 要返回一个所有数值都大于 2 的数组
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
let filterResult = numbers.filter((item, index, array) => item > 2); 
alert(filterResult); // 3,4,5,4,3

11.对象迭代

在 JavaScript 有史以来的大部分时间内,迭代对象属性都是一个难题。
ECMAScript 2017 新增了两个静态方法,用于将对象内容转换为序列化的——更重要的是可迭代的——格式。
这两个静态方法Object.values()和 Object.entries()接收一个对象,返回它们内容的数组
Object.values() 返回对象值的数组
const o = { 
 foo: 'bar', 
 baz: 1, 
 qux: {} 
}; 
console.log(Object.values(o)); // ["bar", 1, {}]
Object.entries()返回键/值对的数组
const o = { 
 foo: 'bar', 
 baz: 1, 
 qux: {} 
};
console.log(Object.entries((o))); 
// [["foo", "bar"], ["baz", 1], ["qux", {}]]
注意,非字符串属性会被转换为字符串输出。另外,这两个方法执行对象的浅复制

100000.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。


灰太狼的情与殇
51 声望2 粉丝

某,从来都不相信所谓的天赋和天才,只有不断努力的平凡人。只要内心是坚定的,就会有所收获;失败会让我们成长,让我们一起努力走向巅峰。