再复习js疑点备注

1 唯一能判断NaN的方法是通过isNaN()函数：

isNaN(NaN); // true

2ES6新增了一种模板字符串

let name = `路西法`;
let content = `你好啊，${name}`;
console.log(content);

3字符串操作相关

let content = `heLLo`;
console.log(content.toUpperCase());//HELLO
console.log(content.toLowerCase());//hello
console.log(content.substring(0,3));//heL

4数组操作相关
slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array

let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
console.log(arr.slice(0, 3)); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
console.log(arr.slice(3)); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
		
let arr2 = arr.slice();
console.log(arr2);//["A", "B", "C", "D", "E", "F", "G"]可复制多一个相同数组

splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

let arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
console.log(arr.splice(2,3));//["C", "D", "E"]
console.log(arr);//["A", "B", "F", "G"]

请注意，concat()方法并没有修改当前Array，而是返回了一个新的Array。

5数据结构相关
Map是一组键值对的结构，具有极快的查找速度。由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉。

let m1 = new Map([['a',1],['b',2]]);
m1.set('c',3); //设置c
console.log(m1.has('b')); //true
m1.delete('b'); //删除
console.log(m1.has('b')); //false
console.log(m1); //Map {"a" => 1, "c" => 3}
console.log(m1.get('a')); //1

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

let s1 = new Set();
let s2 = new Set([1,2,3]);
s2.add('3');
console.log(s1); //Set {}
console.log(s2); //注意数字3和字符串'3'是不同的元素。
s2.delete(3);
console.log(s2); //Set {1, 2, "3"}

6 iterable
for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。
for … of循环则只循环集合本身的元素
forEach方法也可遍历所有元素

let a1 = new Array('a','b','c');
let m1 = new Map([[1,'a'],[2,'b'],[3,'c']]);
let s1 = new Set(['a','b','c']);
for(let i of a1){
	console.log(i);
}
		
for(let i of m1){
	console.log(i[0]+' = '+i[1]);
}
		
for(let i of s1){
	console.log(i);
}

7 一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

function add(x,y,f){
	return f(x)+f(y);
}
console.log(add(2,3,Math.abs))

高阶函数案例之filter1

let arr = ['a','b','c'];
let r = arr.filter((element,index,self)=>{
	console.log(element); //a,b,c
	console.log(index); //0,1,2
	console.log(self); //["a", "b", "c"]
	return true;
});

高阶函数案例之filter2

let arr = ['a','b','c','a'];
let r = arr.filter(function (element, index, self) {
	return self.indexOf(element) === index;
});
console.log(r); // ["a", "b", "c"] 此案例可去除重复项

高阶函数案例之sort

let arr = ['Google', 'apple', 'Microsoft', 'apple'];

arr.sort((s1, s2) => {
	x1 = s1.toUpperCase();
	x2 = s2.toUpperCase();
	if (x1 > x2) {
		return 1;
	}
	if (x1 < x2) {
		return -1;
	}
	return 0;
});
			
console.log(arr); //["apple", "apple", "Google", "Microsoft"]

8 闭包有非常强大的功能。
在面向对象的程序设计语言里，比如Java和C++，要在对象内部封装一个私有变量，可以用private修饰一个成员变量。
在没有class机制，只有函数的语言里，借助闭包，同样可以封装一个私有变量。我们用JavaScript创建一个计数器：

9 箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：

var obj = {
	birth: 1990,
	getAge: function () {
		var b = this.birth; // 1990
		var fn = () => new Date().getFullYear() - b; // this指向obj对象
		return fn();
	}
};
			
console.log(obj.getAge()); //30

10 generator函数

function* sum(x){
	yield x;
	yield x+1;
	yield x+2;
	return x+3;
}
let s = sum(1);
console.log(s.next());//Object {value: 1, done: false}
console.log(s.next());//Object {value: 2, done: false}
console.log(s.next());//Object {value: 3, done: false}
console.log(s.next());//Object {value: 4, done: true}

11 标准对象Date

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳

12 操作DOM
更新DOM - innerHTML与innerText

插入DOM - appendChild与insertBefore

删除DOM - 要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉

13 操作表单

文本框，对应的<input type="text">，用于输入文本；
口令框，对应的<input type="password">，用于输入口令；
单选框，对应的<input type="radio">，用于选择一项；
复选框，对应的<input type="checkbox">，用于选择多项；
下拉框，对应的<select>，用于选择一项；
隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。
选择日期<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
选择颜色<input type="color" value="#ff0000">
选择文件<input type="file">

来源：CSDN

作者：碉堡飞哥

链接：https://blog.csdn.net/qq_27064559/article/details/103895157

标签

log

content