js常用增删改查方法js比较运算符逻辑运算符赋值运算符算术运算符

2023-04-13 14:25:02JavaScript021

js常用增删改查方法js比较运算符逻辑运算符赋值运算符算术运算符,第1张

js数组遍历某个值求和

一、增

1、push()

可接收任意数量的参数，把它们逐个添加至数组末尾，并返回修改后数组的长度。例如：

2、unshift()

该方法与push()类似，也可接收任意数量的参数，只不过是将参数逐个添加至数组前端而已，同样返回新数组长度。咱们接着上面的例子：

3、concat()

该方法与push()方法有点类似，同样是将元素添加至数组末尾，只不过这个数组已经不是原来的那个数组了，而是其副本，所以concat()操作数组后会返回一个新的数组。具体用法如下：

① 不传参数，返回当前数组副本

② 传递一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中

③ 传递非数组参数，这些参数就会被直接添加到结果数组的末尾

继续接着上面的栗子：

例子中一目了然，原数组保持不变，新数组后面添加了4、5、6三个元素。

4、splice()

前面的三个方法都具有很大局限性，因为不是添加到数组前就是数组后，而splice()就不一样了，它非常灵活和强大。灵活是因为它可以添加元素到数组的任意位置，强大是因为它除了可以添加元素之外还具有删除和替换元素的功能（这个后面会陆续讲到）。

splice()可以向数组指定位置添加任意数量的元素，需要传入至少3个参数：起始位置、0（要删除的元素个数）和要添加的元素。

依然接着上面的例子继续：

可以看出，splice()与push()和unshift()一样是直接在原数组上修改的。

二、删

1、pop()

与push()方法配合使用可以构成后进先出的栈，该方法可从数组末尾删除最后一项并返回该项。

接着上例：

2、shift()

与push()方法配合使用可以构成先进先出的队列，该方法可删除数组第一项并返回该项。

继续接着上例：

3、slice()

定义和用法

slice() 方法以新的数组对象，返回数组中被选中的元素。

slice() 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。

注释：slice() 方法不会改变原始数组。

该方法同concat()一样是返回一个新数组，不会影响原数组，只不过slice()是用来裁剪数组的，返回裁剪下来的数组，具体用法如下：

4、splice()

好，继续讲这个“万能”的方法。

上面讲到，该方法在添加数组元素的时候需要传入3个以上参数，而其中第2个参数就是用于指定要删除元素的个数的，那时我们传的是数字0。那么，如果单单只需删除元素，我们就只需给splice()传入两个参数，第1个参数用于指定要删除的第一项的位置，第2个参数用于指定要删除元素的个数。

继续上例~~

从索引项为2的位置开始删除4个元素，所以结果为 [-1, 0, 1, 2]。

三、改

这个其实最灵活的方式就是直接使用splice()这个强大的方法了，其实通过以上对该方法的了解，我们大致就能知道使用该方法修改数组元素的基本原理。

原理很简单，就是向指定位置插入任意数量的元素，且同时删除任意数量的元素。

依然继续上例~~

四、查

indexOf()和lastIndexOf()

这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，indexOf()从数组的开头（位置0）开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。

例如：

当找不到该元素时，返回 -1 ，lastIndexOf()方法同理。

1 数据类型

2 引用数据类型

object 对象类型

3 number 数字类型

包含所有的数字（整数，浮点数，正数，负数，极大极小数），Infinity(分母为零)，NaN(not a number)

4 string 字符串类型

引号包含的任意文本，单双引号都可以

输出展示

2 比较运算符

1 比较运算符

比较两个值的大小返回一个布尔值（true 或 false）

> < >= <= == != === !==

== 等于，只判断数值

===全等，绝对等于，即判断数据类型也判断数值

!= == 取反

!== ===取反

console.log(undefined == null)//true 都没有值

console.log(undefined === null)//false 数据类型不同undefined object

console.log(NaN == NaN)//false

console.log(NaN === NaN)//false

console.log(NaN != NaN)//true

console.log(NaN !== NaN)//true

</script>

3 逻辑运算符

2 逻辑运算符

连接多个表达式，返回一个布尔值（true 或 false）

&& 逻辑与并且所有的表达式都为true，结果才为true，有一个为false结果就为false

|| 逻辑或或者所有的表达式都为false，结果才为false，有一个为true结果就为true

！逻辑非取反表达式为true取反就为true，反之亦然

注意：逻辑与的优先级大于逻辑或

</script>

逻辑运算符演示

输出到控制台的结果

4 赋值运算符

3 赋值运算符

= 等号右边的值赋值给左边

+= x += y x = x + y 下同

%= 要的是余数

</script>

x = 7

y = 3

console.log(x/=y)

</script>

5 算术运算符

算术运算符

