JavaScript学习

'use strict'; //以下代码在严格模式下

变量

var

• 有变量提升
• 可以重复声明

console.log(typeof(1),typeof('231'),typeof([]),typeof(null),typeof(undefined),typeof(function a(){}),typeof({}),);
//number string object object undefined function object
/*变量提升*/
  console.log(web);
  var web = 'runboo';
  function hb(){
    if(false){
      var num = 1234;
    }
    console.log(num);
  }
  hb();

let

• 声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
• 不存在变量提升。
• 不允许重复声明，作用域内唯一。

const

• 声明一个只读的常量。一旦声明，常量的值就不能改变。
• const A = 200; 声明时初始化。
• 无变量提升，只在声明所在的块级作用域内有效。

//let/const 块级作用域优点
{
  let a = 'hanw';
  let b = 'qyq';
}
console.log(b);

//变量冻结 Object.freeze();
const CONFIG = {
  url: 'https://www.baidu.com',
  port: 80
};
Object.freeze(CONFIG);
// CONFIG.port = 200;
console.log(CONFIG.port);

let u = 1;let v=u;v=3;console.log(u,v); //传值：额外分配空间，并赋值
let o = {name:'hanw',age:18};let k = o;k.age = 11;console.log(o,k); //传址：增加引用计数

---

闭包

为了避免多个JS文件的变量污染

// 闭包 有块级作用域 变量只能return出去
(function(){
  var $ = (window.$ = {});
  $.web = 'swdwdf';
  var url = 'sfsdsgdgdf';
  $.getUrl = function () {
    return url;
  }
}.bind(window)());
console.log($.getUrl(),$.url);

---

运算符

异或 ^同为0，不同为1;

for循环

数组

arr = [1, 2, 3, 1, 4]
for (let k=0; k < arr.length; k ++) {
	console.log(arr[k]) //1,2,3,1,4
}
for (let i of [1, 2, 3, 1, 4]) {
	console.log(i) //1,2,3,1,4
}
for (let j in [1, 2, 3, 1, 4]) {
	console.log(j) //0,1,2,3,4
}

字符串

for (let i of '123245439') {
	console.log(i) //123245439
}
for (let j in '123245439') {
	console.log(j) //
}

---

数值方法

parseInt('123') // 123
parseInt('abc') // NaN
parseFloat('314e-2') // 3.14  将一个字符串转为浮点数。
用来判断一个值是否为NaN。isNaN只对数值有效，如果传入其他值，会被先转成数值。
isNaN(123) // false 
isFinite方法返回一个布尔值，表示某个值是否为正常的数值。
isFinite(Infinity) // false

---

字符串

字符串方法

search()

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
如果没有找到任何匹配的子串，则返回 -1。

var str="金日开业！"; 
var n=str.search("！");

substring()

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

string.substring(from, to)
string.substring(from)

split()

split()方法

replace()

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

string.replace(searchvalue,newvalue) //(字符串/正则表达式，替换的值)

ES6字符串方法

padStart()，padEnd()

padStart() 头部补全，padEnd() 尾部补全。

//时间格式补全
str.padStart(2, '0') 
str.padEnd(2, '0') 

---

对象

对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。 对象的所有键名都是字符串（ES6 又引入了 Symbol 值也可以作为键名） 对象分为三个类型：

• 对象object
• 数组array
• 函数function

闭包：

• 获取函数内部声明的变量并返回。即能够读取其他函数内部变量的函数。
• 保留变量状态。

function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}
var result = f1();
result(); // 999 闭包就是函数f2

---

创建指定长度数组并初始化值

//1 for循环
var a = [];
for(var n = 0; n < 10; n++) {
  a[n] = 0
}
//2  ES6fill
let array = new Array(len).fill(false)
//3 map()
let arr = new Array(10)
arr.map(item=>{
return 0
})

获取时间相关函数

var myDate = new Date;
var year = myDate.getFullYear();//获取当前年
var yue = myDate.getMonth()+1;//获取当前月
var date = myDate.getDate();//获取当前日
var h = myDate.getHours();//获取当前小时数(0-23)
var m = myDate.getMinutes();//获取当前分钟数(0-59)
var s = myDate.getSeconds();//获取当前秒

数组方法

js Array对象的相关方法

for 与 forEach区别

• 在函数中for中可以使用return，forEach中使用return并不会生效。
• forEach没有返回值

//1 没有返回值
arr.forEach((item,index,array)=>{
    //执行代码
})
//参数：value数组中的当前项, index当前项的索引, array原始数组；
//数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
//理论上这个方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组修改；但是可以自己通过数组的索引来修改原来的数组；

var ary = [12,23,24,42,1];  
var res = ary.forEach(function (item,index,ary) {  ary[index] = item*10;  })  
console.log(res);//--> undefined;  
console.log(ary);//--> 通过数组索引改变了原数组； 

遍历数组添加元素

forEach()

filter()

findIndex()

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

let index = this.item.findIndex((term,index) =>{
      if(....){
       return true
      }
})

some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。 some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测，不会改变原始数组。

array.some(function(currentValue,index,arr),thisValue)
//some(必须（当前元素值，索引，数组对象），可选)

数组添加元素的三种方式

push()

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

array.push(newelement1)
array.push(newelement1,newelement2,...)

unshift()

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

array.unshift(item1,item2, ..., itemX)

splice()

splice() 方法用于添加或删除数组中的元素。

array.splice(index,howmany,item1,.....,itemX)
//(从哪里开始，删除个数，添加的元素，...)

数组去重

arr = [1,2,3,4,5,6,2,3,4,5]
function uniqueArray(a){
	var temp = []
	for (var i = 0;i < a.length; i ++){
		if (temp.indexOf(a[i]) == -1){
			temp.push(a[i])
		}
	}
	return temp
}
test = uniqueArray(arr)
console.log(test)

map reduce filter forEach

//map 遍历器 映射
let arr = [1,2,3,4];
let newarr = arr.map(function (item) {
  return item*2
});
console.log(newarr);
//reduce 累加器
let arr = [1,2,3,4];
let newval = arr.reduce(function (total,item) {
  return total + item
});
console.log(newval);
//filter 过滤器
let arr = [1,2,3,4];
let newarr = arr.filter(function (item) {
  return item>2;
});
console.log(newarr);
// forEach 循环（迭代）

---

杂谈

表单内容清空

模态框提交表单后，需要将表单清空

<form id="file-upload-form" enctype="multipart/form-data">
	<span>选择上传的文件</span><input type="file" id="file-upload-obj" name="myfiles" multiple="multiple"><br/>
</form>
document.getElementById('file-upload-form').reset();

url合法性验证

// 检测是否是合法的 URL
function isUrl(url) {
    const regex = /\b(https?):\/\/[\-A-Za-z0-9+&@#\/%?=~_|!:,.;]*[\-A-Za-z0-9+&@#\/%=~_|]/i;
    return regex.test(url);
}
// 测试代码
let url = "http://www.dute.org";
let r = isUrl(url);

// 输出结果
console.log(url);
console.log(r);