专业编程基础技术教程

网站首页 > 基础教程 正文

js这些不得不了解的技巧,你使用过吗

ccvgpt 2024-07-19 12:49:28 基础教程 4 ℃


Array

  • 1.是否为数组判断- isArray
Array.isArray([1, 2, 3]);  
  // true
  Array.isArray({foo: 123}); 
  // false
  Array.isArray("foobar");   
  // false
  Array.isArray(undefined);  
  // false
  • 2.数组创建-of
Array.of(undefined); // [undefined]
  Array.of(7);       // [7] 
  Array.of(1, 2, 3); // [1, 2, 3]

  Array(7);          // [ , , , , , , ]
  Array(1, 2, 3);    // [1, 2, 3]

  # 等效于
  if (!Array.of) {
    Array.of = function() {
      return Array.prototype.slice.call(arguments);
    };
  }
  • 3.数组迭代-entries
var arr = ["a", "b", "c"];
var iter = arr.entries();
var a = [];

// for(var i=0; i< arr.length; i++){   // 实际使用的是这个 
for(var i=0; i< arr.length+1; i++){    // 注意,是length+1,比数组的长度大
    var tem = iter.next();             // 每次迭代时更新next
    console.log(tem.done);             // 这里可以看到更新后的done都是false
    if(tem.done !== true){             // 遍历迭代器结束done才是true
        console.log(tem.value);
        a[i]=tem.value;
    }
}  
console.log(a);#二位数组排序
 function sortArr(arr) {
    var goNext = true;
    var entries = arr.entries();
    while (goNext) {
        var result = entries.next();
        if (result.done !== true) {
            result.value[1].sort((a, b) => a - b);
            goNext = true;
        } else {
            goNext = false;
        }
    }
    return arr;
}

var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]];
sortArr(arr);
  • 4.数组每个元素-every
const isBelowThreshold = (currentValue) => currentValue < 40;

  const array1 = [1, 30, 39, 29, 10, 13];

  console.log(array1.every(isBelowThreshold));
  // expected output: true[12, 54, 18, 130, 44].every(x => x >= 10); // true
  • 5. 数组元素替换-fill
const array1 = [1, 2, 3, 4];

// 从下标2开始,到4结束,用0替换, 不包括终止索引
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]


js这些不得不了解的技巧,你使用过吗

  • 6. 数组展开-flat
var arr1 = [1, 2, [3, 4]];
arr1.flat();  // 默认1
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
  • 7. 数组使用map+flat效果
let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
  • 8. 元素删除-splice
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]


Date

  • 1.返回自 1970 年 1 月 1 日 00:00:00 (UTC) 到当前时间的毫秒数
  Date.now()
  • 2.时间字符串解析
# 推荐,还是手动解析,
 const unixTimeZero = Date.parse('01 Jan 1970 00:00:00 GMT');
 const javaScriptRelease = Date.parse('04 Dec 1995 00:12:00 GMT');

 console.log(unixTimeZero);
 // expected output: 0

 console.log(javaScriptRelease);
 // expected output: 818035920000

  • 3.时区偏差
# 如果本地时区先于协调世界时,则该差值为正值,如果后于协调世界时则为负值
 var x = new Date();
 var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;


Set

  • 1.从[]得到集合set
 # 常用于数组出重
 const set1 = new Set([1, 2, 3, 4, 5]);


  • 2.判断是否包含某一项-has
console.log(set1.has(5));
// expected output: true


  • 3.entries
var mySet = new Set();
  mySet.add("foobar");
  mySet.add(1);
  mySet.add("baz");

  var setIter = mySet.entries();
  console.log(setIter.next().value); // ["foobar", "foobar"]
  console.log(setIter.next().value); // [1, 1]
  console.log(setIter.next().value); // ["baz", "baz"]


  • 4. values
var mySet = new Set();
  mySet.add("foo");
  mySet.add("bar");
  mySet.add("baz");

  var setIter = mySet.values();

  console.log(setIter.next().value); // "foo"
  console.log(setIter.next().value); // "bar"
  console.log(setIter.next().value); // "baz"


String

  • 1.统计字符- charCodeAt
 var count = 0;
  var str = "23ab2232322 k23ji2";
  for(var i = 0 ;i < str.length; i++){
    if(str.charCodeAt(i) === 69){
      count++;
    }
  }
  • 2.校验是否存在匹配-match
# 未找到匹配则为null
  var str = 'For more information, see Chapter 3.4.5.1';
  var re = /see (chapter \d+(\.\d)*)/i;
  var found = str.match(re);

  console.log(found);


  • 3.子字符搜索
 var str = 'To be, or not to be, that is the question.';

  console.log(str.includes('To be'));       // true
  console.log(str.includes('question'));    // true
  console.log(str.includes('nonexistent')); // false
  • 4. 返回所有匹配-matchAll
let regexp = /t(e)(st(\d?))/g;
  let str = 'test1test2';

  let array = [...str.matchAll(regexp)];


  • 5. 截取子字符串
  # 不影响原有的
  const str = 'The quick brown fox jumps over the lazy dog.';

  console.log(str.slice(31));
  // expected output: "the lazy dog."

  console.log(str.slice(-9, -5));
 // expected output: "lazy"

 # substr 将废弃

 # substring
  var anyString = "Mozilla";

  // 输出 "Moz"
  console.log(anyString.substring(0,3));


  • 6.删除字符串两边空白- trim
 const greeting = '   Hello world!   ';

  console.log(greeting);
  // expected output: "   Hello world!   ";

  console.log(greeting.trim());
  // expected output: "Hello world!";


proxy

  • 定制返回值
let products = new Proxy({
  browsers: ['Internet Explorer', 'Netscape']
}, {
  get: function(obj, prop) {
    // 附加一个属性
    if (prop === 'latestBrowser') {
      return obj.browsers[obj.browsers.length - 1];
    }

    // 默认行为是返回属性值
    return obj[prop];
  },
  set: function(obj, prop, value) {
    // 附加属性
    if (prop === 'latestBrowser') {
      obj.browsers.push(value);
      return;
    }

    // 如果不是数组,则进行转换
    if (typeof value === 'string') {
      value = [value];
    }

    // 默认行为是保存属性值
    obj[prop] = value;

    // 表示成功
    return true;
  }
});

console.log(products.browsers); // ['Internet Explorer', 'Netscape']
products.browsers = 'Firefox';  // 如果不小心传入了一个字符串
console.log(products.browsers); // ['Firefox'] <- 也没问题, 得到的依旧是一个数组

products.latestBrowser = 'Chrome';
console.log(products.browsers);      // ['Firefox', 'Chrome']
console.log(products.latestBrowser); // 'Chrome'

Tags:

最近发表
标签列表