+ - * / %(取余，取模) ++（自增） --(自减）

%(取余，取模) 应用判断奇偶数、倍数

++ 相当于自己加1 x++ 相当于 x = x + 1

-- 相当于自己加1 x-- 相当于 x = x - 1

+运算碰到字符串，直接进行字符串拼接，返回string类型

- * / %遇到字符串，都转换成number类型进行计算，如果不能转换成数字，则返回NaN，数据类型未number

true转换1 false转换为0

++ --

前++和后++，对于变量自己来说没有区别都是+1

前++ 先赋值在加1

后++ 先加1 再赋值

</script>

/ var x = 5//number

var y = 2//number

comsole.log(x + y)//7

comsole.log(x - y)//3

comsole.log(x * y)//10

comsole.log(x / y)//2.5

comsole.log(x % y)//1 */

总结下来就是dom节点的读/写、添加/删除，请看下面的例子。

<!DOCTYPE html>

<html xmlns="

<head>

//定义变量，保存选中的标签

var selectLi

//定义变量，保存修改了的标签

var editedLi=false

window.onload=function()

{

//新增li标签到末尾

document.getElementById("insertEnd").onclick = insertEndclick

//新增li标签到指定位置

var liObj=document.getElementsByTagName("li")

for(var i=0i<liObj.lengthi++)

{

liObj[i].onclick = liChoose

}

document.getElementById("insert").onclick = insertThere

//删除指定标签

document.getElementById("delete").onclick = deleteli

//修改指定标签内容

document.getElementById("edit").onclick = editLi

//将选中的该标签变为文本框进行内容修改

document.getElementById("edit2").onclick = editLi2

//将文本框中的内容保存

document.getElementById("save").onclick = saveLi

}

//新增li标签到末尾

function insertEndclick()

{

var result = prompt("需要插入的li标签文本：", "小黑")

if (result)

{

var newli = document.createElement("li")

newli.innerHTML = result

newli.onclick = liChoose

document.getElementById("ulList").appendChild(newli)

}

//新增li标签到指定位置

function insertThere()

{

if (selectLi)

{

var result = prompt("需要插入的li标签文本：", "小黑")

if (result) {

var newli = document.createElement("li")

newli.innerHTML = result

//需要给新增的li标签设置点击事件

newli.onclick = liChoose

document.getElementById("ulList").insertBefore(newli, selectLi)

}

else

{

alert("请先选择要插入的位置")

}

//高亮选中的标签

function liChoose()

{

var ul = document.getElementsByTagName("li")

for (var i = 0i <ul.lengthi++)

{

ul[i].style.backgroundColor = "white"

}

this.style.backgroundColor = "yellow"

selectLi = this

}

//删除指定标签

function deleteli()

{

if (selectLi)

{

selectLi.parentElement.removeChild(selectLi)

}

else

{

alert("请先选中要删除的标签")

}

//修改指定标签

function editLi()

{

if(selectLi)

{

var result = prompt("输入修改内容", "大白")

if(result)

{

selectLi.innerHTML = result

}

else

{

alert("请选择要修改的标签")

}

//将选中的该标签变为文本框进行内容修改

function editLi2()

{

if(selectLi)

{

//创建一个文本框

var newli = document.createElement("input")

newli.type = "text"

//将文本框内容设置为li标签的文本值

newli.value = selectLi.innerHTML

//将文本框添加到li标签内部

selectLi.removeChild(selectLi.childNodes[0])

selectLi.appendChild(newli)

editedLi = true

}

//将文本框中的内容保存

function saveLi()

{

if (editedLi)

{

var editValue = selectLi.childNodes[0].value

selectLi.innerHTML = editValue

}

else

{

alert("没有标签在编辑状态")

}

</script>

</head>

<body>

<div>

</div>

</ul>

</body>

</html>

直接给个例子吧

包含两个文件（index.jsp 和 index.js）

<%@ page language="java" contentType="text/html charset=UTF-8"

pageEncoding="UTF-8"%>

</head>

<caption><h2>迈睿练习一</h2></caption>

<button type="button" class="btn btn-info" id="user_add" data-toggle="modal"

data-target="#myModal" onclick="optionUserData(this)">新增</button>

<button type="button" class="btn btn-info" id="user_edit" data-toggle="modal"

data-target="#myModal" onclick="optionUserData(this)">编辑</button>

</caption>

<thead>

<tr>

</tr>

</thead>

</tbody>

</table>

&times

</button>

新增用户

</h4>

</div>

</div>

<button type="button" class="btn btn-default"

data-dismiss="modal">保存

</button>

</div>

</div>

</div>

</div>

</body>

</html>

复制代码

//存放所有用户

var users = users || {}

//操作类型

var operateType = ""

//存放搜索对象

var searchUsers = searchUsers || {}

//用户构造方法

var User = {

Create:function(code,userName,sex,passWord,age,birthday){

this.code = code

this.userName = userName

this.sex = sex

this.passWord = passWord

this.age = age

this.birthday = birthday

//添加用户

addUserData:function(){

if(this.code != ""){

users[this.code] = this

}

//删除用户

deleteUserData:function (){

for(var i in users){

if(this.code == users[i].code){

delete users[i]

}

//编辑用户

editUserData:function(){

for(var i in users){

if(this.code == users[i].code){

users[i].userName = this.userName

users[i].sex = this.sex

users[i].passWord = this.passWord

users[i].birthday = this.birthday

users[i].age = this.age

}

//查找用户

findUserData:function(data){

for(var i in users){

if(data.code.indexOf(users[i].code) >= 0 ||

data.userName.indexOf(users[i].userName) >= 0){

searchUsers[users[i].code] = users[i]

refreshDatas(searchUsers)

}

function New(aClass,aParams){

function new_(){

aClass.Create.apply(this,aParams)

}

new_.prototype = aClass

return new new_()

}

//bootstrap模态框事件

$('#myModal').on('hide.bs.modal', function () {

// 执行一些动作...

var inputElements = this.getElementsByTagName("input")

var userArr = []

for(var i=0i<inputElements.lengthi++){

userArr[i] = inputElements[i].value

}

var user = New(User,userArr)

//添加操作

if(operateType == "add"){

user.addUserData()

refreshDatas(users)

//编辑操作

}else if(operateType == "edit"){

user.editUserData()

refreshDatas(users)

}

})

/**

* 首次加载页面执行方法

function loadUserDatas(){

var userArray = initUserDatas()

addRowData(userArray)

refreshDatas(users)

}

/**

* 初始化用户数据

function initUserDatas(){

var initUser1 = New(User,["1001","小兰","女","1234","13","1991-1-1"])

var initUser2 = New(User,["1002","小毅","男","1234","13","1991-1-1"])

var initUser3 = New(User,["1003","兰花","女","1234","13","1991-1-1"])

var initUser4 = New(User,["1004","兰儿","女","1234","13","1991-1-1"])

users[initUser1.code] = initUser1

users[initUser2.code] = initUser2

users[initUser3.code] = initUser3

users[initUser4.code] = initUser4

return users

}

/**

* 往表格添加一行html数据

function addRowData(datas){

var tbodyElement = document.getElementById("tbody")

var html = ""

var color = "warning"

var flag = true

for(var i in datas){

if(flag){

color = "info"

}else{

color = "warning"

}

html = html + "<tr class='"+ color +"'><td style='width:30px'><input type='checkbox'></td><td id='code'>"

+ datas[i].code +"</td><td id='userName'>"

+ datas[i].userName +"</td><td id='sex'>"

+ datas[i].sex +"</td><td id='passWord'>"

+ datas[i].passWord +"</td><td id='age'>"

+ datas[i].age +"</td><td id='birthday'>"

+ datas[i].birthday +"</td>"

+"</tr>"

flag = !flag//颜色转换

}

tbodyElement.innerHTML = html

}

/**

* 刷新用户数据

function refreshDatas(datas){

addRowData(datas)

}

/**

* 收集一行数据

function collectionRowData(param){

var tdElement = param.getElementsByTagName("td")

var userArr = []

for(var i=1i<tdElement.lengthi++){

var temp = tdElement[i].textContent

userArr[i-1] = temp

}

var user = New(User,userArr)

return user

}

/**

* 用户操作方法

function optionUserData(param){

//获得操作类别

var optionType = param.getAttribute("id")

if(optionType == "user_add"){

operateType = "add"

}else if(optionType == "user_delete"){

var checkRowData = isCheckedData()

var user = collectionRowData(checkRowData)

user.deleteUserData()

refreshDatas(users)

}else if(optionType == "user_edit"){

operateType = "edit"

var checkRowData = isCheckedData()

var user = collectionRowData(checkRowData)

var modal_body = document.getElementById("modal-body")

var inputElements= modal_body.getElementsByTagName("input")

for(var i=0i<inputElements.lengthi++){

var temp = inputElements[i].id.substring(2,inputElements[i].id.length)

inputElements[i].value = user[temp]

}

}else if(optionType == "user_find"){

var s_code = document.getElementById("s_code").value

var s_userName = document.getElementById("s_userName").value

var s_all= document.getElementById("s_all").value

//搜索数据

var s_data = s_data || {}

s_data.code = s_code

s_data.userName = s_userName

s_data.all = s_all

var user = New(User,[])

user.findUserData(s_data)

}else{

}

/**

* 是否选中数据,返回选中数据的行

function isCheckedData(){

var tbodyElement =document.getElementById("tbody")

var trElements = tbodyElement.getElementsByTagName("tr")

var flag = false

for(var i=0i<trElements.lengthi++){

var inputElement = trElements[i].getElementsByTagName("input")[0]

if(inputElement.checked){

flag = true

return trElements[i]

}

if(!flag){

alert("请选择一条记录！")

$('#myModal').unbind("on")

}

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：怎样用JS实现关闭当前窗口

# 下一篇：学了css3需要学css吗

推荐阅读

热门文章

最新发布

标签列表

js常用增删改查方法js比较运算符 逻辑运算符 赋值运算符 算术运算符

给您推荐相同类型的内容：

js常用增删改查方法js比较运算符逻辑运算符赋值运算符算术运算符