笔记简要
- 数组操作和字符串操作方法
- Math的方法
- 对象类型的数据使用
- JSON 使用
字符串方法
-
查找类方法:
-
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。 arr.find(callback[, thisArg])
-
charAt(‘ ’)、通过下标，获取这个字符串的对应下标的字符
-
indexOf(‘ ’ ，n)、通过字符，从左往右获取该字符的索引，以第一个遇到为准。第二个参数n 表示起始下标
-
lastIndexOf(‘ ’ ，n) 通过字符，从右往左获取该字符的索引，以第一个遇到为准。第二个参数n 表示起始下标
-
-
let str = 'KatrinaQuanCha' console.log(str.charAt(3)); // r console.log(str.indexOf('a')); // 1 console.log(str.lastIndexOf('a')); // 13 //若不存在 console.log(str.indexOf("z")); // -1 console.log(str.indexOf('a', 2)); // 6 console.log(str.lastIndexOf('a', 12)); // 9 -
截取类方法：
-
slice(start , end) 起点和终点的位置，包头不包尾，若只写一个参数就默认是起始位置，直到字符串结束
-
substr(start ,length)、起始位置、截取的长度
-
substring(start,end) 参数是下标，小的为起始位置，大的为结束位置
-
let str = 'KatrinaQuanCha' console.log(str.slice(3)); // rinaQuanCha console.log(str.slice(3,5)); //ri 第5个没有包进去 console.log(str.substr(3)); // rinaQuanCha console.log(str.substr(3,5)); // rinaQ console.log(str.substr(13,10)); // 超过边界，只取最后一个 a， console.log(str.substr(14,10)); // 返回一个空 console.log(str.substring(2,6)); // trin 不包含6 console.log(str.substring(6,2)); // trin 不包含6 console.log(str.substring(2,2)); // 返回空
-
-
其他常用方法：
-
split(‘ ’) 分割字符串，返回一组分割后的数组。
-
let str = "KatrinaQuanCha"; //存入某個字符作爲分割點 let arr = str.split("a"); console.log(arr); /* (5) ["K", "trin", "Qu", "nCh", ""] */ //若不传入 参数就是 默认分割每个字符 let arr1 = str.split(""); console.log(arr1); // ["K", "a", "t", "r", "i", "n", "a", "Q", "u", "a", "n", "C", "h", "a"] //使用场景 /** 前后端交互时候，后端传过来一条字符串数据 我们需要利用这个方法对字符串进行切割 */ let data = "ada;ruby;cindy"; let dataArr = data.split(";"); console.log(dataArr); // (3) ["ada", "ruby", "cindy"]
-
-
toLowerCase()、toUpperCase() 改变字符串的大小写
-
concat() 链接字符串，返回一个新字符串
-
let str = "KatrinaQuanCha"; let str1 = "Ellen"; let newstr = str.concat(str1); console.log(newstr); // KatrinaQuanChaEllen // concat 里面还能传递多个字符串 // 由于他是返回新的字符串，所以他不会印象到 str 和 str1 的值
-
-
charCodeAt()、获取字符再unicode 里面的编码
-
fromCharCode() 将 unicode 编码转成一个字符串
-
-
数字方法：toFixed(n) 保留小数的尾数
数组方法
-
获取数组的长度：array.length
-
添加和删除：push()、pop()、unshift()、shift()
- 这类方法会改变原数组的值
let arr = [1,'b',{key:"gold"},function(){alert(123)}]; //添加 //后面添加,参数可以多个 arr.push("abc",123); // (6) [1, "b", {…}, ƒ, "abc", 123] //前面添加,参数可以多个 arr.unshift("efg",456); //8) ["efg", 456, 1, "b", {…}, ƒ, "abc", 123] //后面删除,没有参数。有返回值,返回值是被删除数 let n = arr.pop(); console.log(n); //123 // (7) ["efg", 456, 1, "b", {…}, ƒ, "abc"] //前面删除,没有参数。有返回值,返回值是被删除数 let x = arr.shift(); console.log(x); //efg //(6) [456, 1, "b", {…}, ƒ, "abc"] console.log(arr) -
数组万金油方法：splice(start[，num，item1，item2...])
-
替换数组元素
-
数组指定位置删除
-
数组指定位置添加
let arr = [1, 2, 3, 4, 5]; /* splice(start[，length，item1，item2...]) start : 操作数组的起始位置 length : 操作数组的长度 item1，item2... : 添加的参数 */ //1.删除 arr.splice(2); // (2) [1, 2] //从下标第二个开始删除 length 没有给参数默认是到数组的结尾 arr.splice(); //5) [1, 2, 3, 4, 5] //不给任何参数,原数组不改变 arr.splice(-1); //(4) [1, 2, 3, 4] 若给负数就从后面开始删除 arr.splice(-10); //[] 由于整体数组没有10长度,所以删除了全部的数据 // + length arr.splice(2,2); //(3) [1, 2, 5] //从3 开始删除，删除两个长度的数据 arr.splice(-1,2); //4) [1, 2, 3, 4] // 负数从后面开始删除,但是5 后面已经没有数据，所以输出还是 [1, 2, 3, 4] arr.splice(3, "abc"); //(5) [1, 2, 3, 4, 5] //长度如果是一个非number类型,他默认转换成0 就是不操作任何数据,原数据返回 arr.splice(3, -1); //(5) [1, 2, 3, 4, 5] //长度如果是一个负数,他默认转换成0 就是不操作任何数据,原数据返回 //2.添加 //后面添加 arr.splice(arr.length,0,6,7); //7) [1, 2, 3, 4, 5, 6, 7]; //前面添加 arr.splice(0,0,6,7); // (7) [6, 7, 1, 2, 3, 4, 5] //特定位置添加 arr.splice(3, 0, 6, 7); // (7) [1, 2, 3, 6, 7, 4, 5] //关键：是长度是0,不执行删除操作，就往原数组添加 //3. 替换 //原理,一边删除,一边添加 arr.splice(2, 2, 6, 7); // (5) [1, 2, 6, 7, 5] //返回值 let temp = arr.splice(2, 2, 6, 7); console.log(temp); //返回值是被删除的数据组成的数组 console.log(arr);
-
-
其他常用方法：
-
concat(array1，array2，.....) 链接数组，参数是数组
-
join('-')、将数组变成字符串，参数是连接符
-
reverse()、将数组顺序反转
let arr = [1,2,3,4,5]; let arr2 = [6,7,8]; //反转 reverse arr.reverse(); //(5) [5, 4, 3, 2, 1] //join 变字符串 let temp = arr.join(""); //12345 //concat 连接数据 let arr3 = arr.concat(arr2); // [1, 2, 3, 4, 5] // [6, 7, 8] //[1, 2, 3, 4, 5, 6, 7, 8] console.log(arr); console.log(arr2); console.log(arr3);
-
-
数组排序：
-
sort() 字典序排序
-
队列排序
-
自定义规则排序
- 排序如果不是纯数字，而是一些字符串
- 建立一个对象，让字符串和数字建立键值对的关系
-
随机排序 - 随机数
//*** sort() 字典序排序 let arr = [0,-2,8,34,13,3,7,9]; //从小到大 arr.sort(function (n1,n2) { //n1>n2 返回1 交换位置 //n2>n1 返回-1 不换位置 return n1-n2; }) // 8) [-2, 0, 3, 7, 8, 9, 13, 34] //从大到小 arr.sort(function (n1,n2) { //n1>n2 返回1 交换位置 //n2>n1 返回-1 不换位置 return n2-n1; }) //8) [34, 13, 9, 8, 7, 3, 0, -2] // 不传函数 arr.sort() // [-2, 0, 13, 3, 34, 7, 8, 9] //按照首字母的字典码排列 console.log(arr); //*** 自定义规则排序 let arr = ["一","九","七","五","六"]; let obj = { "一": 1, "九": 9, "七": 7, "五": 5, "六": 6 } arr.sort(function (n1,n2) { //n1 n2 就是obj 里面的key 值 "一","九","七","五","六" // 根据对象的获取属性值的方法，让n1 n2 比较 return obj[n1] - obj[n2] }) //["一", "五", "六", "七", "九"] console.log(arr) // *** 随机排序 let arr = [0, -2, 8, 34, 13, 3, 7, 9]; let btn = document.querySelector('button'); let p = document.querySelector('p'); p.innerHTML = arr; btn.onclick = function () { arr.sort(function () { // 利用数学随机数 在 -0.5 ~ 0.5 之间随机取值 return Math.random() - 0.5; }) p.innerHTML = arr; }
-
-
ECMAScript 5.1 数组新增方法
-
forEach() 循环数组，也可以循环元素/节点。
-
filter()
-
map()
-
reduce()
- 参数：
- 回调函数，四个参数， 初始值/开始计算后就是累计的值 ，数组里面数字，下标，原数组
- [初始值]初始值是可选的，如果没有就是默认数组第一个数字
- 返回值是相加后的值
- 参数：
-
every()
- 返回一个布尔值
- 若数组 里面每个元素都满足条件返回true，否则false
-
some()
- 返回一个布尔值
- 若数组 里面某个元素满足条件返回true，否则false
// ** forEach() let arr = ['a','b','c','d','e'] //传入一个函数，函数第一个参数是每个元素 //第二个参数是每个元素的下标 arr.forEach(function (item,index) { console.log(item); console.log(index); }) // 利用他dom元素可以循环，利用他可以给每个dom 元素添加事件 //** filter()过滤方法 // 场景：商品过滤，商品筛选 //场景：后端返回的数据太多，可以利用这个进行过滤 let arr2 = arr.filter((item) => { return item == "b" ? false : true; }); console.log(arr2); //** map // //对每个元素进行循环操作，并且根据操作，返回一个修改后的数组， //不会改变原来的数组 let arr2 = arr.map((item) => { return item + "Ellen" }); console.log(arr2); // ["aEllen", "bEllen", "cEllen", "dEllen", "eEllen"] //** reduce //累加操作 let arr1 = [1, 2, 3, 4, 5, 6]; let r = arr1.reduce(function (pre, now, index, arr) { console.log(pre, now, index, arr); return pre + now; }, 100); console.log(r); // 100 1 0 (6) [1, 2, 3, 4, 5, 6] // 101 2 1 (6) [1, 2, 3, 4, 5, 6] // 103 3 2 (6) [1, 2, 3, 4, 5, 6] // 106 4 3 (6) [1, 2, 3, 4, 5, 6] // 110 5 4 (6) [1, 2, 3, 4, 5, 6] // 115 6 5 (6) [1, 2, 3, 4, 5, 6] // 121 //** every let arr1 = [1, 2, 3, 4, 5, 6]; let r= arr1.every(function (item,index) { // return item>5; //false return item < 7; //true }) console.log(r); //** some let arr1 = [1, 2, 3, 4, 5, 6]; let r = arr1.some(function (item, index) { //return item>5; //true return item > 7; //false }); console.log(r);
-
-
总结：
- 不改变原数组的方法：join()、concat()、filter()、map()、reduce()、every()、some()
对象方法
-
keys（obj）返回一个由key组成的数组
-
values（obj）返回一个由value组成的数组
-
Delete obj.属性名 删除整个键值对
-
for in 循环
-
Call 改变this指向
foo.call(obj,"张三",20); -
apply 改变this指向
foo.apply(obj,["张三",20]); -
Bind 改变this指向
foo.bind(obj)("张三",20);obj = { name: "lili", age: 12, sex: "felman", job: "student", }; // ** keys(obj); values(obj) let ar = Object.keys(obj); let ar1 = Object.values(obj); console.log(ar, ar1); //(4) ["name", "age", "sex", "job"] (4) ["lili", 12, "felman", "student"] //** for in 循环 for (let n in obj) { console.log(n); console.log(obj[n]); } // name // lili // age // 12 // sex // felman // job // student //** Delete delete obj.job; console.log(obj); // {name: "lili", age: 12, sex: "felman"}
json方法
-
json 是什么
-
Json.parse()、 将json转换成对象
-
Json.stringify() 将对象转换成json
// 字符串 var json = '{"age":"18","name":"lili"}'; console.log(json) console.log(json.name); // 将json 转成 对象格式 var obj = JSON.parse(json); console.log(obj.name); console.log(obj) var obj = { name:'Ellen', age:18, sex:'男' } // 将对象 转成 json数据格式 var json = JSON.stringify(obj); console.log(json)
Math方法
- 取整方法：ceil()、floor()、round()
- 随机数：Math.random()
- 最大值最小值：max()、min()
- 其他：Math.PI、Math.abs()
