分类目录归档:JavaScript

JS 数组降维/扁平化(减少层级)方法

二维数组降维

1.使用 for 循环降维/扁平化

var arr = [1, 2, [3, 4], [5, 6, 7]];
var i, j, val, result = [];
for (i = 0; i < arr.length; i++) {
  val = arr[i];
  if (Array.isArray(val)) {
    for (j = 0; j < val.length; j++) {
      result.push(val[j]);
    }
  } else {
    result.push(val);
  }
}
console.log(result);
// > [1, 2, 3, 4, 5, 6, 7]

继续阅读

发表在 JavaScript | 标签为 , , , , , , , | JS 数组降维/扁平化(减少层级)方法已关闭评论

JS 匿名函数与闭包的this指向

匿名函数与闭包的 this 均指向 window。

function a() {
  (function () {
    console.log(this, 'function');
  })();
  function b() {
    console.log(this, 'function b')
  };
  b();
}
a();
// > Window {window: Window, self: Window, document: document, name: '', location: Location, …} 'function'
// > Window {window: Window, self: Window, document: document, name: '', location: Location, …} 'function b'

继续阅读

发表在 JavaScript | 标签为 , , , , | JS 匿名函数与闭包的this指向已关闭评论

JS 获取数组最大值/最小值的方法

1.for 循环遍历取数组最大值,取最小值同理

var arr = [1, 26, 8, 47, -5, 133, 90];
var max = arr[0]; // 先假设数组第一个元素即最大值
for (var i = 0; i < arr.length; i++) {
  if (arr[i] > max) {
    max = arr[i];
  }
}
console.log(max);
// > 133

继续阅读

发表在 JavaScript | 标签为 , , , | JS 获取数组最大值/最小值的方法已关闭评论

JS 数组操作方法

1、push() 向数组尾部添加元素

语法:

arrayObject.push(newelement1, newelement2, newelement3, ...)

参数说明:
newelement1 必需,要添加的第一个元素
newelement2, newelement3… 可选,要添加的第二个元素、第三个元素
返回值:数组被操作后的新长度。 继续阅读

发表在 JavaScript | 标签为 , , , , , , , , , | JS 数组操作方法已关闭评论

JS 常用排序方法

1.数组 sort() 方法排序

var arr = [1, 4, 3, 11, 8, 23, 45, 96, 70, 31, 6, 57];
arr.sort();
console.log(arr);
// > [1, 11, 23, 3, 31, 4, 45, 57, 6, 70, 8, 96]

默认情况下,数组 sort() 方法将值作为字符串进行排序,即先对比第一个字符、第二个字符…。 继续阅读

发表在 JavaScript | 标签为 , , , , , , | JS 常用排序方法已关闭评论

JS对象浅拷贝与深拷贝方法

JS 对象浅拷贝是将对象的属性和值复制出来给另一个对象,可能没有将对象的所有层级的属性复制,新对象的属性的引用地址可能与原对象相同。而深拷贝就是将对象完全复制一份,复制出来的对象与原对象具有相同层级的属性和值,并且新对象的属性拥有独立的引用地址。 继续阅读

发表在 JavaScript | 标签为 , , , | JS对象浅拷贝与深拷贝方法已关闭评论

JS 不支持冒泡的DOM事件

事件冒泡是指在元素上某事件被触发时,这个事件将会在该元素的所有祖先元素上被触发。但是有些事件支持冒泡,有些则不支持。

不支持冒泡的事件

打印事件:
onafterprint、onafterprint
页面加载、卸载事件:
onload、onbeforeunload、onunload
滚动条滚动、浏览器窗口调整事件
onscroll、onresize 继续阅读

发表在 JavaScript | 标签为 , , , , | JS 不支持冒泡的DOM事件已关闭评论

JS获取DOM元素CSS样式的方法

CSS 样式有两种类型:
1.行内样式,即通过元素的 style 属性定义的样式。
2.非行内样式,即通过 <style> 标签或引入外部 CSS 文件定义的样式。
针对 DOM 元素的行内样式,可以从 DOM.style 样式集合中读取对应行内样式属性,如:DOM.style.width、DOM.style.height 等。而要获取非行内样式,则需要通过 window.getComputedStyle()(W3C)方法或 DOM.currentStyle(IE)当前样式集合属性去获取。 继续阅读

发表在 JavaScript | 标签为 , , , , | JS获取DOM元素CSS样式的方法已关闭评论

JS var、let、const 关键字的区别一览

var 关键字:ES5 标准,用 var 关键字声明的变量存在声明提升,即会将变量提前到当前作用域顶部进行声明,不存在块级作用域,允许重复声明同名变量,变量声明后可被修改。
let 关键字:ES6 标准,声明的变量不存在声明提升,变量在当前块作用域及子作用域内才可访问,不允许重复声明同名变量,变量声明后可被修改。 继续阅读

发表在 JavaScript | 标签为 , , , , | JS var、let、const 关键字的区别一览已关闭评论

JS 严格模式与非严格模式的区别

在 JavaScript 脚本的开头添加

"use strict";

'use strict';

即可使用严格模式,在函数内部的开头添加则表示只在函数内使用严格模式。

为什么使用严格模式?

1.可以避免一些不合理、不严谨 JavaScript 代码逻辑(如给未定义的变量赋值会报错);
2.提高 JavaScript 代码运行的安全性(如 eval() 函数会创建独立的作用域);
3.提高 JavaScript 解释器的编译效率,提升代码运行性能;
4.为未来新版本的 JavaScript 做好铺垫。 继续阅读

发表在 JavaScript | 标签为 , , , | JS 严格模式与非严格模式的区别已关闭评论