数组
- 有序的数据集合，有序体现在下标（索引）
- 下标范围 [0, 数组长度-1]
- 创建数组
- 添加数据
- 获取数据
- 遍历数组
- for循环
- forEach
数组.forEach(function(item, index){ })- map
- filter
- some
- every
- 数组的排序
- 冒泡排序
- 数组.sort(function(a,b){ return a-b<0 })
- 数组的反转
- 数组.reverse()
- 数组的去重
- 数组的拼接
- 数组.concat(数组,数组)
- 数组的修改
- 数组的删除
- 数组.splice(开始下标, 删除个数)
数组和字符串的相互转换
- 数组里面每一项拼接成一个字符串
- 字符串 = 数组.join(拼接符)
- 如果我们希望所有的数据都在一起 拼接符写一个空字符串
- 字符串拆分成一个数组
- 数组 = 字符串.split()
字符串
-
含义: 由字符组成串
-
字符串和数组在底层存储上面是一致的
-
字符串是可以通过下标访问
-
字符串也是有长度
-
遍历字符串方式
- for循环
-
查找字符串里面是否包含某一个字符
- str.indexOf(字符)
-
字符串的只读性
-
字符串的裁剪
- substr(开始的下标, 截取的个数)
- substring(开始的下标, 结束的下标) 不包括结束位置的下标
- slice(开始的下标,结束的下标) 不包括结束位置的下标
- 以上三个函数如果只给了一个参数 代表从开始截取到字符串的结束
- slice支持传入负数（代表倒数第几位） 代表从右往左数
- 裁剪的方向永远都是从左往右
- slice既可以裁剪数组也可以裁剪字符串
-
字符串的比较
- 11 > 2
- '11' < '2'
- '113' < '18'
- 'hello' 'world'
- 'hello' 'World'
- '你好' '世界'
- 从左往右按位比较,每一位按照ACSII码表上面对应数值比较
-
ACSII码表
- 计算机之父 冯诺依曼
- 最早的计算机是用于军事
- 最早计算机只能存储二进制 0 1
- a-z A-Z , .将这些字符对应一个数值，这个字符对应数值编码表就称为ACSII码表
- '0'-->48 'A'-->65 'a'-->97
- 随着计算机的逐渐民用化，推出了一个万国码 unicode --> utf-8
- 影响
- 字符串的比较
- 记住中文编码的范围 \u4e00-\u9fa5
对象 Object
- 是一种复杂的数据类型
- 是一种多个键值对的数据集合
- 对象创建
- 字面量
- var 对象名 = {}
- 内置构造函数
- var 对象名 = new Object()
- 字面量
- 添加数据
- 下标法
- 对象名["键名"] = 值
- 点语法
- 对象名.键名 = 值
- 下标法
- 获取数据
- 下标法
- 对象名["键名"]
- 点语法
- 对象名.键名
- 如果访问对象里面一个不存在的key 得到的值是undefined
- 当对象的键是一个变量的时候 只能使用下标法 而且键名不能加引号
- 下标法
- 遍历对象
- for..in
for(var 键名 in 对象名){ console.log(键名) // 对象的key console.log(对象名[键名]) } - 修改数据
- 重新赋值
- 删除数据
- delete 对象名.键名
- delete 对象名["键名"]
- 会移除整个键值对
实例
（以下代码均为课程实例）
（1）数组和字符串的组合相互转换
<script>
/* 数组拼接成一个字符串 */
var list = ['8', '10', '20', 1, true]
var str = list.join()
console.log(str) // 默认是按照英文的,来拼接每一项
var str2 = list.join('')
console.log(str2)
var str3 = list.join('@')
console.log(str3)
// '810201true'
/* 将字符串拆分成数组 */
var noStr = '1-2-3-4-5-6'
var noStr2 = '123456'
var arr = noStr.split()
console.log(arr) // 默认会将字符串当成一个整体放到数组里面
var arr2 = noStr.split('-') // 按照-将字符串拆分成数组里面每一项
console.log(arr2)
var arr3 = noStr2.split('')
console.log(arr3)
// [1,2,3,4,5,6]
</script>
（2）字符串去重
<script>
var str = '2312904123894732847'
// 把字符串里面每一项拆分成一个数组
var arr = str.split('')
// console.log(arr)
// 实现的数组去重
var newArr = arr.filter(function(item, index){
return arr.indexOf(item) == index
})
// console.log(newArr)
// 将数组在拼接成一个字符串
str = newArr.join('')
console.log(str)
</script>
（3）查找字符串里是否包含某一个字符
<script>
var str = 'hello'
console.log(str.indexOf('h'))
console.log(str.indexOf('H'))
</script>
(4)字符串只读性
<script>
var str = 'hello'
// 修改第一项
str[0] = 'H'
console.log(str)
// str.splice(0,1)
var str2 = 'world'
var str3 = str + str2
console.log(str3)
</script>
（5）裁剪字符串-slice方法
<script>
var str = 'abcdefghijklmn'
str = str.slice(2,4) // 此处不是裁剪的影响 因为赋值的影响
console.log(str)
var str2 = 'abcdefghijklmn'
str2 = str2.slice(2)
console.log(str2)
var str3 = 'abcdefghijklmn'
str3 = str3.slice(-2)
console.log(str3)
var str4 = 'abcdefghijklmn'
str4 = str4.slice(-6, -2)
console.log(str4) // 'ijkl'
var str5 = 'abcdefghijklmn'
str5 = str5.slice(-2, -6)
console.log(str5) // ''
var str6 = 'abcdefghijklmn'
str6 = str6.slice(2, -6)
console.log(str6) // 'cdefgh'
var str7 = 'abcdefghijklmn'
str7 = str7.slice(-2, 6)
console.log(str7) // ''
var arr = ['a', 'b', 'c', 'd', 'e', 'f']
arr = arr.slice(2,4)
console.log(arr)
</script>
（6）裁剪字符串-substring方法
<script>
var str = 'abcdefghijklmn'
str = str.substring(2,4) // 此处不是裁剪的影响 因为赋值的影响
console.log(str)
var str2 = 'abcdefghijklmn'
str2 = str2.substring(2)
console.log(str2)
</script>
（7）裁剪的练习
<script>
// 要求用户输入一个px像素 '100px' '1000px' '13.4px' 截取其中的数字部分
var content = prompt('请输入一个像素值')
console.log(content)
// 找到结束的位置
var index = content.indexOf('px')
console.log(index)
content = content.slice(0, index)
console.log(content)
</script>
（8）创建对象
<script>
var obj = {}
var obj2 = new Object()
console.log(obj)
console.log(obj2)
</script>
（9）对象添加数据
<script>
// 初始化创建的时候添加数据
var person = {
// 'username': 'jack',
// "age": 18,
// score: 100
}
// username键名(key)
// jack值(value)
/* 下标法 */
person['username'] = 'jack'
person['age'] = 18
console.log(person)
/* 点语法 */
var teacher = {}
teacher.username = 'tom'
teacher.age = 18
teacher.score = 200
console.log(teacher)
/* 错误写法 */
var student = {}
// var username = 'username'
// 如果下标法键名不加引号会识别成一个变量
// student[username] = 'jerry' // username is not defined
// student[age] = 10
student.'username' = 'jerry'
student.['username'] = 'jerry'
console.log(student)
</script>
（10）获取对象的数据
<script>
var person = {
username: 'jack',
age: 18,
gender: '男'
}
// 点语法
console.log(person.username)
console.log(person.age)
console.log(person.gender)
// 下标法
console.log(person['username'])
console.log(person['age'])
console.log(person['gender'])
/* 下标法不加引号 会将这个键名当成一个变量 */
console.log(person[username])
</script>
（11）遍历对象
<script>
var person = {
username: 'jack',
age: 18,
gender: '男'
}
for(var k in person){
// 第一次进去 取到对象的第一个key k='username'
// 第二次进去 取到对象的第二个key k='age'
// 第三次进去 取到对象的第三个key k='gender'
// 所有的key取完之后就结束循环了
console.log(k) // k是变量
console.log(person[k])
// console.log(person.k) // 相当于person['k'] 对象里面没有这个叫k的键名 取到的就是undefined
}
</script>
（12）修改对象里面的值
<script>
var person = {
username: 'jack',
age: 18,
gender: '男'
}
// person.username = 'rose'
person['username'] = 'rose'
console.log(person)
</script>
（13）删除对象的数据
<script>
var person = {
username: 'jack',
age: 18,
gender: '男'
}
var personList = [
'jack',
18,
'男'
]
// delete person.username
// delete person['username']
console.log(person)
console.log(personList)
</script>
（14）字符串转对象-获取地址栏参数
<script>
// https://www.baidu.com/s?wd=111&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1
// 请求参数
/*
?参数名=值&参数名=值&参数名=值...
{参数名: 值, 参数名: 值, 参数名: 值}
?wd=111&sa=fyb_n_homepage&rsv_dl=seqweq
*/
// 封装一个方法获取地址栏参数的值
function getQuery(name){
var str = '?wd=111&sa=fyb_n_homepage&rsv_dl=seqweq'
// 去除第一个问号
str = str.slice(1)
// 把字符串按照&进行拆分 得到一个数组
var arr = str.split('&')
// console.log(arr)
// 遍历数组
var obj = {}
arr.forEach(function(item){
// 每一项按照=拆分 wd=111 --> ['wd', 111]
var arr2 = item.split('=')
// arr2的第一项arr2[0]是对象的键 第二项arr2[1]是对象的值
// 因为arr2[0]是一个变量
obj[arr2[0]] = arr2[1]
})
// console.log(obj) {wd:111, sa: 'fyb_n_homepage', rsv_dl: 'seqweq'}
return obj[name]
}
console.log(getQuery('wd')) // 111
console.log(getQuery('sa')) // fyb_n_homepage
console.log(getQuery('rsv_dl')) // seqweq
</script>
（15）实现一个字符串反转 'abcdef' --> 'fedcba'
<script>
// 实现一个字符串反转 'abcdef' --> 'fedcba'
var str = 'abcdef'
var arr = str.split('')
// console.log(arr)
arr.reverse(arr)
// console.log(arr)
str = arr.join('')
console.log(str)
</script>
（16）字符串数字排序
<script>
// '12321312435435' -> '1112'
var str = '12321312435435'
var arr = str.split('')
// console.log(arr)
var newArr = arr.sort(function (a, b) {
return a - b
})
// console.log(newArr)
str = newArr.join('')
console.log(str)
</script>
（17）裁剪字符串
<script>
// 先根据传入的name找到裁剪的位置
// function getQuery(name){
// var str = '?wd=111&sa=fyb_n_homepage&rsv_dl=seqweq'
// str = str.slice(1)
// // 把字符串按照&进行拆分 得到一个数组
// var arr = str.split('&')
// // var index = arr.indexOf('=')
// // arr = arr.slice(index+1)
// // console.log(arr)
// // console.log(arr)
// // 遍历数组
// var obj = {}
// arr.forEach(function(item){
// // 每一项按照=拆分 wd=111 --> ['wd', 111]
// var arr2 = item.split('=')
// // arr2的第一项arr2[0]是对象的键 第二项arr2[1]是对象的值
// // 因为arr2[0]是一个变量
// obj[arr2[0]] = arr2[1]
// })
// return obj[name]
// }
// console.log(getQuery('wd')) // 111
// console.log(getQuery('sa')) // fyb_n_homepage
// console.log(getQuery('rsv_dl')) // seqweq
function getQuery(name) {
var obj = {}
var str = '?wd=111&sa=fyb_n_homepage&rsv_dl=seqweq&'
// 先根据传入的name找到裁剪的位置
str = str.slice(1);
var str = str.substr(str.indexOf(name), str.length)
var str = str.slice(str.indexOf(name), str.indexOf('&'))
//console.log(str)
var str1 = str.slice(0, str.indexOf('='))
//console.log(str1)
var str2 = str.slice(str.indexOf('=') + 1)
//console.log(str2)
obj[str1] = str2
return obj[name]
}
console.log(getQuery('wd')) // 111
console.log(getQuery('sa')) // fyb_n_homepage
console.log(getQuery('rsv_dl')) // seqweq
</script>
（18）统计字符串里每个字符出现的次数
<script>
// 'absdasdaabssdsdaasddasdasdaaaa'
// 统计字符串里面每一个字符出现的次数 {a:6, b:2, d:5, s: 3}
// for(var i=0;i<=arr.length-1;i++){
// console.log(arr[i])
// counta=0
// countb=0
// countd=0
// counts=0
// if(arr.indexOf('a')!== -1){
// counta++
// }
// if(arr.indexOf('b')!== -1){
// countb++
// }
// if(arr.indexOf('d')!== -1){
// countd++
// }
// if(arr.indexOf('s')!== -1){
// counts++
// }
// }
// console.log(counta)
// console.log(countb)
// console.log(countd)
// console.log(counts)
// var str = 'absdasdaabssdsdaasddasdasdaaaa'
// var arr = str.split('')
// console.log(arr)
// var arr1 = arr.filter(function(item, index){
// return arr.indexOf(item) ==index
// })
// console.log(arr1)
// var a=0
// for(i=0;i<arr.length;i++){
// arr1.push(arr[i])
// if(arr1.indexOf(a)==index){
// a++0
// }
// }
// console.log(a)
// var str = 'absdasdaabssdsdaasddasdasdaaaa'
// var arr = str.split('')
// console.log(arr)
// var arr1 = arr.filter(function (item, index) {
// return arr.indexOf(item) == index
// })
// console.log(arr1)
var str = 'absdasdaabssdsdaasddasdasdaaaa'
var arr = str.split('')
var obj = {}
var newArr = arr.filter(function (item, index) {
return arr.indexOf(item) === index
})
var l = newArr.length
//console.log(l)
console.log(newArr)
for (var i = 0; i < l; i++) {
var s = 0
arr.forEach(function (item, index) {
if (newArr[i] == item) {
s = s + 1
}
})
obj[newArr[i]] = s
}
console.log(obj)
</script>
（19）数组里面对象排序
<script>
/*
源数据
[
{id:1, price: 100.2, name: '小米手机'},
{id:2, price: 44.7, name: '商品01'},
{id:3, price: 1200.2, name: '商品02'},
{id:4, price: 10.2, name: '商品03'},
{id:5, price: 99.2, name: '商品04'}
]
升序
[
{id:4, price: 10.2, name: '商品03'},
{id:2, price: 44.7, name: '商品01'},
{id:5, price: 99.2, name: '商品04'}
{id:1, price: 100.2, name: '小米手机'},
{id:3, price: 1200.2, name: '商品02'},
]
降序
[
{id:3, price: 1200.2, name: '商品02'},
{id:1, price: 100.2, name: '小米手机'},
{id:5, price: 99.2, name: '商品04'}
{id:2, price: 44.7, name: '商品01'},
{id:4, price: 10.2, name: '商品03'},
]
*/
// 升序
var arr = []
var a = { id: 1, price: 100.2, name: '小米手机' }
var b = { id: 2, price: 44.7, name: '商品01' }
var c = { id: 3, price: 1200.2, name: '商品02' }
var d = { id: 4, price: 10.2, name: '商品03' }
var e = { id: 5, price: 99.2, name: '商品04' }
arr.push(a, b, c, d, e)
// console.log(arr)
var compare = function (a, b) {
var val1 = a.price
var val2 = b.price
if (val1 < val2) {
return -1
} else if (val1 > val2) {
return 1
} else {
return 0
}
}
console.log(arr.sort(compare))
// 降序
var arr = []
var a = { id: 1, price: 100.2, name: '小米手机' }
var b = { id: 2, price: 44.7, name: '商品01' }
var c = { id: 3, price: 1200.2, name: '商品02' }
var d = { id: 4, price: 10.2, name: '商品03' }
var e = { id: 5, price: 99.2, name: '商品04' }
arr.push(a, b, c, d, e)
// console.log(arr)
var compare = (function (a, b) {
var val1 = a.price
var val2 = b.price
if (val1 > val2) {
return -1
} else if (val1 < val2) {
return 1
} else {
return 0
}
})
console.log(arr.sort(compare))
</script>
