网页编程和设计 JavaScript语言(ES5)(四)

简介: 网页编程和设计 JavaScript语言(ES5)(四)

13.2 数组静态方法_Array.isArray

Array.isArray方法返回一个布尔值,表示参数是否为数组。它可以弥补typeof运算符的不足

 var arr = ["web", 100, true];
 document.write(typeof arr)// object
    var arr = ['java', 12, 'it'];
    document.write(Array.isArray(arr))//true

13.3 数组方法_push_pop

push方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组.

    var arr = []; //[java, web, true, {}]
    arr.push("Java")
    arr.push('web')
    arr.push(true, {})

pop方法用于删除数组的最后一个元素,并返回该元素。注意,该方法会改变原数组

    var arr = ['java', 'python', 'WEB前端'];
    arr.pop() // 'WEB前端'
    arr // ['java', 'python']

13.4 数组方法_shift_unshift

shift方法用于删除数组的第一个元素,并返回该元素。注意,该方法会改变原数组.

    var arr = ['java', 'python', 'WEB前端'];
    arr.shift() // 'java'
    arr // ['python', 'WEB前端']

shift方法可以遍历并清空一个数组

var list = [1, 2, 3, 4, 5, 6];
var item;
while (item = list.shift()) {
 console.log(item);
}
list // []

unshift方法用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。

    var arr = ['java', 'python', 'WEB前端'];
    arr.unshift('c++'); // 4
    arr // ['c++', 'java', 'python', 'WEB前端']

unshift方法可以接受多个参数,这些参数都会添加到目标数组头部

    var arr = [ 'java', 'python' ];
    arr.unshift('WEB前端', 'c++') // 4
    arr // [ 'WEB前端', 'c++', 'java', 'python' ]

13.5 数组方法_join()

join方法以指定参数作为分隔符,将所有数组成员连接为一个字符串返回。如果不提供参数,默认用逗号分隔

    var a = [1, 2, 3, 4];
    a.join(' ') // '1 2 3 4'
    a.join(' | ') // "1 | 2 | 3 | 4"
    a.join() // "1,2,3,4"

如果数组成员是undefinednull或空位,会被转成空字符串

    [undefined, null].join('#')// '#'
     ['a', , 'b'].join('-')// 'a--b'

数组的join配合字符串的split可以实现数组与字符串的互换

    var arr = ["a","b","c"];
    var myArr = arr.join("");
    console.log(myArr);//abc
    console.log(myArr.split(""));//["a","b","c"]

13.6 数组方法_concat

concat方法用于多个数组的合并。它将新数组的成员,添加到原数组成员的后部,然后返回一个新数组,原数组不变

['hello'].concat(['world'])
// ["hello", "world"]
['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

除了数组作为参数,concat也接受其他类型的值作为参数,添加到目标数组尾部。

[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]

应用场景

上拉加载,合并数据

13.7 数组方法_reverse

reverse方法用于颠倒排列数组元素,返回改变后的数组。注意,该方法将改变原数组

var a = ['a', 'b', 'c'];
a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

实现一个字符串反转排列

var str = "hello";
str.split("").reverse().join("")

13.8 数组方法_indexOf

indexOf方法返回给定元素在数组中第一次出现的位置,如果没有出现则返回-1

var arr = ['a', 'b', 'c'];
arr.indexOf('b') // 1
arr.indexOf('y') // -1

indexOf方法还可以接受第二个参数,表示搜索的开始位置

['java', 'web', 'python'].indexOf('python', 1) // 2

十四、函数

14.1 函数的声明

function 命令: function命令声明的代码区块,就是一个函数。function命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数。函数体放在大括号里面。

function print(s) {
 console.log(s);
}

14.2 函数名的提升

JavaScript 引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会像变量声明一样,被提升到代码头部

add();
function add() {}

14.3 函数参数

函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数。

function square(x) {
    console.log(x * x);
}
square(2) // 4
square(3) // 9

14.4 函数返回值

JavaScript函数提供两个接口实现与外界的交互,其中参数作为入口,接收外界信息;返回值作为出口,把运算结果反馈给外界

function getName(name){
  return name;
}
var myName = getName("web")
console.log(myName); // web

温馨提示

return 后面不能再添加任何代码,因为不会执行

十五、对象

什么是对象?对象(object)是 JavaScript 语言的核心概念,也是最重要的数据类型

简单说,对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合

var user = {
 name: '张三',
 age: '13'
};

对象的每一个键名又称为“属性”(property),它的“键值”可以是任何数据类型。如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用

var user = {
 getName: function (name) {
  return name;
  }
};
user.getName("web") // web

如果属性的值还是一个对象,就形成了链式引用

var user = {
  name:"itbaizhan",
  age:13,
  container:{
    frontEnd:["Web前端","Android","iOS"],
    backEnd:["Java","Python"]
   }
}
user.container.frontEnd // ["Web前端","Android","iOS"]

15.1 Math对象

Math是 JavaScript 的原生对象,提供各种数学功能。

15.1.1 Math.abs()

Math.abs方法返回参数值的绝对值

Math.abs(1) // 1
Math.abs(-1) // 1

15.1.2 Math.max(),Math.min()

Math.max方法返回参数之中最大的那个值,Math.min返回最小的那个值。如果参数为空, Math.min返回Infinity, Math.max返回-Infinity

Math.max(2, -1, 5) // 5
Math.min(2, -1, 5) // -1
Math.min() // Infinity
Math.max() // -Infinity

15.1.3 Math.floor(),Math.ceil()

Math.floor方法返回小于参数值的最大整数

Math.floor(3.2) // 3
Math.floor(-3.2) // -4

Math.ceil方法返回大于参数值的最小整数

Math.ceil(3.2) // 4
Math.ceil(-3.2) // -3

15.1.4 Math.random()

Math.random()返回0到1之间的一个伪随机数,可能等于0,但是一定小于1

Math.random() // 0.28525367438365223

任意范围的随机数生成函数如下

function getRandomArbitrary(min, max) {
 return Math.random() * (max - min) + min;
}
getRandomArbitrary(5, 10)


相关文章
|
6月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
11月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
371 56
|
10月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1504 58
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
638 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
7月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
2016 0
|
11月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
381 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
10月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
12月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
1754 2